단축평가
논리곱(&&) 연산자와 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 이를 단축 평가라고 한다. 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략한다.
논리합과 논리곱
1) 논리곱(&&)
논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환하며, 좌항에서 우항으로 평가가 진행된다.
아래의 첫 번째 피연산자 'Cat'은 Truthy 값이므로 true로 평가된다. 하지만 표현식은 이 시점에서 평가할 수 없다. 두 번째 피연산자까지 평가해 보아야다. 즉, 두 번째 피연산자가 논리곱 연산자 표현식의 평가 결과를 결정하며, 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자 'Dog'를 그대로 반환한다.
2) 논리합(||)
논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환하며, 좌항에서 우항으로 평가가 진행된다.
논리합의 첫 번째 피연산자 'Cat'은 Truthy 값이므로 true로 평가된다. 이 시점에 두 번째 피연산자까지 평가하지 않아도 이 표현식을 평가할 수 있다. 논리합 연산자는 논리 연산의 결과를 결정한 첫 번째 피연산자, 문자열 'Cat'을 그대로 반환한다.
true || anything // true
false || anything // anything
true && anything // anything
false && anything // false
단축 평가를 사용하면 if 문을 대체할 수 있다. 어떤 조건이 true 여야 실행되어야 한다면, 논리곱(&&) 연산자 표현식으로 이를 대체하고, 조건이 false 여야 실행되어야 한다면 논리합(||) 연산자 표현식으로 이를 대체할 수 있다.
let finished = true;
let message = '';
message = finished && '완료';
console.log(message); // => '완료'
finished = false;
message = finished || '미완료';
console.log(message); // => '미완료'
import React from 'react';
function App(){
const name = "리액트";
return (
<div>
{name === '리액트' && <h1> React </h1>}
</div>);
}
export default App;
이렇게 논리곱의 단축 평가를 사용하여 변수에 할당하여 사용할 수 있다.
import React from 'react';
function App(){
const name = undefined;
return (
<div>
{name || 'React'}
</div>
);
}
export default App;
여기서 name이 undefined라면 ‘React’를 반환한다.
아래의 글을 참고하여 글을 작성하였습니다.
