destruct assignment - 풀스택개발 EastFlag

배열 해체 할당

배열 해체 할당은 오른쪽의 배열을 분해하여 왼쪽 변수로 할당하는 문법입니다.

Q: a, b, c 의 출력 결과는 무엇인가? 그 이유는 무엇인가?

// 배열 해체 할당: a, b, c 의 출력 결과는 무엇인가? 그 이유는 무엇인가?
const [a, b, c] = [10, 20];
console.log(a, b, c);

// 배열 해체 할당: a, b, c 의 출력 결과는 무엇인가? 그 이유는 무엇인가?

const [a, b, c] = [10, 20];

console.log(a, b, c);

배열 해체 할당은 순서대로 할당됩니다. 그러므로 a 는 10, b는 20이 할당되고 c는 할당될 것이 없기 때문에 undefined 가 됩니다.

Q: 만일 c에 할당될 값이 없을 경우 30이 할당 되도록 하시오. 그리고 그 문법을 무엇이라고 하는가?

const [a, b, c = 30] = [10, 20];
console.log(a, b, c);

1 2	const [a, b, c = 30] = [10, 20]; console.log(a, b, c);

위와 같이 하면 c가 undefined 일 경우는 30이 할당됩니다.. 이것은 es6에 새로 추가된 default parameter 문법이라고 합니다.

Q: 아래의 출력 결과는 무엇인가? 그리고 이 이유는?

const [b, a, ...c] = [10, 20, 30, 40, 50];
console.log(a, b, c);

1 2	const [b, a, ...c] = [10, 20, 30, 40, 50]; console.log(a, b, c);

배열 해체 할당은 순서대로 할당되기 때문에 b가 앞에 오면 10을 받고 a는 20을 받게 됩니다.. 그리고, …c는 나머지 연산자로서 세번째 이후로 오는 모든 파라메터는 c가 받는다. 따라서 c는 타입이 배열이 되므로, c는 [30, 40, 50] 이 됩니다.

객체 해체 할당

객체 해체 할당은 오른쪽에 객체가 오고 왼쪽에 변수가 오는데, 오른쪽 객체와 동일한 키 값을 왼쪽에 갖고 있어야 할당이 됩니다.

Q: 아래의 출력 결과는 무엇인가?

const { d, e, f } = { d: 10, e: 20 };
console.log(d, e, f);

1 2	const { d, e, f } = { d: 10, e: 20 }; console.log(d, e, f);

a는 오른쪽 객체에 a 키에 해당하는 10이 할당되고, b는 오른쪽 객체의 20에 해당되는 20이 할당되고, f는 오른쪽에 키가 없으므로 undefined가 할당됩니다.

const { d, e, f = 30 } = { d: 10, e: 20 };
console.log(d, e, f);

1 2	const { d, e, f = 30 } = { d: 10, e: 20 }; console.log(d, e, f);

배열과 마찬가지로 default parameter 문법을 사용하여 기본값을 설정할 수 있습니다.

Q: d, e, f 의 출력 결과는 무엇인가? 그 이유는 무엇인가?

const { e, d, ...f } = { d: 10, e: 20, f: 30, g: 40, h: 50 };
console.log(d, e, f);

1 2	const { e, d, ...f } = { d: 10, e: 20, f: 30, g: 40, h: 50 }; console.log(d, e, f);

d, e 가 자리를 바꾸어도 배열 해체 할당 처럼 순서대로 할당되는 것이 아니라 동일한 키값을 갖고 할당되므로 여전히 10, 20이 할당이 됩니다. …f는 앞에와 마찬가지로 나머지 연산자이며 객체 타입이 되며 d, e를 제외한 모든 키를 f가 모두 받게 됩니다. 따라서 f는 객체이며 { f: 30, g: 40, h: 50 } 이 됩니다.

CodePen

See the Pen es6 – destruct assignment example by LeeDongKee (@eastflag) on CodePen.default