비구조화 할당

비구조화할당이란, 배열(Array)이나 객체(Object) 속성(Property)을 해체하여 개별 변수(Variable)에 값을 담을 수 있는 자바스크립트 표현식을 말한다.
다른 말로 구조 분해 할당이라고 한다.
비구조화 할당의 기본 구조는 좌측에는 변수(Variable), 우측에는 해당 변수(Variable)에 넣어지는 값을 표현한다.
this를 사용하는 경우에는 함수(Function)를 호출할 어떻게 호출되었냐에 따라 결정되기 때문에 이 경우 비구조화 할당을 사용하지 않은 것이 좋다.

비구조화 할당 문법 사용

배열(Array)의 경우 []를 사용하고, 객체(Object)의 경우 {}를 사용한다.
만약 비구조화 할당을 사용하지 않는다면 코드는 다음과 같이 중간 값을 저장해줄 변수(Variable)나 상수를 만들어야 한다.

JavaScript

비구조화 할당 문법을 사용하면 다음과 같이 객체(Object) 안에 있는 값을 추출해서 변수(Variable) 혹은 상수로 바로 선언해 줄 수 있다.

JavaScript

아래와 같이 깊에 들어가서 비구조화 할당을 사용할 수 있다.

JavaScript

그리고, 함수(Function)의 매개변수(parameter)에서도 비구조화 할당을 할 수 있다.

JavaScript

그런데 위의 코드에서 b 값이 주어지지 않았다고 가정하면 두번째 출력에서 undefined가 나타난다.

JavaScript

비구조화 할당시 기본값 설정

이러한 상황에 b 값에 기본 값을 주고 싶다면 이렇게 해줄 수 있다.

JavaScript

이는 꼭 함수(Function)의 매개변수(parameter)에서만 할 수 있는 것은 아니다.

JavaScript

비구조화 할당시 이름 바꾸기

비구조화 할당을 하는 과정에서 선언 할 값의 이름을 바꾸는 방법은 객체(Object)를 비구조화 할당을 하여 그 속성(Property)에 재 대입하면 된다.

JavaScript

위 코드에는 animal.name 값을 nickname 값에 담고 있다.
이름이 같다면 비구조화 할당을 쓰면 되는데 지금은 이름이 서로 다르기 때문에 위의 코드로는 속성명을 추출할 수는 있으나 이름을 바꿀 수는 없다.
이러한 상황에서는 : 문자를 사용해서 이름을 바꿔줄 수 있다.

JavaScript

위 코드는 animal 객체(Object) 안에 있는 속성(Property) name 을 nickname 이라고 선언하겠다는 의미이다.

배열(Array) 비구조화 할당

비구조화 할당은 객체에만 할 수 있는 것이 아니다.
배열(Array)에서 할 수 있다.

JavaScript

이 문법은 배열(Array) 안에 있는 원소를 다른 이름으로 새로 선언해주고 싶을 때 사용하면 매우 유용하다.
객체(Object) 비구조화 할당과 마찬가지로, 기본값 지정이 가능하다.

JavaScript

깊은 값 비구조화 할당

객체의 깊숙한 곳에 들어있는 값을 꺼내는 방법이다.

JavaScript

여기서, name, languages, value 값들을 밖으로 꺼내주고 싶다면 두가지 해결 방법이 있다.
첫번째는 비구조화 할당 문법을 두번 사용하는 것이다.

JavaScript

참고로 위의 코드 extracted 객체(Object)에서는 key 이름으로 선언된 값이 존재하다면, 바로 매칭시켜주는 문법 ES6 의 object-shorthand를 사용했다.
두번째 방법은 한번에 모두 추출하는 방법이다.

JavaScript

이렇게 하면 깊숙히 안에 들어있는 값도 객체에서 바로 추출 할 수 있다.

위 이미지에서 주황색으로 나타난 속성들이 추출 된 값들이다.
반면, 빨간색으로 나타난 값들은 따로 추출되지 않는다.

비구조화할당이란, 배열(Array)이나 객체(Object) 속성(Property)을 해체하여 개별 변수(Variable)에 값을 담을 수 있는 자바스크립트 표현식을 말한다.
다른 말로 구조 분해 할당이라고 한다.
비구조화 할당의 기본 구조는 좌측에는 변수(Variable), 우측에는 해당 변수(Variable)에 넣어지는 값을 표현한다.
this를 사용하는 경우에는 함수(Function)를 호출할 어떻게 호출되었냐에 따라 결정되기 때문에 이 경우 비구조화 할당을 사용하지 않은 것이 좋다.

비구조화 할당 문법 사용

배열(Array)의 경우 []를 사용하고, 객체(Object)의 경우 {}를 사용한다.
만약 비구조화 할당을 사용하지 않는다면 코드는 다음과 같이 중간 값을 저장해줄 변수(Variable)나 상수를 만들어야 한다.

JavaScript
const example = { 
	a: 123, 
	b: { 
		c: 135, 
		d: 146,
	},
};

const a = example.a;
const b = example.b.d;

비구조화 할당 문법을 사용하면 다음과 같이 객체(Object) 안에 있는 값을 추출해서 변수(Variable) 혹은 상수로 바로 선언해 줄 수 있다.

