[JS] map , filter , every

DongEun·2022년 11월 19일
2
post-thumbnail

1. 배열(Array)이란?

자바스크립트에서 배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의됩니다.
배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다.
tcpschool - 배열의 기초


1-1. map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
MDN - map

구문

const arr = [1,2,3]

arr.map(callback(currentValue[, index[, array]])[, thisArg])
  • currentValue = 현재 처리하는 요소
  • index = 현재 처리하는 요소의 인덱스 번호
  • array = 현재 map메소드를 이용한 배열
  • thisArg = callback을 실행할 때 this로 사용되는 값.

map 함수 사용법

const classMate = ['짱구' , '철수' , '유리'];
const childs = classMate.map(cur => cur+'어린이')

console.log(childs) // ['짱구어린이' , '철수어린이' , '유리어린이']

배열의 내용을 객체로 변환

만약에 이름순으로 출석표가 제작될때 (index 사용)

const classMate = ['신짱구' , '김철수' , '이유리' , '김수한무거북이와두루미' , '이국어' , '박정무'].sort();
const childs = classMate.map((cur , idx) => {
	return {number : idx + 1, name : cur}
})

console.log(childs) //
[
  {number: 1, name: '김수한무거북이와두루미'}
  {number: 2, name: '김철수'}
  {number: 3, name: '박정무'}
  {number: 4, name: '신짱구'}
  {number: 5, name: '이국어'}
  {number: 6, name: '이유리'}
]

1-2. filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
MDN - filter

구문

const arr = [1,2,3]

 arr.filter(callback(element[, index[, array]])[, thisArg])
  • element = 현재 처리하는 요소
  • index = 현재 처리하는 요소의 인덱스 번호
  • array = 현재 map메소드를 이용한 배열
  • thisArg = callback을 실행할 때 this로 사용되는 값.

맵과 비슷하지만 map은 기존 배열 길이에 값을 변경하여 새로운 배열을 반환하는거라면 filter는 조건에 충족하는 값만 새로 모아 새로운 배열을 반환하는 메소드에요

필터는 간단한 알고리즘 문제에 대입하여 예시를 들게요

프로그래머스 - 제일 작은 수 제거하기

문제 설명
정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요.
단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요.
예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다.

제한 조건
arr은 길이 1 이상인 배열입니다.
인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다.

arr return
[4,3,2,1] [4,3,2]
[10] [-1]

여기서 저는 Math에 최솟값을 구하는 min 메소드를 이용하여 가장 작은값을 구하였고
filter를 이용해 그 가장 값을 제외한 나머지 값을 새로운 배열로 반환하였어요

function solution(arr) {
    const minNum = Math.min(...arr); 			// 배열의 최솟값 구하기
  	const answer = arr.filter(cur => {			
    	return cur !== minNum && cur			// arr의 배열만큼 반복하며 현재값이 최소값이랑 같지 않을때 현재값을 반환
  	})
    return answer.length !== 0 ? answer : [-1];	// 배열의 길이가 0이 아니면 배열을 반환 0이면 -1을 배열에 담아서 반환
}

solution([4,3,2,1]) // [4,3,2]
solution([10]) 		// [-1]

만약에 map 메소드를 이용해서 풀이했다면

function solution(arr) {
    const minNum = Math.min(...arr); 			
  	const answer = arr.map(cur => {				
    	return cur !== minNum && cur			
  	})
    return answer.length !== 0 ? answer : [-1];	
}

solution([4,3,2,1]) // [4,3,2,undefined]
solution([10]) 		// [undefined]

undefined가 반환되어 undefined를 제거하는 로직도 추가해야했기에 filter로 새로운 반환하는 배열이 더 효과적이라 생각했어요



3. every()

every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다. Boolean 값을 반환합니다.
MDN - every

every 메소드는 배열의 모든 요소가 조건에 충족해야만 true값을 반환해요

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

let isCheckNum = arr.every(cur => cur < 4);
console.log(isCheckNum) // false

let isCheckNum = arr.every(cur => cur < 5);
console.log(isCheckNum) // true
profile
다채로운 프론트엔드 개발자

0개의 댓글