[JavaScript]Destructuring Assignment

M_yeon·2022년 10월 22일
0

javascript

목록 보기
13/15
post-thumbnail

Destructuring Assignment(구조분해 할당)

구조분해할당은 동시에 비구조화 할당이라고도 부릅니다.

const user= {
name: "smy",
age: 99,
email:"t@t.com"
}

const {name,age, address = "korea"} = user

console.log(`사용자의 이름은 ${name} 입니다;.`)
// 사용자의 이름은 smy 입니다.
console.log(`${name}의 나이는 ${age} 입니다.`)
// smy의 나이는 99 입니다.
console.log(`${name}의 이메일 주소는 ${user.email}입니다.`)
//smy의 이메일 주소는 t@t.com입니다.
//email은 구조분해 할당을 하지 않음으로 user.email이라고 선언해주어야 함
console.log(address)
//user 객체에도 원래 없었고 구조분해할당으로 가져올때 
// const {name, age, address} = user 였다면 undefined 였을것이다
//이를 방지하기 위해 초기값 address ="korea"라고 값이 없을때는 Koreark가 뜨게끔 설정 해주었다.

또한 name으로 설정되어 있지만 꺼내올때 이름을 변경하고자 한다면

이렇게도 선언이 가능하다 name이 아닌 heropy를 사용하겠다는 뜻

구조분해할때 데이터의 타입이 배열이면 배열로,객체면 객체로 가져와야한다.
배열데이터는 객체와는 다르게 순서대로 추출해야함.
그런데 4개의 데이터중 3번째꺼를 추출하고 싶다면

const style = ['a', 'b', 'c', 'd']
const [, , c] = style
// 이런식으로 사용하지 않는 변수는 삭제하되 , 쉼표는 지켜주어야한다는 자바스크립트 허용 문법입니다.

Rest 파라미터

우리가 특정 객체에서 지우고싶은 데이터가 있을 때 어떻게 할까요?

과연 delete사용해 원본 데이터를 삭제할까요?
사실 원본을 건드리는 일은 그리 바람직하지 못합니다.

원본이 어디서 어떻게 사용되고 있을 지 모르기 때문에 원본을 사용하는 곳에서 예상치 못한 에러를 직면하게 될 수 있습니다.

따라서 원본을 건들이지 않고 삭제하기 위해 rest 파라미터를 이용합니다.
rest 파라미터는 구조분해 할당과 함께 사용합니다.

const me = {
	name: "smy",
	age: 123,
	hobby: "개발",
	dream: "일잘딱깔센"
	}

// 구조분해 할당
const { name, hobby, ...rest } = child

이렇게 적으면 rest변수에는 name과 hobby를 제외한 모든게 들어가게 됩니다.

즉, rest를 호출하게 되면 name과 hobby를 제외한 프로퍼티가 담긴 객체가 호출되는 것 입니다.

따라서 rest 파라미터를 사용하게 되면, 삭제할 프로퍼티를 제외한 모든 데이터를 간편하게 골라낼 수 있습니다.

0개의 댓글