JS의 형 변환

강지원·2022년 2월 10일
0
post-thumbnail

면접 중 받았던 질문 중 신기한 문제가 있었다.

true / false인 이유

0 == '0'; // true
0 == [ ]; // true
'0' == []; // false

3개의 연산 결과가 true/false인 이유에 대해 설명해야 했다.
문제를 보며 나름의 생각에 의존해 면접관님에게 이유를 설명했고,
나의 논리가 틀렸다는 것을 알게 되었다.

나의 생각

결론부터 말하면 Null과 undefined로 접근을 했고, 틀렸다,,

1) 0 == '0'

원시 데이터 타입 중 num과 string을 비교하는 것.
평소에는 당연하게 생각했던 것을 이유를 말하려 하니 당황스러웠다.
자바스크립트가 알아서 해주는 거 아녔나? 라는 생각이 들었는데
차마 자동으로 처리된다고 말할 수 없었다.

문득 값이 없는 것은 undefined가 아닐까라는 생각이 들었고,
undefined == undefined 로서 true가 된 것 같다고 말했다.

2) 0 == [ ]

원시 데이터와 참조형 데이터를 비교하는 것.
빈 배열의 값은 결국 빈 문자열 ''을 의미하는 것이고, 존재하지 않는 것이니
undefined라고 생각했다.

그래서 해당 항목도 true가 된 것 같다 말했다.

3) '0' == [ ]

여기서 나의 논리가 틀렸다는 것을 알 수 있었다.
문자열 '0'도 undefined고, 빈 배열도 undefined라면 true가 되어야 하는데
쌩뚱맞은 false가 정답이었다.


결과적으로는 Javascript의 형변환에 대해 이해하고 있는지를 물어본 것이었다.
이를 몰랐던 나는 계속 어리둥절했고, 면접관님에게 Truthy/Falsy 이야기를 들으며
간략하게나마 결과에 대해 알게 되었다.

집에 오고나서 Truthy/Falsy이전에 기본적인 형 변환에 대해
공부를 해야겠다 싶어 따로 정리했다.


연산자에 따른 형변환

JavaScript는 연산자에 따라 형변환이 다르게 일어난다.
또한 원시값인지, 참조값인지에 따라서도 다른 형변환이 일어난다.

기본적으로 자동 자료 변환 시
'+' 연산자는 문자열이 숫자보다 우선시 ( 문자열 > 숫자)
나머지 사칙연산자는 숫자가 문자열보다 우선시 ( 문자열 < 숫자)

1) + 연산자

3 + '3' // 문자 '33'이 도출된다.

이 것으로 알 수 있는 것은 number 3이 string 3으로 형변환이 되고
문자열 두 개를 합친 새로운 하나의 문자열을 만들어 낸다.


모든 문자열이 숫자로 변환 가능한 것은 아니다.
하지만 모든 숫자는 문자열로 변환 가능하다.
그렇기 때문에 + 연산에 문자열과 숫자가 연산될 때는
숫자를 문자열로 변환 후에 연산을 한다.

-, /, * 연산자를 사용할 때

-, /, * 연산자는 수학적 연산만을 지닌다.

3 - '1' // 2
3 * '2' // 6
3 / '3' // 1

'interview' - 'terview' // NaN

연산에 사용되는 모든 값은 숫자로 변환 후에 연산을 하게 됩니다.
다른 수학적 연산자 모두 동일하게 동작한다는 점도 꼭 알아두자.
예외로, 숫자로 변환될 수 없는 값은 NaN 값을 지닌다.


boolean을 더하는 경우

3 + true // 4
3 - false // 3

true는 1로, false는 0으로 변환이 가능하다.
그렇기 때문에 숫자와 boolean을 연산을 할 때는
boolean을 숫자로 변환 후에 연산을 진행한다.


참조형 데이터의 형변환

참조 데이터 또한 JavaScript에서 자동 형변환을 진행한다

Array의 경우

[] + 1 // '1'
[] == 0 // 0

array는 toString() 메서드를 지니고 있다.
이 함수는 각 원소를 ,로 구분하여 문자열로 만드는 함수이다.
array를 string으로 바꾸고 연산을 하게 된다는 거다.

[] + 3 => [].toString() + 3 => '' + 1 => '3'

Object의 경우

Object 또한 자동으로 원시값으로 형변환이 되어 연산된다.

????????
배열은 예상을 했는데 Object의 결과가 너무 신기했다.
object도 toString() 함수의 적용을 받을 수 있었고, Object가 Array형으로 변환되어
[object object]10 이라는 결과가 나왔다.

const obj = {};
obj + 10 => obj.toString() + 10 => '[object Object]' + 10 => '[object Object]1'


== 연산에서의 형변환

참조값이 ==연산에 사용될 경우에는 참조값이
toString() 연산을 통해 원시값으로 형변환되고, 이어지는 연산을 수행한다.

Truthy와 Falsy

조건문에서 사용되는 값이 true냐 false를 나타내는 값.

Falsy한 값

undefined, null, NaN, 0 (숫자 리터럴) , -0, “” (빈 문자열), false
총 7가지 이다

Truthy한 값은 Falsy한 값을 제외한 모든 값이다.

Truthy와 Falsy의 예외

주의할 점은 빈 문자열은 false 이지만 빈 배열, 빈 객체는 true라는 것이다.

예시

if([]) {
  console.log('k'); // [] 가 true이므로 console.log가 작동한다.
}

if(0) {
  console.log('k'); 0은 false이므로 console.log가 작동하지 않는다.
}


Reference
연산자에 따른 형변환
전체적인 형 변환 정리
자바스크립트에서 false로 간주되는 것들

profile
'Why' better than 'Yes'

0개의 댓글