자바스크립트 메모

자바스크립트에서 == 와 === 가 어떻게 다른지?

==는 Equal Operator이고, ===는 Strict Equal Operator이다.

Equal Operator

==는 a==b라고 할 때, 같은지 아닌지를 비교하여 같으면 true, 다르면 false라 한다. 그냥 값만 같으면 true라는 것.

Strict Equal Operator

"엄격하게"같음을 비교할 때 사용하는 연산자이다. ===는 a===b라 할 때, 데이터 타입도 같은지를 비교해 같으면 true, 다르면 false라고 한다.

예시

let a = 1;
let b = '1';
console.log(a == b) //true
console.log(a === b) //false
---------------------------------
console.log(null==undefined) //true
console.log(null===undefined) //false

a, b는 둘 다 값이 1로 같지만, 하나는 숫자, 하나는 문자열이므로 ===에서는 false가 출력된다.
Null과 undefined 또한 값이 없다는걸로 공통점이 있지만, 값의 종류가 다르므로 ===에서는 false.

얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

Shallow Copy

얕은 복사는 참조값의 복사를 나타낸다.

const obj = {a: 1};
const copyObj = obj;

copyObj.a = 2;

console.log(obj.a); // 2
console.log(obj === copyObj); //true

obj라는 객체를 copyObj.a값을 변경하였더니 기준의 obj.a값도 같이 변경되었다. 마찬가지로 두 객체를 비교해봐도 true가 나온다. 이렇게 자바스크립트의 참조 타입은 Shallow Copy가 된다고 볼 수 있으며, 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값을 전달하여 한 데이터를 공유하는 것이다.

Deep Copy

깊은 복사는 얕은 복사처럼 참조값이 복사되는것이 아니라, 값만 복사되는 것을 의미한다.

Spread 연산자를 통한 복사

객체, 배열을 복사하여 새로운 객체, 배열을 만드는 깊은 복사 방법. 이는 Object.assign()메소드와 같이 객체 안의 객체는 앝은 복사가 된다는 점이 동일.

const obj = {
	a: 1,
};

let copy = {...obj};

console.log(obj === copy);//false

깊은 복사가 이루어져 console 결과는 false

Object.assign()메소드를 통한 복사

객체를 병합하는 메소드이다.

Object.assign(target, ...sources);

• target : 병합 결과를 저장할 대상 객체
• sources : 병합할 하나 이상의 소스 객체

소스 객체의 속성을 대상 객체로 복사한다. 소스 객체는 여러 개가 될 수 있고, 순서에 따라 대상 객체의 속성이 덮어씌워질 수 있다.

const obj = {
	a: 1,
};

let copy = Object.assign({}, obj);

console.log(obj === copy); //false

copy값을 바꿔도 더 이상 obj에 영향을 주지 않는다.

하지만! 객체 안의 객체는 얕은 복사가 이루어진다. (???)

const obj = {
	A: {
    	a: 1,
    },
    B: 2,
};

let copy = Object.assign({}, obj);
copy.B = 3;

console.log(obj === copy); //false

copy.A.a = 4;

console.log(obj.A === copy.A, obj.A.a, copy.A.a)//true 4 4

copy는 마치 깊은복사가 이뤄진 것 같지만, A와 같은 객체 안의 객체는 '얕은 복사'가 이루어졌다. 따라서, 객체 안에 또 다른 객체가 있는 경우 깊은 복사를 원할 땐 적절하지 않은 방법이다.

JSON.parse(), JSON.stringify()

이 방법은 객체 안의 또 다른 객체까지 전부 깊은 복사가 이루어진다.

다음은 사용 방법이다.

const obj = {
  A: {
    a: 1,
  },
  B: 2,
};

let copy = JSON.parse(JSON.stringify(obj));

copy.A.a = 4;

console.log(obj.A); // { a: 1 }
console.log(copy.A); // { a: 4 }
console.log(obj.A === copy.A);

Object.assing() 메소드와 spread 문법과 다르게 모든 것이 깊은 복사가 되었다.

따라서, 특별한 경우가 아니라면 이 방법을 통해 깊은 복사하는 것을 추천한다.