디스트럭처링 할당 내가 해냄

인트로

리액트 코드를 보는데 디스트럭처링 할당이 빗발치더라고요.

빠르게 이해하려면 디스트럭처링 할당에 대해서도 조금 더 살펴볼 필요가 있겠다는 생각이 들었습니다. 

바로 시작하겠습니다.

---

디스트럭처링 할당이란?

디스트럭처링 할당 즉 구조 분해 할당은 이터러블 또는 객체를 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다.

---

배열 디스트럭처링

배열 디스트럭처링 할당의 경우 할당문의 우변이 이터러블이어야 하며 인덱스 순서대로 할당됩니다.

const arr =['a', 'b', 2, 1];

const [ one, two, ,numberOne] = arr;
console.log(one); //a
console.log(two); //b
console.log(numberOne); //1

심플한 코드로 변수에 배열 요소를 할당할 수 있습니다.

변수의 개수와 이터러블 요소 개수가 일치할 필요는 없습니다.

예제와 같이 넣고 싶지 않은 요소가 있을 경우 콤마를 사용하여 해당 자리를 비워두면 됩니다. (, ,)

이터러블에서 필요한 요소만 추출하여 변수에 할당할 때 매우 유용합니다.

편리하게 교환까지

let dog = '왈왈';
let cat = '야오ㅇ엥';

[dog, cat] = [cat, dog];
console.log(dog); //야오ㅇ엥
console.log(cat); //왈왈

Rest 요소를 사용할 수도 있습니다. Rest 요소는 Rest 파라미터처럼 반드시 마지막에 위치해야 합니다.

const arr =['a', 'b', 2, 1];

const [ one, ...all] = arr;
console.log(one); //a
console.log(all); // ['b', 2, 1]

---

객체 디스트럭처링 할당

es6 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 1개 이상의 변수에 할당합니다. 

할당 기준은 프로퍼티 키입니다. 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당됩니다.

const pet = { Dog: 'gyu' ,  Cat : 'won'};

var { Cat, Dog } = pet;
console.log(Cat, Dog); // won gyu
var { cat, Dog } = pet;
console.log(cat); // undefined
console.log(Dog); // gyu

const pet = { Dog: 'gyu' ,  Cat : 'won'};

const { cat, Dog } = pet;
console.log(cat, Dog); // undefined 'gyu'

키가 일치하지 않을 경우 undefined가 할당되는 것 같네요.

 

만약 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받고 싶다면 다음과 같이 변수를 선언하면 됩니다.

const name = { wonDog: 'legend', minDog: 'babpul' }
const { wonDog:Wonwoo, minDog:Mingyu } = name;
console.log(Wonwoo, Mingyu); //legend babpul

우변에 배열을 할당할 경우 (객체로 평가될 수 있는 표현식을 할당하지 않으면 에러가 납니다.)

const number = [ 717, 0, 46];

const { 0: One, 2: Two } = number;
console.log(One, Two); // 717 46

변수에 기본값도 설정할 수 있습니다.

const name = { minDog: 'babpul' }
const { Wonwoo = 'legend', minDog:Mingyu } = name;
console.log(Wonwoo, Mingyu); //legend babpul

const name = {wonDog:'Legend', minDog: 'babpul' }
const { wonDog:Wonwoo = 'legend', minDog:Mingyu } = name;
console.log(Wonwoo, Mingyu); //Legend babpul

원하는 프로퍼티 값만 추출할 때 아주 유용합니다.

const str = 'wow Cool~';
console.log(str.length); // 9
const { length } = str;
console.log(length); // 9

객체를 인수로 받는 함수의 매개 변수에도 사용할 수 있습니다. 이건 정말 유용하네요..

const cool = ({arg, arg2}) => {
	console.log(`This is ${arg2} ${arg} `); // This is very very cool
}
cool({arg:'cool', arg2:'very very'})

---

응 두 개 다 쓸 거야

만약에 배열의 요소가 객체라면? 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있습니다.

const animal = [
	{dog: '왈왈', age:'1'},
	{cat: '야옹', age: '2'},
	{duck: '꿱꿱', age:'3'},
]
// 고양이와 오리의 울음소리를 얻고 싶다면?
const [ , {cat}, {duck}] = animal;
console.log(cat, duck); //야옹 꿱꿱
//고양이의 나이를 알고 싶다면?
const [,{age}] = animal;
console.log(age); //2

중첩 객체까지

