JS 데이터 (2)

5. 구조 분해 할당 = 비구조화 할당 (Destructuring assignment)

const user = {
  name: 'Loopy',
  age: 10,
  email: 'z_zzz7@naver.com'
}
const {name, age, email} = user

• name, age, email 각 변수에 객체 구조 분해 할당 받아 값 저장
• const name = user.name const name = user['name'] 과 동일
• const {name, age, email, address='Korea'} = user 객체 내 없을 경우 대비해 기본값 지정 가능 (값이 존재하면 기본값은 무시됨)
• const {name: loopy, age, email} = user key 이름인 name 대신 loopy라는 이름으로 사용 가능 (앞으로 name은 사용 불가)
  - 배열 데이터에서도 구조분해할당 가능 -> {중괄호} 대신 [대괄호] 사용, key 없으므로 순서 중요
• 추출할 필요 없으면 const [, ,c] = arr1 쉼표는 지우면 안돼요

6. 전개 연산자(Spread)

arr1 = ['A', 'B', 'C']
function toObject(a, b, c){
  return {
    a: a,
    b: b,
    c: c
  }
}

• 화살표 함수로 const toObject (a, b, c) => ({a, b, c})
• console.log(toObject(...arr1)) ...arr1은 arr1의 요소를 쉼표로 구분해 모두 전개
• 매개변수에 ..a 사용할 경우 나머지 인수를 모두 받는 역할(rest parameter)

7. 불변성(Immutability)

• 원시 데이터: String, Number, Boolean, undefined, null
• 참조형 데이터: Object, Array, Function
• 원시 데이터는 메모리에 이미 같은 데이터 존재하면 해당 기존 주소를 가리키게 됨(새로 저장X) -> 원시데이터는 불변성을 가짐 -> 일치연산자 사용 시 메모리 주소 신경 쓸 필요X
• 참조형 데이터는 구조가 같아도 참조하는 메모리 다를 수 있으므로 일치연산자 사용 시 주의 필요
• 참조형 데이터에서 b=a의 경우 같은 주소 참조하므로 둘 중 하나가 변하면 나머지 하나도 자동으로 변하는 효과
  👉🏻 참조형 데이터는 할당연산자 주의하여 사용해야 함!

8. 얕은 복사(Shallow copy)와 깊은 복사(Deep copy)

1) 얕은 복사: 객체 안의 객체 중 하나 이상이 원본 객체를 참조

const copyUser = Object.assign({},user)
// const copyUser = {...user} 둘 다 얕은 복사
console.log(user===copyUser) // false
user.emails.push('z_zzz7@naver.com') // user, copyUSer 양쪽에 동시 삽입
console.log(user.emails===copyUser.emails) // true (같은 메모리 주소 공유)

2) 깊은 복사: 객체 안에 객체까지 원본과의 참조가 완전히 단절
$ npm i lodash $ npm run dev

import _ from 'lodash'
const copyUser = _.cloneDeep(user) // 깊은 복사
user.emails.push('z_zzz7@naver.com') // user에만 삽입

👉🏻🌟 참조형 데이터 내부에 참조형 데이터가 다시 존재할 때에는 깊은 복사 사용하는게 안전! (lodash 활용)