[JavaScript] 삼항연산자와 단축평가 활용하기 (조건부실행, 기본값지정)

단축평가

논리연산자 && 혹은 || 에서 평가식 도중에 true 혹은 false가 판명난다면 그 이후는 연산하지 않는 것을 의미한다.

예를들어 &&는 양쪽 피연산자가 모두 true여야 true를 반환하는데, 첫 피연산자가 false인 경우에는 두번째 피연산자의 값에 상관없이 false를 반환하게 되므로 나머지 조건 확인을 수행하지 않는다.

 

let answer = condition ? answer1 : answer2;

위와 같이 활용할 수도 있지만 추가로 유용한 활용안들이 강의에 있어 정리해보았다.

 

&& , || 를 활용한 조건부 실행

x > 0 && console.log("x는 양수입니다.");

조건이 true인 경우 특정 구문을 실행해야할 때 &&를 사용할 수 있다.

x가 0보다 작은 경우 && 연산자는 우항까지 판단할 필요가 없다. 따라서 console.log 부분은 실행되지 않는다.

하지만 x가 0보다 큰 경우 && 연산을 위해 우항까지 판단해야하기 때문에 console.log가 실행된다. 이 개념을 활용해 위 예시처럼 if문같은 조건부 실행을 작성할 수 있다.

 

let condition = false;
condition || console.log("condition is false");

마찬가지로 조건이 false인 경우 특정 구문을 실행해야할 때는 ||를 사용할 수 있다!

 

 

|| 를 활용한 기본값 지정

let y;  // undefined
let z = y || 10;  // 10

 

|| 는 두 조건을 판단하여 true 혹은 false를 반환하지만, boolean이 아닌 값과 사용했을 때는 boolean이 아닌 다른 값을 반환할 수 있다!

좌항이 false로 판단되는 경우(falsy값인 경우) 우항을 반환하므로 falsy가 들어오는 경우를 대비한 기본값을 설정할 수 있다.

 

let message = undefined || NaN;
console.log(message);  // NaN

let message2 = NaN || undefined;
console.log(message2);  // undefined

사용될 경우가 생각나진 않지만.. 궁금해서 테스트해보았다. 양쪽이 모두 falsy인 경우 우항을 반환한다!

 

 

?? 를 활용한 기본값 지정

?? 는 Null 병합 연산자이다. 좌항이 null 혹은 undefined 일 때 우항을 반환하고, 그렇지 않으면 좌항을 반환한다. ||를 활용한 경우와의 차이점은 null, undefined를 제외한 나머지 falsy 값들은 그대로 반환한다는 것이다.

 

function printMessage(input) {
    let message = input || "default message";
    console.log(message);
}

printMessage("");  // default message 출력


// -------------------------------------------------

function printMessage(input) {
    let message = input ?? "default message";
    console.log(message);
}

printMessage("");  // 빈 문자열 출력

예를들어 매개변수로 넘겨받은 문자열을 출력하는 함수가 있다. 유효하지 않은 값을 방지하기위해 기본값을 지정해준다고 가정했을 때, 의도에따라 빈 문자열 ""가 유효한 값일수도, 유효하지 않은 값일 수 있다. 이런 경우 ||를 사용해 기본값을 지정했을 때는 default message가 출력되지만 ?? 를 사용한 경우 빈 문자열이 그대로 출력된다.