javascript] 비구조화 할당

비구조화 할당에 대해서 알아보겠다.

비구조화할당에서 기본 값을 지정하는 방법.

const object = { a: 1, b: 2}
const {a, b} = object;
console.log(a);
console.log(b);

console.log("==============================")

function print({a, b}) {
	console.log(a)
    console.log(b)
}

print(object)

 

객체를 비구조화할당하는 방법이다.

name을 꺼내와서 사용해도되지만 {name : nickname} 같이 nickname이라는 명칭으로 사용이 가능하다.

const animal = {
  name : '멍멍이',
  type : '개'
}

//const nickname = animal.name

const {name : nickname} = animal;

console.log(nickname);
console.log(animal)

 

이번에는 배열에서 비구조화할당을 알아보자.

배열에 1, 2가 있을 때 각각 꺼내려면 아래와 같이 사용하는게 일반적이지만

이를 비구조화할당을 사용하면 아래와 같이 변경이 가능하다.

const array = [1, 2];

//일반적인 사용 예시
const one = array[0];
const two = array[1];

console.log(one)
console.log(two)

console.log('=============')

//비구조화 할당 예시
const [oen, two] = array;

console.log(one)
console.log(two)

 

그리고 배열에도 기본값을 설정할 수 있다.

const array = [1];

//비구조화하면서 기본값을 설정
const [oen, two = 2] = array;

console.log(one)
console.log(two)

 

다음은 객체에 깊숙히 담겨있는 값을 꺼내는 방법을 알아본다.

const deepObject = {
	state : {
    	information: {
        	name: '최하준',
            languages: ['korean', 'english', 'chinese']
        }
    },
    value: 5
}

위의 객체에서 값을 꺼내오는 방법은 보통 두가지로 예를 들 수 있다.

 

첫번째는 비구조할당을 두번 사용하는 것이다.

const deepObject = {
	state : {
    	information: {
        	name: '최하준',
            languages: ['korean', 'english', 'chinese']
        }
    },
    value: 5
}

const { name, languages} = deepObject.state.informaion;
const { value } = deepObject;

const extracted = {
	name,
    languages,
    value
}

//extracted 안에는 원래 name: name, languages: languages... 이렇게 선언해야하지만,
//특정 키 이름으로 선언된 값이 있다면 value값을 설정하는 것을 생략해도 된다.


consoloe.log(extracted)

 

두번째 방법은 비구조할당을 한번하면서 다 빼오는 방법이다.

const deepObject = {
	state : {
    	information: {
        	name: '최하준',
            languages: ['korean', 'english', 'chinese']
        }
    },
    value: 5
}

const {
	state: {
    	information: {
        	name, languages
            //languages는 배열이라서 특정키 값으로 빼올 수도 있다.
            //languages[firstLang, secondLang]
        }
    },
    value
} = deepObject;

const extracted = {
	name,
    languages,
    //firstLang,
    //secondLang
    value
}


consoloe.log(extracted)