Javascript
Javascript - 비구조화 할당(구조 분해)
Starters
2020. 9. 5. 21:55
비구조 할당
const object = { a: 1, b: 2 };
const {a, b} = object;
console.log(a) => 1
console.log(b) => 2
함수의 파라미터에서 사용
const object = { a: 1, b: 2 };
function print({a, b}){
console.log(a)
console.log(b)
}
print(object);
b값에 대한 파라미터 없다면, 기본값 설정
const object = { a: 1 };
function print({a, b = 2}){
console.log(a);
console.log(b);
}
print(object);
// 또는
const object = { a: 1 };
function print({a, b}){
console.log(a);
console.log(b || 2);
}
print(object);
함수 이외에도 사용 가능
const object = { a: 1 };
const {a, b = 2} = object;
console.log(a);
console.log(b);
비구조 할당 시 이름을 바꾸는 법
const animal = {
name: '멍멍이',
type: '개'
};
// const nickname = animal.name;
const { name: nickname } = animal; // 이렇게 이름을 nickname 으로 바꿔줄 수 있다.
console.log(nickname);
배열에도 비구조 할당 사용 가능
const array = [1];
// const one = array[0];
// const two = array[1];
const [one, two = 2] = array;
console.log(one);
console.log(two);
객체의 깊숙한 곳에 있는 값을 꺼내는 방법
const deepObject = {
state: {
information: {
name: 'javascript',
languages: ['korean', 'english', 'chinese']
}
},
value: 5
}
// name과 value 값을 꺼내고 싶을 때
// 2가지 방법
// 1. 비구조 할당 문법을 두번 사용
const {name, languages } = deepObject.state.information;
const {value} = deepObject;
// 만약 특정 키 이름으로 설정된 값에 이미 값이 있다면, value값 설정 생략가능
const extracted = {
name,
languages,
value
};
console.log(extracted);
// 2. 비구조 할당 한번 하면서 여러값을 전부 가져오는 방법
// 코드가 오히려 조금 지저분해질 수 있음
const {
state: {
information: {
name, languages
}
},
value
} = deepObject;
const extracted = {
name,
languages,
value
};
console.log(extracted);