[ JavaScript / 연산자 ] 연산자를 이용하여 null 또는 undefined 처리 방법.

 

자바스크립트에서 데이터의 값이 유효한지 여부에 따라 프로퍼티를 참조 할 경우 연산자를 사용하여 처리하는 방법에 대해 정리하는 글-!

 

 

 

 

 

👉 우선 falsy값에 대해 알아보자-! 아래와 같은 아이들이 falsy값으로 분류된다.

- false;
- null;
- NaN;
- 0;
- empty string ("" or '' or ``);
- undefined.

 

 

 

 

 

 

 

1. 데이터가 null 또는 undefined 만 해당될 때

 

 

 null 병합 연산자(??) 사용

let data = {
  name: null,
  age: 20
};

const userName = data.name ?? '이름을 입력해 주세요.';
console.log(userName); // 이름을 입력해 주세요.

 

E11에서 도입된 null 병합 연산자(??)는 좌항의 피연산자가 null 또는 undefined 일 때, 우항의 피연산자를 반환하고 좌항의 피연산자가 null 또는 undefined가 아니라면 좌항의 피연산자를 반환하는 연산자이다. 

 

 

위와 같이 변수에 기본 값을 설정할 때 매우 유용하며, null 병합 연산자(??)는 좌항이 falsy값 ( '', null, undefined, false, 0, NaN 등) 이라도 null 이나 undefined가 아니라면 좌항의 피연산자를 그대로 반환한다.

 

 

예를 들어 아래와 같은 경우

 

let data = {
  name: '',
  age: 20
};

const userName = data.name ?? '이름을 입력해 주세요.';
console.log(userName); // ''

 

userName2 를 콘솔로 찍어보면 falsy 값에 해당되는 빈 문자열('')인 좌항의 피연산자가 그대로 반환된다.

그 이유는 null 병합 연산자는 null 과 undefined에 해당되는 경우에만 우항의 피연산자를 반환하기 때문이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. data가 '', null, undefined, false, 0, NaN ... 등의 falsy 값일 때 사용할 수 있는 방법. 

 

 

 

1) OR 논리합(||) 연산자를 사용한 단축 평가

 

논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다. 좌항의 피연산자가 true 라면 우항의 피연산자를 평가하지 않아도 표현식 평가가 가능하다. true로 평가되어 논리 연산의 결과를 결정한 좌항의 피연산자 값을 그대로 반환한다.

 

표현식	결과
true || 'Hi'	true
'Hi' || true	'Hi'
false || 'Hi'	'Hi'
'Hi' || false	'Hi'
false || ''	''

 

* 둘 다 falsy 값일 경우엔 우항을 반환한다.

 

 

 

 

 

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

 

let data = {
  name: '홍길동',
  age: 20
};

const userName = data.name || '이름을 입력해 주세요.';
console.log(userName); // '홍길동'
// data.name 을 true로 변환할 수 있으면 data.name 을 반환하고,  
// 그 외의 경우에는 '이름을 입력해 주세요.' 를 반환한다. 
// 따라서 불리언 값과 함께 사용한 경우, 둘 중 하나가 참일 때 true를, 그 외에는 false를 반환한다.



let data2 = {
  name: '',
  age: 20
};

const userName2 = data2.name || '이름을 입력해 주세요.';


console.log(userName2); // ''

 

 

 

 

 

 

 

 

 

 2) AND 논리곱(&&) 연산자를 사용한 단축 평가

 

논리곱 연산자(&&)은 두 개의 피연산자가 모두 true 일 때, true를 반환한다. 좌항의 피연산자가 true 일 때, 우항을 반환한다. 논리곱 연산자의 좌항의 피연산자가 true라도 우항의 연산자까지 평가해야한다. 우항의 피연산자가 논리곱 연산자 표현식의 평가 결과를 결정한다. 

 

표현식	결과
true && 'Hi'	'Hi'
'Hi' && true	true
false && 'Hi'	false
'Hi' && false	false
false && ''	false

 

 

 

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

 

let data = {
  name: '홍길동',
  age: 20
};

const userName = data.name && '이름을 입력해 주세요.';
console.log(userName); // '이름을 입력해 주세요.'
// 좌항이 true일 때 우항을 return.



let data2 = {
  name: '',
  age: 20
};

const userName2 = data2.name && '이름을 입력해 주세요.';


console.log(userName2); // ''

 

 

 

 

 

 

 

 

3) 삼항 조건 연산자 

 

조건식의 평가 결과에 따라 반환할 값을 결정하는 것으로, 부수 효과는 없다. 삼항 조건 연산자는  첫 번째 피연산자가 true로 평가되면 두 번째 피연산자(콜론(:)의 앞에 있는 연산자)를 반환하고, 첫 번째 피연산자가 false로 평가되면 세 번째 피연산자(콜론(:)의 뒤에 있는 연산자)를 반환한다.

즉, 삼항 조건 연산자는 조건식의 결과에 따라 두 번째 피연산자 또는 세 번째 피연산자로 평가되는 표현식이다.

 

let data = {
  name: '홍길동',
  age: 20
};

const userName = data.name ? data.name : '이름을 입력해 주세요.';
// 조건식 ? ture 일 때 리턴 값 : false 일 때 리턴 값.

console.log(userName); // '홍길동'



let data2 = {
  name: '',
  age: 20
};

const userName2 = data2.name && '이름을 입력해 주세요.';


console.log(userName2); // '이름을 입력해 주세요.'

 

 

 

 

 

 

 

 

 

 

 

참고)

모던 자바스크립트 Deep Dive - 이웅모 (위키북스)

MDN Null 병합 연산자

MDN 삼항 조건 연산자

MDN OR 연산자

MDN AND 연산자