[JavaScript] 배열의 비교

---

자바스크립트에서 배열을 비교하는 방법은 다양하며, 배열의 비교와 복사에 대해 몇 가지 알아두어야 할 점이 있다.

 

1.

let a = [1, 2, 3];
let b = a.reverse();
console.log(a)  // [ 3, 2, 1 ]
console.log(b)  // [ 3, 2, 1 ]
console.log(a === b);  // true

 

자바스크립트에서 array.reverse()는 원본 배열(array)를 뒤집어서 반환한다. 그러므로 a.reverse()는 뒤집어진 원본 배열 a가 반환되어, console.log(b)를 하였을 때 뒤집어진 a인 [3, 2, 1]이 될 것임이 충분히 예상된다.

 

그런데 원본 배열 a를 출력해보아도 [3, 2, 1]로 모든 요소들이 뒤집어졌음을 확인할 수 있다. 왜 그런걸까?

 

a.reverse()를 b에 할당하게 되면, a와 b는 동일한 배열 객체를 참조하게 된다. 

쉽게 말하면, a와 b가 가리키고 있는 배열 객체의 주소값이 같다는 의미이다.

 

이를 방지하기 위해서는 a 배열의 복사본을 만들어서 b에 할당하면 된다.

 

복사 방법에는 여러 가지가 있지만 가장 쉽게 쓸 수 있는 메소드로는 slice가 있다.

let a = [1, 2, 3];
let b = a.slice().reverse();  // slice 메소드 추가
console.log(a)  // [ 1, 2, 3 ]
console.log(b)  // [ 3, 2, 1 ]
console.log(a === b);  // false;

배열 a를 slice메소드로 복사하여 뒤집어 준 후, b에 할당하였다.

서로 다른 객체의 주소값을 가지게 되므로, 같은지 비교해보면 false가 나온다.

---

2.

let a = [1, 2, 3];
let b = [1, 2, 3];
console.log(a == b);  // false
console.log(a === b);  // false

 

배열 a와 배열 b는 동일한 원소로 구성되어 있다.

그래서 두 배열이 같은지 비교해보면 모두 true로 나올 것 같지만, 의외로 false가 출력되는 것을 확인할 수 있다.

 

자바스크립트에서 배열이나 객체의 비교는 값의 내용이 아니라 참조가 같은지를 확인한다.

 

위에서 말했듯이, 이 경우에는 배열 a와 b의 내용은 같아도 각각 다른 주소값을 가지고 있어서 독립적으로 생성된 별개의 배열이므로 일치하지 않는다.

 

만약 배열의 내용이 같은지 확인하려면 아래와 같은 방법으로 할 수 있다.

function IsEqual(arr1, arr2) {
    // 1. 배열의 길이가 같은지
    condition1 = arr1.length === arr2.length;

    // 2. 배열1의 원소가 배열2의 원소와 같은지
    // 엄격한 비교 => 일치연산자
    condition2 = arr1.every((value, index) => value === arr2[index]);

    return condition1 && condition2;
}

let a = [1, 2, 3];
let b = [1, 2, 3];
let c = [1, 2, 4];
let d = [1, 2, 3, 4];
let e = [1, 2, '3'];

console.log(IsEqual(a, b)); // true
console.log(IsEqual(a, c)); // false
console.log(IsEqual(a, d)); // false
console.log(IsEqual(a, e)); // false

 

배열의 길이가 같은지 확인한 후, 배열의 모든 원소가 같은지 확인한다.