[자바스크립트] 논리연산자(&&, ||) 단축평가

# 단축평가란?

||(논리합), &&(논리곱) 연산자는 왼쪽부터 오른쪽으로 평가를 진행하는데,

중간에 평가 결과가 나오면 오른쪽 끝까지 가지 않고 평가 결과를 반환해 버린다.

이를 '단축 평가(short circuit evaluation)'라고 하며, 피연산자의 타입을 변환하지 않고 그대로 반환한다.

 

단축평가를 활용하면 아래와 같은 코드가 가능해진다.

"apple" || "banana";  // "apple"

"apple" && "banana";  // "banana"

 

하나하나 차근차근 살펴 보자.

 

 

1. ||(논리합) 연산자의 단축 평가

|| 의 경우, 둘 중 하나만 true면 true로 평가되므로 왼쪽 피연산자가 true이면 바로 true를 반환한다.

true || false;  // true(오른쪽의 false는 볼 것도 없이, 왼쪽의 true 반환)

true || true;  // true(오른쪽의 true는 볼 것도 없이, 왼쪽의 true 반환)

정확히 표현하면, "오른쪽은 거들떠 보지도 않고, 왼쪽 피연산자의 값을 그대로 반환" 한다.

 

 

그런데 만약 왼쪽 피연산자가 "apple" 같은 문자열이라면 어떻게 될까?

"apple" || false;  // "apple"

"apple" || true;  // "apple"

"apple"은 빈 문자열이 아니므로 true로 평가된다.

따라서 오른쪽은 볼 것도 없이, 바로 "apple"의 값을 그대로 반환한다(true로 변환하지 않음)

이게 바로 '단축평가'다!

 

 

이번엔 왼쪽 피연산자가 false인 경우다.

왼쪽이 false이므로, 오른쪽 피연산자의 값이 true/false 여부를 결정한다.

false || true;  // true (오른쪽 값이 반환된다)

false || false;  // false (오른쪽 값이 반환된다)

 

즉, || 연산자는 왼쪽이 false이면, "오른쪽 피연산자 값을 그대로 반환" 한다.

 

 

오른쪽 피연산자를 "banana" 문자열로 바꿔보자.

false || "banana";  // "banana"

왼쪽 피연산자가 false이므로, 오른쪽 피연산자인 "banana"가 타입 변환 없이 그대로 반환된다.

이게 바로 논리합 연산자(||)의 '단축평가'다.

 

 

마지막으로 둘다 문자열인 경우엔 어떻게 될까?

"apple" || "banana";  // "apple"

"apple"도 true이고, "banana"도 true이다.

왼쪽이 true로 평가되므로, 오른쪽은 볼것도 없이 '왼쪽 값을 그대로 반환'한다.

즉, "apple"이 반환된다.

 

 

논리합 연산자(||)의 패턴별 단축평가 결과를 정리하면 다음과 같다.

논리합 연산자 패턴	단축평가 결과
값 || true	값
값 || false	값
true || 값	true
false || 값	값
값A || 값B	값A

 

 

 

2. &&(논리곱) 연산자의 단축 평가

&& 의 경우 둘다 true여야만 true이므로, 왼쪽 피연산자가 false면 바로 false로 평가된다.

false && true;  // false (오른쪽은 볼것도 없이, false)

false && false;  // false (오른쪽은 볼것도 없이, false)

 

 

 

왼쪽이 false인 경우엔, 오른쪽에 "banana" 문자열이 오더라도, 볼 것도 없이 false가 반환된다.

false && "banana"; // false

정확히 표현하면, "왼쪽이 false면, 오른쪽은 볼 것도 없이 왼쪽 값을 반환"한다.

 

 

예를 들어 왼쪽에 null이 오는 경우다.

null && false;  // null

null은 false로 평가되므로, 오른쪽은 볼 것도 없이 왼쪽 값인 nul이 반환된다.

(false로 타입이 변환되지 않고 null 그대로 반환된다)

 

 

이번엔 왼쪽이 true인 경우다.

왼쪽이 true라면, 오른쪽도 true여야만 true를 반환한다.

true && true;  // true

true && false;  // false

다르게 표현하면, "왼쪽이 true이면 오른쪽 값을 그대로" 반환한다.

(즉, 오른쪽이 true면 true로, false면 false로 반환한다)

 

 

만약 왼쪽이 "apple" 문자열이면 어떻게 될까?

"apple" && true; // true

"apple" && false; // false

"apple"은 true로 평가되기 때문에, 오른쪽 값이 반환된다.

 

 

만약 왼쪽이 true이면서 오른쪽은 "banana" 문자열이면 어떻게 될까?

true && "banana";  // "banana"

왼쪽이 true인 경우, 오른쪽의 값을 그대로 반환하므로 "banana"가 반환된다.

