모던 JS 토크: 구조 분해 할당

Source: Dev.to

이 글은 원래 bmf-tech.com에 게재되었습니다.
Innovator Japan Engineers’ Blog에서 재인쇄한 내용입니다.

구조 분해 할당이란

구조 분해 할당은 배열이나 객체에서 데이터를 추출해 별도의 변수에 할당하는 표현식입니다. 아래는 실용적인 예시들입니다.

배열 구조 분해

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

let color = [1, 2, 3];
const [red, green, yellow] = color;
console.log(red, green, yellow); // 1 2 3

기본값

const [red = 4, green = 5, yellow = 6] = [1, 2]; // yellow는 undefined
console.log(red, green, yellow); // 1 2 6

객체 구조 분해

({ a, b } = { a: 'foo', b: 'bar' }); // 'foo'를 a에, 'bar'를 b에 할당
console.log(a, b); // foo bar

선언 없이 객체 리터럴 구조 분해를 사용할 때는 주변에 괄호가 필요합니다. {a, b}만 쓰면 블록 문으로 해석되기 때문입니다. 자세한 내용은 MDN 문서를 참고하세요: 구조 분해 할당 - JavaScript | MDN.

일반적인 사용 예 (예: React)

let state = { value: 'foo' };
const { value } = state; // state.value를 변수 `value`에 추출
console.log(value); // foo

직접 객체 리터럴 예시

const { value } = { value: 'foo' };
console.log(value); // foo

기본값

const { foo = 3, bar = 4 } = { foo: 1 }; // `bar`는 undefined
console.log(foo, bar); // 1 4

변수 이름 바꾸기

const { value: value2 } = { value: 'foo' }; // `value`를 추출해 `value2`에 할당
console.log(value2); // foo

결론

우리는 간결한 코드 예시를 통해 JavaScript의 구조 분해 할당을 살펴보았습니다. 구문은 실제로 사용해 보면 직관적이며, 현대 JavaScript 개발에서 널리 활용됩니다.

참고 링크

• MDN - 구조 분해 할당