[자바스크립트] Truthy, Falsy , 단락평가

본 내용은 아래 강의에 대한 복습내용입니다.

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

 

---

 

true, false 값은 잘 알 것이다.

그런데 자바스크립트는 여기에서 더 나아가 특이하게 turthy 값(true에 가까운 값) // falsy한 값(false에 가까운 값) 이라는 개념이 있다.

• truthy는 boolean 값이 아니더라도 조건문에서 true처럼 작동하는 값.
• falsy도 boolean값이 아니더라도 조건문에서 false처럼 작동하는 값

//1.Falsy 한 값
let f1 = undefined;
let f2 = null;
let f3 = 0;
let f4 = -0;
let f5 = NaN;
let f6 =""; /빈문자열
let f7 = 0n //BigInte

// 2.Truthy 한값
// 위의 7가지 Falsy한 값들 제외한 나머지 값들은 모두 Truthy하다
let t1 ="hello"; //문자열
let t2 =123; //숫자 
let t3 = []; //배열
let t4 = {}; //객체
let t5 = () => {}; //함수

 

이러한 truthy, falsy 개념이 있기에 조건문을 간소화 하는데 활용할 수 있다.

let name = "Samrok"

if(name) {
 	console.log("이름이 존재한다");
 } else{
 	console.log("이름이 없다");
 }

 현재 name은 "Samrok"이라는 문자열이기 때문에 조건문에서 true로 작동하는 truthy한 값이기에 '이름이 존재한다' 가 실행된다.

그런데 만약 name값이 null,이나 undefined,""(빈문자열)이면 falsy기 때문에 '이름이 없다'가 작동되는 것이다.

 

만약에, truthy, falsy 개념이 없는 자바였다면 아래와 같이 조건문을 작성해야 했을 것이다.

if(name != null && !name.isEmpty()){
   System.out.println("이름이 존재합니다.");
} else {
    System.out.println("이름이 없습니다.");
}

 

---

먼저 자바스크립트의 단락평가라는 것을 알기 위해서는 아래 사항을 숙지해야한다.

 

자바스크립트 와 자바의  &&, || 연산자의 리턴값이 다르다.

자바에서는 &&, || 의 결과는 True 또는 False인 boolean값을 리턴한다.

그런데 자바스크립트에서는 &&와 ||의 결과로 boolean값을 리턴하는 것이 아닌 실제 피연산자 값 자체를 리턴한다.

(가장 마지막에 읽는 값을 리턴한다고 생각하면 편하다)

 

단락평가란?

논리 연산자 &&,||에서 왼쪽 피연산자만으로 전체 결과가 결정되면 오른쪽 피연산자를 아예 평가하지 않는 것을 말한다.

결론만 말하자면,

||(or연산자) 에서 왼쪽에 있는 값이 true라면 오른쪽에 true가 오나 false가 오나 true다.

그러므로 오른쪽은 보지도 않고 true인 값(왼쪽 값)만 읽는다. 따라서 리턴값은 왼쪽 피연산자 값을 반환한다.

&&(and연산자) 에서는 왼쪽이 false라면 오른쪽에 true가 오나 false가 오나 false다.

그러므로 오른쪽은 보지도 않고 false인 값(왼쪽 값)만 읽는다. 따라서 리턴값은 왼쪽 피연산자 값을 반환한다.

 

// OR(||) 예시
console.log("hello" || "world");  // "hello" (왼쪽이 truthy라서 오른쪽은 무시)
console.log("" || "world");       // "world" (왼쪽이 falsy라서 오른쪽 반환)

// AND(&&) 예시
console.log("hello" && "world");  // "world" (왼쪽이 truthy라 오른쪽 반환)
console.log("" && "world");       // "" (왼쪽이 falsy라서 오른쪽 무시)

 

그러면 또 이러한 단락평가를 활용할 수 있는 사례는?

funtion printName(person) {
	const name = person && person.name
    console.log(name || "person의 값이 없음")
}

printName() // "person의 값이 없음"
printName({name : "samRok"}) //samRok

 

만약 매개변수를 넘기지않고 printName함수를 호출하면 person값에는 undifined가 들어가게 된다.

그렇다면 const name = 에서 단락평가로 인해 오른쪽 피연산자 값은 볼 필요도 없이 왼쪽값만 읽으니 name은 undefined가 되고,

undefined || "person의 값이 없음" 에서 오른쪽까지 읽어야 하니 "person의 값이 없음"이 실행되는 것이다.

 

마찬가지로 객체를 넘겨주면 const name =에서 person.name까지 읽어야하니 name은samRok이 된다.

그리고 console.log부분에서는 name이 문자열 값이니 truthy따라서 오른쪽 값은 볼 필요도 없으니 samRok이 실행되는 것이다.

 

처의 && 덕분에 person이 없어도 안전하게 접근이 가능하고 ( "Cannot read property 'name' of undefined"같은 에러를 방지)
|| 덕분에 값이 없을때 기본값도 지정이 되는 것이다.