JavaScript
const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

아래와 같이 깊에 들어가서 비구조화 할당을 사용할 수 있다.

JavaScript
const example = { 
	a: 123, 
	b: { 
		c: 135, 
		d: 146,
	},
};

const { a, b: { d } } = example;

console.log(a); // 1
console.log(b); // 2

그리고, 함수(Function)의 매개변수(parameter)에서도 비구조화 할당을 할 수 있다.

JavaScript
const object = { a: 1, b: 2 };

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

print(object);

그런데 위의 코드에서 b 값이 주어지지 않았다고 가정하면 두번째 출력에서 undefined가 나타난다.

JavaScript
const object = { a: 1 };

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

print(object);
// >> 1
// >> undefined

비구조화 할당시 기본값 설정

이러한 상황에 b 값에 기본 값을 주고 싶다면 이렇게 해줄 수 있다.

JavaScript
const object = { a: 1 };

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

print(object);
// >> 1
// >> 2

이는 꼭 함수(Function)의 매개변수(parameter)에서만 할 수 있는 것은 아니다.

JavaScript
const object = { a: 1 }; // 객체 생성

const { a, b = 2 } = object;

console.log(a); // 1
console.log(b); // 2

비구조화 할당시 이름 바꾸기

비구조화 할당을 하는 과정에서 선언 할 값의 이름을 바꾸는 방법은 객체(Object)를 비구조화 할당을 하여 그 속성(Property)에 재 대입하면 된다.

JavaScript
const animal = { // 객체 생성
	name: '멍멍이',
	type: '개'
};

const nickname = animal.name; // '멍멍이', 객체는 원시 타입이 아니므로 const에 대입 가능

console.log(nickname); // 멍멍이

위 코드에는 animal.name 값을 nickname 값에 담고 있다.
이름이 같다면 비구조화 할당을 쓰면 되는데 지금은 이름이 서로 다르기 때문에 위의 코드로는 속성명을 추출할 수는 있으나 이름을 바꿀 수는 없다.
이러한 상황에서는 : 문자를 사용해서 이름을 바꿔줄 수 있다.

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

const { name: nickname } = animal // nickname 속성명에 '멍멍이'를 대입
console.log(nickname);

위 코드는 animal 객체(Object) 안에 있는 속성(Property) name 을 nickname 이라고 선언하겠다는 의미이다.

배열(Array) 비구조화 할당

비구조화 할당은 객체에만 할 수 있는 것이 아니다.
배열(Array)에서 할 수 있다.

JavaScript
const array = [1, 2];
const [one, two] = array;

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

이 문법은 배열(Array) 안에 있는 원소를 다른 이름으로 새로 선언해주고 싶을 때 사용하면 매우 유용하다.
객체(Object) 비구조화 할당과 마찬가지로, 기본값 지정이 가능하다.

JavaScript
const array = [1];
const [one, two = 2] = array;

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

깊은 값 비구조화 할당

객체의 깊숙한 곳에 들어있는 값을 꺼내는 방법이다.

JavaScript
const deepObject = {
	state: {
		information: {
		    name: 'velopert',
		    languages: ['korean', 'english', 'chinese']
		}
	},
	
	value: 5
};

여기서, name, languages, value 값들을 밖으로 꺼내주고 싶다면 두가지 해결 방법이 있다.
첫번째는 비구조화 할당 문법을 두번 사용하는 것이다.

JavaScript
const deepObject = {
	state: {
		information: {
			name: 'velopert',
			languages: ['korean', 'english', 'chinese']
	    }
	},
	value: 5
};

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

const extracted = {
	name,
	languages,
	value
};

console.log(extracted); 

// >> {name: "velopert", languages: Array[3], value: 5}

참고로 위의 코드 extracted 객체(Object)에서는 key 이름으로 선언된 값이 존재하다면, 바로 매칭시켜주는 문법 ES6 의 object-shorthand를 사용했다.
두번째 방법은 한번에 모두 추출하는 방법이다.

JavaScript
const deepObject = {
	state: {
	    information: {
		    name: 'velopert',
		    languages: ['korean', 'english', 'chinese']
		}
	},
	value: 5
};

const {
	state: {
		information: { name, languages }
	},
	value
} = deepObject; // 원 객체 deepObject에 비구조화할당으로 매칭시킴

const extracted = {
	name,
	languages,
	value
};

console.log(extracted);

이렇게 하면 깊숙히 안에 들어있는 값도 객체에서 바로 추출 할 수 있다.

위 이미지에서 주황색으로 나타난 속성들이 추출 된 값들이다.
반면, 빨간색으로 나타난 값들은 따로 추출되지 않는다.

비구조화 할당 문법 사용

비구조화 할당시 기본값 설정

비구조화 할당시 이름 바꾸기

배열(Array) 비구조화 할당

깊은 값 비구조화 할당

Synapse Map Insight

비구조화 할당

비구조화 할당 문법 사용

비구조화 할당시 기본값 설정

비구조화 할당시 이름 바꾸기

배열(Array) 비구조화 할당

깊은 값 비구조화 할당

Synapse Map Insight