[JS] undefined와 nullish 병합연산자

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

Nullish coalescing operator - JavaScript | MDN

[문제 상황]

const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];

let index = 0;
const superEventHandler = {
  changeColor: () => {
    // colors 배열을 인덱스로 접근해서 0부터 끝까지 순회
    // 자바스크립트는 인덱스가 배열을 벗어날 경우 undefined를 반환함
    title.style.color = colors[index];
    index = (index + 1) % colors.length;
  }
};

길이가 5인 colors를 인덱스로 순회하면서 글자 색을 바꾸는 상황인데

index = 5 이상이 되어 배열을 벗어나는 경우에는 자바스크립트는 자동으로 Undefined를 반환한다.

그렇다면 이러한 상황에서 예외 처리를 해야 하는가?

 

[답변]

자바스크립트의 경우 인덱스가 배열을 벗어나는 경우 파이썬과 다르게 IndexError를 발생시키지 않고 undefined을 반환하고

문제없이 프로그램을 실행시킨다.

다만, undefined가 반환될 경우 ?? 연산자(nullish병합 연산자)를 사용해 기본값을 처리한다던가 하는 부분은 상황에 맞게 처리하면 된다.

 

// ?? 연산자 사용
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];

let index = 0;
const superEventHandler = {
  changeColor: () => {
  	// colors[index] 값이 undefined인 경우에만 'black'을 title.style.color에 할당
    title.style.color = colors[index] ?? 'black';
    index = (index + 1) % colors.length;
  }
};

 

 

// if문으로 undefined 처리
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];

let index = 0;
const superEventHandler = {
  changeColor: () => {
    title.style.color = colors[index];
    index = (index + 1) % colors.length;
  }
};
// value 변수를 superEventHandler 객체 내부에서만 사용하는 것이 아니라 외부에서도 확인할 수 있어야 하므로, 
// 조건문을 superEventHandler 외부에 작성
const value = colors[5];
if (value === undefined) {
  title.style.color = 'black';
}