📙ES6 문법공부

---

📌구조 분해 할당

배열이나 객체의 속성을 분리하여(키와 값을 분리), 프로퍼티 값만 변수에 담는 방식이다.

✨배열 구조 분해

배열 데이터를 다루는 구조 분해 할당이다.

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

let [user1, user2, user3] = users; 라는 코드는 let user1 = users[0]; let user2 = users[1]; let user3 = users[2];와 같다. 구조 분해 할당을 사용해서 선언된 변수에 값을 할당한다.

let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3] = users;

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

문자열을 배열로 만든 후, 구조 분해 할당을 사용하여 user1, user2, user3 변수에 값을 할당했다. str.split('-')을 하면 ["Mike", "Tom", "Jane"] 배열이 생성된다.

let str = "Mike-Tom-Jane";

let [user1, user2, user3] = str.split('-');

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

💡변수에 할당되는 값이 없을 경우

let [a,b,c] = [1,2]; // c에는 undefined가 할당**된다.

let [a=3, b=4, c=5] = [1,2]; // 각 변수에 기본값을 주면 undefined를 예방할 수 있다. 

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

💡값을 할당 받는 변수가 없을 경우

공백과 쉼표를 이용해서 필요하지 않은 배열요소를 무시 할 수 있다. 'Tom' 요소를 할당 받는 변수가 없기에 생략한다. 네 번째 요소 'Tony'를 할당 받는 곳이 없음으로 마찬가지로 무시된다.

let [user1, , user2] = ['Mike', 'Tom', 'Jane', 'Tony'];

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

💡값 바꿔치기

📝 값을 바꿔치려면 임시의 변수 temp가 필요하다.

let a = 1;
let b = 2;

let temp = a;
a = b;
b = temp;

📝 구조 분해 할당을 사용한다면 임시의 변수가 필요없다.

let a = 1;
let b = 2;

[a, b] = [b, a];

✨객체 구조 분해

객체 데이터를 다루는 구조 분해 할당이다.

객체의 키와 동일한 변수명의 변수에 값이 할당된다. 따라서, 선언된 변수의 순서는 신경쓰지 않아도 된다. 그리고, let {name, age} = user;는 let name = user.name; let age = user.age;와 같다.

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

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

💡새로운 변수 이름으로 할당

객체의 프로퍼티 키만을 무조건 변수명으로 해야 하는 건 아니다. 아래처럼 새로운 변수명을 지정해줄 수 있다.

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

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

💡변수에 할당되는 값이 없을 경우

let user = {name: 'Mike', age: 30};
let {name, age, gender} = user; // gender에는 undefined가 할당된다.

let {name, age, gender = 'male'} = user; // gender 변수에 기본값을 주면 undefined를 예방할 수 있다.