얕은 비교, 깊은 비교

'얕은 비교(shallow comparison)'와 '깊은 비교(deep comparison)'는 프로그래밍에서 두 값(특히 객체나 배열과 같은 복잡한 자료형)이 같은지 비교하는 방식의 차이를 나타낸다.

1. 얕은 비교 (Shallow Comparison)

• 정의: 두 값의 메모리 주소를 비교한다.
• 동작 방식:
  • 원시 자료형(숫자, 문자열, 불리언 등)의 경우, 실제 값을 비교한다.
  • 객체나 배열과 같은 참조 자료형의 경우, 메모리 주소(참조)가 같은지 비교한다. 즉, 두 변수가 같은 객체를 가리키는지 확인한다.
• 특징:
  • 비교 속도가 빠르다.
  • 객체나 배열의 내부 값은 비교하지 않는다.
  • 두 객체의 내부 값이 같더라도 메모리 주소가 다르면 다르다고 판단한다.
• 사용 예시: JavaScript에서 '===' 연산자나 Object.is() 메서드를 사용하여 객체를 비교할 때 얕은 비교가 수행된다.

const obj1 = { a: 1, b: 2 };
const obj2 = obj1; // obj1과 obj2는 같은 객체를 참조

console.log(obj1 === obj2); // true (같은 객체를 참조하므로)

const obj3 = { a: 1, b: 2 };

console.log(obj1 === obj3); // false (내용은 같지만 다른 객체를 참조하므로)

• 'obj1'과 'obj2'는 같은 객체를 참조하므로 '===' 연산자로 비교했을 때 'true'가 나온다.
• 'obj1'과 'obj3'은 내용이 같지만 서로 다른 객체를 참조하므로 '===' 연산자로 비교했을 때 'false'가 나온다.

• 원시 자료의 경우 값의 동일성을 비교한다.
• 하지만 객체와 배열은 값이 아니라 참조 주소(메모리 주소)의 동일성을 비교한다. 따라서 '값'이 같아도 주소가 다르면 false를 반환한다.

2. 깊은 비교 (Deep Comparison)

• 정의: 두 값의 실제 내용을 재귀적으로 비교한다.
• 동작 방식:
  • 원시 자료형의 경우, 실제 값을 비교한다.
  • 객체나 배열의 경우, 내부의 모든 속성이나 요소를 재귀적으로 비교한다.
• 특징:
  • 비교 속도가 얕은 비교보다 느리다.
  • 객체나 배열의 내부 값을 모두 비교하므로, 내용이 같은지 정확하게 판단할 수 있다.
  • 두 객체의 내부 값이 같으면 메모리 주소가 다르더라도 같다고 판단한다.
• 사용 예시: lodash 라이브러리의 _.isEqual() 메서드와 같은 깊은 비교를 수행하는 함수를 사용하여 객체를 비교할 때 깊은 비교가 수행된다.

const _ = require('lodash'); // lodash 라이브러리 로드

const obj1 = { a: 1, b: 2 };
const obj3 = { a: 1, b: 2 };

console.log(_.isEqual(obj1, obj3)); // true (내부 내용이 같으므로)

const arr1 = [1, 2, { c: 3 }];
const arr2 = [1, 2, { c: 3 }];

console.log(_.isEqual(arr1, arr2)); // true (내부 내용이 같으므로)

 

• 'obj1'과 'obj3'은 내용이 같으므로 '_.isEqual()' 함수로 비교했을 때 'true'가 나온다.
• 'arr1'과 'arr2'는 배열 내부의 객체까지 내용이 같으므로 '_.isEqual()' 함수로 비교했을 때 'true'가 나온다.

재귀적 비교

'재귀적으로 비교한다'는 것은, 비교 대상이 복잡한 구조를 가질 때 그 내부의 모든 요소들을 하나하나 다시 같은 방식으로 비교한다는 의미이다. 특히 객체나 배열처럼 내부에 다른 객체나 배열을 포함할 수 있는 자료형을 비교할 때 중요한 개념이다.

 

간단하게 말하면 내부 요소들을 하나하나 ===로 얕은 비교한다는 소리다. 때문에 참조 자료형(객제, 배열)도 주소가 아니라 값으로 비교하는 얕은비교와 동일한 방식으로 동일성 여부를 확인한다.