단축 평가 논리 계산법 (short-circuit evaluation) --> react에서 조건부 랜더링에 사용됨

&&로 값을 비교하기

const dog = {
    name: '멍멍이'
};

function getName(animal){
    return animal && animal.name;
}

const name = getName(dog);
console.log(name);

//출력값
멍멍이

여기서보면 궁금증이 생깁니다. 분명 형식은 Boolean으로 구분하는것같지만 출력값은 다르게 나오기 때문이죠.

 

이 특성을 알기 위해 다른 예시를 보겠습니다.

console.log(true && 'hello');
console.log(false && 'hello');
console.log('hello' && 'bye' && 'nice');

//출력값
hello
false
nice

&&특성을 보면 만약 비교값중에 무조건 falsy값이 나오면 뒤의 값을 보지도 않고 false라고 출력하고, 만약 모두가 true일 경우에는 앞에 값을 보지않고 뒤에 값을 출력하는것을 볼 수 있습니다.

 

 

 

const namelessDog = {
    name: '뭉뭉이'
};

function getName(animal) {
    const name = animal && animal.name;
    return name || '이름없는 동물입니다.';
}

const name = getName(namelessDog);
console.log(name);

name값을 true인지 false인지 알아내고 return할때 값을 비교해서 반환하는것도 방법입니다.