[JavaScript] 자바스크립트 '&&', '||' 연산자 활용법 ( feat. 리액트 )

&& 연산자

&& 연산자는 논리적 AND 연산자이다. 

모든 피연산자가 true 일 때 해당 피연산자의 집합이 true가 된다.

 

if( someFlag && otherFlag ){
    // ...
}

 

다른 프로그래밍 언어를 먼저 접한 사람이라면 && 연산자를 위와 같이 단순히 논리연산자로만 사용할 것이다.

 

하지만 자바스크립트에서 && 연산자는 단순히 논리연산자로만 사용되지 않는다.

 

test = false && true    // false
test = "" && "test"    // ""
test = 12 && 4    // 4
test = 12 && 4 && 2    // 2

 

&& 연산자는 피연산자를 왼쪽부터 평가하면서 첫 falsy(거짓 같은 값) 피연산자를 만나면 바로 해당 피연산자의 값을 반환한다. 만약 모든 값이 truthy(참 같은 값)이라면 마지막 피연산자의 값을 반환한다.

 

여기서 falsy 값은 아래에 해당한다.

• Boolean 값 false
• null
• undefined
• Nan
• 0
• "" or '' or ``(빈 문자열)

 

이때 중요한 것은 첫 falsy 피연산자를 만나면 오른쪽은 평가 되지 않고 바로 첫 falsy 피연산자의 값을 반환한다는 점이다.

이를 단축 평가(Short-circuit Evaluation)라고 한다.

 

false && foo();	// foo() 함수는 실행되지 않음

 

예를 들어 위와 같은 코드가 있다면, foo() 함수는 실행되지 않는다. false 값을 만났기 때문에 바로 false를 반환하고 평가를 종료하기 때문이다.

 

이러한 특성을 활용해 && 연산자는 다음과 같이 활용할 수 있다.

 

null 혹은 undefined 값 체크

const student = null;
const studentName = student.name;	// Error

 

위와 같이 student라는 객체가 null 값 일 때 해당 객체의 프로퍼티에 접근하려면 어떻게 될까?

에러가 발생할 것이다.

 

studentName = student && student.name;	// null

 

위와 같이 && 연산자를 활용하면 student가 null 인 것을 체크하고 에러 없이 null 값을 반환할 것이다.

 

이런 식으로 null 혹은 undefined 값을 체크할 수 있다.

 

리액트에서의 활용법

나는 실무에서 리액트 개발을 할 때 && 연산자를 아래와 같이 자주 활용한다.

( ※ 리액트 개발에 대해 잘 모른다면 아래 부분은 넘어가도록 하자.)

 

return (
	{ isConfirmModalOpen && <ConfirmModal/>}
	...
)

 

보통 불리언 값 && JSX 패턴으로 많이 사용한다.

즉, 앞의 불리언 값이 true 일때만 뒤 JSX를 반환하여 렌더링 하도록 하는 패턴이다.

 

예를 들어 위 코드에서 확인 버튼을 누르면 isConfirmModalOpen이라는 불리언 값이 true로 변한다고 하자.

그럼 <ConfirmModal/> JSX가 반환되어 렌더링 될것이다.

 

만약 isConfirmModalOpen 불리언 값이 false 라면 단축 평가에 의해 바로 false를 반환하고 뒤 JSX는 무시될 것이다.

 

리액트에서는 이렇게 && 연산자를 활용해 조건부 렌더링을 할 수 있다.

 

특히 return() 문에서 if문을 쓰지 못하기 때문에 조건부 렌더링을 할 때 && 연산자는 더욱 편리하다.

 

 

 

|| 연산자

|| 연산자는 논리적 OR 연산자이다.

하나의 피연산자라도 true라면 해당 피연산자의 집합이 true가 된다.

 

true || false;    // true
false || true;    // true
"test" || false    // "test"
false || 12    // 12
"hello" || "world"	// "hello"

 

|| 연산자는 피연산자를 왼쪽부터 평가하면서 첫 truthy 피연산자를 만나면 바로 해당 피연산자의 값을 반환한다.

만약 모든 값이 falsy라면 마지막 피연산자의 값을 반환한다.

 

&& 연산자가 첫 falsy 피연산자의 값을 반환하는 것과 달리, || 연산자는 첫 truthy 피연산자의 값을 반환한다.

 

let input = null;
let defaultValue = 30;
const test = input || defaultValue;	// 30

 

|| 연산자는 기본값(default)을 할당할 때 활용하기 좋다.

 

위와 같이 사용자로부터 받는 input 값이 falsy라면 뒤 defaultValue를 반환하여 test에 할당될 것이다.

 

 

---

참고

 

1. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Logical_AND

2. https://mynameisdabin.tistory.com/10

3. https://curryyou.tistory.com/193