[JavaScript] Destructuring Assignment

1. 구조 분해 할당(Destructuring assignment)

-ES6 문법이다

-배열과 객체를 분해하여 각 값을 변수로 연결한다

-함수에서 많은 매개변수를 처리하거나, 매개변수에 default 값을 설정할 때 사용되기도 한다

-모든 iterable(반복 가능한 것)에 적용 가능하다

-할당 연산자(=)  좌측에는 상응하는 변수 이름이 오고, 우측에는 분해하고자 하는 데이터가 자리한다

 

-배열 활용 예)

  1) const [a, b, c] = [1, 2, 3, 4];  //  a->1, b->2, c->3

    *[1, 2, 3, 4]이 파괴(destructive)되는 것은 아니다. 복사 후 변수에 분해(destructurize) 하는 것임

  2) const [a, , c] = [1, 2, 3, 4];  //  a->1, c->3

  3) const user = {}; [user.name, user.surname] = "Jieun Lee".split(' ');

  4) for (const [key, value] of Object.entries(user)) { ... }

  5) [a, b, c] = [c, a, b];  

  6) const [firstName = 'Cheol su', lastName = 'Kim'] = [ ];  

      *default value 설정에는 할당 연산자(=)을 이용한다

      *기본값에는 value 뿐만 아니라, expression이나 function call이 올 수 있다

 

-객체 활용 예)

const fruits = {

    spring : 'strawberry', 

    summer : 'watermelon',

    fall : 'pear', 

    winter : 'orange',

}

  1) const {fall, spring} = fruits;  //  fall === fruits.fall -> true

      *객체 프로퍼티의 키 이름을 순서에 상관없이 작성한다

  2) const {summer, winter : cold} = fruits;  //  cold === fruits.winter -> true

      *콜론(:)을 이용하여 새로운 변수 이름을 설정할 수 있다

  3) const {fall : autumn = 'apple', summer = 'tomato', allSeasons = 'banana', favorite} = fruits; 

      autumn === fruits.fall;  //  true ('pear', not 'apple')

      summer === fruits.summer; // true ('watermelon', not 'tomato')

      allSeasons;  //  'banana'

      favorite;  //  undefined

      *콜론(:) 과 할당 연산자(=) 을 동시에 사용할 수 있다

 

-함수 매개변수 활용 예)

  1) funtion ( a = 1, b = 2, c = [], d ={} ) {...}

      *반드시 필요한 정보들에 관하여 기본값 설정을 해준다

      *다수의 매개변수는 배열과 같이 순서가 존재한다. 그러므로 쓸 일 없는 매개변수에 대해 undefined를 인자로 넘겨주어야 한다(공백x)

      *매개변수가 ...args인 경우에 전달 받은 인자가 없을 경우엔 빈 배열이 전달된다

  2) funtion ( {a = 1, b = 2, c = [], d ={}} ) {...}

      *많은 매개변수를 관리할 땐 객체를 이용하여 가독성을 높일 수 있다

  3) funtion ( [a, b] ) { a ~ ,b ~ ...}

      *배열을 인자로 받는 경우, 배열의 요소를 각각 변수에 할당하여 바로 사용할 수 있다

 

*선언 키워드(const, let)를 사용하지 않고 기존에 있던 변수에도 분해 할당이 가능한데, 이 경우엔 괄호로 할당문 전체를 감싸서 {.. = ..}가 코드 블록이 아닌 표현식으로 인식하게 만들어줘야 한다

 

-중첩 구조 분해(Nested destructuring)

    ([arr1, [arrN1, arrN2]] = [1, [2 , 3]]);  //   arr1 -> 1, arrN1 -> 2, arrN2 -> 3

    ({obj1 : { objN1, objN2 }, obj2 : [ objN3, objN4 ]}) = {obj1 : {objN1 : 1, objN2 : 2}, obj2 : [3, 4]}

      *보기가 좀 불편한데, 그냥 좌우에 있는 변수와 값의 위치가 서로 같으면 된다

      *의문 : 한 줄의 할당문 상에서 중첩 객체의 프로퍼티 변수와 중첩 객체 내부 프로퍼티 변수를 동시 할당하는 것은 불가능한가?

 

 

2. Spread syntax(...)

- ...[1, 2, 3] -> 1, 2, 3

-iterable의 각 요소들을 하나씩 꺼내어 펼쳐준다(unpacking)

-배열의 전환을 쉽게 해주는 연산자라고 생각하면 쉽다 (for-of를 사용한 것과 동일함)

-주로 배열의 shallow copy 혹은 새로운 배열 생성에서 유용하게 사용된다. const newArr = [...arr];

  *reference copy가 아닌 실제 복사임!

  *유사 배열 객체에는 적용되지 않아 다른 것을 배열로 바꿀 때에는 Array.from(...)을 많이 사용함

-함수에 여러 arguments를 한 번에 전달해야 할 때도 유용하게 사용된다

 

 

3. Rest pattern

-const [var1, var2, ...others] = [1, 2, 3, 4, 5];  //  others -> [3, 4, 5]

-spread의 반대되는 기능을 갖는다. (packing)

-스프레드에선 배열을 풀어주고, 레스트에선 배열로 묶어준다

-문법을 살펴보면 할당 연산자(=)를 기준으로 ... 가 우측에 오면 spread, 좌측에 오면 rest인 것을 알 수 있다(레스트-레프트)

-주로 구조 분해 할당시 나머지 값들을 처리할 때 사용된다

-함수에서도 spread와는 반대로 전달된 여러 arguments를 배열로 담아 나타낸다

  *spread : parameter = ...arguments; 이때 arguments는 배열이다

  *rest : ...parameter = arguments; 이때 parameter는 배열이다