본문 바로가기
프론트엔드/JavaScript

JS 데이터 - 구조 분해 할당

by step 1 2021. 5. 31.
반응형

구조 분해 할당: 배열, 객체데이터를 선언하고 그 배열에서 원하는 데이터를 뽑아서 선언하여 사용할 수 있는 방법

장점: 배열의 데이터 많은 경우, 그 중 필요한 데이터만 뽑아서 쓰는게 가능하다.

각 타입에 맞게 괄호를 입력해야 한다.(객체 데이터: { }, 배열: [ ])

객체데이터는 이름으로 추출하지만

배열데이터의 경우 순서대로 추출해야한다.

// 구조 분해 할당 (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