[JavaScript] 논리 연산자(&&, ||)와 단축 평가

OR 연산자가 둘중 하나의 조건만 참일 경우 참을 반환한다는것도 알고, AND 연산자는 두 조건 모두 참일 경우 참을 반환한다는 것도 아는데, 이게 왜 이렇게 동작하는지에 대해 고민한적이 없었습니다.

그래서 이번 포스팅을 작성하면서 OR, AND 연산자가 어떻게 동작하는지와 단축 평가에 대해 알아보았습니다.

 

논리 연산자(Logical Operator)

프로그래밍에서의 논리 연산자는 세 가지 종류가 있습니다.

!	NOT
&&	AND
||	OR

 

보통 논리 연산자는  다음과 같이 if 문에서 거짓을 참으로 바꿔주거나(!) 다중 조건(&&, ||)을 지정해 줄 때 많이 사용합니다.

 

아래는 일반적으로 논리 연산자를 if 문에서 사용하는 예제입니다.

 

첫번째 if 문에서 answer가 'yes'이거나 혹은(OR) 'Yes'라면(둘중 하나라도 조건을 만족한다면) console.log()를 수행할 것입니다. 그리고 answer는 'yes'이고 첫번째 조건을 만족하기 때문에 console.log()를 수행하게 됩니다.

두번째 if 문의 경우 answer가 'yes' 이면서(AND) 'Yes'일 경우에만 cosnole.log()를 수행할 것입니다. 하지만 answer는 'yes'라는 값만 가지고 있어 두번째 조건('Yes')을 만족할 수 없기 때문에 console.log()를 수행할 수 없습니다.

const answer = 'yes'

if(answer == 'yes' || answer == 'Yes') {
    console.log('The answer is "yes"');
}

if(answer == 'yes' && answer == 'Yes') {
    console.log('The answer is "yes"')
}

The answer is "yes"

 

왜 그런가?

다음 예시를 보도록하겠습니다.

const orValue = 0 || 100
const andValue = 0 && 100

console.log(orValue)
console.log(andValue)

100
0

여태까지 사용했던 논리 연산자와는 다르게 값을 할당하는데 논리 연산자를 사용하였습니다.

이게 가능한 이유는 논리 연산자의 동작 방식에 있습니다.

 

우선 OR 연산자의 경우 연산자를 기준으로 왼쪽 값이 거짓이면 오른쪽 값을 반환하고 왼쪽 값이 참이면 왼쪽 값을 반환합니다.

이러한 동작 방식 때문에 if 문에서 두 조건중 하나의 조건만 만족해도 참을 반환하여 if문 안에 있는 코드들을 실행할 수 있었던 것이였습니다.

console.log('참' || '참')
console.log('참' || false)
console.log(false || '참')
console.log(false || false)

참
참
참
false

 

AND 연산자의 동작 방식에 대해 알아볼까요?

AND 연산자의 경우 연산자를 기준으로 왼쪽 값이 거짓이면 왼쪽 값을 반환하고 왼쪽 값이 참이면 오른쪽 값을 반환합니다.

이러한 동작 방식 때문에 두 조건을 모두 만족해야만 참을 반환하게 되는 것입니다.

console.log('참' && '참')
console.log('참' && false)
console.log(false && '참')
console.log(false && false)

참
false
false
false

 

이처럼 OR 연산자와 AND 연산자가 논리 연산의 결과를 결정하는 피연산자의 타입을 변환하지 않고 그대로 반환하게 되는데 이를 단축 평가라합니다. 

 

단축 평가(short-circuit evaluation)

쉽게 말해 OR 연산자와 AND 연산자가 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 단축 평가라합니다.

 

OR 연산자의 단축 평가 규칙을 표로 표현하면 다음과 같습니다.

표현식	결과
false || false	false
값 || false	값
false || 값	값
값1 || 값2	값1

 

