es6+ | 비구조화 할당

| 비구조화 할당

1.객체의 벨류파라미터 생략

화살표 함수에서 객체를 return할때 

// 객체의 키값과 벨류의 파라미터명이 같으면 벨류파라미터 생략가능
const register1 = (ID,PW) => ({ID:ID ,PW:PW})
const register2 = (ID,PW) => ({ID,PW})
console.log(register1("jae",0001))
console.log(register2("jae",0001))

 

객체선언할때

//객체
const man = {name: "jae", age:24, sex:"male"};
키의 값을 뽑아내려면 아래와같이 man.name 이런식으로 적어야한다
console.log(man.name)
console.log(man.age)
console.log(man.sex)

// 아래와같이 변수명대신 객체 형태로 새로운 변수에 할당하는 선언도 가능
const {name: manName, age: manAge} ={
	name: "jae",
	age: 25,
	sex: "male"
};
console.log(manName,manAge)

// 만약 변수명이 같다면
const {name: name, age: age, sex:sex} ={
	name: "jae",
	age: 25,
	sex: "male"
};
console.log(name,age,sex)
// 아래와같이 생략가능
const {name, age, sex} ={
	name: "jae",
	age: 25,
	sex: "male"
};
console.log(name,age,sex)

 

배열에서도 적용이되는데

배열은 대신 키값대신 순서가 적용이 된다

const[first,secons, third] = [true, false, "hi"]
console.log(first,secons, third)

 

spread 연산자

//나머지연산
const[first, ...rest] = [true, false, "hi"]
console.log(first,rest)
first는 값으로 들어가고
나머지는 배열형태로 들어가게된다

//전개연산
const arr = [1, 2, 3]
const arr2 = [...arr, 4,5]
console.log(arr2);

객체에서도 적용가능

const {name:name2, ...rest2} ={
    name: "jae",
    age: 25,
    sex: "male",
}
console.log(name2, rest2);

아래와같이 전개연산자를 활용할수도있다

const {name:name2, ...rest2} ={
    name: "jae",
    age: 25,
    sex: "male",
}
console.log(name2, rest2);

console.log({
    ...rest2,
    height:174
})