보자마자 유용하다고 느끼는 javascript 문법

보통 프로젝트를 하면 null,undefined, "", 0 등을 체크할 때 새로운 공통 유틸 함수를 만들어서 체크하는데 아래 문법을 잘 알고 있으면 object의 value값을 빈값 체크 시에도 runtime error 없이 체크할 수 있다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators

 

1. && and함수

console.log(undefined && 'ㅁㅁㅁ')
=> undefined
console.log(null && 'ㅁㅁㅁ')
=> null
console.log(0 && 'ㅁㅁㅁ')
=> 0
console.log("" && 'ㅁㅁㅁ')
=> ""
console.log(false && 'ㅁㅁㅁ')
=> false


console.log(true && 'ㅁㅁㅁ')
console.log('aaa' && 'ㅁㅁㅁ')
=> 'ㅁㅁㅁ'

 

2. || or함수(0, "", undefined, null, false 체크) 

=> expr

console.log(null||"ㅁㅁㅁ")
console.log(undefined||"ㅁㅁㅁ")
console.log(0||"ㅁㅁㅁ")
console.log(""||"ㅁㅁㅁ")
console.log(false||"ㅁㅁㅁ")
 => 'ㅁㅁㅁ'

console.log("aaa"||"ㅁㅁㅁ")
 => aaa
 
console.log(true||"ㅁㅁㅁ")
 => false

3. ?? (undefined, null 체크)

console.log(null??"ㅁㅁㅁ")
console.log(undefined??"ㅁㅁㅁ")
=> ㅁㅁㅁㅁ

console.log(false ?? 'ㅁㅁㅁ')
=> false

console.log("aaa"??"ㅁㅁㅁ")
=> aaa
 
console.log(0??"ㅁㅁㅁ")
=> 0

console.log(""??"ㅁㅁㅁ")
=> ""
 
 var user;
 console.log(user ?? "로딩중")
  => 로딩중 (api호출 시에도 활용할 수 있음)

4. ?. (object에서의 undefined, null 체크)

=> 점이 2개 이상일 때 유용

const user = {
	name: "ben"
//      age: { value: 32 }
}

console.log(user.age.value)
=> VM873:1 Uncaught TypeError: Cannot read properties of undefined (reading 'value')
    at <anonymous>:1:22
    
console.log(user.age?.value)
=> undefined (runtime error 예방)

 

참고1 :https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators

표현식과 연산자 - JavaScript | MDN

참고2:https://youtu.be/WHUvtiKy_pg