[Javascript] 배열에서 빈값 제거하기

 

Javascript의 배열에서 빈값 제거하는 방법

1. undefined 값만 제거하기 (filter 함수와 '!==' 연산자)
2. undefined, null(nullish value) 제거하기 (filter 함수와 '!=' 연산자)
3. 빈값(empty value) 제거하기
4. undefined, null, false, '', 빈값(empty) 모두 제거하기

 

0. filter 함수 알기

Javascript의 filter() 함수를 사용하면,

배열에서 특정 조건에 부합하는 값을 찾아서, 그 값들로 새로운 배열을 만들어서 리턴합니다.

그래서, 이 포스팅에서는,

배열에서 빈 값들을 찾아서 그 값들을 제외하고,

값이 있는 원소들로 새로운 배열을 만들어서 리턴하기 위해 filter 함수를 사용합니다.

filter 함수를 잘 모른다면 먼저, filter 함수에 대해서 알아보세요.

 

[Javascript] 배열의 특정 값 찾기 - find(), filter()

[Javascript] 배열의 특정 값 찾기 - find(), filter()

 

1. undefined 값만 제거하기 ( filter 함수와 '!==' 비교 연산자 )

const arr = [1, undefined, null, false, , '', '    '];

const newArr = 
      arr.filter((element, i) => element !== undefined);

newArr.forEach((e, i) => {
  document.write(i + " : " + e + '<br>')
})

 

filter 함수로 전달된 callback 함수는 

값이 undefined값이 아닐 경우에만 true를 리턴하고,

undefined 값이 아닌 경우 element만으로 새로운 배열(newArr)을 만들어서 리턴합니다.

여기서 element와 undefined를 비교하기 위해서 '!==' 연산자를 사용하였습니다.

 

원래의 배열(arr)은

[1(숫자), undefined, null, false, 빈값(empty), ''(empty string), '    '(공백을 포함한 비어있는 문자열)]

을 포함하여 총 7개의 값을 가지고 있습니다.

filter 함수에서 '!==' 연산자를 사용하여 undefined 값을 제거하였더니

arr[1] = undefined

arr[4] = empty

2개 값이 삭제되면서

길이가 5인 새로운 배열(newArr)이 새로 생성되었습니다.

 

 arr[4]의 값은 undefined가 아닌 empty인데 왜 같이 삭제 되었을까요? 

const arr = [1, undefined, null, false, , '', '    '];

arr.filter((element, i) => {
  document.writeln(i)
});

이전 예제와 같은 배열(arr)을 생성하고, 

filter함수를 적용하며 index를 출력하여 보았습니다.

0~6까지의 index가 찍혀있지만, index 4는 찍혀있지 않습니다.

filter 함수는 배열에 값이 할당된 적이 없는 인덱스는 호출하지 않기 때문입니다.

arr[4]에는 값이 할당되지 않았기 때문에, filter 함수에서 아예 호출하지 않은 것입니다.

따라서, 첫번째 예제에서 arr[4]는 undefined가 아니지만, 

새로운 배열(newArr)에 포함되지 않은 것입니다.

 

 

2. undefined, null(nullish value) 제거하기 (filter 함수와 '!=' 연산자)

javascript에서 undefined, null값을 nullish value 라고 합니다.

이 두 값을 모두 배열에서 제거하기 위해서는

앞의 예제에서 사용한 '!==' 연산자 대신에 '!=' 연산자를 사용합니다.

const arr = [1, undefined, null, false, , '', '    '];

const newArr = 
      arr.filter(
        (element, i) => element != null
      );

newArr.forEach((e, i) => {
  document.write(i + " : " + e + '<br>')
})

이번에는 filter에서 사용하는 callback 함수에서

각 element와 null을 '!=' 비교 연산자를 사용하여 비교하였습니다.

결과를 보면

arr[1], arr[2], arr[4]의 값이 삭제되고

새로운 배열(newArr)은 4개의 원소(1, false, '', '    ')를 갖게 되는 것을 확인할 수 있습니다.

 

'!=='와 '!='의 차이는 아래의 포스팅을 참조하세요.

[Javascript] '=='와 '==='의 차이 (null, undefined)

[Javascript] '=='와 '==='의 차이 (null, undefined)

[Javascript] '==' 연산자와 '===' 연산자의 차이점

[Javascript] '==' 연산자와 '===' 연산자의 차이점

 

3. 빈값(empty value) 제거하기

const arr = [1, undefined, null, false, , '', '    '];

이번에는 배열에 값이 할당되지 않은 원소를 제거하는 방법입니다.

위 arr의 arr[4]는 어느 값도 할당되지 않은 상태입니다.

이 값을 제거하는 방법입니다.

 

filter 함수는 값이 할당되지 않은 index는 순회하지 않습니다.

const arr = [1, undefined, null, false, , '', '    '];

arr.filter((element, i) => {
  document.writeln(i)
});

위 코드는 filter함수에서 순회하는 index값을 화면에 출력하는 코드입니다.

0~6까지 index가 출력되었지만, index 4는 출력되지 않았습니다.

arr[4]는 값이 할당되지 않았기 때문입니다.

 

 

filter 함수는 값이 할당되지 않은 index는 순회하지 않는다는 이러한 특성을 이용하여

배열에서 빈 값을 제거할 수 있습니다.

const arr = [1, undefined, null, false, , '', '    '];

const newArr = 
      arr.filter(
        (element) => true
      );

newArr.forEach((e, i) => {
  document.write(i + " : " + e + '<br>')
})

 

filter 함수를 사용하는 것은 위의 다른 케이스들과 같습니다.

위 예제는 filter 함수의 callback 함수에서 무조건 true를 리턴하고 있습니다.

filter 함수가 무조건 true를 리턴하므로, 

순회하지 않은 arr[4]를 제외한 모든 원소들이

새로운 배열(newArr)에 담기기 됩니다.

이는 곧, 빈 값을 제외한 배열이 됩니다.

 

 

4. undefined, null, false, '', 빈값(empty) 모두 제거하기 (Falsy value)

Javascript의 Falsy value는 Boolean으로 체크했을 때, false로 변환되는 값들을 말합니다.

developer.mozilla.org/en-US/docs/Glossary/Falsy

Falsy

undefined, null, false, ''(empty string) 모두 Falsy value에 해당합니다.

 

const arr = [1, undefined, null, false, , '', '    '];

const newArr = arr.filter(Boolean);

newArr.forEach((e, i) => {
  document.write(i + " : " + e + '<br>')
})

document.write('newArr[1].length : ' + newArr[1].length);

배열에서 이러한 Falsy value들을 제거하기 위해서

filter 함수의 callback 함수로 Boolean constructor를 전달하였습니다.

원래의 배열(arr)의 원소들 중 falsy value들이 모두 삭제되고,

새로운 배열(newArr)에는 2개의 원소([1, '    '])만 남았습니다.

('    '는 empty string이 아니기 때문에 삭제되지 않았습니다.)

 

Boolean constructor는 파마리터로 전달된 값을 판단하여 true 또는 false를 리턴합니다.

Falsy value들은 Boolean에 의해 모두 false로 판된되어지는 값들이니,

이런 값들은 false를 리턴할 것이고, 따라서 filter 함수는 이 값들을 제외한 것입니다.

 

 

---

 

다양한 케이스의 배열 빈값 제거 방법을 알아보았습니다.