일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 한큐에자바
- 전자정부프레임워크
- javascript
- JDK
- break문
- Event
- hanq
- web
- Step2
- for문
- 올리버쌤
- 취업반
- 한큐
- 자바
- array
- 이클립스
- math
- Youtube 올리버쌤
- position
- 자바스크립트
- java
- spread operator
- es6
- 삼항연산자
- 유뷰브 올리버쌤
- 이벤트
- continue문
- 유튜브 올리버쌤
- egov
- 이벤트핸들러
- Today
- Total
호다닥
JavaScript: 숏서킷 평가가 뭐야? 본문
JavaScript: What is short-circuit evaluation?
출처 : codeburst.io, Brandon Morelli
해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다.
variable들을 쉽게 할당하기 위해 논리적인 OR( || )을 어떻게 사용할지 배우기.
3가지 논리적인 연산자들
자바스크립트에는 3가지 논리연산자들이 있다.
- AND &&
- OR ||
- NOT !
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에 출력될 지 생각해보자. 그리고 아래 답변을 확인해보자.
답안
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에 저장된다.
'Javascript' 카테고리의 다른 글
자바스크립트 DOM / Event - Udemy(부트스트랩4와 함께하는~) (0) | 2018.09.22 |
---|---|
JavaScript: 삼항연산자란? (0) | 2018.08.23 |
Javascript & spread 연산자 (0) | 2018.08.14 |
Javascript: 초보자를 위한 템플릿 리터럴 & 태그 기능 (0) | 2018.08.09 |
Javascript: 초보자를 위한 정규식(Regular Expressions) 배우기 (0) | 2018.08.07 |