본캠프 10일차 -Destructuring Assignment & Rest parameter

오늘은 Destructuring Assignment(구조분해 할당)와 Rest parameter(나머지 매개변수)에 대해 서술해 보려고한다.

 

  Desrtructuring Assignment(구조분해 할당) 

구조 분해 할당은 배열이나 개체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식이다.

이는 배열과 객체 모두 적용할 수 있다.

 

객체 구조분해 할당

let qqq = {a: 123, b: 456};
let { a, b} = qqq;

console.log(a) // 123
console.log(b) // 456

위와같이 key a의 value인 123이 aaa에 할당되고, b의 value인 456이 bbb에 할당된 것을 확인할 수 있다.

여러번 변수선언을 하는 번거로움 없이 구조분해 할당을 통해 두 줄로 할당이 가능하다.

객체 구조분해할당 시 주의할 점은 할당하려는 변수명과 키값이 일치해야지만 할당이 가능하다. 

 

배열 구조분해 할당

let qqq = ["aaa", "bbb", "ccc"};
let [test1, test2, test3] = qqq

console.log(test1) // aaa
console.log(test2) // bbb
console.log(test3) // ccc

배열의 구조분해 할당도 객체와 같은방식으로 표현할 수 있지만, 객체와는 다른점이 있다.

객체의 경우 객체안의 key값을 변수로 사용하여 구조분해 할당을 진행해야하지만 배열의 경우에는 

배열안의 변수명과 상관없이 배열의 index로 구조분해할당이 이루어진다. 예를들어 let [ test2, test1, test3]으로 구조분해 할당 을 적용했다면, aaa의 값은 test2에 할당되게 된다.

 

  Rest parameter 

Rest parameter는 나머지 매개변수라고 불리며, 이름앞에 ... 을 붙여 정의한 매개변수를 의미한다. 이는 구조분해 할당에도 적용될 수 있다.

const person = { name: "짱구", age: "5", school: "떡잎유치원", money: "500", hobby: "말썽"}

 

위와같은 person이란 변수에 객체가 담겨있다고 가정해보자. 

person이란 객체에 hobby 와 money를 지우고싶다면 delete method를 사용할 수 있지만, 이는 원본을 훼손시키기 때문에

옳지 않다. Rest parameter를 사용하면 아래와 같이 보여진다.

const { money, hobby, ...rest} = person;

console.log(...rest); // money와 hobby를 제외한 모든 값

이렇게 rest parameter를 사용하면, delete method를 사용하지않고도 객체에서 원하는 값을 얻어낼 수 있다.