지난번 배열에 이어지는 거지만, 이제 더이상 미룰수가 없어 배열에 사용되는 메소드들을 하나씩 써보려 합니다. 그런데 사실 잘 이해가 안 가는 채로 쓰고 있어요.
filter()
filter메소드는 array 관련 메서드로 조건에 맞는 요소들만 모아서 새로운 배열을 반환합니다.
만약 조건에 부합되는 요소가 아무것도 없다면 빈 배열을 반환합니다.
filter() 메서드도 map() 메서드와 마찬가지로 크게 filter(callbackFunction, thisAgr) 2개의 인자를 가집니다.
그리고 callbackFunction 안에서 3개의 인자 (element, index, array) 를 가지는데 첫번째 부분인 element 인자만 필수로 지정되어야하고 나머지는 선택적입니다.
표현은 이렇습니다.
let arrayName = [1,2,3,4,5]
let new_array = arrayName.filter(callback[, thisArg])콜백이 뭔데.어디서 배웠는데.
callback
그렇게 해서 저는 callback 의 개념부터 알아보기로 했습니다.
콜백 함수는 '비동기 처리방식'에 대응하기 위해 나온 함수입니다.
비동기와 동기 처리 방식의 차이는 이렇습니다.
- 동기 처리
코드가 1,2,3이 있을 때
코드 1 실행 >코드 1종료 > 코드 2 실행> 코드 2 종료>코드 3 실행
- 비동기 처리
코드가 1,2,3 이 있을 때
1이 종료되지 않아도 2,3이 실행
그러니까 버스에 탈때 순서대로 줄을 서서 타는건 동기 처리, 여러사람이 한꺼번에 타는게 비동기 처리라고 볼 수 있겠네요.
비동기 처리방식으로 진행되는 코드들의 모습이다.
콜백 함수는 이렇게 줄을 세워서 사람을 태우기 위해 코드의 실행을 기다려주기 위해 존재하는 함수라고 합니다.
콜백함수의 사용법은 다른 함수의 매개변수로 함수를 전달하는 방식입니다.
참고 글 :https://yulfsong.tistory.com/89
다시 filter로 돌아와서..
filter 메소드를 사용하는 방식은 아래와 같습니다.
let numbers = [10, 4, 32, 17, 5, 2];
// 첫번째 방법 (filter()의 인자에서 바로 함수를 써주는 방법)
let result = numbers.filter((value)=> value > 10);
console.log(result); // [ 32, 17 ]
// 두번째 방법 (밖에서 함수를 선언하고 filter()인자에서 callback하는 방법)
function isBiggerThanTen (value) {
return value > 10;
}
let result = numbers.filter(isBiggerThanTen);
console.log(result); // [ 32, 17 ]방금 배운 기능 : velog에서 백틱 3개를 입력하고 사용하는 프로그래밍 언어를 입력하면 코드에 색이 생깁니다. 여태 나만 안되는줄..
어쨌든 이 filter를 익히기 위해 나온 예제를 가져왔습니다.
fruits 라는 배열이 있습니다. 'ap'가 들어간 과일들로 이루어진 새로운 배열을 filter()를 이용하여 반환해주세요. 결과는 아래와 같아야 합니다.
[ 'apple', 'grapes' ]
그리고 친절하게도 .includes라는 메소드를 사용하라고 힌트도 주셨습니다.
// Assignment 1
let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
//아래의 함수를 완성해주세요.
function filtered () {
}일단 저는 위쪽에 나온 첫번째, 두번째 방법을 사용해서 결과값을 도출했지만 문제에서 바라는 코드가 아니라고 오답이 떴어요.
목표는 filtered()라는 함수가 한꺼번에 저것을 처리해야하는 거라서, 적용법을 알지 못해 다른 블로그를 보고 정답을 찾았습니다.
참고 블로그 :https://velog.io/@heyho9292/TIL-12-filter-%EB%A9%94%EC%84%9C%EB%93%9C-Assginment-%EB%A6%AC%EB%B7%B0
function filtered (name) {
let apInclude = fruits.filter(function(name){
return name.includes('ap')
})
return apInclude
}일단 filter를 저렇게 쓸 수 있다는 것에서부터 충격을 받았습니다. 위에서 말한 방식이랑 전혀 다른데요...진짜 다른지 한번 볼게요.
//정답
function filtered (name) {
let apInclude = fruits.filter(function(name){
return name.includes('ap')
})
return apInclude
}
// 두번째 방법 (밖에서 함수를 선언하고 filter()인자에서 callback하는 방법)
function isBiggerThanTen (value) {
return value > 10;
}
let result = numbers.filter(isBiggerThanTen);두 번째 방법의 let result = numbers.filter(isBiggerThanTen); 가 함수 안에 들어간 형태이긴 합니다. 한줄 한줄 해석해봐야겠어요.
function filtered () { //함수 filtered를 정의합니다.
let apInclude = fruits.filter(function(name){
//변수 apInclude는 fruits 배열에 filter 메소드를 사용한 ( )인데..여기서도 매개변수가 name이네요
return name.includes('ap')
//인자로 받은 name에서 'ap'를 포함한 결과값이 참인지 거짓인지 판단 후 참인 결과값만을 리턴하여 배열로 생성합니다.
})
//apInclude는 fruits 배열에 filter 메소드를 사용해 생성된 (배열)입니다.
return apInclude
//그런 apInclude를 다시 리턴합니다.
}더 알 수 없어졌습니다.
일단 filter 메소드에 들어간 저 function이 callback의 역할을 한다는 것만 알겠습니다.그리고 매개변수로 정해둔 name은 배열의 각 요소들을 뜻하는거겠죠?
filter 메소드를 저렇게 이용하는 방법이 완전히 이해되면 추후에 더 설명글을 쓸 수 있을 것 같습니다.
+추가 설명
filter는 filter라는 함수 안에 또 다른 함수를 삽입함으로서, 삽입된 함수에서 인자를 받아내 조건을 확인하여 남기는 개념이라고 팀원분께 설명을 받았습니다.
고로
sampleArray.filter(함수이름(인자로 받아올 배열의 요소){
조건식
})
//이를 통해 조건에 부합한 엘리먼트들이 남게 된다.이런 구조였던 겁니다!
다른 예제
courses 라는 배열이 있습니다. level이 'hard'인 과목들로만 이루어진 새로운 배열을 filter()를 이용하여 반환해주세요.결과는 아래와 같아야 합니다.
[ { level: 'hard', subject: 'Mathmatic' }, { level: 'hard', subject: 'Science' } ]
let courses = [
{level:'easy', subject: "English" },
{level:'hard', subject: "Mathmatic" },
{level:'medium', subject: "Literature" },
{level:'hard', subject: "Science" },
{level:'medium', subject: "Socialogy" }
];
function filtered() {
return courses.filter((value)=> value.level == 'hard');
//courses의 배열 중 level이라는 key 값이 hard와 같다면, 그 요소를 리턴
}
console.log(filtered);
이것은 '객체'라는 개념을 익혀야 더 이해하기 쉬운 문제라서 정답만 써놓습니다!
마무리
점점 제가 혼자서 커버할 수 있는 수준을 벗어나는 것 같네요!
때문에 제 이해에 도움을 주는 사전스터디 멤버분들 하나하나가 소중한 것 같습니다.
filter라는 메소드 하나를 이해하는 데에도 꽤 오랜 시간이 걸렸습니다만 그만큼 많은 정보를 습득해서 소득이 크다고 생각되네요.
