[04.27] 참조 자료형

NellaFantaJia's TechLog👩🏻‍💻·2023년 6월 15일

JavaScript TIL 객체 배열 원시자료형 참조자료형

📌 원시 자료형과 참조 자료형

: 자료형이란 값의 종류/ 각각의 고유한 속성과 메서드를 소유

원시 자료형 (Primitice type)

종류 : number, stirng, boolean, undefined, null
특징
- 변수에 할당하면 메모리 공간에 값 자체가 저장
- 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값자체가 복사되어 전달
- 변경 불가능한 값 (immutable value) / 한 번 생성된 원시 자료형은 읽기 전용
  → str에 다른 문자열으 재할당하면 새로운 공간을 확보하고 그 공간의 이름이 str이 됨
  ex) 배경화면에 바로가기 파일을 만들고 수정한다고, 원본이 수정되지 않는 방식

참조 자료형 (Reference type)

종류 : 배열, 객체
특징
- 변수에 할당하면 메모리 공간에 값 자체가 저장
  - 특별한 저장 공간(heap)에 참조 자료형을 저장한 후, 그 저장공간을 참조할 수 있는 주소값을 변수에 저장
  - 예를 들어, 배열이라고 가정을 해보았을때 배열 자체를 저장을 할 수 없음/ 그렇다고 배열 각 요소를 할당해서 하나씩 저장할 수도 없음!
    → heap이라는 저장공간에 참조할 수 있는 주소값을 변수에 저장
- 참조 값을 갖는 변수를 다른 변수에 할당하면 주소값이 복사되어 전달
- 변경 가능한 값 (mutable value)

📌 얕은 복사와 깊은 복사

➡️ 대부분의 복사는 얕은 복사다. Javascript 내부적으로는 깊은 복사를 수행할 수 없음

얕은 복사

원시 자료형
: 할당한 변수를 다른 변수에 할당하면 값 자체의 복사가 됨
값 자체가 복사된다고 해서 하나의 값을 변경하더라도 어떤 영향을 끼치지 않음

let num = 5;
let copiedNum = num;
console.log(num); // 5
console.log(copiedNum); // 5
console.log(num === copiedNum); // true 

copiedNum = 6;
console.log(num); // 5
console.log(copiedNum); // 6
console.log(num === copiedNum); // false

참조 자료형
: 임의의 저장공간에 값을 저장하고 그 저장공간을 참조하는 주소를 메모리에 저장하기 때문에 다른 변수에 할당할 경우 값 자체가 아닌 메모리에 저장되어 있는 주소가 복사됨
-> 둘 중 하나를 변경하면 해당 변수가 참조하고 있는 주소에 있는 값이 변경되기 때문에 다른 하나에도 영향을 미침
```
let arr = [0, 1, 2, 3];
let copiedArr = arr;

console.log(arr); // [0, 1, 2, 3]
console.log(copiedArr); // [0, 1, 2, 3]
console.log(arr === copiedArr) // true
```
```
copiedArr.push(4);

console.log(arr); // [0, 1, 2, 3, 4]
console.log(copiedArr); // [0, 1, 2, 3, 4]
console.log(arr === copiedArr) // true
```

깊은 복사

: Javascript 내부적으로는 깊은 복사를 구현할 수 없으며, 완전히 깊은 복사를 해야 하는 경우라면 node.js 환경에서 외부 라이브러리인 lodash, ramda를 설치해서 사용하면 됨

📌 배열과 객체 복사하기

배열 복사하기

slice ()
→ 주소가 다르기 때문에 복사한 배열에 요소를 추가해도 원본 배열에 추가 되지 않음

let arr = [0, 1, 2, 3];
let copiedArr = arr.slice();
console.log(copiedArr); // [0, 1, 2, 3]
console.log(arr === copiedArr); // false

spread syntax
: spread의 단어 뜻처럼 배열을 펼치 수 있음/ 변수명 앞에 […] 붙여주면 됨
-> 새로운 배열안에 원본 배열을 펼쳐서 전달해도 서로가 다른 주소를 참조하기 때문에 다름
```
let arr = [0, 1, 2, 3];
console.log(...arr); // 0 1 2 3

let arr = [0, 1, 2, 3];
let copiedArr = [...arr];
console.log(copiedArr); // [0, 1, 2, 3]
console.log(arr === copiedArr); // false
```

객체 복사하기

Object.assign () : 객체를 복사하기 위해 사용

let obj = { firstName: "coding", lastName: "kim" };
let copiedObj = Object.assign({}, obj);

console.log(copiedObj) // { firstName: "coding", lastName: "kim" }
console.log(obj === copiedObj) // false

spread syntax : 배열뿐 아니라 객체도 복사 가능
단, 참조 자료형 내부에 참조 자료형이 중첩된 구조는 복사 x → 한단계 까지만 복사가능
```
let obj = { firstName: "coding", lastName: "kim" };
let copiedObj = {...obj};
console.log(copiedObj) // { firstName: "coding", lastName: "kim" }
console.log(obj === copiedObj) // false
```
1단계까지만 복사가 되고 1단계 안에 있는 주소값들은 동일한 곳에서 가져온다!!
⇒ 그래서 use와 copiedUsers의 0번째 요소를 각각 비교하면 true가 반환이 된다!