중첩 객체에서 강아지 주인의 이름을 뽑으려면 어떻게 해야 할까요? 지금까지 배운 내용을 통해서는 다음과 같이 할 수 있겠습니다. 

const dog = {
	name: 'babpul',
	brother: {
		name:'mingyu',
		age: '27',
	}
}
//강아지의 주인 이름을 뽑아내고 싶다면?
const { brother } = dog;
console.log(brother); //{ name: 'mingyu', age: '27' }
const { name } = brother;
console.log(name); //mingyu

dog로부터 brother 객체를 뽑고 그 객체에 대해서 name 프로퍼티로 값을 추출...

디스트럭처링 맛을 보니까 이것도 살짝 귀찮습니다.

다음과 같이 사용하면 한 번에 뽑아낼 수 있어요. dog 멋져..

//강아지의 주인 이름을 뽑아내고 싶다면?
const { brother: {name} } = dog;
console.log(name);//mingyu

조금 더 복잡한 걸 해봅시다.

저는 강아지 주인이 속해있는 유닛이 어딘지 알고 싶어요.

 brother이라는 프로퍼티 키로 객체를 추출하고 이 객체의 include 프로퍼티 키로 배열을 추출합니다.

배열에서 원하는 요소를 얻기 위해서는 콤마를 사용하면 된다고 했죠. 유닛만 얻기 위해서 앞에 콤마를 추가해 줍니다.

그렇게 뽑아낸 객체에서 unit 프로퍼티 키를 이용해 값을 추출하는 그런 코드였습니다.

const dog = {
	name: 'babpul',
	brother: {
		name:'mingyu',
		age: '27',
		include : [
			{ team: 'seventeen'},
			{ unit: 'hiphopteam' }
		],
	}
}
//강아지 주인이 속해있는 유닛을 뽑고 싶다면?
const { brother: {include: [,{unit}]}  }  = dog;
console.log(unit); //hiphopteam

무한으로 즐겨요

const dog = {
	name: 'babpul',
	brother: {
		name:'mingyu',
		age: '27',
		include : [
			{ team: {
					name: "seventeen",
					position : 'rap'
				}
			},
			{ unit: 'hiphopteam' }
		],
	}
}
//강아지 주인의 position을 뽑고 싶다면?
const { brother: {include:[{team:{position}}]}  }  = dog;
console.log(position); //rap

참고로 객체 디스트럭처링 할당을 위한 변수에도 Rest파라미터, Rest 요소와 유사하게 Rest 프로퍼티를 사용할 수 있습니다. 이 친구도 마찬가지로 반드시 마지막에 위치해야합니다.

//강아지의 주인 이름을 뽑아내고 싶다면?
const { name, ...all } = dog;
console.log(name); //babpul
console.log(all); //{ brother: { name: 'mingyu', age: '27' }, state: 'very cute' }

---

이제.. 어제 코드가 명확하게 이해가 가네요... 중첩객체 디스트럭처링이었구나..

// 1)
const {
      target: { value },
    } = event;

// 2) 
const value = event.target.value

대충 쉽게 보자면 이런 거죠.

target 프로퍼티 키로 객체를 추출하고 이 객체의 value 프로퍼티 키로 값을 추출하는 겁니다.

const e  = {
	target : {
		value : 'hi',
	}
}
const { target: {value} } = e;
console.log(value);  //hi

(직접 찍으면서 살펴보기)

이벤트가 발생하면 이벤트 객체가 생성됩니다.

이벤트객체는 target이라는 프로퍼티를 가지고 있고 target에는 이벤트가 발생한 요소의 정보가 담겨있습니다.

여기서는 input 요소가 되겠네요.

input 요소는 value 프로퍼티를 가지고 value 프로퍼티는 현재 input 요소의 값을 의미합니다.

value에 hi가 들어있기 때문에 코드에서 'hi'가 출력되는 모습입니다.

	<input type="text" value="hi">
	<script>
		const $input = document.querySelector('input');
		$input.addEventListener('click', (e) => {
			console.log(e);
			console.log(typeof e); //object
			console.log('target' in e); //true
			console.log(typeof e.target); //object
			console.log(e.target); //<input type="text" value="hi">
			console.log('value' in e.target); //true
			console.log(e.target.value); //hi
		})

---

디스트럭처링 할당 정말 멋지다..

 

MDN & 모던 자바스크립트 Deep Dive 내용을 참고하였습니다.