main-logo

논리 연산자를 사용한 단축 평가

단축 평가 논리 계산법

profile
sunny
2021년 06월 06일 · 0 분 소요

들어가며

다른 팀원과 함께 코드를 작성하다 보면 다양한 코드 표현을 확인 할 수 있습니다. 표현식 자체도 익숙하고 결과값이 이해는 가는데 어떤 이유로 그런지 알아보다 “단축 평가 계산법”이라는 것을 알게 되었습니다. 어려운 주제는 아니지만 ‘흔하게 볼 수 있는 표현식이 이런 이유로 작성되는 거였구나…’하고 가볍게 훑어보았으면 합니다.

 

단축 평가(short-circuit Evaluation)란?

표현식을 평가하는 도중에 결과가 확정된 경우 나머지 평가 과정을 생략하는 것

자바스크립트 엔진은 표현식을 평가함에 따라 암묵적 타입 변환이 일어나는데, 단축 평가 시 마지막 평가 결과로 나온 피연산자의 타입을 변환하지 않고 그대로 반환합니다.

 

논리합(||) 연산자의 단축 평가

논리합 연산자는 두 개의 피연산자 중 하나만 True여도 True로 반환됩니다.
즉, 첫 번째 피연산자의 값이 Truthy한 값인 경우, 첫 번째 피연산자의 값이 반환됩니다.

true ||
  'JS' * // true
    false ||
  'JS'; // 'JS'
'javascript' || 'JS'; // javascript

  • ’*‘의 표현식을 이용하는 방법

    1. 값이 없는 경우, 초기값을 설정해 줄 때 사용하면 좋습니다.
// 논리합 단축 평가 사용하지 않을 경우
function getAge(data) {
  return (name = data.age);
}
getAge(); // TypeError: Cannot read property 'age' of undefined;

// 논리합 단축 평가 사용할 경우
function getName(data) {
  return (name = data.name || '이름을 넣어주세요.');
}
getName(); // 이름을 넣어주세요.

 

  1. if문 대체
    예제는 간결하게 작성하였으나 if문의 조건식이 길거나 혹은 괄호가 중첩이 많이 되거나, 논리연산자가 복잡하게 연결된 경우에 코드를 조금 더 간결하게 정리할 수 있습니다.
const isFalse = false;

// if 사용할 경우
if (!isFalse) const message = '거짓';

// 논리합 단축 평가 사용할 경우
const message = isFalse || '거짓';



논리곱(&&) 연산자의 단축 평가

논리곱 연산자는 두 개의 피연산자가 모두 True일 경우 True로 반환한다
즉, 마지막 피연산자의 값까지 모두 Truthy한 값인지 평가를 내서 두 번째 피연산자의 값이 반환된다.

* true && 'JS' // JS
false && 'JS' // false
'javascript' && 'JS' // JS

  • ’*‘의 표현식을 이용하는 방법

    1. 특정 값이 유효할 경우 어떤 값을 조회하거나 설정해야 할 때 유용합니다.
  Vue.js | isDisable = true, useZero = true
  <template>
    <button class="num" :class="isDisable && 'disable'" @click="useZero && pressNum('0')">button</button>
  </template>


2. if문 대체

const isTrue = false;

// if 사용할 경우
if (isTrue) const message = '참';

// 논리합 단축 평가 사용할 경우
const message = isTrue && '참';


3. 객체가 null / undefined인 경우,
변수의 프로퍼티값을 조회하면 타입에러를 발생하는데 초기값 설정을 통해 에러를 방지할 수 있습니다.

const obj = null;
const obj2 = undefined;

// 단축 평가 이용 전
const newObj = obj.key; // TypeError: cannot read property 'key' of null;
const newObj2 = obj2.key; // TypeError: cannot read property 'key' of undefined;

// 단축 평가 이용 후
const newObj = obj && obj.key; // null
const newObj2 = obj2 && obj2.key; // undefined



마치며

단축 평가는 코드를 작성하는 하나의 코딩 스타일로 사용 유무는 각자의 선택이지만 사용해보니 작성 노력 대비 코드 라인 수나 눈으로 봤을 때 간결해 보입니다. 새롭게 익힌 만큼 앞으로 활용하여 작성하는 노력을 해볼 예정입니다.

읽어주셔서 감사합니다.

참고문서