자바스크립트 map 메서드

2024.05.31 6차 스터디

오늘의 스터디 주제는? 자주 쓰이는 메서드!

자바스크립트의 라이브러리인 리액트를 배우고 있다 보니 자바스크립트 문법을 사용하고 있다. 자바스크립트를 학습했음에도 기억이 잘 나지 않고 강의에서 자주 사용하는 문법들도 자꾸 까먹고 해서 기록을 해보려고 한다!

1. map 메서드

map 메서드는 배열의 각 요소를 순회하면서 새로운 배열을 생성하는 함수입니다. 이 과정에서 배열의 각 요소를 변환할 수 있습니다. Todo 리스트 같은 데이터를 화면에 렌더링할 때, 배열을 순회하면서 각 항목을 원하는 형식으로 변환해야 할 때 주로 사용합니다.

1-1. map 메서드의 특징

• 배열을 순회하면서 변환한다.

  여러 개의 종이 쪽지가 들어 있는 박스가 있다고 생각해보세요. 각 종이 쪽지에는 해야 할 일이 적혀 있습니다.
  이 쪽지들을 하나씩 꺼내서, 각 쪽지를 예쁜 카드에 붙여서 새로운 박스에 넣는다고 생각해보세요.
  map은 이 작업을 프로그래밍적으로 도와주는 도구입니다. 각 쪽지를 꺼내고, 변환하고, 새로운 박스에 넣는 일을 자동으로 해줍니다.

• 간결하고 읽기 쉬운 코드

  만약 종이 쪽지 100개를 하나하나 예쁜 카드에 붙여야 한다면, 시간이 많이 걸리고 실수할 가능성도 있습니다.
  map은 이 과정을 간단하게 코드 몇 줄로 처리할 수 있게 해줍니다. 코드가 간결해지면 읽기 쉽고, 유지보수하기도 쉬워집니다.

• 불변성 유지

  원래 박스에 있는 종이 쪽지들을 변형하지 않고, 새로운 박스에 변형된 쪽지를 넣습니다.
  map은 원래 배열을 변경하지 않고, 변형된 새로운 배열을 반환합니다. 이로 인해 데이터의 불변성을 유지할 수 있습니다.

1-2. map 메서드의 기본 구조

map 메서드의 기본 구조는 다음과 같습니다.

변수에 반환할 값을 할당 경우

const newArray = array.map((매개변수) => {
  return {
  	// 반환할 값
  }
});

매개변수로는 3가지가 있습니다.

• currentValue: 배열의 현재 요소.
• index (선택적): 배열의 현재 요소의 인덱스.
• array (선택적): map 메서드를 호출한 배열 자체.

일반적으로 map 메서드에서는 매개변수 하나만 사용하고 currentValue가 가장 자주 사용되며 필수적으로 사용됩니다. 배열의 인덱스나 배열 자체에 대한 정보를 활용할 때는 매개변수를 여러개 사용하기도 합니다.

그런데 왜 map메서드의 ()안에 함수를 넣을 것 일까요?
map 메서드는 배열의 각 요소를 어떻게 변형할지 알아야하기 때문입니다. 이를 위해 "어떻게 변형할지"를 정의한 함수를 매개변수로 받는 것입니다.

1-3. map 메서드의 예시

todoList를 반환하는 예시를 함께 볼까요?

import React from 'react';

const TodoList = () => {
    const todos = [
        { id: 1, text: '밥먹기', completed: false },
        { id: 2, text: '양치하기', completed: true },
        { id: 3, text: '공부하기', completed: false }
    ];

    return (
        <div>
            <h1>Todo List</h1>
            <ul>
                {todos.map(todo => <li> {todo.text} </li>)}
            </ul>
        </div>
    );
};

export default TodoList;

• 전체적으로 코드를 해석해봅시다.

1. 먼저 todos라는 변수에 객체로 이루어진 배열이 할당되어 있습니다.

2. map 메서드를 사용하여 todos라는 배열을 순회합니다.

3. text 정보만 담겨있는 새로운 배열을 <li>에 담습니다.
   
   

• map 메서드 부분만 따로 자세히 해석해볼까요?

{todos.map(todo => <li> {todo.text} </li>)}

1. todos 배열에 map 메서드를 사용하여 새 배열을 생성하고자 합니다.

2. 매개변수로는 todo라는 이름의 매개변수를 사용하였습니다.

3. todos의 배열의 각 객체를 매개변수 todo로 접근하게 됩니다.
   즉, 객체 하나 하나를 todo란 이름으로 배열의 각 요소를 순회합니다.

4. todo.text(todo의 text) 정보들만 따로 담은 새 배열을 반환합니다.