자바스크립트는 ES6(ES2015)부터 Destructuring(비구조화 할당)이라는 기능을 도입했습니다. 이는 배열과 객체의 값을 쉽게 추출하여 변수에 할당하는 유용한 방법입니다. Destructuring을 사용하면 코드를 간결하게 작성할 수 있고, 변수를 선언하고 초기화하는 과정을 단순화할 수 있습니다.

Destructuring의 기본 개념

Destructuring은 말 그대로 “비구조화”라는 의미를 가지고 있습니다. 이는 배열이나 객체의 값을 분해하여 개별적인 변수에 할당하는 것을 의미합니다. 이러한 작업은 대괄호([])를 사용하여 배열에서 할당하고 중괄호({})를 사용하여 객체에서 할당합니다.

배열에서의 Destructuring

자바스크립트에서 배열의 Destructuring은 다음과 같이 사용할 수 있습니다.

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

const [a, b, c, d, e] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
console.log(e); // 5

위 예제에서는 numbers 배열의 원소를 각각 a, b, c, d, e 변수에 할당하고 출력하는 방법을 보여줍니다.

객체에서의 Destructuring

객체의 Destructuring은 다음과 같이 사용할 수 있습니다.

const person = { name: 'John', age: 30, city: 'New York' };

const { name, age, city } = person;

console.log(name); // 'John'
console.log(age); // 30
console.log(city); // 'New York'

객체의 경우에는 해당하는 속성의 이름에 따라 변수에 값이 할당됩니다. 변수의 이름과 객체의 속성 이름이 일치해야 한다는 점에 유의해야 합니다.

기본값 설정

Destructuring 할당 시, 해당 값이 존재하지 않으면 기본값을 설정할 수 있습니다.

const numbers = [1, 2];

const [a, b, c = 3] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

위의 예제에서 numbers 배열에는 3번째 원소가 존재하지 않지만, Destructuring 할당 시 기본값으로 3을 설정하여 변수 c에 할당합니다.

마치며

Destructuring은 자바스크립트에서 배열과 객체의 값을 간편하게 추출하여 변수에 할당하는 방법입니다. 이를 통해 코드를 간결하게 작성할 수 있고, 변수의 선언과 초기화를 단순화할 수 있습니다. 이 기능을 잘 활용하여 더 효율적인 코드를 작성해보세요!

#Javascript #비구조화할당