자바스크립트 라이브러리 underscore.js는 배열에서 모든 거짓(falsy) 값을 한 번에 제거할 수 있는 _.compact() 메서드를 제공합니다. 여기서 말하는 거짓 값이란 NaN, undefined, 빈 문자열(''), false, 0을 의미합니다. 이 메서드는 거짓 값이 모두 걸러진 새로운 배열을 반환하며, 원본 배열은 변경되지 않습니다.
문법
_.compact( array );
_.compact()는 배열을 매개변수로 받아, 거짓 값이 제거된 새로운 배열을 결과로 돌려줍니다.
예제
<html>
<body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
<script>
document.write(_.compact(["zero", 1, NaN, false, 2, '', 3, undefined]));
</script>
</body>
</html>실행 결과
zero,1,2,3
위 예제에서 NaN, false, 빈 문자열(''), undefined가 모두 제거되고 "zero", 1, 2, 3만 남은 것을 확인할 수 있습니다.
따옴표 안의 거짓 값은 어떻게 처리될까?
만약 거짓 값이 따옴표(" ") 안에 들어 있다면 어떻게 될까요? 이 경우 해당 값은 더 이상 거짓 값이 아니라 문자열로 취급되기 때문에 제거되지 않습니다.
다음 예제에서 0이 따옴표 안에 있어 "0"이라는 문자열이 되었기 때문에 거짓 값으로 간주되지 않으며, 출력 결과에 그대로 표시됩니다.
예제
<html>
<body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
<script>
document.write(_.compact(["0", 1, 'NaN', false, 2, '', 3, undefined]));
</script>
</body>
</html>실행 결과
0,1,NaN,2,3
결과를 보면 "0"과 'NaN'은 문자열이므로 제거되지 않고 그대로 남아 있습니다. 반면 실제 boolean 타입의 false, 빈 문자열(''), undefined는 정상적으로 제거된 것을 알 수 있습니다.
참고: 외부 라이브러리 없이 구현하는 방법
underscore.js나 lodash 없이도 ES5 이상에서 제공되는 Array.prototype.filter() 메서드를 활용하면 동일한 기능을 간단히 구현할 수 있습니다.
const arr = ["zero", 1, NaN, false, 2, '', 3, undefined]; const result = arr.filter(Boolean); console.log(result); // ["zero", 1, 2, 3]
filter()에 Boolean 생성자 함수를 전달하면 각 요소가 불리언 값으로 변환되면서 거짓 값만 자동으로 걸러집니다. 외부 라이브러리 의존성을 줄이고 싶다면 이 방법을 활용해 보세요.