[Javascript] 구조 분해 할당

구조 분해 할당이란? 

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

✔️ 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 유용.

✔️ 객체나 배열의 요소를 변수로 연결할 수 있다.

배열 구조 분해

let users = ['Mike', 'Tom', 'Jane'];

let [user1, user2, user3] = users;

console.log(user1); //Mike


//split으로 분해한 배열도 바로 변수에 할당할 수 있다.
let str = "Mike-Tom-Jane";

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

console.log(user2); //Tom


//일부 반환값 무시하기
let users = ['Mike', 'Tom', 'Jane', 'Tony'];

//여기서 Mike와 Jane의 배열 요소만 변수값에 넣고 싶다면 공백으로 처리해주면 된다.

let [user1, , user2] = users;

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

 

 

 

객체 구조 분해

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

let {name, age} = user;
//let name = user.name;
//let age = user.age;

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

 

'...'로 나머지 요소 가져오기

✔️ 지정하지 나머지 요소들을 rest 배열로 따로 묶을 수 있다.

let numbers = [1,2,3,4,5,6];

let [number1, number2, ...rest] = numbers;

console.log(number1); //1
console.log(rest); //[3,4,5,6]
console.log(rest[0]); //3

 

기본값

✔️ = 을 이용해서 할당할 값이 없을 때 기본으로 할당해 줄 값인 '기본값'을 설정할 수 있다.

let user = {name:'John', years:30};

let {name:name, years:age, isAdmin = false};

console.log(name); //John
console.log(age); //30
console.log(isAdmin); //false