JavaScript - Array filter() 사용 방법

Javascriptarray

자바스크립트에서 Array.filter()는 배열의 요소들 중에 특정 조건을 만족하는 요소들을 모아서 새로운 배열로 리턴합니다. 예제를 통해 filter()의 사용 방법에 대해서 알아보겠습니다.

1. Array.filter()

다음은 filter()를 사용하는 간단한 예제입니다. 배열 words의 요소 중에 문자열의 길이가 6보다 큰 것들만 찾아서 새로운 배열에 추가하고 리턴합니다. filter()는 인자로 함수를 받으며, 이 예제에서는 Arrow function으로 함수를 전달하였습니다. 함수에서 word는 요소의 배열이 인자로 전달되며, word.length > 6의 연산에서 True로 판단되는 요소들만 모아서 배열로 리턴합니다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);

Output:

[ 'exuberant', 'destruction', 'present' ]

2. Array.filter()의 Syntax

filter(callback) 처럼 인자로 callback을 받으며, callback 함수는 아래와 같이 3개의 인자를 받습니다.

  • element: 배열의 요소
  • index: 전달된 요소의 Index
  • array: 배열 객체
function callback(element, index, array)

아래 예제는 callback 함수를 구현하여 filter()에 전달합니다. callback이 호출 될 때 요소들을 로그로 출력되도록 하여 어떻게 동작하는지 확인할 수 있습니다. callback 함수에서 true를 리턴하는 요소들만 모아서 새로운 배열로 전달됩니다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

function func(element, index, array) {
  console.log("element: " + element + ", index: " + index + ", array: " + array);
  return element.length > 6;
}

const result = words.filter(func);

console.log(result);

Output:

element: spray, index: 0, array: spray,limit,elite,exuberant,destruction,present
element: limit, index: 1, array: spray,limit,elite,exuberant,destruction,present
element: elite, index: 2, array: spray,limit,elite,exuberant,destruction,present
element: exuberant, index: 3, array: spray,limit,elite,exuberant,destruction,present
element: destruction, index: 4, array: spray,limit,elite,exuberant,destruction,present
element: present, index: 5, array: spray,limit,elite,exuberant,destruction,present
[ 'exuberant', 'destruction', 'present' ]

3. callback의 인자가 생략된 Array.filter() 예제

callback의 인자 중에 index나 array를 사용하지 않는다면 생략할 수 있습니다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

function func(element) {
  return element.length > 6;
}

const result = words.filter(func);

console.log(result);

다음은 숫자 배열에서 Array.filter()를 사용하는 예제입니다.

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
console.log(filtered);

Output:

[ 12, 130, 44 ]

아래와 같이 filter()에 직접 함수를 입력할 수도 있습니다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(function func(element) {
  return element.length > 6;
});

console.log(result);

4. Arrow function을 사용한 Array.filter() 예제

Arrow function을 사용하면 더 적은 코드로 동일한 내용을 구현할 수 있습니다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha