대학에 지원하여 설명하는 JavaScript 필터 기능

대학 지원 절차에 익숙하다면 JavaScript의 필터 기능을 이해할 수 있습니다.

JavaScript의 map() 및 reduce() 메서드와 비교할 때 filter( ) 메서드는 아마도 가장 간단한 이름을 가질 것입니다.

배열을 입력하고 특정 조건을 충족하는 요소를 새 배열로 필터링합니다.

간단해 보이지만 저는 항상 for() 루프로 되돌아가는 것 같았습니다. 그래서 filter() 함수가 어떻게 작동하는지 이해하는 더 좋은 방법을 찾기로 했습니다.

필터 기능이 일종의 대학 입학사정관과 같다는 것을 깨달았습니다. 특정 대학에 어떤 학생을 입학시켜야 하는지 결정하기 위해 일련의 매개변수를 사용합니다. 예, 우리 모두는 대학이 조금 더 유연하고 우리의 성과를 전체적으로 판단하기를 바랍니다.

시작하자!

필터 함수 대신 For 루프 사용

이름과 GPA가 있는 4명의 학생 배열이 있다고 가정해 보겠습니다. 이 특정 대학은 3.2 GPA 이상의 학생만 입학을 원합니다. 그렇게 할 수 있는 방법은 다음과 같습니다.

let students = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "sheila", 
    GPA: 3.1 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
] 

let admitted =[]; 

for (let i=0; i < students.length; i++){ 
  if(students[i].gpa > 3.2) 
    admitted.push(students[i]); 
} 

/*admitted = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
];*/

우와! 그것은 필요한 것보다 훨씬 더 복잡했습니다. 누군가가 당신의 코드를 읽고 있다면, 당신이 단순히 하나의 배열을 다른 배열로 필터링하고 있다는 것을 배우기 위해 여러 배열을 추적해야 할 것입니다. 그리고 버그를 피하기 위해 i를 주의 깊게 추적해야 합니다. 동일한 작업을 수행하기 위해 필터 방법을 사용하는 방법을 알아보겠습니다.

Filter() 메서드 사용

filter() 메서드를 사용하여 동일한 목표를 달성하는 방법을 알아보겠습니다.

필터는 배열 방법이므로 학생들의 배열부터 시작하겠습니다.

배열의 각 요소에서 실행되는 콜백 함수를 사용합니다.

return 문을 사용하여 어떤 요소가 실제로 최종 배열로 끝나는지 표시합니다(이 경우에는 입학한 학생).

let students = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "sheila", 
    GPA: 3.1 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
] 

let admitted = students.filter(function(student){
   return student.gpa > 3.2;
})

/*admitted = [
  { 
    name: "david", 
    GPA: 3.3 
  }, 
  { 
    name: "Alonzo", 
    GPA: 3.65 
  }, 
  { 
    name: "Mary", 
    GPA: 3.8 
  }
];*/

입력과 출력은 동일하므로 다르게 수행한 작업은 다음과 같습니다.

승인된 배열을 선언한 다음 나중에 채울 필요가 없었습니다. 선언한 다음 동일한 코드 블록의 요소로 채웠습니다

.

실제로 반환 문 내에서 조건을 사용했습니다! 즉, 특정 조건을 통과하는 요소만 반환합니다.

이제 for 루프에서처럼 Students[i] 대신 배열의 각 요소에 대해 student 를 사용할 수 있습니다.

직관에 반하는 한 가지가 있음을 알 수 있습니다. 대학에 입학하는 것이 마지막 단계이지만 우리 코드에서는 registered 변수가 명령문의 첫 부분입니다! 일반적으로 함수 내에서 마지막 명령문으로 최종 배열을 찾을 것으로 예상할 수 있습니다. 대신, 우리는 어떤 요소가 허용으로 끝나는지 나타내기 위해 return을 사용합니다.

예 2- 필터 내에서 두 조건 사용

지금까지 필터 방법에서 하나의 조건만 사용했습니다. 그러나 그것은 대학 입학 과정을 전혀 나타내지 않습니다! 일반적으로 입학사정관은 10개 이상의 요소를 검토합니다.

GPA와 SAT 점수의 두 가지 요소를 살펴보겠습니다. 학생들은 GPA가 3.2 이상이고 SAT 점수가 1900 이상이어야 합니다. 다음은 동일한 함수의 모습입니다.

let students = [
  {
    name: "david",
    GPA: 3.3,
    SAT: 2000
  },
  {
    name: "sheila",
    GPA: 3.1,
    SAT: 1600
  },
  {
    name: "Alonzo",
    GPA: 3.65,
    SAT: 1700
  },
  {
    name: "Mary",
    GPA: 3.8,
    SAT: 2100
  }
]

let admitted = students.filter(function(student){
   return student.gpa > 3.2 && student.SAT > 1900;
})

/*admitted = [
  {
    name: "david",
    GPA: 3.3,
    SAT: 2000
  },
  {
    name: "Mary",
    GPA: 3.8,
    SAT: 2100
  }
];*/

꽤 비슷해 보이죠? 이제 return 문에는 두 가지 조건만 있습니다. 하지만 이 코드를 조금 더 세분화해 보겠습니다.

let admitted = students.filter(function(student){
   let goodStudent = student.gpa > 3.2 && student.SAT > 1900
   return goodStudent;
})

아하! 따라서 for 루프와 비교할 때 또 다른 중요한 차이점이 있습니다. goodStudent 변수를 확인하면 true 또는 false로만 평가되는 것을 볼 수 있습니다. 그런 다음 해당 부울이 return 문에 입력됩니다.

따라서 true 또는 false는 원래 배열의 각 구성원이 결과 배열에 포함되는지 여부를 결정합니다.

더 많은 시각적 자습서 얻기

이 튜토리얼을 즐겼습니까? CodeAnalogies blog에서 웹 개발 주제에 대한 다른 시각적 설명도 즐길 수 있습니다.