'hi' === 'hi'
// true
['hi', 'bye'] === ['hi', 'bye']
// false
[1] === [1]
// false
[1] == [1]
// false
[] == []
// false👉 같아 보이는데 왜 false(거짓)으로 나올까?
자바스크립트는 배열 안에 있는 것에는 관심이 없다.
실제로 비교하는 건 메모리에서 참조되는 값이다.
자바스크립트에서 작성하는 숫자마다 할당되는 최대 메모리가 있다.
하지만 배열은 다른 경우이다
열 개의 숫자가 있는 배열도 있을 수 있고 1만개의 숫자를 길게 넣거나,
1만 개의 문자열이나 배열을 넣어 많은 공간을 차지할 수도 있다.
때문에 배열은 저장 방식이 조금 다르다.
let luckyNum = 87;행운의 숫자로 87이 저장되었다고 치자.
이것은 그냥 메모리에서 87로 보이는 것이다.
하지만 배열의 경우는, 아래와 같이 배열 안에 임의의 숫자를 넣으면
let luckyNums = [2, 345, 23];자바스크립트는 이 배열의 콘텐츠와 행운의 숫자를 연관 짓는 게 아니다.
콘텐츠는 바뀔 수 있고 얼마나 공간을 차지할지 모르니,
여기서(luckyNums) 저장되는 건 참조(reference)이다.
우리 눈에 보이지 않는 너머에서 이 배열은 집 주소나 사회 보장 번호처럼 작용한다고 생각하면 된다.
예를들어, [1, 2, 3] 이라고 입력하면 메모리에서 이 배열을 생성하는 것이다.
이 배열의 고유한 주소인 참조를 갖는 것이다.
또 다른 [1, 2, 3] 을 만들면 새로운 배열이 생성되고 새로운 사회 보장 번호가 생성되는 것이다.
[1, 2, 3] === [1, 2, 3]
// false이 두개는 차이가 있다. 메모리에서 다른 것을 참조한다.
콘텐츠는 같지만 배열에서는 중요한 게 아니다.
변수로 예를 들어보자.
let nums = [1, 2, 3]
// 변수를 생성하고
let numsCopy = nums;
// 또 다른 변수를 만들어서 '어떤 걸 참조하든 nums 와 같다' 라고 명시
nums [1, 2, 3]
numsCopy [1, 2, 3]
// 둘의 값은 같다
nums.push(4)
// 변수 nums에 4라는 값을 추가한다.
nums [1, 2, 3, 4]
numsCopy [1, 2, 3, 4]
// 콘솔로 찍었을 때, nums 는 당연하고 numsCopy 까지 동일하게 4가 붙는다.이는 둘은 메모리에서 같은 것을 참조하고 있다는 것을 의미한다.
그렇기 때문에 하나의 값을 바꾸면 다른 하나도 바뀌는 것이다.
동일한 참조를 따르고 있기 때문이다.
이때 우리는 새 배열을 만든 게 아니라 nums가 [1, 2, 3] 이라는 배열과 같다고 선언 한 후,
같은 걸 따르는 새 변수를 (numsCopy [1, 2, 3]) 만든 것이다.
nums === numsCopy
// true둘은 자바스크립트의 메모리에서 동일한 참조를 따르고 있기 때문에 삼중등호로 비교하였을 때
true 즉, 참이라는 결과가 나온다.
자바스크립트에서 배열을 비교하려면 같은 참조를 따르는 배열인지 확인해야 한다.
콘텐츠를 비교할 떄는 아무런 소용이 없다.
이중 등호와 삼중 등호로 메모리의 참조를 확인하면 된다.
출처: udemy the-web-developer-bootcamp-2022
