[JS] if문 쓰기 귀찮을 때 | truthy, falsy 구분
- 프론트/자바스크립트
- 2024. 8. 14.
혹시 자바스크립트에서 값이 있다, 없다를 구분하려면 `값 === undefind` 이런거 쓰고 있지는 않나 생각을 해보자. 근본적인 방법이지만 타이핑 하기 귀찮고, 괜히 없어보일수도 있다. 그럴 때 `truthy`와 `falsy` 값을 구분하면 훨씬 간결하고 효율적으로 쓸 수 있다.
💡 간결한 조건 처리
function func(a) {
if (a) { console.log('truthy') }
if (!a) { console.log('falsy') }
}
// falsy 출력
func(null);
func(undefined);
// truthy 출력
func('null');
func(123);
값이 정의되지 않은 변수처리를 할 때 조건문을 `(값 === undefind || 값 === null || 값 === "")` 이런식으로 지저분하게 쓰지 않아도 된다. 단순하게 조건문 안에 `값`만 주어졌을 때 `truthy`한 값이면 `true`, `falsy`한 값이면 `false`가 된다. 즉, 값이 있다고 판단되는 것은 `true` 그렇지 않은 것은 `false`로 처리한다.
그런데 이 부분이 조금 의아할 수 있는데 숫자`0` 같은 것도 `falsy`한 값으로 처리 되기 때문이다. 사실 설명을 쉽게하기 위해 "값이 있다고 판단되는 것은 truthy" 라고 표현을 했지만 컴퓨터 공학적(혹은 자바스크립트가 정의한)으로 `falsy`한 값으로 정의된 값들까지 `falsy`로 취급한다. 공통적으로 여러 프로그래밍 언어에서 보통 `0`을 `false`로 표현하기 때문에 자바스크립트에서도 똑같은 개념으로 사용된다.
💡 falsy 값 모음
function func(a) {
if (!a) { console.log('falsy') }
}
// 전부 falsy 출력
func(0)
func("")
func('')
func(-0)
func(null)
func(undefined)
func(NaN)
이외에도 더 있겠지만 일반적으로 많이 쓰이는 값들만 정리해보았다. 일반적으로 위에서 정리되지 않은 나머지들은 거의 다 `truthy`한 값으로 처리 된다.
💡 헷갈릴수도 있는 truthy한 값 모음
function func(a) {
if (a) { console.log('truthy') }
}
// 전부 truthy 출력
func(-1)
func([])
func({})
func(" ")
- `-1`: 음수 양수 여부에 상관 없이 `0`이 아닌 수들은 `true`
- `[], {}`: 뭔가 값이 비어보이지만 엄연히 객체로 정의된 `값`이다.
- `공백문자열(" ")`: 공백도 스페이스바로 입력한 특수문자이다.
'프론트 > 자바스크립트' 카테고리의 다른 글
[JS] 종속되지 않은 파일끼리 데이터 공유하는 방법 (with. window객체, 세션 등) (0) | 2024.08.16 |
---|---|
[JS] 단축평가 | 난해하지만 편하다 (0) | 2024.08.15 |
[JS] 매개변수 배열로 묶어서 받기 | Rest 문법 (0) | 2024.08.13 |
[JS] 매개변수가 많아질 때 고민 | 구조 분해 할당 #객체편 (0) | 2024.08.09 |
[JS] Set | 객체가 들어있는 배열에서 중복되는 값을 지워줘~ (0) | 2024.08.02 |