서론
// ... 생략
return (
<Root>
{data && <p>{data.name}</p>}
</Root>
)리액트 프로트를 진행하다보면 위와같은 코드를 심심치 않게 쓴다. 나는 보통 url 을 통해 데이터를 fetching
하였을때 비동기 처리를 위해 데이터가 있을때만 해당 코드가 동작하게 하는 예외처리 이구나 하고
아무생각 없이 사용하곤 하였다. 그러던 중 해당 코드는 자바스크립트의 논리연산자를 사용한 단축 평가 라는 개념을
사용한다는 것을 알게되었고 이에대해 정리하려고 한다.
본론
- 논리곱(&&) 연산자는 두개의 피연산자가 모두 true 로 평가될 때 true 를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.
- 논리합(||) 연산자는 두개의 피연산자 중 하나만 true 로 평가되어도 true 를 반환한다. 논리합 연산자 또한 좌항에서 우항으로 평가가 진행된다.
논리곱 연산자와 논리합 연산자는 논리 연산의 결과를 결정하는 피연산자 를 타입 변환하지 않고 그대로 반환한다. 이를 단축 평가라 한다.
단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 뜻한다.
// 논리곱(&&) 연산자
'a' && 'b' // => 'b'
false && 'b' // => false
'a' && false // => false
// 논리합(||) 연산자
'a' || 'b' // => 'a'
false || 'b' // => 'b'
'a' || false // => 'a'단축 평가를 사용하면 if 문을 대체할 수 있다. 어떤 조건이 true 여야 실행되어야 한다면, 논리곱(&&) 연산자 표현식으로 이를 대체하고, 조건이 false 여야 실행되어야 한다면 논리합(||) 연산자 표현식으로 이를 대체할 수 있다.
let finished = true;
let message = '';
message = finished && '완료';
console.log(message); // => '완료'
finished = false;
message = finished || '미완료';
console.log(message); // => '미완료'결론
단축평가에 대해 처음 알아보기 전에는 그냥 비교연산자와 같이 비교하여 true / false 를 반환하는거 아니였나..? 라고 막연하게
생각하였는데 그렇지 않고 논리 연산의 결과를 결정 하는 피연산자를 그대로 타입 변환 없이 그대로 반환한다는 특징을 가지고 있다.
이를 잘만 사용한다면 리액트를 사용할때, 논리식을 사용하여 데이터가 없거나 아직 비어있을때 에러를 방지하는 처리를 해줄 수 있겠다는 결론에 다달았다.