구조분해할당 (Destructuring assignment)

💡 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게하는 표현식

📌 배열 구조 분해

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

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

• 변수를 대괄호로 감싸고 거기에 배열을 할당한다.
• 순서 대로 각 변수에 할당 배열 요소가 할당 된다.

let users = [‘Tom’, ‘Jemmy’, ‘Lyan’];

let [user1, user2, user3] = users

• 위 코드는 아래 코드와 완전히 동일하다.

let user1 = ‘Tom’;
let user2 = ‘Jemmy’;
let user3 = ‘Lyan’;

📌 str.split() 을 이용한 구조분해할당

let str = ‘Tom-Jemmy-Lyan’;
let [user1, user2, user3] = str.split(‘-‘);

console.log(user1); // Tom
console.log(user2); // Jemmy
console.log(user3); // Lyan

• split() 함수는 문자열을 입력 받은 인자를 기준으로 나누어 배열로 반환
• str.split(‘-‘) = [’Tom’, ‘Jemmy’, ‘Lyan’]
• 위 배열을 각 변수에 할당하는 것이다.

📌 배열 구조 분해: 기본값

let [a, b, c] = [1, 2];

• 위 코드에서 c에 할당된 값이 없어서 undefined를 반환한다.
• 이때 기본값을 할당 할 수 있다.

let [a, b, c = 5] = [1, 2];

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

• 변수 선언시 대괄호 안에 c에 5를 할당한다.
• 이것은 기본값으로 새로운 값이 구조분해할당되면 무시된다.
• 하지만 따로 할당되지 않을 시 기본값 5가 할당된다.

📌 배열 구조 분해: 일부 반환값 무시

let [user1,  ,user2] = [‘Tom’, ‘Jemmy’, ‘Lyan’, ‘Jane’];

console.log(user1); // Tom
console.log(user2); // Lyan

• user1에는 첫 번째 요소인 Tom이 할당된다.
• 공백은 무시된다.
• user2에는 세 번째 요소인 Jemmy가 할당된다.

📌 배열 구조 분해 : 바꿔치기

let a = 1;
let b = 2;

• 이 두 값을 바꾸기 위한 전통적인 방식은 다음과 같다.

let a = 1;
let b = 2;

// c에 a를 복사
let c = a;

// a에 b를 할당
a = b;
// b에 a가 복사된 c를 할당
b = c;

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

굉장히 복잡하다

// 배열 구조 분해 바꿔치기는 간단하다.

let [a, b] = [1, 2];
[a, b] = [b, a];

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

📍객체 구조 분해

let user  = { name: ‘Tom’, age: 10 };
let { name, age } = user;

console.log(name); // ‘Tom’
console.log(age); // 10

• 위 코드는 다음과 같다

let user = { name: ‘Tom’, age: 10 }
let name = user.name;
let age = user.age;

• 배열 구조 분해 할당과 동일한 원리이다.
• 다른점은 변수의 순서를 신경 쓰지 않아도 된다.

let user = { name: ‘Tom’, age: 10 }
let { age, name } = user;

console.log(name); // ‘Tom’
console.log(age); // 10

• 객체에 접근할 때 변수에 접근하듯이 접근이 가능하다

📍객체 구조 분해 : 새로운 변수 이름으로 할당

let user = { name: ‘철수‘, age: 30 };
let { name: userName, age: userAge } = user;

console.log(userName); // ’철수‘
console.log(userAge); // 30

• 말 그대로 새로운 변수 이름으로 값을 할당한다.

📍객체 구조 분해 : 기본값

let user = { name: ‘철수’, age: 30 };
let { name, age, gender } = user;

console.log(gender); // undefined

• user 객체에 gender 속성이 없기 때문에 undefined가 반환된다.
• 이때 기본값을 할당 할 수 있다.

let user = { name: ‘철수’, age: 30 };
let { name, age, gender = ‘male’ } = user;

console.log(gender); // ‘male’

• 위 코드 처럼 변수자리에 male을 할당하였다.
• 주의 할 점은 원래 객체에 해당 값이 없을 때만 기본값이 작동한다는 점이다.