[JavaScript 내장함수 다루기 ③] Array.Prototype.map, 배열의 원소를 1:1 매핑해보자.

Array.Prototype.map

arr.map(callback(currentValue, index, array), thisArg)

• 오늘 JavaScript 내장함수 다루기에서 다뤄볼 함수는 map 함수입니다. map 함수에 대해 알아보기에 앞서, 간단하게 map 함수를 사용해보겠습니다.
  1. map 함수 안에 콜백함수를 등록합니다.
  2. 콜백함수의 파라미터로 아무런 변수로 지정한 뒤, 이를 계산에 활용하여 return 합니다.

const a = [1, 2, 3];
const doubled = a.map((num) => {
  return num * 2;
});
console.log(a === doubled) // false

// a = [1, 2, 3];
// doubled = [2, 4, 6];

• map 함수가 동작하는 방식은 다음과 같습니다. (실제 내부적으로 구현된 방식과는 다를 수 있습니다)

  1. 반복문을 돌 듯, 각 요소들을 반복합니다.

     const a = [1, 2, 3];  
     for(let i = 0; i < a.length; i++){
         a[i];
     }

  2. 그리고 콜백함수에서 각 요소들을 파라미터로 받아 처리합니다.

     function callback(num) {
         return num * 2; 
     } for-loop {
       callback(a[i]); 
     }

  3. 그리고 그 결과 값을 반환합니다.

     function map(callback, thisArg) { 
         const arr = []; // 새로운 배열 
     for-loop { 
         arr.push(callback(a[i]); 
     } 
         return arr; 
     }

활용

이는 불변성(Immutability)을 유지하여 프로그래밍하는 것이 중요한 리액트에서 배열의 값을 수정할 때 유용하게 사용될 수 있습니다. 예를 들어, 아래의 코드는 사용자의 마우스 클릭에 따라 화면의 값이 달라지는 코드입니다.

// App.css
.text {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0.5rem;
  font-size: 1.2rem;
  color: #bc444c;
  font-weight: 600;
  cursor: pointer;
  span {
    padding-left: 1rem;
  }

  &.checked {
    text-decoration: line-through;
    color: grey;
  }
}

// App.js

import { useState } from "react";
import "App.css";

function App() {
  const [todos, setTodos] = useState(
      id: 1,
      text: `할 일 1`,
      checked: false,
    });

  const onToggle = (id) => {
    setTodos((todos) =>
      todos.map((todo) =>
        todo.id === id ? { ...todo, checked: !todo.checked } : todo
      )
    );
  };

  return (
    <>
      <div>
        {todos &&
        todos.length !== 0 &&
        todos.map((todo) => (
          <div className="text" onClick={(e) => onToggle(id)} className={checked ? "checked" : ""}>
            {checked ? <AiFillCheckSquare /> : <AiOutlineCheckCircle />}
            <span>{text}</span>
            </div>
        ))}
      </div>
    </>
  );
}