5분만에 JavaScript 배열 필터 방법 실습

JavaScript 배열에는 작업을 단순화하는 몇 가지 강력한 기본 제공 메서드가 있습니다. 이번 글에서는 배열filter() 방식에 대해 알아보겠습니다.

시작하기

이 게시물은 JavaScript 배열 메서드 학습에 중점을 둔 시리즈의 일부입니다. this repository에서 시작 코드를 찾을 수 있습니다.



해당 저장소에는 일부 샘플 Star Wars 데이터가 포함된 worksheet.js 파일이 있습니다. 따라서 리포지토리를 복제하고 worksheet.js 파일을 연 다음 필터 섹션까지 아래로 스크롤합니다. 또는 원하는 경우 복제하지 않고 샘플 데이터를 JavaScript 파일로 복사할 수 있습니다.

다음은 샘플 데이터입니다.

const characters = [
    {
        name: 'Luke Skywalker',
        height: 172,
        mass: 77,
        eye_color: 'blue',
        gender: 'male',
    },
    {
        name: 'Darth Vader',
        height: 202,
        mass: 136,
        eye_color: 'yellow',
        gender: 'male',
    },
    {
        name: 'Leia Organa',
        height: 150,
        mass: 49,
        eye_color: 'brown',
        gender: 'female',
    },
    {
        name: 'Anakin Skywalker',
        height: 188,
        mass: 84,
        eye_color: 'blue',
        gender: 'male',
    },
];

어레이 필터 개요

필터 메서드는 포함하려는 항목만 있는 새 배열을 반환합니다. 콜백 함수에 전달하여 포함할 항목을 필터 메서드에 알려줍니다. 이 콜백 함수는 하나의 매개변수(배열의 각 항목)를 수락한 다음 해당 항목이 필터링된 결과에 포함되어야 하는지 여부에 대한 부울을 반환합니다.

예를 들어 숫자 배열이 있고 50보다 큰 숫자만 원하는 경우 필터 조건은 다음과 같습니다.

num > 50

따라서 전체 필터는 다음과 같습니다.

const numbers = [25,50,75];
const lessThan50 = numbers.filter( num => {
  return num > 50;
})

몇 가지 연습을 살펴보겠습니다.

1. 질량이 100보다 큰 캐릭터 가져오기

주어진 항목을 필터링할지 포함할지 여부를 결정하는 콜백 함수를 전달하여 filter를 호출한다는 것을 기억하세요. 이 경우 조건은 character.mass > 100 입니다. 따라서 필터는 다음과 같습니다.

const greater100Characters = characters.filter(
    (character) => {
      return character.mass > 100;
    }
);

콜백 함수에는 한 줄 반환이 있으므로 return 키워드와 함수 대괄호를 생략하여 이 화살표 함수를 단순화할 수 있습니다. 이 구문은 => 뒤에 오는 항목이 자동으로 반환됨을 의미하는 암시적 반환을 의미합니다.

const greater100Characters = characters.filter(
    (character) => character.mass > 100
);

2. 키가 200 미만인 캐릭터 가져오기

이제 우리의 상황은 조금 달라집니다. 조건은 character.height < 200 입니다.

const shorterCharacters = characters.filter(
    (character) => {
      return character.height < 200;
    }
);

그리고 다시 암시적 반환을 위해 축약된 구문을 사용할 수 있습니다.

const shorterCharacters = characters.filter(
    (character) => character.height < 200
);

3. 모든 남성 캐릭터 획득

이제 각 캐릭터의 gender 속성을 확인하여 남성 캐릭터만 가져오려고 합니다.

const maleCharacters = characters.filter(
    (character) => character.gender === 'male'
);

4. 모든 여성 캐릭터 획득

마지막으로 이전 필터를 조정하여 gender 속성으로 문자열 "female"을 검색할 수 있습니다.

const femaleCharacters = characters.filter(
    (character) => character.gender === 'female'
);

마무리

자바스크립트에 대해 더 알고 싶다면 꼭!