[인프런x코드캠프] 훈훈한 Javascript_4日

오늘은 비교연산자에 대해서 학습했다.

 

 

java와 꽤 많이 달라서 흥미로웠다.

js의 비교연산자는 '==' 과 '==='이 있다.

'==' 은 느슨한 비교, '==='은 엄격한 비교다.

 

'=='은 우리가 예측하기 어렵다.

ex)

1 == "1" => true

0 == "0" => true
0 == [] => true
"0" == [] => false

 

'==='은 완벽하게 같아야 true를 반환한다.

겉으로 보기에는 같지만 false를 반환하는 예시가 있다.

ex)

const arr = [1, 2, 3]
arr === [1, 2, 3] => false

 

 

 

 

 

arr === [1, 2, 3] => false가 나오는 이유를 알기 위해서는 원시 타입(Primitive type)과, 참조 타입(Reference type)에 대한 개념이 필요하다.

 

원시 타입 : String, Number, Boolean, Bigint, undefined, Symbol, Null

참조 타입 : 원시 타입 외 모든 것

 

ex)

원시타입

let box = "abc";
box에는 abc의 주소값이 담겨져 있다.
ex) 101 , 101에는 "abc"라는 값이 있다, box에는 101이 담겨져있음
box = "def";
ex) box에는 def의 주소값으로 변경
101에는 여전히 "abc"가 있고, 102에는 "def" 가 있다.

 

참조타입

let obj = {
  name: "jootang2",
  age: 28
}
obj에는 201이라는 주소값이 있다.
201에는 400이라는 주소값이 있다.
400에는 실제 객체가 저장돼있음.

 

 

 

'==='은 주소값까지 비교해서 일치해야 true를 반환한다.

이제 위에서 본 예시를 설명할 수 있다.

let arr = [1, 2, 3] : 101이라는 주소값
arr = [1, 2, 3] : 새로운 배열 생성, 102라는 새로운 주소값 생성
엄격한 비교 수행 시, 형태는 같지만 주소값은 101과 102로 주소값이 다르므로 false 반환

 

값의 복사

원시타입

let origin = "hi";
let copy = origin;
origin = "bye"
console.log(copy) => "hi"
origin은 101이라는 주소값 저장 , 101에는 "hi"가 있음
copy는 102이라는 주소값 저장, 102에는 "hi"가 있음
origin = "bye"를 실행하면, 101이라는 주소에 "hi" 대신 "bye" 저장
그러나 copy에는 102라는 주소값이 저장돼있으므로 여전히 hi가 있음

 

참조타입

let origin = [1,2,3];
let copy = origin;
origin.pop();
console.log(copy) : [1,2];
console.log(origin) : [1,2];
origin에는 201이라는 주소값이 있음
201에는 400이라는 주소값이 있음
400에는 [1,2,3]이 있음
copy에는 202라는 주소값이 있음
202에는 400이라는 주소값이 있음 (이유는 let copy = origin 이라고 선언을 했기 때문에)
400에는 [1,2,3]이 있음
origin.pop()을 실행하면 400이라는 주소에 담긴 [1,2,3]이 [1,2]로 변경
따라서 console.log(copy)를 하면 바뀐 값인 [1,2]가 출력된다.

 

처음들어보는 내용이라 아주 흥미로웠다.

살짝 복잡하긴했지만 이렇게 포스팅을 하면서 정리를 하니 이해가 아주 잘됐다.

앞으로도 화이팅~