배열 destructuring

ES5의 배열 destructuring

ES5에서 배열의 각 요소를 배열로부터 destructuring하여 변수에 할당하기 위해서는 하나하나 변수를 선언하고 arr[i]로 할당해줘야 했다.

var arr = ['banana', 'apple', 'grape'];

var a = arr[0]; // 변수 a를 선언하고 arr[0]을 할당
var b = arr[1]; // 변수 b를 선언하고 arr[1]을 할당
var c = arr[2]; // 변수 c를 선언하고 arr[2]을 할당

console.log(a, b, c); // banana apple grape

ES6의 배열 destructuring

ES6의 배열 destructuring은 배열의 index를 기준으로 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다.

const arr = ['banana', 'apple', 'grape'];

const [a, b, c] = arr; // 변수 리스트에 할당

console.log(a, b, c); // banana apple grape

• 구조 분해 할당을 이용하면 ES5처럼 index를 이용해 배열에 접근하지 않고도 변수에 할당하여 사용할 수 있다.

---

배열 destructuring의 특징

1. 배열 destructuring을 위해서는 할당 연산자(=) 왼쪽에 배열 형태의 변수 리스트가 필요하다.

let [x, y, z] = [1, 2, 3];
// [변수 리스트] = [배열]

---

2. 왼쪽의 변수 리스트와 오른쪽의 배열은 배열의 index를 기준으로 할당된다.

let [x, y, z] = [1, 2, 3];

console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

---

3. 변수 선언과 할당을 분리해서 값을 할당할 수 있다.

let x, y, z;       // 선언 먼저

[x, y] = [1, 2];   // 할당 나중에
console.log(x, y); // 1 2

---

4. 변수에 값을 할당하지 않으면 undefined를 반환한다.

[x, y] = [1];
console.log(x, y); // 1 undefined

---

5. 쉼표를 사용하여 필요하지 않은 배열 요소를 무시할 수 있다.

// 배열의 마지막 요소가 필요하지 않을 때
[x, y] = [1, 2, 3]; 
console.log(x, y); // 1 2

// 배열의 중간에 있는 요소가 필요하지 않을 때
[x, , z] = [1, 2, 3]; 
console.log(x, z); // 1 3

---

6. 변수에 기본값을 설정할 수 있다.

변수에 기본값을 할당하면, 분해한 값이 undefined일 때 기본값을 사용한다.

[x, y, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3

[x, y = 10, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3

---

7. 변수에 spread 문법을 사용할 수 있다.

spread 문법을 이용해 분해하고 남은 배열의 나머지를 하나의 변수에 할당할 수 있다.

[x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [2, 3]

---

8. 구조 분해 할당을 이용해 두 변수의 값을 교환할 수 있다.

let a = 1;
let b = 10;

[a, b] = [b, a]; // 변수 a에 b의 값을 할당하고, 변수 b에는 a의 값을 할당한다.
console.log(a); // 10
console.log(b); // 1

---

객체 destructuring

ES5의 객체 destructuring

ES5에서 객체의 각 프로퍼티를 객체로부터 destructuring하여 변수에 할당하기 위해서는 하나하나 변수를 선언하고 프로퍼티 key를 이용해 value를 할당해줘야 했다.

var obj = {
  firstName: 'Jieun', 
  lastName: 'GG'
};

var firstName = obj.firstName; // 변수 firstName을 선언하고 obj의 firstName의 값을 할당
var lastName  = obj.lastName; // 변수 lastName을 선언하고 obj의 lastName의 값을 할당

console.log(firstName, lastName); // Jieun GG

ES6의 객체 destructuring

ES6의 객체 destructuring은 객체의 프로퍼티 key를 기준으로 객체의 각 프로퍼티를 객체로부터 추출하여 변수 리스트에 할당한다.

const obj = {
  firstName: 'Jieun', 
  lastName: 'GG'
};

const {lastName, firstName} = obj; // 변수 리스트에 할당

console.log(firstName, lastName); // Jieun GG

• 프로퍼티 key를 기준으로 destructuring 할당이 이루어지므로 순서는 중요하지 않다.

---

객체 destructuring의 특징

1. 객체 destructuring을 위해서는 할당 연산자(=) 왼쪽에 객체 형태의 변수 리스트가 필요하다.

const {prop1, prop2} = {prop1: 'abc', prop2: 'def'};
//      {변수 리스트}   =   {객체}
console.log(prop1, prop2); // abc def

---

2. 객체 프로퍼티를 프로퍼티 key와 다른 이름의 변수에 저장할 수 있다.

왼쪽의 변수 리스트에 콜론(:)을 사용해, 프로퍼티 key와 다른 이름의 변수에 프로퍼티를 할당할 수 있다.

const obj = {
  firstName: 'Jieun', 
  lastName: 'GG'
};

const {firstName: name, lastName: surname} = obj;
//    {객체 프로퍼티: 변수 이름}
console.log(name, surname); // Jieun GG

---

3. 변수 선언과 할당을 분리해서 값을 할당할 수 있다.

틀린 예)

let firstName, lastName;

{firstName, lastName} = {firstName: 'Jieun', lastName: 'GG'};
// ❗️Uncaught SyntaxError: Unexpected token '='

에러가 발생하는 이유

JavaScript가 구조 분해 할당을 위해 사용한 중괄호{}를 코드 블록{}으로 인식하기 때문에 에러가 발생한 것이다.

따라서 객체 destructuring을 하려면 할당문을 소괄호()로 감싸 JavaScript가 중괄호{}를 코드 블록이 아닌 표현식으로 해석하게 해야 한다.

옳은 예)

let firstName, lastName;

({firstName, lastName} = {firstName: 'Jieun', lastName: 'GG'});

console.log(firstName, lastName); // Jieun GG

---

4. 변수에 값을 할당하지 않으면 undefined를 반환한다.

({firstName, lastName, isStudent} = {firstName: 'Jieun', lastName: 'GG'});
console.log(firstName, lastName, isStudent); // Jieun GG undefined

---

5. 변수에 기본값을 설정할 수 있다.

변수에 기본값을 할당하면, 분해한 프로퍼티가 없을 때, 즉 undefined일 때 기본값을 사용한다.

const obj = {
  firstName: 'Jieun', 
  lastName: 'GG'
  // isStudent라는 프로퍼티는 없다.
};

const {lastName, firstName, isStudent = true} = obj;

console.log(firstName, lastName, isStudent); // Jieun GG true

---

6. 변수에 spread 문법을 사용할 수 있다.

spread 문법을 이용해 분해하고 남은 객체의 나머지를 하나의 변수에 할당할 수 있다.

const obj = {
  firstName: 'Jieun', 
  lastName: 'GG', 
  isStudent: true
};

const {isStudent, ...name} = obj;

console.log(isStudent, name);
// true {firstName: 'Jieun', lastName: 'GG'}

❔ 학습 후 궁금한 점

• 중첩 구조 분해란 무엇인지?

이 글은 아래 링크를 참고하여 작성한 글입니다.
https://poiemaweb.com/es6-destructuring
https://ko.javascript.info/destructuring-assignment