TIL) 객체 구조 분해 추가 학습

 

let user = {name: 'Mike', age: 30};
let {name, age} = 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 {age, name} = user;

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

 

 

⭐️프로퍼티의 키 값을 무조건 동일하게 사용할 필요없다. ⭐️

⭐️⭐️변수 이름을 바꿀 수 있다. ⭐️⭐️

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

👇아래처럼 바꿔줄 수 있다. 

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

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

 

⭐️객체를 분해할 때도 기본값을 줄 수 있다.  ⭐️

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

➥ 이때 gender는 아무 것도 해당되는 값이 없어서 undefined 값이 들어간다. 

 

 

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

➥ 이 코드라면 user 객체에 gender가 없다면 'female'이 기본으로 할당 된다. 

 

 

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

console.log(gender); // 'male'

➥ 만약 위 코드처럼 user 객체에 gender가 있다면 'male' 이 된다. 

 

 

참고)

https://www.youtube.com/watch?v=lV7ulA7R5Nk

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