JavaScript 배열에서 undefined와 null을 확인하고 유효한 값만 출력하는 방법

JavaScript에서 배열에 null이나 undefined 같은 빈 값이 섞여 있을 때, 이를 걸러내고 실제 값만 출력해야 하는 경우가 자주 발생합니다. 이번 글에서는 간단한 조건문 하나로 이를 처리하는 방법을 알아보겠습니다.

예제 데이터 준비

먼저 일반 값과 함께 null, undefined가 포함된 다음과 같은 배열이 있다고 가정해 보겠습니다.

var firstName=["John",null,"Mike","David","Bob",undefined];

undefined 및 null 검사 방법

배열을 순회하면서 각 요소가 undefined가 아닌지 확인하면 됩니다. 여기서 주목할 점은 비교 연산자 !=(느슨한 동등 비교)를 사용하면 null도 함께 걸러진다는 것입니다. JavaScript에서는 null != undefined가 false로 평가되기 때문입니다.

var firstName=["John",null,"Mike","David","Bob",undefined];
for(var index=0;index<firstName.length;index++){
    if(firstName[index]!=undefined)
        console.log(firstName[index]);
}

위 코드의 동작 원리를 정리하면 다음과 같습니다.

• for 반복문: 인덱스 0부터 배열 길이만큼 요소를 하나씩 순회합니다.
• 조건문: firstName[index] != undefined 조건으로 undefined뿐만 아니라 null도 제외됩니다.
• 출력: 조건을 통과한 유효한 값만 콘솔에 기록됩니다.

프로그램 실행하기

Node.js 환경에서 위 프로그램을 실행하려면 터미널에서 다음 명령어를 입력합니다.

node fileName.js

여기서는 파일 이름이 demo203.js라고 가정하겠습니다.

실행 결과

프로그램을 실행하면 아래와 같이 null과 undefined가 제거된 값만 출력되는 것을 확인할 수 있습니다.

PS C:\Users\Amit\javascript-code> node demo203.js
John
Mike
David
Bob

추가 팁: filter() 메서드 활용

좀 더 모던한 방식을 선호한다면 ES5의 filter() 메서드를 사용하는 것도 좋은 선택입니다. 코드가 더 간결하고 가독성이 뛰어납니다.

var firstName=["John",null,"Mike","David","Bob",undefined];
var result = firstName.filter(function(value){
    return value != undefined;
});
console.log(result); // ["John", "Mike", "David", "Bob"]

두 방법 모두 동일한 결과를 얻을 수 있으므로, 상황과 코드 스타일에 맞게 선택해서 사용하시면 됩니다.