[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 11회차 미션 - 27강 삼항연산자, truthy와 falsy, 단축평가논리계산법

삼항연산자

삼항 연산자는 아래와 같이 ?와 : 으로 작성한다. 아래의 condition이 참일경우 true부분을 실행하고 거짓일 경우 false에 해당하는 부분을 실행한다. 먼저 삼항연산자를 사용하지 않을 경우 코드를 작성해보자.

const array = [];
let text = '';
if (array.length === 0){
  text = '배열이 비어있습니다.';
}else{
  text = '배열이 비어있지 않습니다';
}
console.log(text);

이것을 삼항연산자로 쓰면

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

이렇게 쓸 수 있다.
삼항연산자를 중첩해서 여러조건을 비교할 수도 있는데 그럴경우엔 오히려 보기 더 어려워서 그냥 if문을 추천한다.

Truthy & Falsy

이는 문법이라기보단 개념에 가까운데 코드를 한번 보자.

function print(person){
  console.log(person.name);
}
const person = {
  name : 'John'
};

print(person); //John 반환

이렇게 이름을 불러오는 코드가 있다고 하자. 근데 만약 name이 null 일경우 에러가 뜬다. 그럼 null을 잡기 위해 if문을 넣어준다.

function print(person){
  if(person === undefined || person === null){ //null checking
    return;
  }
  console.log(person.name);
}
const person = null;

print(person); //console cleared.

위 처럼 null checking을 더 깔끔하게 해줄 수 있는 방법은

function print(person){
  if(!person){ //null checking
    return;
  }
  console.log(person.name);
}
const person = null;

print(person); //console cleared.

왜 이게 가능한가? javascript에서는 null과 undefined를 falsy한 값이라 취급한다. 그래서 이를 반전시키는 !를 붙여주면 모두 true를 반환한다. 이와 비슷하게 falsy한 값이 여러개 있는데 아래 그림과 같다. (undefined, null, 0, 빈값, NaN, false)
이 여섯가지를 제외한 모든 것은 truthy한 값이다.

위와 같이 느낌표를 붙이지 않고서도 얼마든지 사용할 수 있다.
아래와 같이 조건문 안에서 쓸때 truthy할 경우 조건문 안으로 넣어준다.

const value = { a : 1 };

if (value) { //value안에 아까 여섯가지의 falsy한 값이 아닐 경우는 무조건 안으로 넣어줌
  console.log('value가 truthy하네요');
}

위의 코드는 아래와 깉이 삼항연산자로 고칠 수 있고

const value = { a : 1 };
const truthy = value ? true : false ;
console.log(truthy); //true 반환

위 코드는 아래와 같이 !!를 두번 붙임으로 더 간단히 정리할 수 있다.

const value = { a : 1 };
const truthy = !!value;
console.log(truthy); //true 반환

우리가 여기서 꼭 기억해야할 것은 아까 말한 여섯가지의 falsy한 값이다.

단축 평가 논리 계산법

논리 연산자를 사용해서 코드를 더 짧게 쓰는 것을 의미한다.

true && true //true
true && false //false
true || false //true
false || true //true

!3  //false

&& (and연산자)의 활용

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

function getName(animal){
  if(anmal){
    return animal.name;
  }
  return undefined;
}
const name = getName();
console.log(name); //undifined 반환

이 코드는 아래와 같이 논리연산자를 활용하여 작성할수도 있다.

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

function getName(animal){
  return animal && animal.name;
}
const name = getName();
console.log(name);

이게 왜 작동하는가? && 앞에 오는게 truthy한 값이라면 연산결과는 그 뒤에 오는 값을 출력한다. 앞이 falsy한 값이면 그냥 앞을 출력한다.

console.log(true && true); //&&앞 값이 참이면 뒤를 반환.
console.log(false && true); //&&앞 값이 거짓이면 앞값 그대로 반환.
console.log('hello' && 'text입니다'); //undefined, 0, '', NaN, false, null등 falsy한 값이 아니면 뭐든 뒤를 반환
console.log(0 && 'text입니다'); //undefined, 0, '', NaN, false, null등 falsy한 값이면 그냥 앞을 반환

이것을 리액트나 실제 코드에서 아래와 같은 방식으로 활용한다.

const object = {name: '이름입니다'};
const name = object && object.name;
console.log(name);// 이름입니다 반환

const object = null;
const name = object && object.name; //이런식으로 처리하면 object가 falsy여도 에러를 띄우지 않음.
console.log(name); //null

|| (or연산자)의 활용

or연산자는 대체로 falsy한 값이 많을때 활용하면 유용하다.

const namelessDog = {
  name : '',
};
function getName(animal){
  const name = animal && animal.name;
  if(!name){
    return '이름이 없는 동물입니다';
  }
  return name;
}
const name = getName(namelessDog);
console.log(name); //이름이 없는 동물입니다.

이걸 or연산자를 써서 더 간단히 만들자면

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

이렇게 가능하다. 이게 어떻게 동작이 가능할까?

console.log(false || 'hello'); //만약에 ||앞이 falsy 하다면 뒤를 반환.
console.log('' || '이름없다');
console.log(null || 'null이다');

console.log(1 || 'null이다'); // ||의 앞값이 truthy하다면 앞 그대로를 반환

아까 앞서 배운 and연산자와는 반대로 구동되는 것을 볼 수있다. 재미있네!

마치면서

오늘은 여기까지..
시청 영상 27강 1~3까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp