filter, map, every

filter

 

 

filter() 메서드

 

• 자바스크립트 배열의 내장 함수
• 주어진 함수의 테스트를 통과하는 모든 요소를 모아(true면 요소를 유지, false면 버림) 새로운 배열을 반환함
• callback 함수는 호출되는 배열을 변화시키지 않음
• 따라서, 내가 원하는 값들을 필터링 할 수 있음

※ callback 함수는 3개의 인수와 함께 호출됨

┌ ⑴ 처리할 현재(대상) 요소값

├ ⑵ 처리할 현재(대상) 요소의 인덱스

└ ⑶ filter을 호출한 배열 객체(=순회되는 배열 객체)

 

 

기본 사용법

 

	const fruits = ['apple', 'banana', 'grape', 'watermelon', 'strawberry', 'mango'];
	const result = words.filter(word => word.length > 6);
	console.log(result); // ["watermelon", "strawberry"]

view raw filter.js hosted with ❤ by GitHub

 

 

filter()을 활용한 검색 예시

 

	profiles={profiles.filter((profile) =>
	profile.detail.includes(age)
	)}

view raw filter.js hosted with ❤ by GitHub

└ profiles 배열에 들어있는 profile.detail이 age를 포함하고 있으면 profiles 배열로 구성

 

 

filter()을 활용한 삭제 예시

 

	const deleteProfile = (id) => {
	const newProfiles = profiles.filter((profile) => profile.id !== id);
	setProfiles(newProfiles);
	}

view raw filter.js hosted with ❤ by GitHub

└ profiles 배열에서 profile.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬

    = profile.id 가 id인 것을 제거

 

 

 

---

 

 

map

 

 

map() 메서드

 

• 자바스크립트 배열 객체의 내장함수
• 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성하며, 반복되는 컴포넌트를 렌더링 할 수 있게 해주는 함수

 

 

기본 형태

 

arr.map(callback, [thisArg])

view raw map.js hosted with ❤ by GitHub

 

 

파라미터

 

• callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지
          ┌ currentValue : 현재 처리하고 있는 요소
          ├ index : 현재 처리하고 있는 요소의 index 값
          └ array : 현재 처리하고 있는 원본 배열
          └ thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스

 

 

예시

 

	var numbers = [1, 2, 3, 4, 5];
	var processed = numbers.map(function(num){
	return num * num;
	});
	console.log(processed); // [1, 4, 9, 16, 25]

view raw map.js hosted with ❤ by GitHub

 

 

예시 (ES6 문법)

 

	const numbers = [1, 2, 3, 4, 5];
	const result = numbers.map(num => num * num);
	console.log(result); // [1, 4, 9, 16, 25]

view raw map.js hosted with ❤ by GitHub

 

 

활용 예시

 

	import React from 'react';
	const MapExample = () => {
	const names = ['Lim', 'Lee', 'Shin', 'Woo'];
	const nameList = names.map(name => <li>{name}</li>);
	return <ul>{nameList}</ul>;
	};
	export default MapExample;

view raw map.js hosted with ❤ by GitHub

 

 

 

 

---

 

 

Every

 

 

Every() 메서드

 

• 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트함
• Boolean 값을 반환함

 

 

기본 형태

 

	// 화살표 함수
	every((element) => { ... })
	every((element, index) => { ... })
	every((element, index, array) => { ... })
	// 콜백 함수
	every(callbackFunc)
	every(callbackFunc, thisArg)
	// 인라인 콜백 함수
	every(function callbackFunc(element) { ... })
	every(function callbackFunc(element, index) { ... })
	every(function callbackFunc(element, index, array){ ... })
	every(function callbackFunc(element, index, array) { ... }, thisArg)

view raw every.js hosted with ❤ by GitHub

 

 

파라미터

 

• callbackFunc : 각 요소를 시험할 함수로 파라미터는 다음 세가지
          ┌ element : 배열에서 처리되는 현재 요소
          ├ index (선택항목) : 처리할 현재 요소의 인덱스
          ├ array (선택항목) : every를 호출한 배열
          └ thisArg (선택항목) : callbackFunc을 실행할 때 this로 사용하는 값

 

 

반환 값

 

• callbackFunc이 모든 배열 요소에 대해 참인 값을 반환하는 경우 true, 그 외엔 false

 

 

예시

 

	const a = [1, 2, 3, 4, 5];
	const b = [2, 4, 6, 8];
	const aEvery = a.every(acc => {
	return acc % 2 === 0;
	});
	console.log("a response: ", aEvery); // false
	const bEvery = b.every(acc => {
	return acc % 2 === 0;
	});
	console.log("b response: ", bEvery); // true

view raw every.js hosted with ❤ by GitHub