자바스크립트 중급 (3)

구조 분해 할당

  ▶ 배열 구조 분해

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

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

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

 

예제

let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3] = users;
// let user1 = users[0];
// let user2 = users[1];
// let user3 = users[2];

console.log(user1); // 'Mike'
console.log(user2); // 'Tom'
console.log(user3); // 'Jane'


// 또는

let str = "Mike-Tom-Jane";
let [user1, user2, user3] = str.split('-'); 
//str.split('-'); 는 ["Mike", "Tom", "Jane"]

console.log(user1); // 'Mike'
console.log(user2); // 'Tom'
console.log(user3); // 'Jane'

 

기본값을 주면 undefined를 방지할 수 있습니다.

let [a, b, c] = [1,2]; // c는 undefined가 나옵니다

// 기본값을 준 경우
let [a=3, b=4, c=5] = [1,2];

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

 

반환값을 다음과 같이 무시할 수 있습니다.

let [user1, ,user2] = ['Mike', 'Tom', 'Jane', 'Tony'];
console.log(user1); // 'Mike'
console.log(user2); // 'Jane'

 

이미 할당된 변수 바꾸려면 다음과 같이 합니다.

let a = 1;
let b = 2;

// let a = b 로 a에 b를 할당하고 b에 a를 할당한다는 식은 안된다
// 기존의 a값이 없어지기 때문

let c = a;
a = b;
b = c;
// 이렇게 해야 한다

// 하지만 더 쉽게 하려면.. 구조분해할당 이용해 변수 값 교환가능
// 임시 변수 c 불필요
[a, b] = [b, a];

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

 

 

  ▶ 객체 구조 분해

let user = {name: 'Mike', age: 30};
let {name, age} = user;
// 위 코드는 다음과 같습니다.
// let name = user.name;
// let age = user.age;
// let { age, name} = user;로 바꾸어도 결과는 동일

console.log(name); // 'Mike'
console.log(age); // 30

 

새로운 변수 이름으로 할당이 가능합니다.

let user = {name: 'Mike', age: 30};
let {name, age} = user;
let {name: userName, age: userAge} = user;

console.log(userName); // 'Mike'
console.log(userAge); // 30

 

기본값을 줄 수 있습니다.

let user = {
    name: 'Jane',
    age: 18,
};

let {name, age, gender = 'male'} = user;
console.log(gender); // 'male'

// 만약 gender: 'female'가 있다면 console.log에 'female' 출력

 

여기까지 객체와 배열의 구조분해할당에 대해 알아보았습니다