if(2 == ___ ) 중, 밑줄에 값이 들어올때 true가 아닌 경우를 고르시오.

① Number(2)
② Number(2).valueOf()
③ Number(2).toString()
④ 2.valueOf()
⑤ 2 .toString()

문제의 요점

==와 ===는 어떻게 다르고 어떻게 동작하는가?

문제를 풀기 위해 알아야 하는 함수

• Number() : 문자열을 숫자로 변환하는 함수
• valueOf() : 특정 객체의 원시 값(primitive Value)을 리턴하는 함수
• toString() : 값을 문자열로 리턴하는 함수

문제의 정답

① 2 == 2, true
② 2 == 2, true
③ 2 == '2', true
④ SyntaxError 발생
⑤ 2 == '2', true

문제 풀이

④에 SyntaxError 발생한 이유?

사용자가 1.123을 입력할 경우, 인터프리터는 아래와 같이 생각한다.

• 1이라는 객체의 123 프로퍼티일까?
• 그냥 소수점일까?

위와 같은 모호함으로 인해 인터프리터는 1.뒤에는 반드시 숫자가 나와야 된다고 생각을 한다. ④은 문자가 나왔으므로 SyntaxError가 발생하였다.

예제로 자세히 알아보기

• 1.toString()의 경우
  1.뒤에 문자가 나왔으므로 동작을 하지 못하고 SyntaxError가 발생하게 된다.

• 1.23.toString()의 경우
  숫자의 소수부가 나오고 그 뒤에 또 소수부가 나오는 숫자는 존재하기 않기 때문에 인터프리터가 .을 찍는 순간, 1.23을 객체로 만들어버리고 toString()을 실행할 수 있게 해주기 때문에 정상 작동한다.

• 1. toString()의 경우
  띄어쓰기로 뒤에 소수부가 없다는 것을 확인 시켜주기 때문에 toString()이 정상 작동한다.

===의 동작 원리

• 원시 타입
  • 형과 값이 일치해야 한다.

console.log(1 === 1)		// 숫자형, 값1 === 숫자형, 값1 → true
console.log(1 === '1') 	 	// 숫자형, 값1 === 문자열, 값1 → false

• 참조 타입
  • 레퍼런스(참조하는 것)가 일치해야 한다.
    console.log([1,2] === [1,2]) // 레퍼런스가 다르다. → false
    
  • 레퍼런스가 같은 경우 예시

var a = {a : 1}			// a라는 변수에 객체를 생성
var b = a           	        // b라는 변수에 a를 대입
b.a = 2;			// b의 a의 값을 2로 변경
console.log(a.a)		// a의 a값도 같이 변경 → 2
console.log(b.a === a.a)   	// true

위와 같이 a와 b는 같은 레퍼런스를 가지고 있기 때문에 참이 되며 a나 b를 수정해도 서로가 같이 수정이 된다.

==의 동작 원리

• 두 값이 일치해야 한다.

  • undefined == null
    console.log(undefined == null) // true
  • 0 == '0'
    console.log(0 == '0') // 0 == 0, true
    문자열을 숫자로 변환 후 비교한다.
  • true == '1'
    console.log(true == '1') // 1 == 1, true
    boolean 또한 숫자로 변환 후 비교한다. (true를 숫자로 바꾸면 1이 나온다.)

• 참조 타입과 원시 타입을 비교하는 경우

  • [2,3] == '2,3'
    console.log([2,3] == '2,3') // '2,3' == '2,3', true
    참조 타입과 원시 타입을 비교하는 경우, 참조 타입을 원시 타입으로 바꿔준다.
    1. 참조 타입인 [2,3]은 valueOf 수행한다.
    2. 자기 자신이자 참조 타입인 [2, 3]이 그대로 나온다.
    3. 1단계로 거쳐도 참조 타입인 경우, toString()을 수행한다.
    4. 문자열 '2, 3'을 리턴한다
    5. '2,3'과 '2,3'을 비교한다
    6. 결과는 true가 된다.

• 0 == 'a'
  console.log(0 == 'a') //0 == NaN, false
  'a'를 숫자로 바꾸어 NaN이 나오고 결과는 false가 된다.

• NaN == NaN
  console.log(NaN == NaN) // false
  NaN과 NaN은 같지 않다.

• 참조 타입과 참조 타입을 비교하는 경우, ==는 ===와 동일한 결과가 나오기 때문에 사용하는 의미가 없다.

• ===는 일치를 포함한다. (===하면 당연히 ==다.)

해당 포스팅은 썬한 코딩, 입사에 필요한 JS기술의 내용을 보며 공부한 것을 정리한 내용입니다.

참고 사이트

• 김썬 Youtube