[JS] spread/rest, 구조분해할당

spread (...)

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

 

배열에서 spread 사용(복사, 합치기)

// 배열 복사

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
// [1, 2, 3]

// 이미 존재하는 배열을 포함한 새로운 배열 생성

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

 

객체에서 spread 사용(복사, 합치기)

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

// 객체 복사
var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

// 이미 존재하는 객체들을 합치는데 키가 동시에 존재할 경우, 나중 값을 저장
var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

 

 

rest (...)

: 함수의 매개변수(parameter)를 배열의 형태로 받아서 사용(매개변수를 배열로 바로 사용 가능)

매개변수 개수가 가변적일 때 유용함.

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

myFun("one", "two", "three", "four", "five", "six")

// a, "one"
// b, "two"
// manyMoreArgs, ["three", "four", "five", "six"] <-- 배열

 

 

구조 분해 할당(비구조화할당)

: 객체나 배열의 속성을 해체한 후, 그 값을 변수에 새로 할당하는 과정

객체 및 배열 리터럴 표현식을 할당문의 좌변에서 사용하며, 원래 변수에서 값을 분해하여 할당

 

배열 구조 분해 할당

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

변수 값 교환

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

나머지 구문(rest. 나머지 매개변수) 이용해 남은 부분을 하나의 변수에 할당

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

 

객체 구조 분해 할당

// 키와 변수 이름이 같아야함

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

선언 없는 할당

// ()로 감싸면 var로 선언한 것과 같음
// () 앞에는 ;(세미콜론)이 있어야 함
// 없으면 앞줄과 연결되어 함수 실행에 이용될 수 있음

({a, b} = {a: 1, b: 2});

새로운 변수 이름으로 할당

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

기본값(해체된 값이 undefined인 경우 대신 사용)

var {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

 

 

 

 

Reference

전개구문 spread syntax mdn

나머지매개변수 rest parameters mdn

구조분해할당 mdn

 

2022.11.08

코스 S1U10 중