반응형
구조 분해 할당: 배열, 객체데이터를 선언하고 그 배열에서 원하는 데이터를 뽑아서 선언하여 사용할 수 있는 방법
장점: 배열의 데이터 많은 경우, 그 중 필요한 데이터만 뽑아서 쓰는게 가능하다.
각 타입에 맞게 괄호를 입력해야 한다.(객체 데이터: { }, 배열: [ ])
객체데이터는 이름으로 추출하지만
배열데이터의 경우 순서대로 추출해야한다.
// 구조 분해 할당 (Destructuring assignment)
// 비구조화 할당
const user = {
name: 'happy',
age: 43,
email: 'happy@naver.com'
}
// 배열의 원하는 데이터만 뽑아서 선언 할 수있다.
// const {name, age, email, address } = user
// 기본값 설정가능(기존값이 있을경우 재지정 불가) address='korea'
// 데이터 명칭을 사용자가 바꿔서 사용할 수 있음 name: happy
const {name: happy, age, email, address='korea' } = user
console.log(`사용자의 이름은 ${name} 입니다.`)
console.log(`${name}의 나이는 ${age}입니다`)
console.log(`${happy}의 이메일 주소는 ${user.email}입니다`)
console.log(address)
const fruits = ['Apple', 'Banana', 'Cherry']
const [a, b, c, d] = fruits
console.log(a, b, c, d)
순서대로 추출하기 때문에 이전 데이터가 존재한다면 공백으로 주고 쉼표(,) 를 앞에다가 붙여준다.
const fruits = ['Apple', 'Banana', 'Cherry']
// const [a, b, c, d] = fruits
// console.log(a, b, c, d)
// 원하는 데이터만 추출하는 방법
const [, b] = fruits
console.log(b)
반응형
'프론트엔드 > JavaScript' 카테고리의 다른 글
JS 데이터 - 불변성 (0) | 2021.06.01 |
---|---|
JS 데이터 - 전개 연산자 (Spread) (0) | 2021.05.31 |
JS 데이터 - 객체 (0) | 2021.05.31 |
JS데이터 - 배열 2 (0) | 2021.05.29 |
JS 데이터 - 배열 (0) | 2021.05.29 |