JavaScript: 숏서킷 평가가 뭐야?

JavaScript: What is short-circuit evaluation?

출처 : codeburst.io, Brandon Morelli

해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다.

 

variable들을 쉽게 할당하기 위해 논리적인 OR( || )을 어떻게 사용할지 배우기.

 

 

3가지 논리적인 연산자들

자바스크립트에는 3가지 논리연산자들이 있다.

• AND    &&
• OR    ||
• NOT    !
  

오늘 우리는 OR || 에 대해 배워볼 것이다. 자바스크립트에서 OR 연산자는 모든 피연산자함수가 true일 때, true를 return한다.

true || true;
// true

true || false;
// true

false || false;
// false

 

자바스크립트에서 논리 연산자에는 두가지 중요한 특성들이 있는데 그 중 하나는 왼쪽에서부터 오른쪽 방향으로 evaluate 하는 것이다. 그것을 short-circuit 숏서킷 이라고 한다.

 

자바스크립트에서 OR 표현식을 평가한다는 것이 무엇을 의미할까? 만약 첫번째 피연산자 함수가 true이면 자바스크립트와 숏서킷은 두번째 피연산자 함수를 확인조차 하지 않는다. 아래 예제 코드에서 asterisks(****)는 어떤 value도 의미하지 않는다. ― 자바스크립트의 OR 연산자는 이것을 확인조차 하지 않을 것이기 때문에 전혀 문제되지 않는다. 

true || ****
// true

 

그렇다면 이것이 왜 중요한 것인가?

 

아래 예제코드를 보면 우리는 person object를 가지고 있고, 객체 내부에 name과 age가 있다. 우리가 person 객체가 가지고 있는 job 을 console.log 하고자 할 때, 문제는 우리는 person 객체에 job 이라는 key 값이 존재하는지 여부를 알 지 못한다는 것이다. 이때 우리는 || 와 숏서킷 평가를 사용하여 이 문제를 해결할 수 있다. 

var person = {
  name: 'Jack',
  age: 34
}

console.log(person.job || 'unemployed');
// 'unemployed'

 

우리가 console.log 한 것은 person.job의 value OR 'unemployed' 기본 문자열이다. person.job이 존재하지 않으면 우리는 undefined 를 return 받을 것이다. undefined는 거짓 값이다. 자바스크립트에서는 || 의 다른 부분에 있는 value 값이 무엇이든 그곳에 있는 값을 return 받을 것이다. 

 

예시를 좀더 확실히 하기 위해 우리는 person 객체에 job이라는 key 값을 있을 때는 어떻게 동작하는지 확인해 볼 것이다. 

var person = {
  name: 'Jack',
  age: 34,
  job: 'teacher'
}

이번에는 person.job이 존재한다. 그러므로 방정식 숏서킷과 person.job의 value ('teacher')이 console에 찍힐 것이다. 

 

 

 

또 다른 예제

여기 stack overflow에서 유명한 코드가 있다. 

var a;
var b = null;
var c = undefined;
var d = 4;
var e = 'five';

var f = a || b || c || d || e;

console.log(f);

위 코드 예제를 보고 무엇인 console에 출력될 지 생각해보자. 그리고 아래 답변을 확인해보자.

 

 

답안

정답은 4다. 

var a; // undefined (falsy value)
var b = null; // null (falsy value)
var c = undefined; undefined (falsy value)
var d = 4; // number (NOT falsy)
var e = 'five'; // assigment short circuits before reaching here

var f = a || b || c || d || e;

a,b,c 는 모두 거짓인 값들이 할당되었다. OR 논리식에서 거짓값을 만나면 이것은 계속해서 평가를 계속한다. 그리고 d 변수에 다다르면 4라는 값을 출력하고 숏서킷 등식에 의해 4는 variable f에 저장된다.