본문 바로가기
JavaScript

[JavaScript/자바스크립트]단축 평가

by hans-j 2022. 12. 26.

논리곱(&&) 연산자와 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고

그대로 반환한다.  이를 단축 평가(short-circuit evaluation)라 한다.

 

단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

단축 평가 표현식 평과결과
true || anything true
false || anything anything
true && anything anything
false && anything false

//논리합 연산자
console.log('Cat' || 'Dog'); // => Cat
console.log(false || 'Dog'); // => Dog
console.log('Cat' || false); // => Cat

console.log('------------------------------');

//논리곱 연산자
console.log('Cat' && 'Dog'); // => Dog
console.log(false && 'Dog'); // => false
console.log('Cat' && false); // => false


논리합(||)은 OR의 의미를 갖고 있고 논리곱(&&)은 AND의 의미를 갖고있다.

따라서 논리합(||) 연산자를 사용했을 경우엔 앞에 있는 피연산자의 값만 맞아도 뒤에 값을 처리하지 않고 바로 반환한다.

논리곱(&&) 연산자둘 다 truthy값으로 나와야 true로 평가되기 때문에 둘 중 한 개라도 false면 falsy값으로 처리되어 false의 결과로 평가된다.

 


false로 평가되는 falsy 값들

 

false

undefined

null

0, -0

NaN

' '(빈 문자열)


 

 

단축 평가를 사용하면 if문을 대체 할 수 있다. (If 조건식은 Boolean 값으로 표현되어야 하기 때문에 가능하다.)

-어떤 조건이 Truthy값일 때 무언가를 해야한다면 논리곱(&&) 연산자 표현식으로 if문을 대체할 수 있다.

var done = true;
var message = '';

//주어진 조건이 true일 때
if(done)message = '완료';

//done이true라면message에 '완료'를 할당
message = done && '완료';
console.log(message);

 


-어떤 조건이 Falsy값일 때 무언가를 해야한다면 논리합(&&) 연산자 표현식으로 if문을 대체할 수 있다.

console.clean;

var done = false;
var message = '';

//주어진 조건이 false일 때
if(!done)message = '미완료';

//done이 false라면 message에 '미완료'를 할당
message = done || '미완료';
console.log(message);


-위의 방법들을 응용하여 삼항 조건 연산자를 적용해서 if ...else문을 대체 할 수 있다.

let done = true;
let message = '';

//if...else문
if (done) message = '완료';
else message = '미완료';
console.log(message);

//if...else문은 삼항 조건 연산자로 대체 가능하다.
message = done ? '완료' : '미완료';

단축 평가를 이용해서 객체의 값이 null 혹은 undefined인지 확인하여 에러 방지

**객체의 값이 null또는 undefined인 경우, 객체의 프로퍼티를 참조하면 타입 에러(Type Error)가 발생한다. 에러가 발생하면 프로그램이 강제종료된다.

let elem = null;
 
//elem이 null이나 undefined와 같은 Falsy값이면 elem으로 평가되고
//elem이 Truthy 값이면 elem.value로 평가된다.

let value = elem && elem.value;

console.log(value);

elem 값이 존재하기 때문에!! elem.value값으로 평가됨. 논리곱 연산자는 어떤 조건이 Truthy일 때 실행되는 문이기 때문!!!!

논리합 연산자 적용시 에러발생!!

논리합 연산자는 Falsy일때 실행되는 문이기 때문에! 에러가 발생한다. elem이 존재하니까!!!


단축 평가를 이용해서 매개 변수에 기본값을 할당하여 undefined 에러 방지

//단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str){
    str = str || ''; //str값이 비었으면 ''할당
    return str.length;
}
getStringLength();
getStringLength('hi');

console.log();

공백이 출력된다.


//ES6의 매개변수의 기본값 설정
function getStringLength(str = ''){
    return str.length;      
}

getStringLength();
getStringLength('hi');

console.log();

default 파라미터를 이용한 것

위처럼 아무것도 호출하지 않는다면! 매개변수의 기본값으로 출력할 값을 설정하는 과정

"그냥 두번째처럼 default파라미터를 사용하면되는데, 왜 굳이 첫번째 처럼  단축평가를 사용할까..?  " 싶다면

default 생성자는 값이 없거나 undefined인 경우에만 기본값으로 설정이 가능 하기때문에 

 

값이 0이나 null인 경우에는 default 생성자를 적용할 수 없다는 것을 기억하면 된다.

값이 없을땐 핵유용하다.


이런 값이 들어가있을 경우엔 default 파라미터도 쓸모가 없다.


0과 null의 값이 들어가면 false로 평가되어 Hello가 잘 출력된다.    단축평가를 사용한 매개변수의 기본값 설정!!

!!


**모던 자바스크립트 deep dive (이응모 선생님) 를 읽고 참고하여 작성하는 글입니다 **