Filter, Find, Map 함수

백엔드에서 받은 데이터를 프론트에서 보여줄 때

항상 모든 데이터를 보여주는 것이 아니라 프론트 단계에서 데이터를 다시 한번 구분지어 

보여주는 경우가 많다. 

이런 경우 사용하는 함수로 Filter 함수와 Find 함수가 있다. 

1. Filter 함수

const data = {
  [
  	title: "데이터",
  	text: "my data01",
  ],
  [
  	title: "데이터",
  	text: "my data02",
  ],
  [
  	title: "데이터",
  	text: "my data03",
  ],
  [
  	title: "데이터",
  	text: "my data04",
  ],
  [
  	title: "나의 데이터",
  	text: "my data01",
  ],
  [
  	title: "나의 데이터",
  	text: "my data02",
  ],
  [
  	title: 나의 데이터",
  	text: "my data03",
  ]
};

예를 들어 위와 같은 데이터가 있다고 가정한다.

( 이는 api 통신 이후에 받은 JSON 데이터 형식을 임의로 만들어낸 것이다. )

현재 "데이터" 이라는 title의 text 들이 필요한 상황이라면

const result = data.filter((oneData) => oneData.title === "데이터");

위의 코드로 title 이 "데이터" 인 것들만 result 에 담을 수 있다. 

result = [
      [
        title: "데이터",
        text: "my data01",
      ],
      [
        title: "데이터",
        text: "my data02",
      ],
      [
        title: "데이터",
        text: "my data03",
      ],
      [
        title: "데이터",
        text: "my data04",
      ]
  }

result 에 담겨있는 데이터는 위와 같아진다. 

---

2. Find 함수

find 함수는 단 하나의 값만 찾아낸다.

filter 함수는 조건에 맞는 모든 값을 찾아내 넣어줬지만 find 함수는 조건에 만족하는 단 하나의 값만 찾아낸다. 

const findResult = data.find((oneData) => oneData.title === "데이터");

title 이 "데이터" 인 것들은 총 4개가 존재하지만 위의 코드로는 단 하나의 데이터만 찾아낸다.

findResult = [title: "데이터", text: "my data01"];

 

 

단 하나의 값만 찾기 원할 때에는 find 함수를 사용하고 하나의 주제를 갖고 다양한 값을 찾는 경우에는 filter 함수를 사용하는 것이 좋을 것 같다. 

---

3. map 함수

map 함수는 for 반복문과 같다고 생각해도 된다. 

사용 방식이 간단한 반복문이라고 본다. 

const result = data.map((onData) => console.log(oneData));

filter, find 함수와 달리 수행할 동작을 넣을 수 있다는 장점이 있다. 

또한 filter와 find 함수를 사용하지 않고 map 함수를 이용해 조건을 걸어 같은 기능을 구현할 수 있다.