Filter & Map & Every

Filter, Map, Every는 실무에서 for문 보다 많이 사용하는 실무 전용 반복문이다. 그 중 map과 filter 모두 배열의 내장함수이기 때문에 사용할 때는 배열과 함께 사용해야 한다.

Map

map은 배열의 원소를 일관적으로 변경 시킬 때 편리하다.

1. Map 사용방법

const classmate = ["철수","영희","훈이"]

classmate.map((item)=>(item+"어린이"))
=> (3)["철수어린이","영희어린이","훈이어린이"] 이렇게 됨!

map 안에서 사용되는 item은 classmate의 원소들이 들어갈 파라미터(매개변수)이다.
파라미터의 네이밍은 마음대로 정해도 상관 없다.

아래와 같이 객체가 원소인 배열에서도 map을 사용하여 객체를 가공할 수 있다.

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

  //item.name => "철수","영희","훈이"
  //school 속성을 일괄적으로 추가해주도록 하겠습니다.
  classmate.map((item) => ({
    name: item.name + "어린이",
    school: "떡잎유치원",
  }));

	// 결과
	=> (3)[
			{ name: "철수어린이", school: "떡잎유치원" },
			{ name: "영희어린이", school: "떡잎유치원" },
			{ name: "훈이어린이", school: "떡잎유치원" },
		  ];

💡 화살표 함수에서 소괄소 생략이 가능한 경우!
→ 함수의 바디 안의 코드가 한줄이면 생략 가능

아래와 같은 경우는 불가능!
➡️ 코드가 한 줄 이상이거나 리턴값이 객체인 경우

💡 화살표 함수 () => {} vs () => ()
→ 소괄호()로 감싸진 부분은 return 문을 작성하지 않아도 return됨!
반면 중괄호{}로 감싸진 함수는 return문이 없다면 반환값이 없음

2. HTML에서 Map 사용하기

실제 프로젝트에서는 컴포넌트의 리턴값안에서 많이 사용한다고 한다.
map을 리턴값 안에서 사용하기 위해 {}로 감싸서 사용한다.

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

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

---

Filter

filter는 이름 그래도 배열의 원소를 필터링해주는 매서드이다.
filter는 필터링 할 조건으로 객체 혹은 배열의 각원소를 검사하여 그 조건에 맞는 원소들만 결과값으로 도출해준다.

1. filter 사용방법

const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

num.filter((item) => item <= 8);
=> (8) [1, 2, 3, 4, 5, 6, 7, 8]

filter 안에서 사용되는 item은 배열의 원소가 들어갈 파라미터!

💡 map과 filter의 결과물 차이점
→ map은 배열의 길이만큼 값이 나오지만, filter는 조건에 따라 배열의 길이보다 적게 나올 수 있음!!

---

Every

every는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하며 boolean 값을 반환한다.

const isBig = (currentValue) => currentValue > 10;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBig));
// false