[JS] 배열의 메서드 filter 이해하기

filter 이해하기

• filter란?
• 순서도(플로우 차트)
• 예시

---

filter란?

filter는 영어 뜻처럼 걸러내는 작업을 해주는 메서드입니다. 예를 들어 배열에 많은 요소가 있는데 '김'이라는 글자를 가지고 있는 요소를 찾고 싶다면 filter를 통하여 걸러내어 '김'이라는 글자를 가진 요소만 골라서 반환해줍니다.

배열 명.filter((매개변수) => {
    실행할 내용;
    return 조건;
});

1. 배열의 첫 번째 요소를 매개변수로 입력해줍니다.

2. 실행할 내용을 실행합니다.

3. 조건이 참이면 현재 배열의 요소를 저장합니다.

4. 배열의 다음 요소를 매개변수로 입력합니다. 

5. 배열의 다음 요소가 없을 때까지 2~4를 반복합니다.

6. 배열의 다음 요소가 없다면 저장한 요소들을 배열로 반환합니다.

7. 저장된 요소가 없다면 0을 반환합니다.

---

순서도(플로우 차트)

filter 순서도 (플로우 차트)

---

예시

let arr = ["김유신", "이순신", "김구", "이성계"];

let result = arr.filter((item) => {
    console.log(`${item}의 성이 이씨라면 저장합니다.`);
    return item[0]=='이';
});

console.log(result);

1. arr의 배열 요소로 "김유신", "이순신", "김구", "이성계"를 선언한다.

2. result의 값으로 arr.filter메서드의 결괏값을 선언한다.

3. filter메서드를 실행한다.

4. arr배열의 첫 번째 요소인 "김유신"을 매개변수로 입력한다.

5. console.log를 실행한다.

6. return의 조건인 item [0] =='이' 인지 확인한다 (item [0]은 매개변수로 입력한 값의 첫 번째 글자를 의미한다.)

7. 조건이 참이라면 result에 저장해둔다.

8. 배열의 모든 요소를 4~7까지 반복한다.

9. console.log를 이용하여 result를 출력한다.

 

결과 :

김유신의 성이 이 씨라면 저장합니다.

이순신의 성이 이 씨라면 저장합니다.

김구의 성이 이 씨라면 저장합니다.

이성계의 성이 이 씨라면 저장합니다.

[이순신, 이성계]