(｡⌒𖧉⌒)⋆.˚⊹⁺ JavaScript I .map() 과 .filter() 그만 헷갈리자!

 

 

MDN 출처는 여기(map)랑 여기(filter)

 

 

코딩테스트 공부를 막 시작하면서 .map() 과 .filter() 메서드를 굉~장히 많이 사용한다는 걸 깨달았다.

근데 이게 웬걸? 할 때마다 둘이 헷갈려서 찾아보고, 또 찾아보고 ...

이럴바엔 차라리 블로그에 한 번 정리하면서 다시 한 번 이해하며 외우(면 좋겠지만...)는 시간을 갖기로 했다.

 

 

---

 

 

Array.prototype.map()

map() 메서드는 배열 내의 !!!! 모든 요소 각각에 !!!!! 대하여 주어진 함수를 호출한다. 

그리고 호출한 결과를 모아서 새로운 배열을 반환한다. 

 

MDN 구문

 arr.map(callback(currentValue[, index[, array]])[, thisArg])

 

풀어서 설명해보자면

예를들어, 배열 arr가 있다고 가정해보자.

arr 안에는 index 0번부터 1, 2, 3, ... n번까지의 요소가 쇽쇽 들어가 있다.

이러한 배열 arr에 map()메서드를 사용해보자.

map()메서드는 꼭 함수를 데려온다. 이 함수를 arr index 0번부터 n번까지 하나도 빠짐없이~ 적용한다.

index 0번은 map() 메서드와 함께 호출된 함수를 만난다. 0번에 들어있는 요소는 이 함수를 만나 변화한다.

변화한 0번 요소는 그대로 map() 메서드가 만들어낼 새로운 배열의 0번으로 들어간다. 

 

예문 )

const arr = [1,2,3,4];
const new_arr = arr.map(num => num * 2);
// output : new_arr = [2, 4, 6, 8];

 

---

 

Array.prototype.filter()

filter() 메서드는 주어진 함수(조건)의 테스트를 통과한 모~든 요소로 새로운 배열을 반환한다. 

 

MDN 구문

arr.filter(callback(element[, index[, array]])[, thisArg])

 

풀어서 설명해보자면(2)

예를들어, 배열 arr에 filter() 메서드를 사용해보자.

filter()는 arr 안의 요소를 솎아낼 작정으로 function(조건)을 가져온다.

arr 안의 요소는 filter(function-조건-)으로 걸러진다. 

function 조건에 맞으면 true 를 그렇지 않으면 false 를 return 한다. 

여기서 ! 테스트를 통과한 즉, true 판정을 받은 요소들을 모아서 새로운 배열을 반환한다.

 

예문 )

const arr = [1,2,3,4];

function bigger(item) {
	return item > 2;
}

const new_arr = arr.filter(bigger);
// output : new_arr = [3,4];

 

!! 마지막 비교 !! 

예를 들어,

사과, 귤, 오렌지, 수박, 멜론이 내 눈 앞에 순서대로 서있다.

map(껍질 깎기)을 사용하면 껍질 깎인 사과, 껍질 깎인 귤, 오렌지, 수박 ... 을 얻을 수 있다.

filter(주황색인 거)를 사용하면 귤이랑 오렌지만 얻을 수 있다!!

 

 

 

---

 

 

 

 

 

 

╭ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝ ͡ ◜◝╮
       기초는 이해했으나 응용이 나왔을 때 적용할 수 있을 지가 문제다.

       만약 이렇게도 써먹을 수 있다 ! 싶은 게 있으면 차차 게시물에 추가하도록 하자.

╰ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ͜ ◟◞ ╯
O °
ᕱ ᕱ
( ･ω･)
/ つ🍔 . .. . ﹢ ⃰ ଂ 🍟

 

 

(언제라도 공부하다가 응용 예문 등 추가될 수 있음)