JavaScript :: 구조 분해 할당

Destructuring assignment

구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 

그 값을 변수에 담을 수 있게 하는 표현식

 

 

배열 구조 분해

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

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

 

 

 

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

console.log(user1); // 'Mike'
console.log(user2); // 'Tom'
console.log(user3); // '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 [user1, user2, user3]
아래와 같다
let user1 = users[0];
let user2 = users[1];
let user3 = users[2];

 

 

해당하는 값이 없을 때는 어떻게 될까?

배열 구조 분해 : 기본값

let [a,b,c] = [1,2];
console.log(a); //1
console.log(b); //2
console.log(c); //이 때, c에는 undefinded 가 들어간다

 

 

let [a=3, b=4, c=5] = [1,2];
console.log(a); //1
console.log(b); //2
console.log(c); //5 기본값으로 5를 선언해놨기 때문

 

 

 

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

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

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

필요하지 않은 배열 요소를 무시할 수 있다

 

 

 

배열 구조 분해 : 바꿔치기

let a = 1;
let b = 2;
[a,b]=[b,a]; //임시변수 c를 만들어 로테이트로 돌리면서 변수 바꾸는 과정 필요 없음

 

 

---

 

 

객체 구조 분해

//객체 구조 분해

let user = {name:'Mike', age:30};
//user 객체가 있고, name 과 age 프로퍼티가 있다
let {name, age} = user;
//중괄호로 감싼 변수선언, user객체를 할당

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

 

 

let {name, age} = user;
아래와 같다
let name = user.name;
let age = user.age;

 

 

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

//객체 구조 분해 : 새로운 변수 이름으로 할당
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,
    gender:'female'
};

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

female

 

user객체에 gender가 있다면, 그 값(gender : female)이 사용된다

기본값이 사용될 때는 객체로부터 받은 값이 undefined 일 때만

 

 

 

---

스프레드 연산자 (Spread Operator)

 

         let array = [1, 2, 3];
            let [a, ...rest] = array;
            console.log(a, rest);

[2, 3]

//array의 원본은 건들지 않고 참조만 한다