[JavaScript] 자바스크립트 falsy 값, 논리연산자 축약, Null 및 undefined 변수 처리 ( ||=, &&=, ?? )

📝falsy 값

falsy값이란 false, null, undefined, 0, NaN, 빈 문자열('') 등의 값을 의미한다

 

 

📝||= , &&= 

/** || **/
console.log( "" || undefined || null || "익명"); // 익명
console.log( "" || "Hello" || null || "익명");   // Hello

let num = 10;
num ||= 0;        // same as [num = num || 0]
console.log(num); // 10

// tsx에서 사용 예제
<p>Hello, {username || 'Guest'}!</p>

/** && **/
console.log(1 && 2 && undefined && 3) ; // undefined
console.log(1 && 2 && null && 3) ;      // null
console.log(1 && 2 && '' && 3) ;        // null
console.log(1 && 2 && false && 3) ;     // false
console.log(1 && 2 && 3) ;              // 3

let age = undefined;
age &&= 10;       // same as [age = age && 10]
console.log(age); // undefined

// tsx에서 사용 예제
{isLoggedIn && <p>Welcome back!</p>}

자바스크립트에선 변수에서 쓰이는 논리연산자를 축약할 수 있는데 일단 논리연산자를 변수에 사용하는 경우는 Null과 같은 falsy값을 처리하기 위해서 사용한다

 

||의 경우 하나라도 falsy값이 있으면 가장 마지막 값이 들어가고 그렇지 않으면 가장 맨 앞에 있는 Truthy한 값이 들어간다

 

&&의 경우 하나라도 falsy값이 있으면 해당 falsy값이 들어가고 그렇지 않으면 마지막 값이 들어가게 된다

 

📝??

let myName = null;
let yourName;

let name = myName ?? "Mike";
console.log(name); // Mike

name = yourName ?? "Tom";
console.log(name); // Tom

${체크할 값} ?? ${체크할 값이 null 또는 undefined일 때 반환값}으로 동작하며 체크할 값이 정상이면 체크할 값이 변수에 할당됩니다 그렇지 않으면 ${체크할 값이 null 또는 undefined일 때 반환값}이 들어갑니다

 

 

 

🔗 참고 및 출처

https://ko.javascript.info/logical-operators