묵혔다 꺼낸 JS - Falsey, 명시적 강제 변환

Falsey

Fasley는 boolean타입의 false로 변환이 가능한 false 같은 값을 의미한다.

예를 들면 숫자의 0이나 null, undefined와 같은 값들을 의미한다.

그렇다면 자바스크립트의 false로 변환 가능한 값(Falsey 값)들을 살펴보자.

 

 

위의 값들이 모두 false의 값으로 치환이 가능한 값들이다. 나머지의 값들은 모두 true이다.

 

 

한 가지 눈에 뜨이는 점은 빈 객체나 빈 배열도 true를 리턴한다.

그리고 new Number()로 빈 값을 넣으면 g변수에 0이 들어가게 될 것 같은데. 왜 g변수에 true가 나올까.

falsey의 값으로는 분명 숫자가 0이지만 현재 변수 g에 들어간 것은 Number객체이므로 falsey가 아니라고 할 수 있겠다.

하지만 g의 값을 언박싱 한 뒤의 값을 확인하면 falsey값이 맞을 것이다.

 

 

강제 변환

• 문자열에서 숫자로 강제 변환

문자열에서 숫자로 강제 변환법은 기본적으로 아래와 같이 작성 가능하다.

 

 

위 보다 더 짧은 구문으로 강제 변환 가능한 예시도 있다.

 

 

"+"를 통해 이전의 Number를 통하지 않아도 문자열에서 숫자로 변환이 가능해진다.

하지만 "+"를 통한 강제 변환 시 "+="와 헷갈릴 가능성도 염려하여 사용하도록 주의해야 한다.

"=+"가 아닌 "= +"와 같이 띄워서 사용하는 것이 다른 사람이 보기에 구분이 될 것이다.

참고로 -를 이용하면 문자열을 음수로 바꿀 수 있다.

 

 

 

• parseInt()

내장 함수 parsseInt를 이용하면 문자열로 작성된 숫자를 정수 타입의 숫자로 바꾸어준다.

 

 

주의할 점은 parseInt는 문자열 내부의 숫자만을 해석, 문자열의 범위 초과, 문자열이 아닌 다른 값, 객체는 NaN으로 대체된다.

 

 

특징으로는 parseInt의 두 번째 인자로 숫자로 넘기면 n진법 → 10진수 변환이 가능하다.

 

 

• "~"(틸트) 연산자

틸트 연산자는 숫자 값을 2의 보수 값으로 바꾸어주는 연산자이다.

 

 

2의 보수로 바꾸었을 때 1이 -2 였다. -1이라면 0일 텐데 여기서 한 가지 생각나는 것은 String객체의 함수 사용 시 특정 조건을 리턴 받을 때 -1이라는 값을 리턴 받을 때가 있다.

이럴 때 ~연산자를 사용하면 그 값은 0이 되므로 falsey 한 값이 될 것이라는 예상을 할 수 있겠다.

-1을 리턴하는 함수는 String.prototype.indexOf()가 대표적이라고 할 수 있다.

찾고자 하는 문자열을 찾으면 해당 문자열의 인덱스를 반환, 못 찾으면 -1을 리턴하게 된다.

 

 

못 찾았을 때 -1을 받는데 이것을 통해서 알림을 주는 코드를 작성한다는 시나리오로 작성하면 다음과 같을 것이다.

 

 

이때 if문의 코드를 ~연산자를 통해서 좀 더 간략화해보자.

 

 

아까 위의 코드보다 더 짧고 간결하게 표현이 가능하다!

 

• "~"의 잘못된 사용

~를 이용한 비트 반전 원리를 이용해서 소수점을 제거하는 작업 시 유의해야 할 점을 소개하려 한다.

 

 

단순히 소수점을 제거하는 코드 둘이 있다. 첫 번째는 Math.floor을 이용해서 내림하는 코드, 2번째는 ~~를 이용한 비트 반전 연산자

둘의 결과를 보면 양수의 경우, 둘의 결과가 똑같은 결과를 보여줬지만 음수의 경우에는 다른 결과를 도출해낸 것 을 확인하였다.

이와 같은 이유는 ~가 반전 시 32비트 정수 범위를 초과하면 일부 상위 비트부를 제거하기 때문이라고 한다.

~~를 이용해서 소수부를 제거할 시 Math.floor와 다른 점을 잘 이해하고 상황에 맞게 사용하도록 하자.

 

• ~~ 와 a | 0 결과는 같다.

 

 

위와 같은 방법을 사용 시 주의할 점은 "~"가 "|" 보다 연산자 우선순위가 높기 때문에 다른 연산과 함께 사용 시 괄호를 묶어서 사용하는 것이 권장된다. (또한 팀과의 협업에도 주의를 기울여야 할 것이다.)

 

• "!"연산자

"!"연산자는 알다시피 논리 반전 연산자(NOT 연산자)이다.

ture → false, false → true로 변환시켜주는 연산자임을 알고 있을 것이라 생각이 든다.

해당 연산자를 통해 아래의 코드를 개선해보자.

 

 

위의 코드는 a의 변수에 Falsey값이면 false Truthy(Boolean변환 시 참으로 변환이 되는 값)라면 true를 리턴하게 된다.

그런데 isNotFalse가 명시적 변환인 거 같으면서, 사실은 암시적 변환이 숨어있다.

삼항 연산자의 평가 도출 전 a가 암시적으로 Boolean으로 타입이 변환되고, 이후 평가되어 true와 false 중 하나를 리턴하게 되는 과정 때문에 위와 같은 코드작성은 금물이라고 한다.

아래와 같은 방법으로도 위와같은 결과를 도출하니 해당 방법을 사용하기를 원한 다고 한다.

 

 

아예 Boolean을 사용한다던가,!! 를 사용해서 T/F여부를 구하는 명시적 강제 변환을 이용함이 더 올바른 방법이라고 한다.