[es6] Destructuring assignment 구조분해할당

안녕하세요 구조분해할당에 대해 포스팅해볼게요 😁

MDN에 나와있는 구조분해할당에 대한 설명입니다.

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식.

아,,배열이나 객체의 속성을 해체시켜서 

그 값을 변수에 담을 수 있구나,,! 라고 이해가 되시지요?

함 알아볼까욧!

1.배열분해할당

	

let data = [10,20,30,40];
let a = data[0];
let b = data[1];

console.log(a,b)

보통 요런식으로 배열의 값을 변수에 대입하죠.

콘솔에 10,20 이 찍히겠죠 ?

이방법은 뭔가 지저분해보이고,,귀찮습니다.

구조분해 방법으로 사용 해 볼게요

	

let data = [10,20,30,40];
let [a,b,c] = data

console.log(a,b,c)//a = 10, b = 20, c = 30

위의 데이터 배열을 분해하여 순서대로

a는 10, b는 20, c는 30이 할당됩니다.

	

let data = [10,20,30,40];
let [a,,c] = data

console.log(a,c)//a = 10, c = 30

20에 넣고싶은 변수가 없다면 자리를 비워놓으면 됩니다.

	

let data = [10,20,30,40];
let [a,...c] = data

console.log(a,c)//a = 10, c = [20,30,40]

펼침연산자로 나머지 배열을 할당할 수 있습니다

2.객체구조분해할당

	

let obj = {
	name:'cy',
	age:20
}

let {name,age} = obj
console.log(name,age)//name = 'cy', age = 20

객체도 key값으로 분해하여 변수에 할당할 수 있습니다

3.Destructuring를 활용한 JSON 파싱

이번에 공부하면서 JSON이란 걸 알게되었는데요.. 간단하게 특징을 알아보겠슴다

JSON이란 ? 

JavaScript Object Notation 의 축약어

데이터를 저장하거나 전송할때 사용하는 경량의 data 형식

흠,,직역하면 자바스크립트 객체 표기법..?

객체를 사용한 표기법 이구나 싶습니다

- 용량이 작다

- 어떠한 언어가 아닌 데이터를 표현하는 방식 일 뿐이다

- json 문서형식은 자바스크립트 객체 형식을 기반으로 만들어졌다

- 그래서 자바스크립트 문법과 유사하지만 그냥 텍스트형식 이다.

오호,,그럼 destructuring으로 json을 어떻게 파싱하는지 살펴봅시다 

person 배열에 json 형식을 넣어볼게요

	

let person = [
	
	{
		'이름':'어피치',
		'나이':20,
		'특징':[
			'하얗다',
			'둥그런 얼굴형',
			'분홍빛을 뽐낸다'
		]
	},
	{
		'이름':'라이언',
		'나이':20,
		'특징':[
			'누렇다',
			'둥그런 얼굴형',
			'갈색빛을 뽐낸다'
		]
	}
	
]

짠~ person 배열에 어피치와 라이언의 값들이 담겨있어요

	

[peach] = person
//console.log(peach) > {이름: "어피치", 나이: 20, 특징: Array(3)}

peach변수에 destructuring 을 사용하여 어피치 값들을 파싱하였습니다

그럼 peach 변수에서 나이 값만 뽑아볼게요

	

{나이:age} = peach
//console.log(age) > 20

이런식으로 프로퍼티와 다른이름으로 변수에 할당 시킬 수 있습니다

나이 키값을 age 변수로 할당시키겠다!

이렇게요 ...

요부분이 좀 헷갈림다..

	

[,lion] = person

라이언을 가져오고싶으면 

두번째니까 쉼표찍고 가져오면 됩니다.

함수에서도 파라미터값을 이용하여 할당이 가능합니다.

	

function callName([,{이름}]){
   console.log(lion)
}
callName(person)// {이름: "라이언", 나이: 20, 특징: Array(3)}

person 배열에서 두번째index 인 라이언의 값들을 lion 매개변수로 담아줍니다

콘솔에 lion 을 찍으면 라이언에 값들이 담겨진걸 확인 할 수 있습니다.

이번에 Destructuring 공부하면서

좀 헷갈린부분이 많았네요 ㅠㅠ,,

연습이 많이 필요할 것 같습니다..

그럼 다음 포스팅에서 만나용 ~