JavaScript 배열에서 null 값만 골라내는 방법

JavaScript에서 배열에 포함된 null 값만 제거해야 하는 경우가 종종 있습니다. 이때 주의할 점은 undefined, 0, false 같은 다른 거짓(falsy) 값들은 그대로 유지하면서 오직 null만 걸러내야 한다는 것입니다.

예를 들어 다음과 같은 입력 배열이 있다고 가정해 보겠습니다.

const arr = [12, 5, undefined, null, 0, false, null, 67, undefined, false, null];

이 배열에서 null만 제거하면 결과는 다음과 같아야 합니다.

const output = [12, 5, undefined, 0, false, 67, undefined, false];

null만 필터링하는 핵심 아이디어

JavaScript에서 null의 데이터 타입은 'object'이며, 동시에 거짓(falsy) 값입니다. 흥미로운 점은 JavaScript에 존재하는 모든 값 중에서 유일하게 거짓으로 평가되는 객체가 바로 null이라는 사실입니다. 따라서 typeof 검사와 부정 연산자(!)를 조합하면 null을 정확하게 식별할 수 있습니다.

구현 예제

const arr = [12, 5, undefined, null, 0, false, null, 67, undefined, false, null];

const removeNullValues = arr => {
  for(let i = 0; i < arr.length; ){
    // null의 데이터 타입은 object이며 거짓 값이다.
    // 즉, JavaScript에서 유일한 falsy 객체가 바로 null이다.
    if(typeof arr[i] === 'object' && !arr[i]){
      arr.splice(i, 1);
    }else{
      i++;
      continue;
    };
  };
};
removeNullValues(arr);
console.log(arr);

실행 결과

콘솔 출력 결과는 다음과 같습니다.

[ 12, 5, undefined, 0, false, 67, undefined, false ]

코드 동작 원리

이 함수는 새로운 배열을 생성하지 않고 기존 배열을 제자리(in-place)에서 직접 수정합니다. 반복문 안에서 현재 요소의 타입이 'object'이면서 동시에 falsy인지 검사합니다. 두 조건을 모두 만족하는 값은 null뿐이므로, 해당 요소를 splice()로 제거하고 인덱스를 증가시키지 않습니다. 제거된 위치 뒤의 요소들이 앞으로 당겨지기 때문에 인덱스를 그대로 유지해야 다음 요소를 놓치지 않고 검사할 수 있습니다. 그 외의 경우에는 인덱스를 1씩 증가시키며 순회를 계속 진행합니다.