[Javascript] 논리연산자 ||, && 를 이용한 반환 값

논리연산자

•  && 와 || 은 특히 두 피연산자 중 하나를 반환하는 것인데, 만약 하나가 Boolean 값이 아니라면 반환 값이 Boolean이 아닐 수 있다.
  이를 이용하여 변수에 값을 적용시킬 수 있다.

대체로 논리 연산자( &&, ||, ! )를 반환 값이 참, 값일때 이용을 했었다.

아래와 같은 식으로만 많이 사용하였지, 값을 적용 시키는데 많이 사용하진 않았다.

 

const a = 3;
const b = -2;

if(a > 0 || b > 0){
//code
}

 

오늘은 논리연산자를 이용한 값 반환에 대해서 소개하겠다.

var a1 = true && true;      // t && t는 true 반환
var a2 = true && false;     // t && f는 false 반환
var a3 = false && true;     // f && t는 false 반환
var a4 = false && (3 == 4); // f && f는 false 반환
var a5 = 'Cat' && 'Dog';    // t && t는 Dog 반환
var a6 = false && 'Cat';    // f && t는 false 반환
var a7 = 'Cat' && false;    // t && f는 false 반환

o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 === 4)  // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // f || f returns false
o9 = false || ''         // f || f returns ""
o10 = false || varObject // f || object returns varObject

 

유의 깊게 봐야할 점은, && 일때는 오른쪽 의 값을 || 일때는 왼쪽의 값을 반환한다는 것이다.
또 null은 평가하지 않으므로, null이 아닌 피연산자로 단락을 평가한다.

 

Null 값 처리 및 널 병합 연산자 ??

추가적으로, 변수가 null 과 undefined 인 경우를 고려해줘야 하는 경우 널 병합 연산자, ?? 를 사용해주면 편리하다.

널 병합 연산자(??)는 왼쪽 피연산자가 null 또는 undefined 일때, 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환한다.

 

아래의 코드와 같이 값이 null 또는 undefined 일때 '' 로 처리해주어 예외가 나지 않도록 처리를 했었다.

널 병합 연산자를 이용하여 그 다음 아래와 같이 바꿀 수 있다.

 

let a; //undefiend

let b = (a == null || a == undefined) ? '' : 'result';

let a;

let b = a ?? 'result';

 

문서에서 가져오면 아래와 같다.

|| 를 사용하면 0 또는 '' 과 같은 경우, 그것이 아닌 값을 반환하지만

??는 무조건 null 이나 undefined이 아닌 오른쪽 피연산자를 반환한다.

그래서 ??는 0과 ''의 값을 유효하게 사용 할 경우 유용하게 사용할 수 있다.

 

let myText = ''; // An empty string (which is also a falsy value)

let notFalsyText = myText || 'Hello world';
console.log(notFalsyText); // Hello world

let preservingFalsy = myText ?? 'Hi neighborhood';
console.log(preservingFalsy); // '' (as myText is neither undefined nor null)

 

* MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#%EB%8B%A8%ED%95%AD_%EC%97%B0%EC%82%B0%EC%9E%90

표현식과 연산자 - JavaScript | MDN