[JS/Node] 구조 분해 할당

구조 분해 할당

Achievement Goals

• Spread/Rest 문법, 구조 분해 할당을 사용할 수 있다.

Spread 문법

정의iterable 한 모든 것의 (대표적으로 문자열, 배열) 요소를 "펼쳐"주는 문법

용도

배열을 풀어서 인자로 전달하거나,
배열을 풀어서 각각의 요소로 넣을 때 사용

function sum(x, y, z) {
    return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers); // 6

Rest 문법

파라미터를 배열의 형태로 받아서 사용
(파라미터 개수가 가변적일 때 유용)

function sum(...theArgs){
    return theArgs.reduce((previous, current) => {
    return previous + current;
    });
}

sum(1,2,3); // 6

sum(1,2,3,4); // 10

배열에서 사용하기

Spread 문법은 배열에서 강력한 힘을 발휘합니다.

배열 합치기

let parts = ['shoulders', 'kness'];
let lyrics = ['head', ...parts, 'and', 'toes'];

lyrics; // ['head', 'shoulders', 'knees', 'and', 'toes'];

배열 복사

let arr3 = [...arr1, ...arr2]
let arr3 = arr1.slice(0).concat(arr2.slice(0))
// 이 두 line은 같은 의미

let arr1 = [1, 2, 3];
let arr2 = [...arr1];

arr2.push(4) // push 메소드는 배열의 새로운 길이를 반환 = 4

arr1 // [1, 2, 3] <= arr 은 영향을 받지 않고 남아 있음
arr2 // [1, 2, 3, 4]

immutable : spread 문법은 기존 배열을 변경하지 않음

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2]; // 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr1의 값을 바꾸려면 새롭게 할당해야 한다.

arr1; // [0, 1, 2, 3, 4, 5];

arr

arr1의 값을 바꾸려면 새롭게 할당해야 한다.

객체에서 사용하기

let obj1 = { foo: 'bar', x: 42};
let obj2 = { foo: 'baz', y: 13};

let cloneObj = {...obj1};
let mergedObj = {...obj1, ...obj2};

cloneObj; // { foo: 'bar', x: 42};
mergedObj; // { foo: 'baz', x: 42, y: 13};

함수에서 나머지 파라미터 받아오기

function myFun(a, b, ...manyMoreArgs){
    console.log("a", a);
    console.log("b", b);
    console.log("mayMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");
// a one;
// b two;
// manyMoreArgs ["three", "four", "five", "six"];

Reference

전개 구문

iterable 한 모든 것(문자열 ,배열)의 요소를 "펼쳐"서 넣어주는 문법

let arr = [1, 2, 3, 4]
let value = Math.max(...arr) // 여기서는 spread syntax가 사용되었습니다.
// Math.max(...arr) === Math.max(1, 2, 3, 4)
// Math.max(arr) === NaN

Rest Parameter

남아있는 모든 인자를 담은 배열

따로 매개변수를 빼놓은 경우

남은 매개변수만 배열의 형태로 rest parameter args에 할당합니다.

function func(num1, ...args){
  console.log(args)
}

func(1, 2, 3) // [2, 3]

따로 매개변수를 빼놓지 않은 경우

args는 배열의 형태로 모든 인자를 할당받습니다.

function func(...args){
  console.log(args)
}

func(1, 2, 3) // [1 ,2, 3]