TIL] Unit.9 원시자료형&참조자료형, 얕은복사&깊은복사 - 코드스테이츠

SEB_FE_45
Section.1 Unit.9  JavaScript 핵심 개요와 주요문법 1 - 코드스테이츠

---

1. 원시자료형과 참조자료형

구분	원시자료형	참조자료형
값(value)의 종류(type)	number, string, boolean, null, undefined, Symbol	배열(array), 객체(object), 함수(function)
변수 할당	메모리공간에 값 저장	메모리공간에 주소값 저장
다른 변수에 할당	원시값 자체가 복사됨	주소값이 복사됨
변경가능 여부	변경불가(immutable) 생성된 원시값은 읽기전용 값임	변경가능(mutable)한 값
복사	값 자체를 복사 (대체로 값의 크기가 일정하기 때문에 새로운 공간확보 및 복사 용이)	주소값을 복사 (값의 크기가 일정하지 않기 때문에 매번 값을 복사하면 효율성이 떨어짐)
	원본에 다른 값을 재할당하더라도 복사본에는 영향을 끼치지 않음	같은 주소를 가리키기 때문에 원본의 데이터가 변형되면 복사본의 데이터도 변형됨
	문자열의 경우 각 인덱스를 활용하여 문자열에 포함된 철자에 접근이 가능함. 단, 해당 요소를 수정할 수는 없음(immutable)	-
비고	1칸에 1값 저장	1칸에 여러 요소를 저장할 수 없기 때문에 JavaScript에서는 참조자료형은 주소값을 저장
	-	참조자료형의 데이터는 heap(힙) 이라는 공간에 저장됨

---

2. 참조자료형의 얕은복사(shallow copy)와 깊은(deep copy) 복사

구분	얕은 복사(shallow copy)	깊은 복사(deep copy)
개념	참조자료형 내부 중첩된 참조자료형은 한단계만 복사(가장 바깥쪽 참조자료형만)	참조자료형 내부 중첩된 모든 참조자료형 복사 단, JavaScript 내부적으로는 불가능하여 다른 문법 사용해야 가능함
방법	배열 복사 : 내장 매서드 slice(); array.slice(); : 원본과 같은 배열 복사 array.slice(0, 3); 배열 0번째요소부터 2번째요소까지 복사	SON.stringigy() 참조 자료형을 문자열로 변환 JSON.parse() 문자열 형태를 객체로 변환
	객체 복사 : Object.assign(); let obj1 = {a: 1, b: 2} let obj2 = Object.assign({ }, obj1) //  {a: 1, b: 2}
	ES6 도입된 spread 문법(spread syntax) 새로운 배열에 원본 배열을 펼쳐서 전달. 같은 요소를 가지며 다른 주소값을 참조하는 배열 생성 let arr = [1,2,3,4] console.log(...arr) // 1 2 3 4 let newArr = [...arr] slice() 와 spread syntax는 복사의 경우 기능적으로 동일	순서 1. 중첩된 참조자료형을 문자열로 변환     (JSON.stringify();) 2. 반환된 값을 다시 객체로 변환     (JSON.parse();) let arr = [1,2,3,4] let copy = JSON.parse(JSON.stringify(arr)); 예외상황) 중첩된 참조자료형 중 함수가 포함된 경우 null로 변경됨
비고	다른 주로를 참조하기 때문에 원본을 변형해도 복사본에 영향없음	해당 방법도 완벽한 깊은 복사 방법은 아님
	-	완전히 깊은 복사가 필요한 경우 node.js 환경에서 lodash 또는 ramda를 설치 const lodash = require('lodash') const arr = [1,2,[3,4]] const copy = lodash.cloneDeep(arr);