AND 연산자의 단축 평각 규칙을 표로 표현하면 다음과 같습니다.

표현식	결과
false && false	false
값 && false	false
false && 값	false
값1 || 값2	값2

 

지금까지 논리 연산자의 동작 방식과 단축 평가에 대해 알아보았습니다.

그렇다면 논리 연산자를 활용한 단축 평가를 어디에 사용할 수 있을까요?

 

논리 연산자를 활용한 단축 평가 사용법

논리 연산자를 활용한 단축 평가는 다양한 방법으로 사용할 수 있습니다.

null / undefined 체크 

다음과 같이 값이 null인 변수의 프로퍼티를 참조하는 경우 타입에러가 발생하게 됩니다.

const object = null

const name = object.name

console.log(name)

TypeError: Cannot read property 'name' of null

 

이 경우에 다음과 같이 AND 연산자의 단축 평가를 이용하여 타입 에러를 예방할 수 있습니다.

const object = null

const name = object && object.name

console.log(name)

null

null 값은 false로 평가되기 때문에, object가 null이면 object.name은 검사도 하지 않고 바로 null 값이 할당됩니다.

 

반대의 경우는 어떻게 될까요?

const object = {
    name: 'manja'
}

const name = object && object.name

console.log(name)

manja

object가 올바른 객체를 참조하고 있기에 true로 평가되고, 오른쪽에 있는 object.name을 참조할 수 있게 됩니다.

 

undefined의 경우도 마찬가지입니다.

let object

const name = object && object.name

console.log(name)

undefined

 

이처럼 단축 평가를 활용해 null 과 undefined를 체크함으로써 프로그램의 안정성을 더욱 높일 수 있습니다.

함수 매개변수 기본값 지정

다음과 같이 함수의 매개변수에 인자값을 전달하지 않은 경우 매개변수는 undefined로 초기화 됩니다.

이렇게 undefined로 초기화된 함수의 매개변수를 다른곳에서 참조하는 경우 에러가 발생할 수 있습니다.

function getServerStatus(status) {

    const serverStatus = status
    
    return serverStatus

}

console.log(getServerStatus())

undefined

 

이 경우에 OR 연산자의 단축 평가를 이용하여 매개변수의 기본값을 지정해 줄 수 있습니다.

function getServerStatus(status) {

    const serverStatus = status || 500

    return serverStatus

}

console.log(getServerStatus())
console.log(getServerStatus(502))

500
502

매개변수에 인자값을 전달하지 않은 경우 undefined로 초기화되고 undefined는 false로 평가되기 때문에 오른쪽에 있는 500이 할당되게 됩니다.

만약 매개변수에 인자값을 전달한 경우에는 0이 아닌 모든 숫자는 참이므로 위 예제처럼 왼쪽의 매개변수의 값이 할당되게 됩니다.

 

물론 이 방식이 함수 매개변수의 기본값을 지정할 때 많이 사용된다는 것이지 꼭 이 방법으로만 사용되는 것은 아닙니다. 

다음과 같이 함수의 리턴값이 null 혹은 undefined인 경우에도 사용할 수 있습니다.

function request() {
    return undefined
}

function getResponse() {
    return request() || '잘못된 요청입니다.'
}

console.log(getResponse())

잘못된 요청입니다.

 

조건부 변수값 할당

다음과 같이 if 문으로 값을 할당하는 코드를 단축 평가를 이용하여 대체할 수 있습니다.

const isSuccess = true
let answer

if(isSuccess)
    answer = '성공'

console.log(answer)

성공

↕

const isSuccess = true

let answer = isSuccess && '성공'

console.log(answer)

성공

isSuccess의 값이 true면 오른쪽의 '성공'이 할당되고, false면 그대로 왼쪽의 false가 할당되게 됩니다.

본인의 스타일에 맞게 사용하시면 될 것 같습니다.

 

참고

• https://curryyou.tistory.com/193
• https://developerntraveler.tistory.com/124