✂️ Array 메서드

JavaScript의 Array 메서드를 사용하여 데이터를 다루다 보면 자주 사용하게 되는 메서드들이 있습니다. 그 중 개념과 정확히 알지 못하여 사용할때 마다 항상 다시 찾아보는 메서드들이 있어 정리하였습니다.

---

Array.filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

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

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

---

Array.forEach()

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

---

Array.map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

---

예시

예시의 상황은 데이터를 통해서 퍼스널 레포트를 날짜별로 받아 올 수 있습니다. 다만 레포트는 모든 날짜별로 있지 않습니다. 화면을 통해 레포트가 존재하는 날짜와 없는 날짜를 구별하기 위해 날짜와 데이터의 유무 정보가 담긴 객체로 이루어진 배열을 만들 목표를 세웠습니다.

const personalReports = [...퍼스널 레포트 데이터]

const DateSlider = () => {
  const date = new Date();
  const todayDate = date.getDate();
  const [dates, setDates] = useState([]);
  const [personalDates, setPersonalDates] = useState();
  
// personalReports로 부터 map 메서드를 사용하여 새로운 배열을 만듭니다. 새로 반환 받은 배열을 레포트가 존재하는 날짜가 담긴 객체들의 배열입니다.
  const getPersonalDate = () => {
    const personalInfoArray = personalReports.datas.map((data) => {
      const personalDate = new Date(data.createDate).getDate();
      return { date: personalDate, id: data.id };
    });
    setPersonalDates(personalInfoArray);
  };
  
// personalDates(getPersonalDate함수를 통해 만든 새로운 배열)에 forEach 메서드를 사용하여 레포트가 있는 날짜에는 isData를 true, 없으면 false 값을 주어 미리 생성한 배열에 담아줍니다.
  const getDate = () => {
    let dateInfoArray: DateInfo[] = [];
    for (let i = todayDate - 6; i <= todayDate; i++) {
      let dateConfig: DateConfig = { isData: false };
      personalDates!.forEach((date) => {
        if (i === date.date) {
          dateConfig.isData = true;
          dateConfig.id = date.id;
        }
      });
      dateInfoArray.push({ date: i, ...dateConfig });
    }
    setDates(dateInfoArray);
  };

  useEffect(() => {
    if (personalDates) {
      getDate();
    }
  }, [personalDates]);

  useEffect(() => {
    getPersonalDate();
  }, []);

---

📝 후기

배열을 다루기 위해 자주 사용하던 메서드였지만, 사용할때 마다 개념을 확실히 알지 못해 관련 내용을 다시 찾아보고는 했습니다. 팀 프로젝트 과정중에도 또 다시 사용하게 되어 이번에는 개념을 확실히 이해하기 위해 블로그에 정리하였습니다.

---

🧾 Reference

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

---

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프