JavaScript forEach()로 null·빈 값을 제외하고 유효한 값 개수 세는 방법

JavaScript에서 null이 아닌 값과 비어 있지 않은 값 개수 세기

배열을 다루다 보면 null이 아니면서 빈 값도 아닌 유효한 요소만 골라서 개수를 세야 하는 경우가 자주 있습니다. 이럴 때 forEach() 메서드를 사용하면 배열을 순회하면서 각 요소를 조건에 맞게 검사할 수 있습니다.

1. 예제 데이터 준비

먼저 다음과 같은 과목 이름 배열이 있다고 가정해 보겠습니다.

let subjectNames = ['JavaScript', 'Angular', 'AngularJS', 'Java'];

2. forEach() 기본 문법

forEach()는 배열의 모든 요소를 하나씩 순회하며 콜백 함수를 실행합니다. 기본 문법은 다음과 같습니다.

yourArrayName.forEach(anyVariableName => {
    yourStatement1
    .
    .
    .
});

3. if 문으로 조건 검사하기

카운터 변수를 0으로 초기화한 뒤, 각 요소가 null이 아니고 빈 문자열이 아닌지 확인해 개수를 증가시킵니다.

let subjectNames = ['JavaScript', 'Angular', 'AngularJS', 'Java'];
var count = 0;

subjectNames.forEach(subject => {
    if (subject !== null && subject !== '' && subject.trim() !== '') {
        count += 1;
    }
});

console.log("Number of subject==" + count);

주의: 일부 예제에서 subject != ' ' || subject != null처럼 OR(||) 연산자를 사용하는데, 이 조건은 항상 참(true)이 되어 제대로 필터링되지 않습니다. 의도한 대로 동작하게 하려면 위 코드처럼 AND(&&) 연산자로 조건을 결합하는 것이 올바릅니다.

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 아래 명령어를 입력합니다. 여기서는 파일 이름을 demo47.js로 저장했다고 가정합니다.

node demo47.js

실행 결과

위 프로그램을 실행하면 다음과 같은 결과가 출력됩니다.

PS C:\Users\Amit\JavaScript-code> node demo47.js
Number of subject==4

배열의 네 요소가 모두 유효한 값이므로 결과는 4가 됩니다. 만약 배열에 null, 빈 문자열('') 또는 공백만 있는 값이 포함되어 있다면 해당 요소들은 카운트에서 자동으로 제외됩니다.

추가 팁: filter()로 더 간결하게 작성하기

같은 작업은 filter() 메서드를 사용하면 한 줄로 처리할 수 있어 코드가 더 간결해집니다.

const count = subjectNames.filter(
    subject => subject !== null && subject !== '' && subject.trim() !== ''
).length;

console.log("Number of subject==" + count);

forEach()는 부수 효과(side effect)를 통해 상태를 변경하는 방식이고, filter()는 새로운 배열을 반환하므로 단순 개수 계산에는 filter()가 더 적합합니다. 상황에 맞게 선택해서 사용하세요.