Map, Filter 함수

1. map() 함수

• 배열의 내장 함수
• 반복 되는 컴포넌트를 렌더링 하기 위해 사용
• 주어진 함수를 호출한 결과를 모아서 새로운 배열을 생성한다.
• 배열이름.map(콜백함수)

let teacherList = ['AAA', 'BBB', 'CCC', 'DDD']
let teacherRender = teacherList.map(item => <li>{item}</li>)

// 일반적인 case
console.log(teacherList[0]+"님")

// map 함수
let newList = teacherList.map(item => item+'님')
console.log(newList)

 

 

 

 

2. Filter 함수

• 배열의 각 요소에 대해서 주어진 함수의 결과 값이 ture인 요소들만 모아서 새로운 배열로 반환하는 함수
•  find의 경우 만족 하는 첫 요소를 반환 하지만 filter의 경우 만족하는 모든 요소를 반환

const words = ['samsung', 'lg', 'apple', 'kia', 'hyundai'];

const result = words.filter(word => word.length > 5);

console.log(result);
// ["samsung", "hyundai"]

 

 

• filter()을 활용한 검색 예시

noteList={noteList.filter((note) =>
	note.text.toLowerCase().includes(searchText)
)}

• noteList에서 각 노트의 텍스트를 searchText와 비교하여, 포함된 노트만을 남긴 새로운 배열을 생성
• note.text.toLowerCase().includes(searchText) 
  • note.text : 현재 노트의 텍스트 내용을 의미
  • .toLowerCase() : 문자열을 소문자로 변환하는 메소드
  • .includes(searchText) : searchText 내용이 포함되어 있는지 확인하는 메소드

 

 

 

3. 참고 사이트

• https://dongmin-jang.medium.com/javascript-15%EA%B0%80%EC%A7%80-%EC%9C%A0%EC%9A%A9%ED%95%9C-map-reduce-filter-bfbc74f0debd

[Javascript] 15가지 유용한 map, reduce, filter