JavaScript.method (.filter, .map, .every)

1. map

map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. 이때 원본 배열은 변경되지 않는다.

const numbers = [1, 4, 9]

const roots = numbers.map(el => Math.sqrt(el))

console.log(roots) // result => [1, 2, 3]
console.log(numbers) // result => [1, 4, 9]

위와 같이 배열에 요소를 순회하면서 콜백 함수를 반복 호출하고, 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
이때 원본 배열은 변경되지 않는다.

const classmates2 = [
    { name : "철수"},
    { name : "영희"},
    { name : "훈이"}
]

classmates2.map((el)=>({ name: el.name + "어린이"}))
// result => { name : "철수어린이"},
    		 { name : "영희어린이"},
    		 { name : "훈이어린이"}

위와 같이 배열내에 객체를 변형시킬수 있다.
아래는 HTML 과 연결해서 사용한 상황이다.

// RenderMap 컴포넌트
const RenderMap = ()=>{
const classmate = ["철수","영희","훈이"]

return(
	//중괄호를 이용해 자바스크립트를 컴포넌트의 return값 안으로 데리고 들어온 것 입니다.
  //리턴되어야 할 값이 한줄이기때문에 괄호생략이 가능합니다.
{classmate.map( (item)=> <div>{item}어린이</div> )}
		) 
	}
export default RenderMap

2. filter

filter 메서드는 map메서드와 똑같이 동작하지만 다른값을 반환한다.
자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. 이때 원본 배열은 변경되지 않는다.

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

const odds = numbers.filter(el => el % 2)

console.log(odds) // result => [1, 3, 5]

위와 같이 배열의 모든 요소를 순회하면서 콜백함수를 반복 호출하고 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.

3. every

every 메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출한다.
이때 every 메서드는 콜백 함수의 반환값이 모두 참이면 true, 단 한 번이라도 거짓이면 false를 반환하다.
즉, 배열의 모든 요소가 콜백 함수를 통해 정의한 조건을 모두 만족하는지 확인하여 그 결과를 불리언 타입으로 반환하다.
주의할점으로 every 메서드를 호출한 배열이 빈 배열일 경우 언제나 true를 반환하므로 주위해야 한다.

[3, 6, 9].every(el => el > 2) // result => true

[3, 6, 9].every(el => el > 10) result => false