배열/객체 구조 분해 할당, 안전하게 쓰는 팁: 기본값과 나머지 매개변수 활용
Destructuring Assignment는 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 쉽게 담을 수 있도록 해주는 문법이에요. 코드를 훨씬 간결하고 가독성 좋게 만들어주죠! 하지만 몇 가지 주의해야 할 점들이 있답니다.
가장 흔하게 발생하는 문제 중 하나예요. 비구조화 하려는 대상 객체나 배열이 null 또는 undefined일 경우, 해당 값에서 속성을 읽어오려고 하면서 에러가 발생해요.
에러 메시지 예시
TypeError: Cannot destructure property 'name' of 'undefined' or 'null'.
// 문제 상황
const user = null;
try {
const { name, age } = user; // 여기서 에러 발생
console.log(name, age);
} catch (e) {
console.error(e.message); // 출력: Cannot destructure property 'name' of 'null'.
}
비구조화 할당 시 우변에 기본값을 지정해 주거나, Nullish Coalescing Operator (??)를 사용하여 대상이 null 또는 undefined일 때 빈 객체 {}를 할당하도록 할 수 있어요.
// 해결 1: Nullish Coalescing Operator (??)를 사용하여 기본값 설정
const userA = null;
const { name: nameA, age: ageA } = userA ?? {}; // userA가 null/undefined이면 {}를 사용
console.log(`이름: ${nameA}, 나이: ${ageA}`); // 출력: 이름: undefined, 나이: undefined
// 해결 2: 변수별로 기본값을 지정
const userB = null;
const { name: nameB = '알 수 없음', age: ageB = 0 } = userB ?? {};
console.log(`이름: ${nameB}, 나이: ${ageB}`); // 출력: 이름: 알 수 없음, 나이: 0
이미 선언된 변수에 객체 비구조화 할당을 사용하여 값을 재할당할 때, 괄호 ()로 감싸주지 않으면 자바스크립트는 이를 코드 블록 {}으로 해석해서 구문 오류가 발생할 수 있어요.
// 문제 상황
let x = 10, y = 20;
const obj = { x: 1, y: 2 };
// { ... }를 코드 블록으로 해석하여 에러 발생 (SyntaxError)
try {
{ x, y } = obj;
} catch (e) {
console.error(e.message); // 출력: Invalid left-hand side in assignment
}
변수 선언(const, let, var) 없이 이미 선언된 변수에 객체 비구조화 할당을 할 때는 할당문 전체를 괄호 ()로 감싸 자바스크립트에게 이것이 코드 블록이 아닌 할당문임을 알려줘야 해요.
// 해결: 괄호로 감싸기
let x = 10, y = 20;
const obj = { x: 1, y: 2 };
({ x, y } = obj); // 괄호로 감싸서 할당문임을 명확히 함
console.log(`x: ${x}, y: ${y}`); // 출력: x: 1, y: 2
객체의 메서드(함수)를 비구조화하여 별도의 변수에 할당하면, 그 메서드 내부의 this 값이 원래의 객체가 아닌 전역 객체(브라우저의 경우 window)를 가리키게 되어 예상치 못한 동작을 할 수 있어요.
// 문제 상황
const counter = {
count: 0,
increase() {
this.count++;
console.log(this.count);
}
};
const { increase } = counter;
// 'increase'를 호출할 때, this가 counter 객체가 아님!
// (엄격 모드에서는 TypeError 또는 undefined.count++ 시 에러)
// 브라우저 환경에서 엄격 모드가 아니면 this.count가 전역 변수를 건드릴 수 있음.
increase(); // 예상치 못한 this 바인딩
원본 객체를 통해 메서드 호출 (가장 확실한 방법)
// 해결 1: 원본 객체를 통해 호출
counter.increase(); // this는 'counter'를 정확히 가리킵니다.
bind()를 사용하여 this를 고정
// 해결 2: bind()를 사용하여 this 고정
const { increase } = counter;
const boundIncrease = increase.bind(counter); // counter 객체로 this 고정
boundIncrease(); // 이제 this는 counter를 가리킵니다.
Destructuring이 제공하는 유용한 기능과 이를 활용하는 팁들을 알아볼게요.
객체 비구조화 시, 객체의 속성 이름과 다른 이름의 변수를 사용하고 싶을 때가 있죠. 이럴 땐 콜론 :을 사용해서 변수 이름을 바꿔 줄 수 있어요.
const person = {
firstName: '철수',
lastName: '김'
};
// 'firstName'을 'fName'으로, 'lastName'을 'lName'으로 변경
const { firstName: fName, lastName: lName } = person;
console.log(fName); // 출력: 철수
console.log(lName); // 출력: 김
// 대안: 기존 방식 (더 길고 반복적)
// const fName = person.firstName;
// const lName = person.lastName;
비구조화 하려는 속성이 undefined일 경우에 대비하여 기본값을 설정해 줄 수 있어요.
const item = { id: 101, price: 500 }; // name 속성 없음
// price는 객체 값 사용, name은 undefined이므로 기본값 사용
const { id, price, name = '상품명 없음', count = 1 } = item;
console.log(id); // 출력: 101
console.log(price); // 출력: 500
console.log(name); // 출력: 상품명 없음 (기본값 적용)
console.log(count); // 출력: 1 (기본값 적용)
배열이나 객체의 일부만 추출하고, 나머지는 새로운 배열이나 객체로 묶고 싶을 때 Rest Parameter (...)를 사용할 수 있어요.
const colors = ['빨강', '주황', '노랑', '초록', '파랑'];
const [mainColor, secondaryColor, ...otherColors] = colors;
console.log(mainColor); // 출력: 빨강
console.log(secondaryColor); // 출력: 주황
console.log(otherColors); // 출력: [ '노랑', '초록', '파랑' ]
const settings = {
theme: 'dark',
fontSize: 14,
language: 'ko',
timeout: 300
};
const { theme, fontSize, ...advancedSettings } = settings;
console.log(theme); // 출력: dark
console.log(fontSize); // 출력: 14
console.log(advancedSettings); // 출력: { language: 'ko', timeout: 300 }
