[JavaScript] 자바스크립트 형변환(Type Conversion) 이해하기 - 3

[JavaScript] 자바스크립트 형 변환(Type Conversion) 이해하기 - 2

에서 정리하던 암시적 형변환에 대해서 계속해서 정리해보자.

 

동치 연산자 ( ==, !=, ===, !== )

// string
console.log('123' == 123); // true
console.log('123' === 123); // false
console.log('' == 0); // true
console.log('' === 0); // false
console.log('' == false); // true
console.log('' === false); // false
console.log('' == null); // false
console.log('' === null); // false
console.log('' == undefined); // false
console.log('' === undefined); // false
console.log('1' == true); // true
console.log('1' === true); // false
console.log('0' == false); // true
console.log('0' === false); // false

// number
console.log(1234 == 1234.0); // true
console.log(1234 === 1234.0); // true
console.log(1 == true); // true
console.log(0 == false); // true
console.log(1 === true); // false
console.log(0 === false); // false
console.log(0 == null); // false
console.log(0 === null); // false
console.log(0 == undefined); // false
console.log(0 === undefined); // false
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false

// boolean
console.log(false == null); // false
console.log(false === null); // false
console.log(false == null); // false
console.log(false == undefined); // false

// null
console.log(null == undefined); // true
console.log(null === undefined); // false

동치 연산자에는 동등(==), 부등(!=), 일치(===), 불일치(!==)가 있는데, 일치와 불일치는 비교에서 형 변환이 일어나지 않기 때문에, 자연스럽게 결과를 예상할 수 있지만, 동등과 부등은 그렇지 않다. 

 

동등 연산을 할 때는 주로 숫자형 형변환이 일어나는데, 특별히 이때 [JavaScript] 자바스크립트 형 변환(Type Conversion) 이해하기 - 1에서 살펴봤던 falsy한 값들을 비교할 때 좀 더 주의가 필요하다.

 

string 구간부터 천천히 살펴보자.

산술 연산에서 문자열과 숫자가 연산이 될 때, 연산자가 덧셈 연산자가 아니라면 피연산자가 모두 숫자형으로 형 변환이 일어나듯, 동등 비교에서도 동일하게 일어난다. 그렇기 때문에 따옴표만 벗기면 숫자로 사용이 가능한 문자열 '123'은 숫자 123과 동등하다고 판단된다.

문자열을 동등 비교할 때 주의해야될 부분은 falsy 한 값인 빈문자이다. 

문자열 0도 숫자형으로 형변환이 되면 숫자 0이 되지만 빈 문자도 숫자형으로 형 변환이 되면 숫자 0이 된다.
빈문자는 0과 동등하다. 그리고 빈문자는 false와 동일하다. 하지만, null과 undefined는 동일하지 않다.

그리고 불린형태는 동등 비교 시 무조건 숫자형으로 형 변환이 된다. 그래서 빈문자열과 false를 비교하면 빈 문자열이 0으로 형 변환이 되고, 불린 false도 0으로 형 변환이 되어서, 0 == 0으로 두 값이 동등하다고 판단되는 것이다.

이러한 원리로 문자열 1은 불린 true와 동일하고, 문자열 0은 불린 false와 동등하다고 판단된다.
조심해야될 부분은 문자열 0은 falsy 한 값이 아니다. 문자열 0이 숫자 0으로 형 변환되어서 false와 동등하다고 판단되는 것이다.

 

그리고 number 구간을 살펴보자.

자바스크립트는 소수와 정수를 따로 구분하지 않기 때문에 1234와 1234.0 은 서로 동등하면서 일치하기도 한다.

그리고 앞에서도 살펴봤듯 숫자 0과 1은 각각 불린 false와 true에 동등하지만, 일치하지는 않는다.

숫자형에서 독특한 부분은 NaN 값은 어떤 값과 비교하더라도 false로 판단된다는 것이다.

 

boolean구간부터는 이미 특별한 모습을 다 살펴봤기 때문에 크게 특별한 것은 없지만, 한 가지 명확히 해야 할 부분은 앞에서도 살펴볼 수 있었듯이, null과 undefined는 서로에게 동등하지만 다른 falsy값과는 동등하지 않다는 부분만 확인하고 넘어가면 될 것 같다.

 

논리 연산자(&&, ||, !)

// string
console.log('문자' && 1234); // 1234
console.log('문자' && true); // true
console.log('문자' && false); // false
console.log('문자' && null); // null
console.log('문자' && undefined); // undefined
console.log('문자' || 1234); // 문자
console.log('문자' || true); // 문자
console.log('문자' || false); // 문자
console.log('문자' || null); // 문자
console.log('문자' || undefined); // 문자
console.log('' && 1234); // (빈문자)
console.log('' || 1234); // 1234

// number
console.log(1234 && 1234); // 1234
console.log(1234 && true); // true
console.log(1234 && false); // false
console.log(1234 && null); // null
console.log(1234 && undefined); // undefined
console.log(1234 || 1234); // 1234
console.log(1234 || true); // 1234
console.log(1234 || false); // 1234
console.log(1234 || null); // 1234
console.log(1234 || undefined); // 1234
console.log(0 && 1234); // 0
console.log(0 || 1234); // 1234

// boolean
console.log(true && true); // true
console.log(true && false); // false
console.log(true && null); // null
console.log(true && undefined); // undefined
console.log(true || true); // true
console.log(true || false); // true
console.log(true || null); // true
console.log(true || undefined); // true
console.log(false && 1234); // false
console.log(false || 1234); // 1234

// null
console.log(null && null); // null
console.log(null && undefined); // null
console.log(null || null); // null
console.log(null || undefined); // undefined

// undefined
console.log(undefined && undefined); // undefined
console.log(undefined && null); // undefined
console.log(undefined || undefined); // undefined
console.log(undefined || null); // null

처음 AND, OR 연산자를 학습할 때 아무래도 논리라는 이름이 붙고 대부분 불 대수에 맞춰 true와 false의 결과가 나오는 예시를 활용해서 학습하다 보니 간혹 이 연산이 반드시 불린 형태의 결괏값만 가져다줄 것이라는 오해를 하는 경우가 있다.
다른 언어에서는 어떻게 연산하는지 모르겠지만,
AND, OR 연산은 왼쪽 피연산자를 불린 형태로 판단한 뒤에, 한쪽 피연산자를 선택하는 결과를 나타낸다.

AND연산은 왼쪽 피연산자가 truthy값일 경우 오른쪽 피연산자 값을, 반대의 경우 왼쪽 피연산자 값을 결과 값으로 반환하고

OR연산은 왼쪽 피연산자가 falsy값 일 경우 오른쪽 피연산자 값을, 반대의 경우 왼쪽 피연산자 값을 결과 값으로 반환하는

뭔가 논리적으로 불린 값을 반환하는 것이 아닌, 논리적으로 피연산자 값을 선택적으로 반환한다. 

// string
console.log(!'문자'); // false
console.log(!''); // true

// number
console.log(!1234); // false
console.log(!0); // true

// boolean
console.log(!true); // false
console.log(!false); // true

// null
console.log(!null); // true

// undefined
console.log(!undefined); // true

하지만 NOT연산자는 생각대로 간단하다. 부정하는 논리 값을 반환하기 때문에

truthy값은 false를, falsy값은 true를 반환한다.