자바스크립트 - 배열의 특정 요소만 골라내기 (filter() 함수)

문제 1: 배열의 요소 중, 값이 50이 넘는 요소들만 골라내고 싶다.

문제 2: 배열의 요소 중, 특정 문자로 시작하는 요소만 골라내고 싶다.

위와 같은 문제들은 filter() 함수를 활용하여 풀 수 있다.

 

 

예제: 배열의 요소 중에서 요소 값이 30을 초과하는 요소들만 걸러내기.

const nums = [0, 25, 50, 75, 100];

const res = nums.filter(num => num > 30);

console.log(res); // [ 50, 75, 100 ]

filter() 함수는 배열에 필터링을 하되 배열 자체엔 영향을 주지 않고, 필터링 된 결괏값을 새 배열에 반환한다.

 

 

 

주의점

const nums = [0, 25, 50, 75, 100];

const res = nums.filter(); // TypeError: undefined is not a function

filter() 함수에 함수를 인수로 넣고 실행하지 않으면 위와 같이 에러가 난다.

 

 

 

예제: 다양한 함수를 인수로 넣고 filter() 함수 실행하기.

const nums = [0, 25, 50, 75, 100];



// 일반 함수
const resA = nums.filter(function a(num) {
	return num > 30;
});

console.log(resA); // [ 50, 75, 100 ]



// 익명 함수
const resB = nums.filter(function (num) {
	return num > 30;
});

console.log(resB); // [ 50, 75, 100 ]



// 화살표 함수
const resC = nums.filter(num => num > 30);

console.log(resC); // [ 50, 75, 100 ]

각 함수의 표현법은 살짝 다르지만, 30을 초과하는 요소의 값만 필터링하는 결괏값은 동일하다.

 

 

 

예제: 이미 정의한 함수를 filter() 함수에 인수로 넣어 filter() 함수 실행하기.

const nums = [0, 25, 50, 75, 100];

function isOver50(num) {
	return num > 50;
}

const res = nums.filter(isOver50);

console.log(res); // [ 75, 100 ]

50을 초과하는 요소만 필터링한 예제.

다른 예제들에선 인라인 함수가 filter() 함수 속에 정의되어 filter() 함수의 코드 줄이 길지만,

본 예제는 이미 정의한 함수를 filter() 함수에 인수로 넣은 게 전부라 filter() 함수의 코드 줄이 간결해 보인다.

 

 

 

예제: filter() 함수 실행 중 현재 배열의 요소, 현재 배열의 요소의 인덱스, 배열 전체 접근하기.

const nums = [0, 25, 50, 75, 100];

const res = nums.filter(function (num, idx, arr) {
	console.log(num, idx, arr);
    
	// 0  0 [ 0, 25, 50, 75, 100 ]
	// 25 1 [ 0, 25, 50, 75, 100 ]
	// 50 2 [ 0, 25, 50, 75, 100 ]
	// 75 3 [ 0, 25, 50, 75, 100 ]
	// 100 4 [ 0, 25, 50, 75, 100 ]
});

console.log(res); // []

filter() 속, 함수에 매개변수를 추가하면 현재 배열의 요소 외에 현재 배열의 요소의 인덱스와 배열 전체를 접근할 수 있다.

본 예제에서 filter() 함수가 반환한 값은 [ ]이다 왜냐하면 filter() 속, 함수엔 필터링할 반환문이 없기 때문이다.