==
== 는 느슨한 같음(loose equality)으로 두 값이 같은지 비교합니다. 이때, 두 값을 공통 형(type)으로 암묵적으로 변환합니다. 암묵적 변환은 서로 다른 타입이면 Number 타입으로 변환하고 최종 같음 비교는 === 처럼 수행됩니다.
===
=== 는 엄격한 같음(strict equality)으로 두 값이 같은지 비교합니다. 이때, 형 변환은 일어나지 않고, 둘이 서로 다른 형이면, 둘은 같지 않다고 판단합니다.
관련 내용
== 는 암묵적 형변환이이 일어나는데, 암묵적 형변환이 일어날 것을 모두 기억하거나 예측하는 것이 어렵기 때문에, 의도하지 않은 결과를 얻게 될 가능성이 크고 이로 인해 오류 가능성이 커집니다. 따라서 동등함을 비교하기 위해서 === 를 사용하는 것이 좋습니다.
비교 연산 중에 ES6(ECMAScript 2015)에 추가된 Object.is 도 있습니다. +0, 0, NaN, 비교 이외에는 === 연산과 동일한 결과를 줍니다.
객체간 비교할 경우 객체 안의 내용이 같더라도 참조형이기 때문에 ==, ===, Object.is 로 비교하면 false로 판단합니다. 따라서 JSON.stringify 로 객체 안의 내용을 문자열로 변환한 후 비교 하거나 순서가 보장되지 않는 값이라면, 정렬 후 비교 합니다.
참고 자료
참고자료 1
자바스크립트 자료형
자바스크립트에서 값을 복사할 때, 자료형에 따라 복사하는 값이 달라집니다.
기본형(Primitive type)은 Number, String, Boolean, Null, Undefined, Symbol이 있고, 데이터 변경이 불가(immutable)합니다. 변수에 기본형을 할당하면 새로운 메모리 공간에 독립적인 실제값이 복사됩니다.
let x = 1;
let y = x;
x = 123
console.log(x) // 123을 출력
console.log(y) // 1을 출력 (y에 할당되었던 1이 변경되지 않음)참조형(Reference type)에는 Object(Array, Function, Map 등 기본형을 제외한 모든 것)가 있고, 데이터의 내용 변경이 가능(mutable)합니다. 변수에 참조형을 할당하면 해당 객체의 메모리 주소값이 복사됩니다.
let obj1 = {num: 1};
let obj2 = obj1;
obj1.num = 123
console.log(obj1) // {num: 123}을 출력
console.log(obj2) // {num: 123}을 출력 (obj2에 할당되었던 {num: 1}의 내용이 obj1을 따라 변경)obj2 가 obj1 객체의 메모리 주소값을 복사하기 때문에, obj1 의 값이 변경되면 obj2 도 동일한 메모리 주소에 있는 값을 가져 변경된 값을 갖게 됩니다.
기본형의 변수 할당
객체의 변수 할당
얕은 복사와 깊은 복사
위에서 살펴본 것처럼 자료형에 따라 값을 복사하는 방식이 다른데요. 실제값을 복사 하는 것을 깊은 복사, 객체의 메모리 주소값을 복사하는 것을 얕은 복사라고 합니다.
경우에 따라 참조형의 깊은 복사가 필요할 때가 있는데요. 깊은 복사가 된 참조형은 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어지게 됩니다.
얕은 복사, 깊은 복사
참조형의 깊은 복사
크게 세 가지 방법을 고려해 볼 수 있습니다.
JSON.parse(JSON.stringify(obj)) JSON.stringify() 는 객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어지고, 객체를 json 문자열로 변환 후, JSON.parse() 를 이용해 다시 원래 객체로 만들어 줍니다
가장 간편하다는 장점이 있습니다.
function이 있는 경우 undefined 처리한다는 단점, 다른 방법에 비해 느리다는 단점이 있습니다.
커스텀 재귀 함수를 활용한 복사
객체의 함수도 제대로 표현할 수 있습니다.
복잡하다는 단점이 있습니다.
Lodash와 같은 외부 라이브러리 활용
외부 라이브러리 사용에 제약이 없다면 가장 효과적인 선택지가 될 수 있습니다.
참고 자료
