[Javascript] 디스트럭처링 문법(Destructuring Assignment) 파헤치기

디스트럭처링 문법(Destructuring Assignment) 파헤치기

객체에서 값을 가져와 변수에 할당하는 코드 중 처음 보는 방식이 있어 따로 조사 및 정리를 해보았습니다.

궁금증이 생긴 코드는 아래와 같고 조사해 본 결과 디스트럭처링 문법이라고 합니다.

const { day, area } = dayElement.dataset;

 

디스트럭처링(Destructuring) 문법이란?

구조화된 배열이나 객체를 비구조화하여 변수에 할당하는 방식을 의미합니다.

ES6에서 도입된 이 문법은 코드를 간결하고 명확하게 작성하도록 해줍니다.

디스트럭처링의 기본 사용 방법

1. 배열 디스트럭처링 : 배열의 요소를 순서에 따라 개별 변수로 할당합니다.

// 배열 디스트럭처링
const arr = [1, 2, 3];
const [first, second, third] = arr;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

 

2. 객체 디스트럭처링 : 객체 속성들을 개별 변수로 할당합니다.
변수 명과 키가 동일한 경우 그에 맞게 값이 할당됩니다. 객체에 존재하지 않는 키의 경우 변수에 undefined가 할당됩니다.

// 객체 디스트럭처링
const obj = { name: 'Alice', age: 25 };
const { name, age, sex } = obj;

console.log(name); // 'Alice'
console.log(age); // 25
console.log(sex); // undefined

 

디스트럭처링의 다양한 사용 방법

ES의 디스트럭처링 문법은 유연한 활용 방식을 가지고 있으며 아래와 같은 방법으로 응용해서 사용할 수 있습니다.

 

1. 기본값 설정 : 기본값을 설정하여 값이 없는 경우를 대비할 수 있습니다.

//a에 5를 할당, b의 기본값은 20이 된다.
const [a = 10, b = 20] = [5];
console.log(a); // 5
console.log(b); // 20

//x에 50을 할당, y의 기본값은 40이 된다.
const { x = 30, y = 40 } = { x: 50 };
console.log(x); // 50
console.log(y); // 40

 

2. 중첩된 구조의 디스트럭처링

//배열 내 배열도 함께 해체되어 변수에 할당된다.
const nestedArr = [1, [2, 3]];
const [first, [second, third]] = nestedArr;
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

//객체 내 객체도 마찬가지이다.
const nestedObj = { user: { name: 'Bob', age: 30 } };
const { user: { name, age } } = nestedObj;
console.log(name); // 'Bob'
console.log(age); // 30

 

3. 나머지 연산자(Spread) 활용

// 배열에서 나머지 연산자 사용
const arr = [1, 2, 3, 4];
const [first, ...rest] = arr;
console.log(first); // 1
console.log(rest); // [2, 3, 4]

// 객체에서 나머지 연산자 사용
const obj = { a: 1, b: 2, c: 3 };
const { a, ...others } = obj;
console.log(a); // 1
console.log(others); // { b: 2, c: 3 }

 

4. 함수 파라미터에서의 사용

// 배열 디스트럭처링을 사용한 함수. 배열을 자동 해체하여 좌표를 출력합니다.
function printCoordinates([x, y]) {
  console.log(`X: ${x}, Y: ${y}`);
}

printCoordinates([10, 20]); // X: 10, Y: 20


// 객체 디스트럭처링을 사용한 함수
function greet({ name, pronouns, feature }) {
  console.log(`This is ${name}. ${pronouns} is ${feature}.`);
}

greet({ name: 'Tom', pronouns: 'He', feature: 'skinhead' }); // 안녕. 얜 톰인데,

 

 

디스트럭처링 문법의 장점과 단점

장점

• 가독성 향상 : 코드가 간결해지고 어떤 값이 어떤 변수에 할당되는지 명확해집니다.
• 코드의 간소화 : 필요한 값을 쉽게 추출할 수 있게 되어 코드가 아주 간단해집니다.
• 유연성 : 기본값 설정, 이름 변경, 나머지 연산자 활용 등 다양한 문법을 응용해 사용할 수 있습니다.

단점

• 가독성 저하 : 언제나 그렇듯 과도하게 사용할 경우 오히려 코드가 복잡하게 되어버릴 수 있습니다.
• 구조 변경에 취약함 : 참조하는 객체나 배열의 구조가 변경될 경우에 대비해야 합니다. (단점이리고 할 것까진 없군요)
• 난이도 : ES를 처음 배우는 초보자들에게는 익숙지 않은 문법이라 어려울 수 있습니다.
• 사용에 대한 제약 : 객체의 구조를 알기 어려운 경우 예외나 오류가 발생할 수 있습니다.

 

변수에 값을 할당하는 신선한 방식인 디스트럭처링에 대해서 알아봤습니다.

감사합니다!