[Javascript] 단축 평가 논리 계산법

 

단축 평가 논리 계산법이란 이전 포스트에 게시된 truthy and falsy를 활용한 방법이다.

 

아래의 소스코드는 getName 의 파라미터에 제대로 된 객체가 주어지지 않아 에러가 발생한다.

const dog = {
  name: '강아지'
};

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

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

에러 출력

물론 아래와 같이 if문을 사용하여 에러를 피할 수 있다.

const dog = {
  name: '강아지'
};

function getName(animal) {
  if (animal) {
    return animal.name;
  }
  return undefined;
}

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

결과

이 코드를 더 줄이고 싶다면 
Truthy and Falsy를 활용한 논리연산자 사용이 가능하다. 

const dog = {
  name: "강아지"
};

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

const name = getName();
console.log(name); // undefined

결과

이 소스가 작동하는 이유는, A && B 연산자를 사용하게 될 때에 A 가 Truthy 한 값이라면, B 가 결과값이 되고.

반면, A 가 Falsy 한 값이라면 결과는 A 가 되기 때문이다.

 

정리하자면,

&& 연산자의 경우  
앞에 값이 true 거나 Truthy한 경우 무조건 뒤(오른쪽)의 갚을 리턴한다.
앞에 값이 false거나 falsy한 경우 뒤(오른쪽)의 값이 무엇이든 관계 없이 앞에 값을 리턴한다.

console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false
console.log('hello' && 'bye'); // bye
console.log(null && 'hello'); // null
console.log(undefined && 'hello'); // undefined
console.log('' && 'hello'); // ''
console.log(0 && 'hello'); // 0
console.log(1 && 'hello'); // hello
console.log(1 && 1); // 1

|| 연산자도 코드 단축이 가능하다.

 

아래와 같은 if문을 사용한 null 처리 방법을

const namelessDog = {
  name: ''
};

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

const name = getName(namelessDog);
console.log(name); // 이름이 없는 동물입니다.

|| 연산자를 사용하면 다음과 같이 단축시킬 수 있다.

const namelessDog = {
  name: ''
};

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

const name = getName(namelessDog);
console.log(name); // 이름이 없는 동물입니다.

||연산자의 경우

앞에 값이 false거나 falsy한 경우 무조건 뒤에 값을 리턴하고
앞에 값이 true거나 Truthy한 경우 무조건 앞에 값을 리턴하기 때문이다.

 

console.log(false || "hello"); //hello
console.log("" || "이름 없음"); // 이름 없음
console.log(null || "널 값"); // 널 값
console.log(undefined, "undefined"); // "undefined"
console.log(0 || "제로"); // 제로

console.log(1 || "1"); // 1(숫자)
console.log(true || "트루"); //true
console.log("여기" || "안본다"); //'여기'

참조 : https://learnjs.vlpt.us/basics/06-object.html