[JS]단축평가short-circuit evaluation

 

1.단축평가

연산자(operator)는 하나 이상의 표현식을 대상으로 산술,할당,비교,논리,타입,지수 연산 등을 수행해 하나의 값을 만든다.

그 중 논리 연산자를 이용한 단축평가가 리액트를 공부하던 중 나왔는데, 이해가 부족해서 정리를 하려고 한다.

 

|| 논리합(OR)또는 && 논리곱(AND)의 평가 결과는 불리언 값이 아닐 수도 있다. 아래의 코드를 보자.

'🙀' && '😻' --> 😻

AND연산자는 두개의 피연산자 모두 true일때 true이다.

첫 번째 값 '🙀'은 Truthy값이므로 true다. 하지만 아직까지는 위 표현식을 평가 할 수없다.

두 번째 '😻' 까지 평가해야지 위의 표현식을 평가할 수 있다. 두번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 반환하는 것이다.

즉 AND연산자는 논리 연산의 결과를 결정하는 두 번째  피연산자, '😻'가 그대로 반환된다.

 

'🙀'||'😻'-->🙀

OR연산자도 마찬가지다.OR연산자의 경우 둘 중 하나라도 true라면  true를 반환한다. 

첫 번째 피연산자가 true이 때문에 두 번째 피연산자는 확인 하지 않고 바로 첫 번째 값'🙀'를 반환한다.

 

 

---

 

단축평가 표현식과 평가 결과

단축 평가 표현식	평가 결과
true || 결과	true
false || 결과	결과
true && 결과	결과
false && 결과	false

평가 규칙에 따른 예

//OR 연산자
'앞의 동작' || '뒤의 동작' // '앞의 동작'
false || '뒤의 동작' // '뒤의 동작'
'앞의 동작' || false //'앞의 동작'

//AND 연산자
'앞의 동작' && '뒤의 동작' //'뒤의 동작'
false && '뒤의 동작' //false
'앞의 동작'&& false //false

---

단축 평가의 활용

단축 평가를 사용하면 if문을 대체 할 수 있다.

✅조건이 true일 때 수행

let result = true;
let message = '';

//if문
if(result) message = '완료 되었습니다'

//if문을 대체
message = result && '완료 되었습니다'
console.log(message)//'완료 되었습니다'

❎조건이 false일 때 수행

let result = false;
let message ='';

if(!result) message = '통신 실패';
message = result || '통신 실패'
console.log(message)//'통신 실패'

 

 

 

 

 

 

참고 도서

이웅모 모던 자바스크립트Depp Dive