[Javascript] 구조 분해 할당(배열,객체) / 전개 연산자 / 데이터 불변성 / 얕은복사와 깊은 복사 (lodash deepClone)

• 구조 분해 할당 - 객체 / 배열의 구조 분해 할당

console.group('@ 객체의 구조 분해 할당')
// 구조분해해서 원하는 데이터만 사용할 수 있음
const { name: me, age, email, address = 'Korea' } = user
console.log(`이름은 ${name}입니다.`)
console.log(`${me}의 이름은 ${age}살이며`)      //me라는 이름으로 대체해서 가져올 수 있다. 그럼 name이란 변수는 사용할수없음!
console.log(`${address} 에 거주중입니다.`)      //구조분해할당시 default 값 지정할 수 있다 !
console.log(`문의사항이 있다면 -> ${email}`)
console.log(user.name  === `${name}`)   // true !
console.groupEnd()

console.group('@ 배열의 구조 분해 할당')
const fruits = ['Apple', 'Banana', 'Cherry']
const [ a, b, c, d ] = fruits
console.log(a, b, c, d)   // Apple Banana Cherry undefined
const [, , x ] = fruits   // 건너뛰어서 추출
console.log(x)            // 3번째 데이터 출력

 

 

• 전개 연산자 Spread : 문자열로 전개하여 출력

console.group('@ 전개 연산자 Spread ')

console.log(fruits)     // 배열로 출력
console.log(...fruits)  // 문자열로 전개해서 출력

function toObject(a,b,c) {
  return {
    a: a,
    b: b,
    c: c
  }
}
console.log(toObject(...fruits))    //{ a:'apple', b:'banana' , ...}
console.log(toObject(fruits[0], fruits[1], fruits[2]))    // 위와 동일

fruits.push('Orange')
const toObject2 = (a,b, ...c) => ({a,b,c})
console.log(toObject2(...fruits))   // Cherry와 Orange가 c에 묶여 Array로 출력됨
console.groupEnd()

 

• 데이터 불변성 Immutability

// 원시 데이터 : String, number, Boolean, undefined, null, ...
// 참조형 데이터 : Object, Array, Function

console.group('@ 데이터 불변성')
let aa = 1; let bb = 4;
console.log(aa, bb, aa === bb)    // 1 4 false  메모리가 다른곳에 할당
bb = aa
console.log(aa, bb, aa === bb)    // 1 1 true   메모리의 주소가 동일
aa = 7
console.log(aa, bb, aa === bb)    // 7 1 false
let cc = 1
console.log(bb, cc, bb === cc)    // 1 1 true
console.groupEnd()

// 얕은 복사 : 겉 표면만 복사
// 깊은 복사 : 내부의 모든 참조 관계까지 새로 복사

// 참조형 데이터 관리 할 때 bb = aa와 같은 할당연산자를 쓰는것은 문제를 발생 시킬 수 있으므로
// 일반적으로는 복사라는 개념으로 aa와 bb를 분리해주어야한다.

 

• 얕은복사와 깊은복사

console.group('@ 얕은 복사 / 깊은 복사')
// const copyUser = user
// console.log(copyUser === user)    //true

// user.age = 22
// console.log('user', user)           
// console.log('copyUser ', copyUser)
// user의 age만 변경했을 뿐인데 copyUser의 age도 22로 변경이 된다.
// 가리키고 있는 값이 똑같기 때문!!

// 얕은 복사 :  
const copyUser2 = Object.assign({}, user)
console.log(copyUser2)
console.log(copyUser2 === user) // false 

const copyUser3 = {...user}
console.log(copyUser3)
console.log(copyUser3 === user) // false 

user.emails.push('solyi@choi.com')
console.log(user.emails === copyUser3.emails)   //true
//복사한적 없지만 emails 같은 메모리 주소를 공유한다.
// 그래서 깊은 복사를 해야함!!!

// 깊은 복사 : 참조형 데이터 내부에서 또 참조형 데이터가 사용될 경우에 꼭 깊은 복사
// JS 만으로는 구현이 어렵기 때문에 lodash를 추가 설치 해주어야 한다.
// 상단에 import _ from 'lodash'

const copyUser4 = _.cloneDeep(user)   //lodash를 이용한 깊은 복제
console.log(copyUser4 === user)       //값이 다름

// console error .. .
// Uncaught SyntaxError: Cannot use import statement outside a module

// https://lodash.com/docs/4.17.15

// 재귀? 하나의 데이터 안에서 반복적으로 실행되는것
// 반복실행 하면서 모두 복사한다