구조분해할당

JUNHO YEOM·2022년 8월 2일
0

Javascript

목록 보기
5/9

단순한 반복작업은 싫다

let arr = ['짱구', '훈이', '맹구', '철수', '유리']
// 배열에 떡잎방범대 멤버들이 들어와 있다. 값들을 하나씩 변수로 선언하려면 어떻게 해야할까

구조분해할당을 이용하자

let [a, b, c, d, e] = arr;

console.log(a) // 짱구
console.log(b) // 훈이
         ...

다음과 같이 구조분해 할당을 이용하면 쉽고 빠르게 변수를 선언할 수 있다.

구조분해할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게하는 표현식을 말한다.

MDN 문서 : 구조분해 할당


배열의 구조분해

앞선 예제에서 사용한 배열의 구조분해의 다른 사용법을 알아보자

let arr = ['짱구', '훈이', '맹구', '철수', '유리']

쉼표를 이용해서 해당 값 제외하고 선언하기

let [a, , c, d, e] = arr // 훈이빼고 변수에 담기

...이용해서 나머지값 한꺼번에 담기

let [a, b, c, ...d] = arr
console.log(d) // ['철수', '유리']

객체의 구조분해

let obj = {
  member1: '짱구',
  member2: '훈이',
  member3: '맹구',
  member4: '철수',
  member5: '유리'
}

obj 객체에 있는 값들 변수로 선언하기

let {member1, member2, member3, member4, member5} = obj
console.log(member1) // '짱구'
console.log(member2) // '훈이'

...이용해서 나머지값 한번에 담기

let {member1, member2, member3, ...member4} = obj
console.log(member4) // { member4: '철수', member5: '유리' }

Rest parameter 나머지

예시에서 본것같이 ...를 이용해서 남은 값들을 모두 할당 방법을 Rest prameter이라고 한다
Rest parameter와 구조분해를 잘 사용하면 배열과 객체를 더욱 쉽고 효율적으로 다룰 수 있으니 참고하자.

0개의 댓글