11. filter, map, every

Filter 메서드(Array.prototype.filter())

Filter 메서드는 배열의 메서드로 이름처럼 배열의 원소를 걸러내는 역할을 하는 메서드입니다. 

 

형식

 

Array.filter((arrayElement(배열의 요소들), index(요소들의 인덱스 값), currentArray(배열)) => {

      함수문

     return 조건문;

})

 

return 값은 return 조건문을 통과하는 모든 요소 가진 새로운 배열을 return하게 됩니다.

 

예시 코드

const arrayNumber = [1,2,3,4,5,10]

const arrayNumber2 = arrayNumber.filter((el)=> el > 2)

위 예시 코드를 실행하게 되면 arrayNumber2에는 arrayNumber 중 조건문인 2보다 큰 원소들만이 들어가게 됩니다. 즉 [3,4,5,10]이 나오게 됩니다. 

 

Map 메서드(Array.prototype.map())

map 메서드는 배열의 메서드로 입력받은 함수를 배열의 각 원소로 동작 시키고 그 결과를 요소로 하는 배열을 리턴하는 메서드입니다. for (i in array)와 비슷하다고 볼 수 있다.

 

형식

Array.map((currentElement, index, currentArray) => {return function(currentElement)})

위 형식에 맞춰서 기능을 설명하자면 Array 안의 원소를 하나씩 꺼내서 function에 넣은 값을 요소로 갖는 배열을 return하게 됩니다.

 

예시 코드

const array = [1,2,3,4,5]

array.map((currentElement) => {return currentElement+1})

위 코드가 실행 되면 모든 원소를 꺼내 1을 더한 값들을 요소로 갖는 배열이 출력된다.

 

리액트에서의 map 활용법

리액트에서는 map을 활용하여서 HTML을 반복적으로 출력하는 것이 가능하다. 배열 형태의 return 값을 가지기 때문에 이 배열의 요소를 HTML 태그 형태로 저장하게 되면 이를 이용해서 반복적인 태그를 출력해 줄 수 있어서 for문을 대신해 널리 사용되고 있다.

예시 코드

 

출력 화면

위 코드 처럼 map으로 classmates라는 배열의 모든 요소에 접근해 그 값을 HTML 태그 형식으로 만들어 출력 화면처럼 출력하는 것이 가능하다. 또한 저 리턴된 배열을 변수에 저장해서 return 문에 넣는 것으로 return문을 좀더 깔끔하게 만드는 것도 가능하다.

 

Every 메서드(Array.prototype.every())

every 메서드는 배열 메서드 중 하나로 모든 요소를 돌어보며 조건에 맞는 지를 확인 하는 메서드입니다. 모든 원소가 조건을 만족하면 true를 하나라도 만족하지 않으면 false를 return합니다.

형식

Array.every((currentElement) =>{return 조건문)

 

위 형식에 맞춰서 기능을 설명하면 Array안의 원소를 모두 꺼내서 조건문에 맞는지 확인하고 모든 원소가 조건문을 만족한다면 true를 아니라면 false를 return합니다.

 

예시 코드

const array = [1,2,3]

array.every((currentElement)=> currentElement < 4)

array.every((currentElement)=> currentElement < 3)

위 every의 값은 원소들의 요소가 1,2,3으로 모두 4보다 작으니 조건을 만족한다. 따라서 True를 return하고 아래의 every는 3이 3보다 작지 않기 때문에 하나가 조건을 만족하지 않으므로 False를 return하게 된다.

 

이와 반대되는 some이라는 메서드도 존재한다. 하나라도 조건문을 만족한다면 True를 아니라면 False를 return합니다.

 

Some 형식

Array.some((currentElement) =>{return 조건문)