• 자바스크립트에서 == 와 === 가 어떻게 다른지 설명해 주세요.
• 자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요.

동등 연산자와 일치 연산자

동등 연산자(==)는 피연산자의 값만 비교한다.
반면에 일치 연산자(===)는 피연산자의 값뿐만 아니라 데이터형도 비교한다.

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

falsy & truthy

값만 비교한다는 동등 연산자를 제대로 이해하기 위해서는 true의 의미를 가진 truthy과 false의 의미를 가진 falsy를 알 필요가 있다.

• truthy인 값(참 같은 값)이란 Boolean(불리언) 문맥에서 true로 평가되는 값이다.
  • truthy인 값은 falsy인 값보다 많기 때문에 비교적 적은 falsy를 외우는 게 좋다.
• falsy인 값(거짓 같은 값)은 Boolean 문맥에서 false로 평가되는 값이다.
  • false
  • 0
  • 빈 문자열
  • null
  • undefined
  • NaN
    ...

null vs undefined

둘 다 falsy한 값인 null과 undefined를 일치 연산자로 비교하면 어떻게 될까요?

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

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

값만 비교하는 동등 연산자와 달리 값과 자료형을 비교하는 일치 연산자에서는
null과 undefined는 데이터형이 다르기 때문에 false가 뜬다.

얕은 복사와 깊은 복사

객체는 데이터형 중 참조형에 해당한다.
참조형은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킨다.
그렇기 때문에 객체를 복사하는 방법은 두 가지로 얕은 복사와 깊은 복사가 있다.

• 얕은 복사는 객체의 참조값(주소값)을 복사한다.
• 반면에 깊은 복사는 객체의 실제값을 복사한다.

얕은 복사 방법

• Object.assign()
• 전개연산자

Object.assign()

Object.assign(타겟 객체, 출처 객체)

Object.assign() 메서드는 타겟 객체의 속성 중 출처 객체와 동일한 키를 갖는 속성의 경우,
그 속성 값은 출처 객체의 속성 값으로 덮어씁니다.
출처 객체들의 속성 중에서도 키가 겹칠 경우 뒤쪽 객체의 속성 값이 앞쪽 객체의 속성 값보다 우선합니다.

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = Object.assign({}, obj);

copiedObj.b.c = 3

obj === copiedObj // false
obj.b.c === copiedObj.b.c // true

전개 연산자

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = {...obj}

copiedObj.b.c = 3

obj === copiedObj // false
obj.b.c === copiedObj.b.c // true

깊은 복사 방법

깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.

• 재귀함수를 이용한 복사
• JSON.parse() && JSON.stringfy()
• lodash 라이브러리 사용

재귀함수를 이용한 복사

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

function copyObj(obj) {
  const result = {};

  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      result[key] = copyObj(obj[key]);
    } else {
      result[key] = obj[key];
    }
  }

  return result;
}

const copiedObj = copyObj(obj);

copiedObj.b.c = 3

obj.b.c === copiedObj.b.c //false 

JSON 메소드를 이용한 복사

• JSON.stringify()는 객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어진다.

• 객체를 json 문자열로 변환 후, JSON.parse()를 이용해 다시 원래 객체(자바스크립트 객체)로 만들어준다.

이 방법이 가장 간단하고 쉽지만 다른 방법에 비해 느리다는 것과
객체가 function일 경우, undefined로 처리한다는 것이 단점이다.

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = JSON.parse(JSON.stringify(obj));

copiedObj.b.c = 3

obj.b.c === copiedObj.b.c //false 

lodash 라이브러리를 이용한 복사

라이브러리를 사용하면 더 쉽고 안전하게 깊은 복사를 할 수 있다.
lodash에서 깊은 복사를 위해 _.cloneDeep()을 사용한다.

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = _.cloneDeep(obj);

copiedObj.b.c = 3

obj.b.c === copiedObj.b.c //false