[💻 코드스테이츠 FE 44기] 부트캠프 - 원시/참조 자료형, 얕은/깊은 복사

✔️ 시작

원시 자료형, 참조 자료형의 종류와 특징에 대해 배웠으며 얕은 복사와 깊은 복사가 무엇인지 학습했다.

---

📍 원시 자료형(primitive date type)

• string, number, boolean, undefined, null과 같은 자료형
• 원시 값 자체를 복사

특징

• 원시 자료형을 변수에 할당할 경우 메모리 공간에 값 자체가 저장(복사)된다.(고정된 저장 공간 차지)
• 원시 자료형은 변경 불가능한 값(immutable value), 한 번 생성된 원지 자료형은 읽기 전용(read only) 데이터이다. (신뢰성을 가질 수 있는 요인)

let a = 1;
let b = a;
b = 2;

console.log(a); //1
console.log(b); //2

✔️ 가비지 콜렉터(garbage collector)

사용하지 않는 값을 자동으로 메모리에서 삭제한다.(어느 시점에서 삭제 되는지 알 수 없음)

📍 참조 자료형 (referrence date type)

• array, object와 같은 자료형
• 주소 값을 복사

특징

• 대량의 데이터를 다루기에 적합하다.
• 참조 값을 갖는 변수를 다른 변수에 할당할 경우 주소값이 복사된다.
• 참조 자료형은 변경이 가능한 값(mutable value)

let a = {id: 1};
let b = a;
b.id = 2;

console.log(a.id); //2
console.log(b.id); //2

예외 상황도 있다.
할당된 변수에 객체를 생성할 경우 다른 객체를 가지게 되어 a와 b의 값은 다르다.

let a = {id: 1};
let b = a;
b = {id: 2}; // 객체를 생성

console.log(a.id); //1
console.log(b.id); //2

✔️ 힙(heep)

참조 자료형을 저장하는 특별한 공간

✔️ 참조하다.(refer)

주소 값이 저장되어 있고, 그 주소 값을 통해 참조 자료형에 접근할 수 있다.

📍얕은 복사(shallow copy)

배열 복사 (slice(), spread)

✔️ slice() 메서드

원본 수정 없이 그대로 복사

let arr = [1,2,3];
let copyArr = arr.slice();
copyArr.push(4);

console.log(arr); //1,2,3
console.log(copyArr); //1,2,3,4

✔️ spread syntax (배열을 펼치다)

배열이 할당된 변수명 앞에 ...을 붙이면 된다.(ES6에서 새롭게 추가된 문법)

let arr = [1,2,3];
let copyArr = [...arr];
copyArr.push(4);

console.log(arr); //1,2,3
console.log(copyArr); //1,2,3,4

❗️ 동일한 값을 할당할 경우

각각 다른 주소를 참조하기 때문에 false가 나온다.

let a = [1,2,3];
let b = [1,2,3];
a === b // false

객체 복사 (Object.assign(), spread)

✔️Object.assign() 메서드

let obj = {a:1, b:2};
let copyObj = Object.assign({}, obj);
copyObj.c = 3;

console.log(obj); // {a: 1, b: 2}
console.log(copyObj); // {a: 1, b: 2, c: 3}

✔️spread syntax

let obj = {a:1, b:2};
let copyObj = {...obj};
copyObj.c = 3;

console.log(obj); // {a: 1, b: 2}
console.log(copyObj); // {a: 1, b: 2, c: 3}

❗️ 참조 자료형 내부에 참조 자료형이 중첩되어 있을 경우

slice, Object.assign, spread 사용해도 복사할 수 없다.
(참조 자료형은 몇 단계로 중첩되어 있어도 한 단계까지만 복사한다.)

let obj = {
	a: {id:1, value:2},
  	b: {id:3, value:4},
}
// obj 복사
// obj.a와 obj.b 는 동일한 주소 값을 참조한다.

📍깊은 복사(deep copy)

JSON.stringify(), JSON.parse()

✔️ JSON.stringify() 메서드

참조 자료형을 문자열 형태로 변환

✔️ JSON.parse() 메서드

문자열 형태를 객체로 변환

const arr = [1,2,3,[4]]
const copyArr = JSON.parse(JSON.stringify(arr));

1. JSON.stringify() 사용해 문자열 형태로 변환
2. 변환된 값에 JSON.parse()를 사용하면 깊은 복사와 같은 결과물을 만들 수 있다.

❗️ 중첩된 참조 자료형에 함수가 포함되어 있을 경우

JSON.stringify(), JSON.parse()를 이용할 경우 해당 함수는 null이 나온다.

✔️ 외부 라이브러리를 사용한다.

node.js 환경 외부 라이브러리 lodash, ramda를 사용한다.

const ladash = require("lodash");
const obj = {
	a : 1,
  	b : [1,2,3],
  	c : function(){
    	console.log("Hi");
    }
}
const copyObj = lodash.cloneDeep(obj);

---

✏️ 마치며

string, number, boolean, array, objecy 등 각 타입의 특징을 알고 있었지만 이번 학습을 통해 해당 타입들을 원시/참조 자료형으로 구분되지는 알게 되었다.

또한, 원시/참조 자료형의 특징을 같이 알게 되었고 어떠한 경우가 얕은 복사인지 깊은 복사인지, 어떤 메서드를 사용해야하는지 알게 되었다.