[JavaScript] 삼항연산자, Truthy와 Falsy, 단축 평가 논리 계산법

삼항 연산자

 

condition ? true : false;

 

조건이 참이면 true를 반환하고, 거짓이면 false를 반환합니다. 

true 혹은 false 위치에 어떠한 값이 와도 무방합니다. 결과에 따라 해당 값을 반환합니다. 

const array = [];
let text = array.length === 0
	? '배열이 비어있습니다.'
	: '배열이 비어있지 않습니다.';

console.log(text); // '배열이 비어있습니다.'출력. 

현재 array 배열의 길이가 0인 것이 true 이므로 true의 값인 '배열이 비었습니다.'가 출력됩니다. 

만약 array 배열의 길이가 0이 아니라면 조건의 결과가 false 이므로 '배열이 비어있지 않습니다.'가 출력될 것입니다.

 

const condition1 = false;
const condition2 = false;

const value = condition1
	? '와우!'
	: condition2
		? 'blabla'
		: 'foo'

console.log(value);
// foo 출력.

삼항 연산자는 위의 코드처럼 중첩되게 사용할 수 있습니다. 

condition1이 falsecondition1이 false 이므로 condition2를 호출합니다.

condition2는 false 이므로 foo를 호출합니다.

 

하지만 이런 식으로 작성하는 것보다 if 문을 활용하여 구현하는 것이 훨씬 더 깔끔합니다.

 

 

 

Truthy와 Falsy

 

Truthy는 true 같은 것이고 Falsy는 false 같은 것입니다. 이런 식으로 말씀드리면 이해하기가 힘드니, 

코드를 보여드리겠습니다. 

console.log(!undefined); // true 출력.
console.log(!null); // true 출력.
console.log(!0); // true 출력.
console.log(!''); // true 출력.
console.log(!NaN); // true 출력.
console.log(!false); // true 출력.

/*
const value = 1 / 'asdf';  
console.log(value); // NaN출력.
*/


console.log(!3); // false 출력.
console.log(!'hello'); // false 출력.
console.log(!['array']); // false 출력.
console.log(![]); // false 출력.
console.log(!{}); // false 출력.

위의 코드에서 true를 출력한 값들은 전부 falsy 한 값입니다. falsy한 값들은 제외한 웬만한 것들은 truthy한 값입니다.

 

긴 주석으로 달아 놓은 것은 NaN 설명입니다. 

 

참고로 배열과 객체는 그냥 truthy한 값입니다. falsy한 값들을 잘 알아두면 훗날 코드를 효율적으로 작성하는 데 도움이 될 것 같습니다. 

const value = {};

const truthy = !!value;
console.log(truthy); // true 출력.

참고 위의 코드에서 !! 은 삼항 연산자 대신 이런 식으로도 작성 가능한 것을 보여줍니다. 

빈 객체는 truthy 한 값이므로, 앞에 느낌표를 두 번 붙여줌으로써 다시 true로 변환하여 출력해 주는 것입니다. 

 

 

단축 평가 논리 계산법

단축 평가 논리 계산법이란 논리 연산자를 사용해서 코드를 더 짧게 쓰는 방법을 의미합니다. 

대표적으로 && 연산자와 || 연산자가 있습니다.

코드로 이해시켜드리겠습니다. 

 

&& 연산자

console.log(true && 'hello'); // hello 출력.
// 앞에 있는 것이 true면은 뒤에 값 출력.

console.log(false && 'hello'); // false 출력.
// 앞에 있는 것이 falsy면은 뒤에 값은 보지도 않는다.

console.log('hello' && 'bye'); // 'bye' 출력.
// 앞에 있는 것이 truthy한 값이기 때문에 뒤에 값을 출력한다.

console.log(null && 'hello'); // null 출력.
// 앞에 있는 것이 falthy한 값이기 때문에 null 출력.

const object = { name : 'asdf'};

const name = object && object.name;
console.log(name); // 'asdf' 출력.

&& 연산자는 만약 두 값을 비교한다고 했을 경우, 앞에 있는 값이 truthy한 값이면 뒤에 값을 출력합니다. 

앞에 있는 값이 falsy 한 값이면 뒤에 값은 보지도 않고 falsy한 값을 출력합니다. 

 

const name = object && object.name; 이 코드를 설명하자면, 

앞에 있는 object는 객체이기 때문에 기본적으로 truthy 한 값입니다. 

&& 연산자를 사용했기 때문에 앞에 있는 object는 truthy한 값이므로 뒤에 있는 object.name 값을 

변수 name에 저장하는 코드입니다. 

 

만약 object = null이라면 name은 null을 출력했을 것입니다. 

 

&&연산자 사용 예를 보여드리겠습니다. 

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

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

const name = getName();
console.log(name);
// getName(dog); 는 dog출력. getName()은 undefined출력.

위의 return 코드는 위의 설명과 유사합니다. 

 

dog 객체는 falsy 한 값을 지정하지 않는 이상 항상 truthy 한 값입니다.

const name = getName() 코드에서 getName(dog)를 넣어 호출하게 되면, dog 객체는 animal의 인자로 들어가게 되고 그때 animal은 truthy 한 값이기 때문에 뒤에 있는 animal.name (= dog.name)을 호출하게 됩니다. 

 

만약 위의 코드처럼 그냥 getName()을 호출하게 되면 animal은 빈 값이 들어가게 되므로 animal은 falsy 한 값이 됩니다. 그래서 undefined를 출력합니다.

 

 

|| 연산자

console.log(false || 'hello'); // 'hello' 출력.
console.log(null || 'ㅎㅇ'); // 'ㅎㅇ' 출력.
console.log(undefined || 'defined 되지 않았다.') // 'defined 되지 않았다.' 출력.
    
console.log(1 || '음'); // 1 출력. 
// 앞에 값이 truthy하면 뒤에 값을 보지 않는다.

console.log(true || '여긴 안본다.'); // true 출력.
console.log('와아' || '나좀 봐줘'); // '와아' 출력.
console.log([] || 'ㅋㅋ'); // [] 출력.

// or 연산자는 어떠한 값이 없을 때, 없으면 이 값을 사용할래! 할 때 유용하다.

or 연산자(|| 연산자)는 앞에 있는 값이 falsy 하면 뒤에 값을 출력합니다. 

앞에 값이 truthy 하면 뒤에 값을 보지도 않습니다. && 연산자와 반대 개념이라고 생각하시면 됩니다. 

 

사용 예를 보여드리겠습니다. 

const namelessDog = {
    name: '',
};

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

const name = getName(namelessDog);
console.log(name); // '이름이 없는 동물입니다.' 출력.
// 만약 name에 값을 줬다면 해당 값이 출력된다.

&&연산자와 ||연산자를 두 개 다 활용한 코드 예입니다. 

 

namelessDog는 객체이기 때문에  && 연산자를 활용한 const name = animal && animal.name 코드에선 

name 변수에 animal.name의 값이 들어가게 됩니다. 

 

하지만 name의 값은 ''(빈 값)으로 falsy 한 값입니다. 그래서 앞에 있는 값이 falsy한 값이기 때문에 뒤에 있는

'이름이 없는 동물입니다.'가 출력됩니다. 

 

만약에 name에 값을 줬다면 해당 값이 출력될 것입니다. 

 

 

 

강의

 

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스 (fastcampus.co.kr)

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스