JS 데이터. 구조 분해 할당 [패스트캠퍼스 챌린지 07일차]

Destructuring assignment
비구조화 할당이라고도 함

객체 데이터와 구조 분해 할당

• 구조 분해 할당의 좋은 점?

  속성이 많을 경우 속성을 모두 다 꺼내 올 필요 없이 필요한 것들만 꺼내서 사용할 수 있음

const user = {
  name: 'Heropy',
  age: 85,
  email: 'thesecon@gmail.com'
}
const {name, age, address } = user // 변수 자리에 왜 객체 데이터가 들어와 있죠?
// user 라는 객체 데이터의 구조를 분해해서 원하는 속성들만 꺼내서 사용
//위의 방식은 user.address 요런 것과 동일
// user['age'] 이런 식의 인덱싱 방법도 있쥬

console.log(`사용자의 이름은 ${name}입니다.`)
console.log(`${name}의 나이는 ${age}세입니다.`)

console.log(`${name}의 이메일 주소는 ${email}입니다.`) // email이 defined 안됐다며 에러 뜸. 
console.log(address) // undefined
//정의되어있지 않은 속성들은 꺼내온다고 해도 값이 없음 undefined

변수 지정 안 했을 떄

const user = {
  name: 'Heropy',
  age: 85,
  email: 'thesecon@gmail.com'
}
// 여기 email 작성 안함
const {name, age, address } = user 
// user.email
console.log(`${name}의 이메일 주소는 ${user.email}입니다.`) 

속성 값이 없을 때

- 기본값을 주자

    여러 복잡한 코드에 의해 user의 객체가 언제 어떻게 바뀔지 모름

    address가 원래는 어떤 데이터를 가지고 있었을 수도 있는데 지금은 없는 상태라 undefied 출력됨

    ....일단 address라는 변수 부분에 기본값을 지정해줘보자

const user = {
  name: 'Heropy',
  age: 85,
  email: 'thesecon@gmail.com'
}
// address에 기본값을 줘보자
const {name, age, address: 'Korea' } = user 

console.log(address) // Korea

근데 만약에 user 객체 데이터에 속성값이 생기면?? 지정해준 기본값은 무시된다

const user = {
  address: 'USA'
}
// '코리아'라는 지정값은 무시
const {name, age, address = 'Korea'} = user 

console.log(address) // USA

변수 이름이 맘에 안들면 어떡하죠

const user = {
  name: 'Heropy',
  age: 85,
  email: 'thesecon@gmail.com'
}
// 여기에 name이라는 변수 이름이 맘에 안들어서 활용할 때는 test란 이름으로 다시 할당받아서 사용 
const {name, age, address } = user 
const test = name
//name->test로 바꿨을 때도 출력 잘 됨
console.log(`사용자의 이름은 ${test}입니다.`)
console.log(`${test}의 나이는 ${age}세입니다.`)
console.log(`${test}의 이메일 주소는 ${email}입니다.`)

근데 구조분해할당의 문법에 의해서는 위에 것처럼 작성할 필요 없음

- 설명

    user라는 객체 데이터에서 속성의 이름으로 데이터를 꺼내올 때 그 속성의 이름이 맘에 들지 않으면?

    꺼내오는 건 그 속성 이름으로 하고, 

    밑에서 변수로 활용할 때는 다른 이름을 활용

    아래 예시처럼 : 콜론 기호를 사용해서 변수 이름을 명시해 줄 수 있음

 const {name: test} = user
'꺼내온 name 값을 test라는 이름으로 활용하겠다'라고 선언하는 거임

const {name: test, age, address } = user 
//이때 콘솔 로그에 name이란 단어를 쓰면 에러 뜸. 
console.log(name) //레퍼런스 에러. name is not defined

/*
즉 const {name: test} = user
'꺼내온 name속성의 값을 test라는 이름으로 활용하겠다'라고 선언하는 거임
여기에서의 name은 꺼내오는 용도이고 그 꺼내온 내용을 test라는 변수로 만든 거
그래서 name이라는 변수는 존재하지 않는 거임
*/

---

배열 데이터와 구조 분해 할당

대괄호 사용에 주의

const fruits = ['Apple', 'Banana', 'Cherry']
const [a, b, c, d] = fruits // 중괄호가 아닌 대괄호 사용에 주의

// 배열 데이터는 객체데이터처럼 이름으로 구조분해하는 게 아니라 순서대로 꺼내짐
console.log(a, b, c, d) // Apple Banana Cherry undefined

만약 구조분해문법으로 두번째 자리에 있는 바나나만 추출하고 싶으면?

const fruits = ['Apple', 'Banana', 'Cherry']

const [, b] = fruits // 순서를 명확하게 지켜주기 위해 쉼표 남겨주기

console.log(b)// Banana

체리를 출력하고 싶음?

const fruits = ['Apple', 'Banana', 'Cherry']

const [, , b]

console.log(b) // Cherry

---

커피 한사발...
https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online