==와 ===의 차이

==는 동등 연산자라고 하고 비교하는 두 값이 같기하면 하면 타입이 달라도 같다고 판단을 한다.

===는 일치 연산자라고 하며 비교하는 두 값의 값과, 데이터 타입까지 모두 동일 해야 같다고 판단 한다.

console.log('7' == 7) // true
console.log('7' === 7) // false

이런식으로 데이터 타입이 달라도 동등 연산자는 true를 출력하게 되고,
일치 연산자는 false를 출력하게 된다.

console.log(0 == false) // true
console.log(0 === false) // false

0 값은 falsy한 값이니까 첫번째 콘솔로그는 true를 출력하고,
일치 연산자에서 데이터 타입이 다른것끼리 비교하니까 0이 falsy한 값이어도

null과 undefined를 비교하면 어떻게 될까?

console.log(null == undefined) // true
console.log(null === undefined) // false

첫번째 케이스는 자바스크립트의 자동유형변화 때문에 true가 출력되고,
두번째 케이스는 일치 연산자는 데이터 타입까지 같아야 하기 때문에 false가 출력된다.

그럼 NaN은?

알아 두어야 할 것은 "NaN는 그 어떤 값과도 동일하지 않다는 점"을 기억해두면 된다.

---

Shallow Copy와 Deep Copy의 차이.

Shallow Copy란?

Shallow Copy는 얕은 복사를 뜻하며, 객체나 배열같이 참조형 데이터들을 변수에 직접 할당할 때 나타난다.

let obj1 = { a:1, b:1 };
let obj2 = obj1
console.log(obj1 === obj2) // true

이렇게 참조형 데이터를 변수에 직접 꽂아버리면 obj2는 obj1의 값이 저장된 메모리상의 주소값을 복사하게 된다. 따라서 obj2의 속성을 수정하고, obj1을 출력해보면 obj1의 속성도 같이 변화 하는것을 알 수 있다.

obj2.a = 100
console.log(obj1.a) // 100

Deep Copy란?

Deep copy는 깊은 복사라는 뜻이며, 객체나, 배열 안에 들어있는 프로퍼티나 원소들을 따로 빼서 새로운 객체나 배열 안에 넣어서 복사하는것이 Deep Copy이다.

그거 어떻게 하는건데?

방법 1 spread 연산자 사용하기.

let obj1 = { a:1, b:1 };
let obj2 = { ...obj1 };
console.log(obj1 === obj2) // false

이렇게 spread 연산자로 obj1의 프로퍼티만 가져와서 새로운 객체 obj2에 할당해주면 둘은 서로 다른 주소를 가지게 된다.

방법 2 Object.assign() 메서드 사용하기.

let obj1 = { a:1, b:1 };
let obj2 = Object.assign( {}, obj1 );
console.log(obj1 === obj2) // false;

이런식으로 Object.assign( target, source )로 빈 객체에 obj1의 프로퍼티들을 담아서 obj2에 넣어줬으니 이 둘은 서로 다른 주소를 가지게 되고 Deep Copy가 된 것이다.

But! 위의 두 방법은 depth 1까지만 deep copy가 진행 된 것이다.
"뭔데 depth도 있었다고 ? "

만약에 객체 안의 프로퍼티가 객체라면 어떡할래 ? 이럴때 depth가 2로 증가하는것...

let obj1 = { a: { x:1, y:1 }, b: 1 };
let obj2 = { ...obj1, a: {...obj1.a} };
obj1.a.x = 100;
console.log(obj1 === obj2) // false
console.log(obj2.a.x) // 1;

이런식으로 참조형 데이터 안에 있는 참조형 데이터의 주소를 복사할 수도 있으니까, 저것도 풀어서 가져와야함... 만약 depth가 1 보다 큰 데이터를 deep copy할 때는 주의할 것.

❗️ 완벽한 Deep copy를 위한 다른 방법

• 재귀적으로 깊은 복사를 수행
• Lodash의 cloneDeep 함수 사용
• JSON.parse()와 JSON.stringify()함수 사용