primitive type - object

---

📌 원시 데이터
: String, Number, Boolean, undefined, null

📌 참조형 데이터
: Object, Array, Function

🧸 원시 데이터 : Primitive Type

원시 값 (Primitive Type) 은 변경 불가능한 값, 읽기 전용 값이다.

🏷 데이터 불변성 - Immutability
: 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 값을 변경할 수 없다.

   |      1      |      4      |      7      |      

let a = 1;
let b = 4;
console.log(a,b, a === b) // 1 4 false

a = 7
console.log(a,b, a === b) // 7 4 false

✔️ a에 7을 할당하면서 새로운 메모리 주소를 가리킨다.

        |     1     |      4      |   

let a = 1;
let b = 4;

b = a
console.log(a,b, a === b) // 1 1 true

✔️ 원시 데이터는 내용이 일치하면 메모리 주소 또한 일치한다.
1에 대해 새로운 메모리 주소가 생성되는 것이 아닌, 기존의 1이 저장되어 있던 메모리 주소로 향한다.

🧸 참조형 데이터 : 객체 Object

참조형 데이터 는 변경 가능한 값으로, 재할당없이 프로퍼티를 동적으로 추가하거나 값을 갱신할 수 있으며 프로퍼티 자체를 삭제 가능하다.

🏷 가변성
: 참조형 데이터들은 새로운 값을 만들 때마다 새로운 메모리 주소를 할당.

        |    {k : 1}    |    {k : 1}     |   

let a = {k : 1};
let b = {k : 1};

console.log(a, b, a === b) // {k : 1} {k : 1} false

        |    {k : 7}    |    {k : 1}     |     

let a = {k : 1};
let b = {k : 1};

a.k = 7
b = a
console.log(a, b, a === b) // {k : 7} {k : 7} true

✔️ 같은 메모리 주소를 가리키게 되면 같은 값으로 나온다.

        |    {k : 2}    |    {k : 1}     |     

let a = {k : 1};
let b = {k : 1};

b = a
a.k = 2
console.log(a, b, a === b) // {k : 2} {k : 2} true

✔️ 같은 메모리 주소를 가지면 하나만 수정해도 값이 같이 변경.

🧸 얕은 복사 : Shallow Copy

const user = {
	name: 'Jiyoung',
	age: 26,
	emails: ['jiyoung990602@gmail.com']
}

const copyUser = user
console.log(copyUser === user) // true

user.age = 22

console.log('user',user) 
// {name: 'Jiyoung', age: 22, emails: ['jiyoung990602@gmail.com']}

console.log('copyUser',copyUser) 
// {name: 'Jiyoung', age: 22, emails: ['jiyoung990602@gmail.com']}

✔️ 의도치 않은 부분이 수정될 수 있는 위험성이 존재.
같은 메모리 주소를 바라보기 때문에, user 을 변경할 경우 copyUser도 함께 변경.

🏷 Object.assign : 대상 객체에 출처 객체를 복사.

const user = {
	name: 'Jiyoung',
	age: 26,
	emails: ['jiyoung990602@gmail.com']
}
const copyUser = Object.assign({}, user)
console.log(copyUser === user)

user.age = 22
user.emails.push('neo@zillinks.com')

console.log('user',user) 
// {name: 'Jiyoung', age: 22, emails: ['jiyoung990602@gmail.com'], 'neo@zillinks.com']}

console.log('copyUser',copyUser) 
// {name: 'Jiyoung', age: 26, emails: ['jiyoung990602@gmail.com'], 'neo@zillinks.com']}

✔️ user 데이터만 수정 가능. 내부 참조형 데이터는 복사 X.
emails 는 참조형 데이터인 Array에 해당하기 때문이다.

🏷 전개 연산자 : 객체를 새로 생성.

const user = {
	name: 'Jiyoung',
	age: 26,
	emails: ['jiyoung990602@gmail.com']
}
const copyUser = (...user)
console.log(copyUser === user)

user.age = 22
user.emails.push('neo@zillinks.com')

console.log('user',user) 
// {name: 'Jiyoung', age: 22, emails: ['jiyoung990602@gmail.com', 'neo@zillinks.com']}

console.log('copyUser',copyUser) 
// {name: 'Jiyoung', age: 26, emails: ['jiyoung990602@gmail.com', 'neo@zillinks.com']}

✔️ user 데이터만 수정 가능. 내부 참조형 데이터는 복사 X.
emails 는 참조형 데이터인 Array에 해당하기 때문이다.

🧸 깊은 복사 : Deep Copy

🏷 cloneDeep _lodash : 재귀적으로 복사하는 메소드.

import _ from 'lodash'

const user = {
	name: 'Jiyoung',
	age: 26,
	emails: ['jiyoung990602@gmail.com']
}
const copyUser = _.cloneDeep(user)
console.log(copyUser === user)

user.age = 22
user.emails.push('neo@zillinks.com')

console.log('user',user) 
// {name: 'Jiyoung', age: 22, emails: ['jiyoung990602@gmail.com', 'neo@zillinks.com']}

console.log('copyUser',copyUser) 
// {name: 'Jiyoung', age: 26, emails: ['jiyoung990602@gmail.com']}

✔️ 내부에 있는 참조형 데이터까지 깊은 복사 가능.
참조형 데이터 내부에 또 다른 참조형 데이터가 존재할 경우, 깊은 복사하는 것을 고려할 필요가 있다.