[자바스크립트] ES6+ 배열/객체 비구조화

배열과 객체의 비구조화

배열과 객체에서 원소나 속성을 추출하여 변수에 할당하는 비구조화 할당 문법이 있는데, 이 기능을 사용하면 코드를 간결하게 작성할 수 있고, 필요한 값들을 효율적으로 추출할 수 있다.

 

배열의 비구조화

배열의 비구조화는 배열에서 값을 추출하여 변수에 할당하는 것이다. 배열의 각 요소는 순서대로 할당한다.

const numbers = [1, 2, 3, 4, 5];

// 배열의 비구조화 할당
const [first, second, , fourth] = numbers;

console.log(first);  // 1
console.log(second); // 2
console.log(fourth); // 4

 

객체의 비구조화

객체의 비구조화 역시 객체에서 속성을 추출하여 변수에 할당하는 것이다. 변수 이름과 객체의 속성 이름이 일치해야 한다.

const person = {
    name: 'jongseoung',
    age: 25,
    address: {
        city: 'seoul',
        country: 'korea'
    }
};

// 객체의 비구조화 할당
const { name, age, address: { city } } = person;

console.log(name); // 'jongseoung'
console.log(age);  // 25
console.log(city); // 'seoul'

 

기본값 설정

배열이나 객체에서 비구조화 할당 시 기본값을 설정할 수 있다.

// 배열
const numbers = [1, 2];
const [first, second, third = 3] = numbers;

console.log(first);  // 1
console.log(second); // 2
console.log(third);  // 3 (numbers 배열의 세 번째 요소는 없으므로 기본값인 3이 할당됨)


// 객체
const person = {
    name: 'jongseoung',
    age: 25
};
const { name, age, job = 'Developer' } = person;

console.log(name); // 'jongseoung'
console.log(age);  // 25
console.log(job);  // 'Developer' (person 객체에 job 속성이 없으므로 기본값인 'Developer'가 할당됨)

 

잔여 연산자

배열이나 객체에서 비구조화 할당 시 잔여 연산자를 사용하여 남은 요소들을 새로운 배열이나 객체에 할당할 수 있다.

// 배열
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5]


// 객체
const person = {
    name: 'jongseoung',
    age: 25,
    city: 'seoul',
    country: 'kor'
};
const { name, age, ...address } = person;

console.log(name);    // 'jongseoung'
console.log(age);     // 25
console.log(address); // { city: 'seoul', country: 'kor' }