(참고로 "banana"는 true로 평가되긴 한다)

 

 

만약 양쪽 다 문자열이라면 어떻게 될까?

"apple" && "banana"  // "banana"

왼쪽 "apple"이 true로 평가되므로, 오른쪽 값인 "banana"가 타입 변환 없이 그대로 반환된다.

이게 &&(논리합 연산자)의 '단축평가'다.

 

 

논리합 연산자(||)의 패턴별 단축평가 결과를 정리하면 다음과 같다.

논리곱 연산자 패턴	단축평가 결과
false && 값	false
true && 값	값
값 && false	false
값 && true	true
값A && 값B	값B

 

 

근데 이런 논리연산자의 단축평가를 어디다 쓸 수 있을까?

 

 

 

# 단축평가 사용법

단축 평가는 ① 'null / undefiend 체크',  ② '함수 매개변수 기본값 설정', ③ '조건부 변수값 할당' 등에 사용할 수 있다.

 

1. null / undefined 체크

단축 평가를 사용하면 null, undefined과 관련된 문제를 예방할 수 있다.

const obj = null;

const myName = obj.name;  // TypeError: Cannot read property 'name' of null

null로 선언된 변수의 프로퍼티를 참조하려고 해서 타입에러가 발생하고 있다.

 

 

&& 연산자의 단축평가를 사용하면 이런 에러를 예방할 수 있다.

const obj = null;

const myName = obj && obj.name;  // 에러가 발생하지 않는다.

console.log(myName);  // null

1) obj가 null이면 false로 평가되므로, 오른쪽은 볼 것도 없이 왼쪽 값인 obj(null)이 할당된다.

2) obj가 null이 아니면 true로 평가되므로, 오른쪽의 obj.name 값을 참조한다.

이 경우엔 1번 케이스로 작동했다.

 

 

(참고) undefined의 프로퍼티를 참조할 때도 동일한 문제가 발생하며, 동일하게 해결할 수 있다.

let a;  // 초기화 없이 선언만 하면 undefined가 할당된다.

cosole.log(a.name) // TypeError: Cannot read property 'name' of undefined

console.log(a && a.name);  // undefined

 

단축평가를 활용하면 안정성 있는 코딩이 가능해진다고 볼 수 있겠다.

 

 

 

2. 함수 매개변수 기본값 설정

단축평가를 사용하면, 함수 매개변수의 기본값을 설정할 수 있다.

 

아래 코드를 보자.

function getName(name){

    const yourName = name;
    
    return yourName;
    
}


getName();  // undefined

getName() 함수 호출 시, name 파라미터에 인수를 전달하지 않았다.

이 경우, name 파라미터에는 undefined가 내부적으로 할당된다.

 

만약 함수의 리턴값인 undefined 값을 다른 곳에서 참조할 경우, 문제의 소지가 될 수 있다.

(여기서 문제가 발생한지도 모르고 헤맬 수도 있고...)

 

 

|| 연산자의 단축평가를 사용하면, 매개변수의 기본값을 설정할 수 있다.

function getName(name){

    const yourName = name || "무명";
    
    return yourName;
    
};


getName('정우성')  // "정우성"

getName();  // "무명"

1) 매개변수 name에 값이 할당된다면 true로 평가되므로, name값을 사용한다.("정우성")

2) name을 할당하지 않는 경우, name에 undefined가 할당되어 false로 평가 되므로 ||연산자 오른쪽의 "무명"을 사용한다.

 

 

마찬가지 방식으로, 아래와 같이 외부에서 받은 값을 체크할 때도 사용할 수 있다.

let response = '';  // 외부에서 받은 값이라고 가정

let myResult = response || 'default';

console.log(myResult);  // 'default'

 

 

 

 

3. 조건부 변수값 할당

if문으로 변수에 값을 할당하는 코드를 단축평가로 대체할 수 있다.

 

<if문으로 변수값 할당>

let condition = true;
let result = '';

if (condition) result = '참';

console.log(result);  // '참'

 

 

<단축평가로 변수값 할당>

let condition = true;
let result = '';

result = condition && '참';  // if문 대신, 단축평가 사용

console.log(result);  // '참'

condition 값이 true이면, 오른쪽의 '참'이 반환되어 할당된다.

condition 값이 false이면, 왼쪽(false) 값이 그대로 반환되어 false가 할당된다.

 

각자 코딩 스타일에 맞게 활용해봐도 좋을듯 하다.

---

비슷한 역할을 수행하는

삼항조건연산자, 옵셔널체이닝연산자, null병합연산자에 대해서는 아래 글을 참고

[자바스크립트] 삼항 조건 연산자, 옵셔널체이닝 연산자, null병합 연산자: 변수, 객체, 값의 null 체크 검사 방법