[JavaScript] 자바스크립트 타입 , 얕은 비교 / 깊은 비교

자바스크립트 타입

1. 원시 타입 : 불리언(Boolean), 문자열(String), 숫자(Number, BigInt), null, undefined, Symbol (불변성을 가지고 있다.)

  원시 타입 데이터는 변수에 할달될 때 메모리에 고정된 크기로 스택 영역에 저장되고 해당 변수는 값을 보관한다.

  또한, 원시 타입 자료형은 변수 선언, 초기화, 할당 시 값이 저장된 메모리 영역에 직접적으로 접근한다..

  즉 변수에 새 값이 할당될 떄 변수에 할당된 메모리 블록에 저장된 값을 변경한다는 뜻이다.

 

  원시타입은 값 자체를 복사하기 때문에 원본이 바뀌더라도 복사한 값에는 영향을 주지 않는다.

 

2. 참조 타입 : 객체(Object), 배열(Array), 함수(function)

  참조타입은 변수에 할당될 때 값이 직접 저장되는 것이 아니라, 변수의 값이 저장된 Heap 메모리 주소의 값을 저장한다

  변수의 값이 저장된 Heap의 주소를 가지고 있기 때문에, 변수가 가지고있는 주소를 이용해 접근한다

arr2는 arr의 주소값을 저장했다.

즉 [1,2,3] 이라는 배열의 값이 저장된 Heap 메모리의 주소값을 통해 arr과 arr2는 접근을 하는것이가

그러므로 arr === arr2는 true이다.

그리고 같은 주소를 가지고 있는 상태에서 push로 값을 추가하면

arr과 arr2는 둘다 같은 곳을 참조하기 console.log 에도 같이 값이 변경이 된다.

https://res.cloudinary.com/practicaldev/image/fetch/s--Cdrwvc8c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltgf2mtzxtlb3hcyann0.png

얕은 비교란?

숫자, 문자열 등 원시 타입은 값을 비교합니다.
배열, 객체 등 참조 타입은 값 혹은 속성을 비교하지 않고, 참조되는 위치를 비교합니다.

첫번째는 원시 타입들끼리 값을 비교해 1 === 1 은 true가 나왔습니다.

 

두번째는 참조 자료형들의 비교입니다.

참조 자료형들은 값, 속성이 아닌 참조되는 위치(주소)를 비교합니다.

속성이나 값은 같을지언정, 각각 Heap에 저장된 장소가 다르기 때문에 false가 나옵니다

 

깊은 비교란?

얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교합니다

1. Object depth가 깊지 않은 경우 JSON.stringify 사용

2. Object depth가 깊은 경우 : lodash 라이브러리의 isEqual() 사용