논리 연산자 || 와 Default Value 차이

자바스크립트에서 빈 값 등을 검사할 때 || 연산자를 사용하거나 함수의 인자로 들어오는 값을 체크할 경우 Default Value를 지정하여 사용합니다. 이때 || 연산자에서 우변에 있는 문장을 실행하는 경우와 Default Value가 세팅되는 경우의 차이점을 정리하고자 포스트를 작성하였습니다.

|| 연산자

MDN document에 따르면 논리 연산자 ||(OR)는 피연산자 중 하나의 값을 반환하므로 Boolean 외의 다른 값과 함께 사용하면 Boolean 값이 아닌 것을 반환할 수 있습니다. val1 || val2이라는 문장이 있었을 때, val1을 true라고 판단한다면 val1을, 아니면 val2를 리턴합니다. 이때 false라고 판단되는 자바스크립트의 경우는 아래와 같습니다.

• null
• NaN
• 빈 문자열 ('', "" 등)
• 0 (JS에서는 숫자 0을 false로, 0 외의 숫자를 true로 인식합니다)
• undefined
• false

간단한 코드를 통해 확실히 살펴보겠습니다.

const nullVal = null;
const undefVal = undefined;
const blankVal = ""; // 빈 문자열
const spaceVal = " "; // space 한 칸
const zeroVal = 0;
const falseVal = false;
const nanVal = NaN;

const checkIsEmpty = (val) => {
  return val || "THIS IS EMPTY";
};

여러 타입의 변수를 선언하고 checkIsEmtpy라는 함수를 만들어 인자로 들어온 val을 논리 연산자로 검사해 false로 판단되면 문자열 'THIS IS EMPTY`를 리턴합니다. 각각의 리턴값을 확인해볼까요?

console.log(nullVal, checkIsEmpty(nullVal));
console.log(undefVal, checkIsEmpty(undefVal));
console.log(blankVal, checkIsEmpty(blankVal));
console.log(spaceVal, checkIsEmpty(spaceVal));
console.log(zeroVal, checkIsEmpty(zeroVal));
console.log(falseVal, checkIsEmpty(falseVal));
console.log(nanVal, checkIsEmpty(nanVal));

위와 같이 console.log로 checkIsEmpty의 리턴값을 출력해봅시다.

공백이 아닌 spaceVal을 제외하고는 모두 THIS IS EMPTY를 출력했습니다. 논리 연산자 OR에서 null, NaN, 빈 문자열, 0, undefined, false를 모두 false로 처리한다는 뜻입니다.

Default Value

그럼 함수의 인자나 구조 분해 할당에서 적용하는 Default Value는 어떤 경우에 설정해둔 Default Value를 적용시킬까요? 인자에 Default Value를 설정한 함수 setDefaultVal을 만들어 확인해봅시다.

const setDefaultVal = (val = 'THIS IS EMTPY') => {
  return val;
}

그리고 아래와 같이 함수를 호출한 결과를 출력해보면

console.log(nullVal, setDefaultVal(nullVal));
console.log(undefVal, setDefaultVal(undefVal));
console.log(blankVal, setDefaultVal(blankVal));
console.log(spaceVal, setDefaultVal(spaceVal));
console.log(zeroVal, setDefaultVal(zeroVal));
console.log(falseVal, setDefaultVal(falseVal));
console.log(nanVal, setDefaultVal(nanVal));

undefined의 경우에만 Default Value인 THIS IS EMPTY가 나오게 됩니다. 즉, Default Value는 값이 undefined일 때만 적용된다는 뜻이죠. null이나 NaN도 결국 null과 NaN이라는 값이 저장되고 선언되어 있는(undefined가 아닌) 변수이기 때문에 Default Value가 세팅되지 않습니다.

이는 함수의 구조 분해 할당에도 똑같이 적용됩니다. obj라는 변수에 위에 선언한 여러 타입의 변수들을 저장해 Object를 만들고 구조 분해 할당을 해봅시다.

const obj = {
  nullVal,
  undefVal,
  blankVal,
  spaceVal,
  zeroVal,
  falseVal,
  nanVal
};

const {
  nullVal: desNull = "THIS IS EMPTY",
  undefVal: desUndef = "THIS IS EMPTY",
  zeroVal: desZero = "THIS IS EMPTY"
} = obj;

nullVal, undefVal, zeroVal을 구조 분해 할당하며 Default Value로 THIS IS EMPTY를 설정해보았습니다. 이 세 변수를 출력해보면

undefVal을 할당한 desUndef만 Default Value인 THIS IS EMPTY가 출력됩니다. Object의 구조 분해 할당에서의 Default Value도 위의 함수 인자에 대한 Default Value와 똑같이 undefined인 경우에만 적용됩니다.

한 줄 요약!

• || 연산자는 null, undefined, NaN, false, 0, 빈 문자열을 체크
• Default Value는 undefined만 체크

---

개인적으로 헷갈렸던 두 표현에 대해 공부할 겸 정리해보았습니다. 다른 분들께도 도움이 되었으면 좋겠네요!