[자바스크립트] 해체 할당

자바스크립트 해체 할당 심층 설명

해체 할당이란?

자바스크립트의 해체 할당(destructuring assignment)은 배열이나 객체의 요소 또는 프로퍼티를 개별 변수에 간편하게 할당하는 문법입니다. 기존의 방식보다 코드를 더욱 간결하고 가독성 있게 만들어줍니다.

배열 해체 할당

• 기본적인 사용:

const [a, b, c] = [1, 2, 3];
// a는 1, b는 2, c는 3이 됩니다.

• 값 건너뛰기:

const [a, , c] = [1, 2, 3];
// a는 1, c는 3이 되고, 2는 무시됩니다.

• 나머지 연산자 사용:

const [a, b, ...rest] = [1, 2, 3, 4, 5];
// a는 1, b는 2, rest는 [3, 4, 5]가 됩니다.

• 변수의 기본값:

const [a = 10, b] = [5];
// a는 5, b는 undefined가 됩니다.

• 중첩 배열 해체:

const [a, [b, c]] = [1, [2, 3]];
// a는 1, b는 2, c는 3이 됩니다.

• 파라미터로 사용:

function f([a, b]) {
  console.log(a, b);
}
f([1, 2]); // 1 2 출력

객체 해체 할당

• 기본적인 사용:

const { x, y } = { x: 10, y: 20 };
// x는 10, y는 20이 됩니다.

• 변수의 기본값:

const { x = 3, y } = { x: 10 };
// x는 10, y는 undefined가 됩니다.

• 조합 프로퍼티명 해체:

const { a: foo, b: bar } = { a: 1, b: 2 };
// foo는 1, bar는 2가 됩니다.

• 중첩 객체 해체:

const { a, b: { x, y } } = { a: 1, b: { x: 2, y: 3 } };
// a는 1, x는 2, y는 3이 됩니다.

• 파라미터로 사용:

function f({ x, y = 5 }) {
  console.log(x, y);
}
f({ x: 1 }); // 1 5 출력

왜 해체 할당을 사용해야 할까요?

• 코드 간결화: 복잡한 객체나 배열에서 필요한 값을 추출하는 코드를 더욱 간결하게 작성할 수 있습니다.
• 가독성 향상: 변수 이름을 직접 지정하여 코드의 의도를 명확하게 표현할 수 있습니다.
• 함수 파라미터: 함수에 객체나 배열을 전달할 때, 필요한 값만 추출하여 사용할 수 있습니다.
• ES6+ 문법: 현대적인 자바스크립트 개발에 필수적인 문법입니다.

주의할 점

• 변수 이름과 프로퍼티 이름이 일치해야 합니다.
• undefined 값 처리: 할당하려는 값이 undefined일 경우, 기본값을 설정하거나 null 체크를 해야 합니다.
• 복잡한 구조: 중첩된 구조에서 해체 할당을 사용할 때는 주의해야 합니다.