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

비구조 할당

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);