Destructuring(구조분해할당)/Shorthand property names

구조분해할당과 shortandproperty가 무엇이고 어떻게 쓰이는지알아보자.
우선shortandproperty을 알아보자.

Shorthand property names

객체를 간단히 표현해주는 방법이다.
객체의 key와 value의 이름이 동일하다면 value를 생략해서 작성할 수있다.

예)

const name="공주"
const name="pizznara@gmail.com"
const phone=01082821818
const obj ={name:name,email:email,phone:phone} 
=>
const obj={name,email,phone}

이방식으로 함수를 호출하고 전달인자를 작성할때 활용할 수 있다.

function jjampu(ggg){
	console.log(ggg)//{name,email,phone}
	console.log(ggg.name)//"공주"
	console.log(ggg.email)//"pizznara@gmail.com"
    console.log(ggg.phone)//01082821818
}
const name="공주"
const name="pizznara@gmail.com"
const phone=01082821818
const obj={name,email,phone}
jjampu({name,email,phone})

jjampu를 호출하고 전달인자로 {name,email,phone}을 넣게되면 매개변수 ggg에서 이값을 받게 된다.
const ggg = {name,email,phone} 이렇게 값을 받게된다. 이렇기에 console.log로 ggg와 ggg.name, ggg.name등을 찍어보면 해당 값이 나오는걸 알 수 있다.
여기서 구조분해할당을 적용할 수 있다.
ggg 대신에 {name,email,phone}을 넣게 되면 const {name,email,phone} ={name,email,phone}이된다. 이때 객체의 구조분해할당은 순서와 상관없이 객체의 같은 key값을 찾아서 할당해준다.

function jjampu({email,name,phone}){
	console.log(name)//"공주"
	console.log(email)//"pizznara@gmail.com"
    console.log(phone)//01082821818
}
const name="공주"
const name="pizznara@gmail.com"
const phone=01082821818
const obj={name,email,phone}
jjampu({name,email,phone})

아래의 예를 살펴보자

const obj ={name:"jjampu",age:2,like:"mamma"}
const {name,like,age}=obj
console.log(name)//"jjampu"
console.log(like)//"mamma"
console.log(age)//2

shortandproperty는 적용되지 않았지만 구조분해할당의 안정적인 데이터 전달을 보여준다.
객체에서의 구조분해할당은 순서에 영향받지 않고 key를 따라 값을 할당해주기에 안정적이다.
배열에서의 구조분해할당은 순서에 영향을 받기에 공백이 있거나 순서가 달라지면 원하지 않는 데이터 전달이 생길수 있다.

내가 할 수 있는것을 하자.