[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

/** && **/
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

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

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

밑에 설명할 ??와 다른 점은 0의 값도 falsy값으로 처리한다

 

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

→ data.length === 0 || {false일 떄 실행할 내용}

 

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

→ data.length === 0 && {true일 떄 실행할 내용}

 

📝??

let myName = null;
let yourName;

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

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

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

 

 

🔗 참고 및 출처

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