[javascript] filter() 메소드 사용방법 : Programming Story

어떠한 배열에 대해서 특정 조건을 만족시키는 배열만을 return 하는 메소드를 filter() 메소드라고 한다. filter() 메소드는 전체 배열에 대해서 특정 조건에 해당되는 원소만을 가지고 만든 배열을 다시 return 해주는 메소드이다.

숫자 배열 중에서 특정 기준값보다 작은 원소만을 가진 숫자들로 이루어진 배열을 만들고 싶다라고 해보자.

const num_array = [400, 200, 500, 3, 1000, 150];

위와 같은 num_array가 있을 때, 300보다 작은 원소로만 이루어진 배열을 찾고 싶은 경우, 우리는 filter() 메소드를 사용할 수 있다.

아래와 같이 사용할 수 있다.

const num_array = [400, 200, 500, 3, 1000, 150];

const small_nums = num_array.filter(num => {
  return num < 300;
})

사용법을 보면, num_array라는 전체 배열에 filter라는 메소드를 적용한 것이다.

num_array.filter ( ) 라는 큰 골격이 있고 그 안에 어떠한 원소들을 filter할지 조건을 적어주면 된다.

위 예시에서는 num이라는 각 원소에 대해서 num<300 을 만족시키는 배열의 원소만 return 해주어서 배열을 만들어준다는 뜻이다.

배열에 값이 잘 들어갔는지를 확인해보자.

const num_array = [400, 200, 500, 3, 1000, 150];

const small_nums = num_array.filter(num => {
  return num < 300;
})
console.log(small_nums);

//print: [200, 3, 150]

위의 print 된 output에서 알 수 있듯이 300보다 작은 원소들로만 배열이 잘 만들어진 것을 알 수 있다.

꼭 숫자비교 뿐 아니라 String에서도 String의 길이가 특정 숫자 이하인 String으로만 새롭게 배열을 만들 수도 있다.

String의 길이를 비교할 때는 .length 메소드를 사용해주면 된다.

const wordlist = ['skyblue', 'book', 'beautiful', 'wonderful', 'hi', 'you']; 
 
const selected = wordlist.filter(word => {
  return word.length < 6;
});

위와 같은 코드는 String에서 길이가 6보다 작은 원소들만 보아서 배열을 만들어주겠다라는 것이다. 배열이 잘 만들어졌는지 출력을 통해서 알아보겠다.

const wordlist = ['skyblue', 'book', 'beautiful', 'wonderful', 'hi', 'you']; 
 
const selected = wordlist.filter(word => {
  return word.length < 6;
});

console.log(selected);
//print ['book', 'hi', 'you']

console.log 를 통해서 확인해보면 길이가 6보다 짧은 단어들로만 구성된 배열이 잘 만들어진 것을 확인할 수 있다.