웹서핑을 하다가 평소에 모호하게 생각했던 true와 false의 평가를
명확하게 설명하고 정리한 좋은 글을 보게되었다
0.truty와 falsy란?
truty와 falsy는 ECMA스펙에 등장하는 단어는 아니지만
javascript의 동작을 이해하기 쉽게 하기위해 사용되는 단어다.
1.사용처
자바스크립트는 알아서 형변환을 해주고
이것때문에 발생하는 문제가 꽤 많지만 편리한 부분도 있다
심지어 if문의 ()나 삼항연산자등 불린값이 필요한곳에 들어가면
number string object등 어떤 타입의 값이든 불린값으로 바뀌는데
이런현상을 알기쉽게 정리한 개념이 truty와 falsy다
2.의미
truty는 위와같은 문맥에서 true로 평가되는 값들이고
falsy는 false로 평가되는 값들이다
나는 항상 명시적으로 불린값으로 바꾸거나
가독성이 좋게 코드를 짜는것이 좋다고 생각해서
if(a === undefined) 이런식으로 불린값으로 바뀌도록 코드를짜지만
자바스크립트의 동작방식이기도 하고
회사에서나 오픈소스에서 모든사람이 그렇지는 않은경우가 많아서
알아두는것이 좋다
3.구체적인 예시
1) falsy
불리언 값으로 평가되는 문맥에서, false로 평가되는 값.
undefined, null, false, 0, -0, NaN, ""(빈문자열), 0n 등이 있음 (ECMA 2020 기준)
제목의 순서와 다르게 falsy부터 이야기 하는 이유는
falsy의 가지수가 훨씬 작고 나머지 모든것이 truty이기 때문이다
if(undefined) { //소괄호 안이 false로 평가되어 if문이 실행되지 않음
...
}
if(null) { //소괄호 안이 false로 평가되어 if문이 실행되지 않음
...
}
if("") { //소괄호 안이 false로 평가되어 if문이 실행되지 않음
...
}
if(0) { //소괄호 안이 false로 평가되어 if문이 실행되지 않음
...
}
if(NaN) { //소괄호 안이 false로 평가되어 if문이 실행되지 않음
...
}이것이 truty와 falsy의 핵심이다! ""가 false로 평가된다는걸 모르면
코드의 동작을 이해하는데 문제가 생길 수 있다
2) truty
불리언 값으로 평가되는 문맥에서, true로 평가되는 값
falsy를 제외한 값들
if([]) { //소괄호 안이 true로 평가되어 if문이 실행됨
...
}
if([1]) { //소괄호 안이 true로 평가되어 if문이 실행됨
...
}
if({}) { //소괄호 안이 true로 평가되어 if문이 실행됨
...
}
if({a:'a'}) { //소괄호 안이 true로 평가되어 if문이 실행됨
...
}
if("s") { //소괄호 안이 true로 평가되어 if문이 실행됨
...
}
if(1) { //소괄호 안이 true로 평가되어 if문이 실행됨
...
}빈 Array나 빈 Object는 값이 있고 없고에 따라 나뉠것 같지만
둘 다 Object타입이기 때문에 모두 true로 평가된다
또한 빈 문자열이 아닌"s"나 0또는 NaN이 아닌 숫자 1도 true로 평가된다
3) !!
불린으로 평가되는 문맥이 아닌곳에서도 truty와 falsy를
불린으로 바꿀 수 있는 방법이 있는데 !!라는 연산자다
이런 연산자가 실제로 있는건 아니고 !는 불린값을 반대값으로 바꿔주는데
!!라고 하면 이값에서 다시 반대가 되므로 불린으로 바꿀 수 있다
const emptyString = ""
console.log(!!emptyString) // false
// falsy이므로 !에게서 false로평가되어 true로 바뀌었다가
//!를 또 받아서 false가 됨
const arr = []
console.log(!!arr) // true
// truty이므로 !에게서 true로평가되어 false로 바뀌었다가
//!를 또 받아서 true가 됨예를들어 문자열을 받아서 비어있지않으면 true를
비어있으면 fasle를 리턴하는 함수를 만들고 싶다고 하면
const result1 = "s"
const result2 = ""
const fn = (result:string):boolean => !!result
console.log(fn(result1)) //true
console.log(fn(result2)) //false이런식으로 만들 수 있다.
근데 가독성때문에 이런식으로 코드를 작성하지 않는것이 좋을것같고
문자열의 길이가 0보다 큰지 확인하는 방식이 좋을것 같다
참고자료
falsy & truthy
