JavaScript - 구조분해

배열을 활용한 구조분해

const rank = [‘dog’, ‘cat’, ‘bird’, ‘mouse’];

// 배열의 값을 변수에 담기
const beef = rank[0];
const salmon = rank[1];
const corn = rank[2];
const salad = rank[3];

// 구조분해 문법으로 담기
const [beef, salmon, corn, salad] = rank;

console.log(beef); // dog
console.log(salmon); // cat

• rank를 분해해서 왼쪽 배열의 값으로 집어넣은 것이다.
• 구조분해시, 우측값이 없거나 우측값이 배열이 아니면 에러가 발생한다.

배열의 길이가 긴 경우

const rank = [‘dog’, ‘cat’, ‘bird’, ‘mouse’, ‘rabbit’];
const [beef, salmon, corn, …salad] = rank;
console.log(salad); // [‘mouse’, ‘rabbit’]

구조분해 salad에 스프레드구문을 사용하여 mouse와, rabbit을 배열로 받았다.

배열의 길이가 짧은 경우

const rank = [‘dog’, ‘cat’, ‘bird’];
const [beef, salmon, corn, salad = ‘없음’] = rank;
console.log(salad); // ‘없음’

기본값을 할당할 수 있다.

두 변수의 값을 서로 바꾸는데에 쓸 수도 있다.

let catName = ‘kong’;
let dogName = ‘mimi’;

[catName, dogName] = [dogName, catName];

console.log(catName , dogName); // mimi kong

두 변수의 값을 바꿀때에는 temp변수에 한 쪽을 담아논 후 옮기는 과정이 필요했는데,

구조분해를 이용하면 편리하다.

 

객체를 활용한 구조분해

const macbook = {
	title : ‘맥북 프로 16형’,
	price : 3500000,
	memory : ’16GB’
}

// 변수에 객체의 프로퍼티값 담기
const title = macBook.title;
const price = macBook.price;

// 구조분해 문법으로 담기
const { title, price } = macBook;

// 구조분해 문법으로 프로퍼티네임을 변경하며 담기
const { title : product, price } = macBook;
console.log(title); //error 
console.log(product); // ‘맥북 프로 16형’

객체에서도 스프레드 구문을 통해서 아래와같이 작성 가능하다.

const { title, …rest } = macBook;

이렇게하면 titls만 title변수에 담기고, 나머지 프로퍼티들은 rest에 객체형태로 담긴다.

 

 

만약 porpertyName이 변수로는 사용할 수 없는 단어인 경우라면 새로운 이름을 지정해줘야한다.

const macbook = {
	title : ‘맥북 프로 16형’,
	price : 3500000,
	’serial-num’ : ’ABCDEFGH’
}
const {[‘serial-num] : serialNum} = macbook;
console.log(serialNum); // ABCDEFGH

 

기본값을 주기위해서는 아래와같이 작성한다.

const { title : product, price=4000000 } = macBook;

 

 

 

함수를 활용한 구조분해

function getArray(){
	return [‘dog’, ‘cat’, ‘bird’];
}
const [animal1, animal2, animal3] = getArray();

구조분해 할 때, 우항은 배열이 왔어야했는데 배열을 리턴하는 함수를 사용해도 된다.

function printBestAnimals(…arg){
	const [dog, cat, …rest] = args;
	console.log(`best animal is ${dog}`);
	console.log(`also ${cat}`);

	for(let animal of rest){
		console.log(`and ${animal}`);
	}
}

printBestAnimals(‘mimi’, ‘kong’, ‘ann’, ‘kathy’);

위와같은 함수에서 구조분해를 파라미터에서 해버버리면 아래와같이 작성할 수 있다.

function printBestAnimals([dog, cat, …rest]){

	console.log(`best animal is ${dog}`);
	console.log(`also ${cat}`);

	for(let animal of rest){
		console.log(`and ${animal}`);
	}
}

const ranks = [‘mimi’, ‘kong’, ‘ann’, ‘kathy’];
printBestAnimals(ranks);

 

 

보통 함수에서 파라미터를 객체로 받는다면 아래과같이 작성할 수 있다.

function printSummary(object){
	console.log(object.title);
	console.log(object.price);
	console.log(object.memory);
}

계속해서 파라미터에 접근하는 것. 

하지만 아래와같이 바꿀 수 있다.

// 함수 내부에서 구조분해
function printSummary(object){
	const { title, price, memory } = object;

	console.log(title);
	console.log(price);
	console.log(memory);
}

// 파라미터에서 구조분해
function printSummary( { title, price, memory } ){
	console.log(title);
	console.log(price);
	console.log(memory);
}

이렇게 구조분해를 통해 코드를 간단히 할 수 있는데, 아래는 변수뿐아니라 html, dom에 접근할때도 활용할 수 있다는 예를 보여준다.

const btn = document.querySelector(‘#login-btn’);
btn.addEventListener(‘click’, (event) => {
	event.target.classList.toogle(‘checked’);
	event.target.classList.toogle(‘clicked’);
})

하지만 위의 코드는 event.target객체에 계속해서 접근중인데 이것은 아래와 같이 수정가능하다.

// target까지 구조분해
btn.addEventListener(‘click’, ({target}) => {
	target.classList.toogle(‘checked’);
	target.classList.toogle(‘clicked’);
})

// classList까지 구조분해( 중첩 객체 구조 분해(nested Object Destructuring )
btn.addEventListener(‘click’, ({target: { classList }}) => {
	classList.toogle(‘checked’);
	classList.toogle(‘clicked’);
})

위 코드에서, classList까지 구조분해 하는 코드를 중첩 객체 구조 분해(nested Object Destructuring)이라고 한다.