구조분해할당

구조분해할당 (비구조화할당)

배열 혹은 객체를 해체하여 개별 속성이나 값을 변수에 할당할 수 있다
배열의 경우 각각의 변수에 해당 배열 인덱스에 값이 할당되며, 값이 비어 있는 경우 undiefined 가 출력된다
객채의 경우는 해당 속성(Property)명이 변수명이 되며, 해당 변수로 해당 속성의 값이 할당된다. 마찬가지로 값이 비어있으면 undefined 가 출력된다

배열

const user = [
	'rockbell89',
    34,
    ['music', 'travle']
]

const [nickname, age, hobbies] = user;

객체

const user = {
	nickname : 'rockbell89',
    age : 34,
    hobbies : ['music', 'trabel']
}

const {nickname, age, hobbies} = user;

함수 파라미터

 const user = {
	nickname : 'rockbell89',
    age : 34,
    hobbies : ['music', 'trabel']
}

function sayUser({ nickname, age, hobbies }) {
	console.log(nickname); // output :  rockbell89
    console.log(age); // output :  34
    console.log(hobbies); // output :  ['music', 'trabel']
}

변수 선언 키워드(const, let, var) 를 생략 했을 경우

let obj = {};
[obj.nickname] = user; // obj.nickname = user[0] 

let nickname;
{ nickname } = user; //  { } 블록문으로 인식해 에러가 난다 
({ nickname } = user); //  해결법 - ( ) 감싸서 식으로 인식하게 만든다

...rest 파라미터 사용법

...rest 파라미터는 나머지를 뜻하는 것으로, 배열이나 객채를 구조분해할당으로 가져올때 마지막 파라미터로 삽입 할수 있다. 중간에 넣을 경우 에러가 발생한다.
(...rest 뒤로 쉼표가 없야아 한다는 뜻)

배열

const user = [
	'rockbell89',
    34,
    ['music', 'travle'],
   'frontend developer',
   'codestates 42'
]

const [nickname, age, hobbies, ...rest] = user;
console.log(rest); // ['frontend developer', 'codestates 42']

객체

const user = {
	nickname : 'rockbell89',
    age : 34,
    hobbies : ['music', 'trabel'],
    email : 'rockbell89@gmail.com'
}
const {nickname, age, hobbies, ...rest} = user;
console.log(rest); // {email : 'rockbell89@gmail.com'}

함수

const user = {
	nickname : 'rockbell89',
    age : 34,
    hobbies : ['music', 'trabel'],
    email : 'rockbell89@gmail.com'
}

const sayUser = ({
	nickname,
    age,
    hobbies,
    ...rest
}) => {
  console.log(nickname); // 'rockbell89'
}

sayUser(user);

...rest 파라미터의 빈 값

rest 파라미터에 인자 값이 없을 경우 빈 값(빈 배열 [] , 빈 객체 {})을 반환한다

배열

const arr = [1, 2, 3];
const [aa, bb, cc] = arr;

function showArr(aa, bb, cc, ...rest) {
    console.log(aa); // output : 1;
    console.log(bb); // output : 2;
    console.log(cc); // output : 3;
    // 4번째 파라미터에는 들어오는 값이 없기때문에 빈 배열이 출력된다
	console.log(rest); // output: [];
}

showArr(aa, bb, cc);

객체

const user = {
	nickname : 'rockbell89',
    hobbies : ['music', 'trabel'],
}

const sayUser = ({
	nickname,
    age,
    hobbies,
    ...rest
}, ...rest2) => {
  console.log(nickname); // output : 'rockbell89'
  console.log(age); // output : 'undefined'
  console.log(rest); //  output : {}
  console.log(rest2); // output : []
}

// 1번째 파라미터 객체에 age 속성값이 없으므로 undefined 가 출력된다
// 1번째 파라미터 객체에 들어가는 hobbies 이후에 들어가는 속성 값이 없으므로,
 ...rest 파라미터는 빈객체가 출력된다 (** 객체애서 rest parameter 빈값은 빈객체로 반환)

// 2번째 파라미터에는 빈 값이 들어가므로 빈 객체가 출력된다
sayUser(user);

새로운 변수 이름으로 할당

const user = {
	nickname : 'rockbell89',
    age : 34,
    hobbies : ['music', 'trabel'],
    email : 'rockbell89@gmail.com'
}

const {nickname : userNickname, age: userAge} = user;
console.log(userNickname); // output : rockbell89 

구조분해할당의 기본값

객체로 해체된 값이 undefined 인 경우 변수에 기본값을 할당 할 수 있습니다
또한, 새로운 변수명과 동시에 기본값 할당이 가능합니다

기본 값 할당

const { name = 'ria', age = 34 } = { age: 20 }
console.log(name);// output :  ria
console.log(age);// output : 20

새로운 변수명과 동시에 기본값 할당

const { name : nickname = 'ria', age : newAge = 34 } = { age: 20 }
console.log(nickname);// output :  ria
console.log(newAge);// output : 20