프론트엔드 개발자가 되기 위한 여정-8

이정우·2022년 9월 11일
0

frontend-bootcamp

목록 보기
9/60

오늘은 Map,filter에 대해서 포스팅을 할 수있도록 하겠습니당~~

map과 filter란 무엇일까에 대해서 먼저 이야기 드리고 시작하겠습니다~~

여러분들! 코딩을 해보신분들 또는 관련된 지식이 있으신분들은
다들 각 언어에 있는 method라는 것을 한번쯤은 들어보시고 사용도 해 보셨을것입니다!
갑자기 왜 메써드가 나왔는가?
바로 오늘 이야기 드릴 map 과 filter 라는것이 바로 메써드 중 한개이기 때문입니다

먼저 본격적인 이야기를 들어가기 이전에
메써드란 무엇인가에 대해서 이야기를 드리겠습니다

여러분!

1.method란 무엇일까요??

method 란

클래스 기반 언어에서 클래스 내부에서 정의되어있는 함수를 가져와 사용하는것입니다!
즉 메서드라는것은 프로그램이 실행되고있을때 클래스 에서 생성된 인스턴스와 관련도니 동작을 정의한다는 거죠!

출처
:https://ko.wikipedia.org/wiki/%EB%A9%94%EC%84%9C%EB%93%9C_(%EC%BB%B4%ED%93%A8%ED%84%B0_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D)

위키피디아에 나와있는 내용들 입니다!

글이 너무 어려우시다고요??
쉽게 말씀을 드리자면
예를들어 저희가 어떠한 배열을 정렬을 하고싶습니다
정렬을 할때 for문과 if문을 사용해서 정렬을 시키겠죠??
뭐...이런과정으로요
0번째 인덱스와 1번째인덱스를 비교를 해서 더 낮은 값이 앞으로 나올수 있게 구문을 작성하고 그다음에 0,1 인덱스가 정렬이 된 이후 뒤에있는 값을 앞의 값과 비교하면서 정렬을 할수있게 프로그래밍을 하면되겠죠!
그런데!
이러한 코드를 작성을 하게되면은 짦게는 5줄 길게는 10줄이상으로 길게 작성할수도 있습니다
하지만 이 메써드라는것을 사용하게 된다면 단 한줄
array.sort를 작성하게된다면 sort라는 메서드안에서 사전에 지정한 알고리즘이 돌아가게 되고 이를 통해서 훨씬 코드를 단순화 할수 있게된다는거죠!

어느정도 메서드란 어떤것인지 감이 오셨나요~??
그럼 이제부터는 설명드릴 내용을 이해하실수 있으실겁니다!

2. MAP이란?

map이란 무엇일까요??

서두가 약간(?) 길었지만 다시한번 집중해주세요~~

map이란 앞서 설명드렸던 sort와 같은 메서드의 한개입니다
하지만 그중 배열의 메써드인데요!

그럼 이 map이라는것은 어떻게 작동할까요??
map메서드는 배열 내의 모든 요소에 대해 주어진 함수를 적용한 새로운 배열을 만드는 것입니다!

어렵다구요??

그럼 이렇게 설명을 드려볼까요??

map이라는 것은 특정배열의 각 요소에 함수를 돌려서 그 출력값을 각 배열의 인덱스에 담아준다라고 생각하시면 훨씬 편하실겁니다!

음...코드로 설명을 드릴게요!

const array1=[1,2,3,4,5];
const mapex=array1.map(x=>x*2);

이 코드를 풀어서 설명을 드리면
array1이라는 배열의 각 요소에 x*2라는 값으로 새롭게 넣은 배열을 만들어 준다는겁니다!
말로만 들어서는 어렵죠??
결과값을 보여드리겠습니다!

mapex = [2,4,6,8,10]

이렇게 나온다는거죠
즉 map안에 원하는 알고리즘을 작성해주게 된다면 각 요소에 알고리즘이 적용된 값이 들어간 새로운 배열을 만들어준다는 겁니다!

조금은 이해 되셨죠!
만약 아직 어려우시다면 이 예제를 토대로 여러 문제들을 풀어보시면서 적용해보시면 좋을것같아요!!

그다음 볼것은요!
바로~~

3.filter

네! filter입니다!!
filter또한도 map과 마찬가지로 배열에서 사용되는 메서드중 하나입니다!

작동원리도 map과 비슷한데요!
조금 다른점이 있습니다!
한번 알아볼까요??

작동원리는 비슷합니다 함수를 적용시켜 그함수에 해당하는 값을 출력하는 것인데요
어떤부분이 다를까요??

filter는 말 그대로 걸러준다라는 의미를 가지고있어서
주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 한다는거죠!

쉽게말해 map이 각 배열의 모든요소를 함수를 적용시켜 새로운 배열을 만들어 준다면
filter는 각 배열의 모든요소를 검사하여 적용된 함수에 통과하는 값만으로 새로운 배열을 만들어준다는거죠!

이번에도 한번 예시를 보면서 알아볼까요??

const array1=[1,2,3,4,5]
const filterex=array1.filter(x=>x%2==0)

이렇게 돌리면 어떻게 될까요??
x를 2로 나눈 나머지 값이 0인 배열의 값만을 뽑아 새로운 배열로 만들어준다는거죠??

그럼 filterex에는 =[2,4]만이 들어가게 된 새로운 배열이 만들어 질겁니다!!

다들 어느정도 이해가 되셨나요??

오늘의 포스팅은 여!기!까!지! 입니당

오늘 포스팅한 핵심내용만을 다시 봐볼까요??

먼저 map과 filter는 둘다 배열의 메서드라는것을 저희가 알았고요!
그중,map은 배열의 각 요소를 함수에 적용시켜 새로운 배열로 만들어주는 것이라고 했습니다!
그리고 filter는 배열의 각 요소를 적용된 함수의 조건에 부합하는 것만을 가져와 새로운 배열로 만들어주는것이라는거
잊지마세요~~~

그럼 오늘의 포스팅을 마치도록 하겠습니다~~
감사합니다~~

profile
주니어 프론트엔드 개발자

0개의 댓글