웹사이트 검색

.map()을 사용하여 JavaScript에서 배열 항목을 반복하는 방법

소개

고전적인 for 루프에서 forEach() 메서드에 이르기까지 다양한 기술과 메서드를 사용하여 부모 배열의 각 항목에 대한 함수의 데이터 세트를 반복합니다. .map()은 호출 배열만 변경하는 변형 메서드와 달리 새 배열을 만드는 비변형 메서드입니다.

이 방법은 배열로 작업할 때 많이 사용할 수 있습니다. 이 튜토리얼에서는 JavaScript에서 .map()의 네 가지 주목할만한 용도인 배열 요소의 함수 호출, 문자열을 배열로 변환, JavaScript 라이브러리에서 목록 렌더링 및 배열 객체 재포맷을 살펴봅니다.

전제 조건

이 자습서에는 코딩이 필요하지 않지만 예제를 따라하고 싶다면 Node.js REPL 또는 브라우저 개발자 도구를 사용할 수 있습니다.

  • Node.js를 로컬에 설치하려면 Node.js를 설치하고 로컬 개발 환경을 만드는 방법의 단계를 따르십시오.\n
  • 구글 크롬.

1단계 — 배열의 각 항목에 대한 함수 호출

.map()은 콜백 함수를 인수 중 하나로 받아들이고 해당 함수의 중요한 매개변수는 함수에서 처리 중인 항목의 현재 값입니다. 필수 매개변수입니다. 이 매개변수를 사용하여 배열의 각 항목을 수정하고 새 배열의 수정된 구성원으로 반환할 수 있습니다.

예를 들면 다음과 같습니다.

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2
})

console.log(sweeterArray)

이 출력은 콘솔에 기록됩니다.

Output
[ 4, 6, 8, 10, 70 ]

다음을 사용하여 더 깔끔하게 만들 수 있습니다.

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;

// we have an array
const sweetArray = [2, 3, 4, 5, 35];

// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray);

동일한 출력이 콘솔에 기록됩니다.

Output
[ 4, 6, 8, 10, 70 ]

sweetArray.map(makeSweeter)와 같은 코드를 사용하면 코드를 좀 더 읽기 쉽게 만들 수 있습니다.

2단계 — 문자열을 배열로 변환

.map()은 배열 프로토타입에 속하는 것으로 알려져 있습니다. 이 단계에서는 이를 사용하여 문자열을 배열로 변환합니다. 여기서 문자열에 대해 작동하는 방법을 개발하지 않습니다. 대신 특수한 .call() 메서드를 사용합니다.

JavaScript의 모든 것은 한 개체가 다른 개체에 대한 컨텍스트입니다. 따라서 배열의 .map() 컨텍스트를 문자열로 복사하게 됩니다.

.call()은 사용할 컨텍스트의 인수와 원래 함수의 인수에 대한 매개변수를 전달할 수 있습니다.

예를 들면 다음과 같습니다.

const name = "Sammy"
const map = Array.prototype.map

const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`
})

console.log(newName)

이 출력은 콘솔에 기록됩니다.

Output
[ "Sa", "aa", "ma", "ma", "ya" ]

여기에서 문자열에 .map()의 컨텍스트를 사용하고 .map()이 기대하는 함수의 인수를 전달했습니다.

이것은 문자열의 .split() 메서드처럼 작동하지만 각 개별 문자열 문자는 배열로 반환되기 전에 수정할 수 있습니다.

3단계 — JavaScript 라이브러리에서 목록 렌더링

그러나 JSX 구문과 같은 JavaScript 라이브러리는 .map() 메서드가 JSX 구문으로 래핑됩니다.

다음은 React 구성 요소의 예입니다.

import React from "react";
import ReactDOM from "react-dom";

const names = ["whale", "squid", "turtle", "coral", "starfish"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

이것은 목록이 있는 div를 렌더링하는 React의 상태 비저장 구성 요소입니다. 개별 목록 항목은 names 배열을 반복하기 위해 .map()을 사용하여 렌더링됩니다. 이 구성 요소는 루트의 Id가 있는 DOM 요소에서 ReactDOM을 사용하여 렌더링됩니다.

4단계 - 배열 객체 재포맷

.map()은 배열의 개체를 반복하는 데 사용할 수 있으며 기존 배열과 유사한 방식으로 각 개별 개체의 내용을 수정하고 새 배열을 반환합니다. 이 수정은 콜백 함수에서 반환된 내용을 기반으로 수행됩니다.

예를 들면 다음과 같습니다.

const myUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }
]

const usersByLikes = myUsers.map(item => {
    const container = {};

    container[item.name] = item.likes;
    container.age = item.name.length * 10;

    return container;
})

console.log(usersByLikes);

이 출력은 콘솔에 기록됩니다.

Output
[
    {shark: "ocean", age: 50},
    {turtle: "pond", age: 60},
    {otter: "fish biscuits", age: 50}
]

여기서 대괄호와 점 표기법을 사용하여 배열의 각 개체를 수정했습니다. 이 사용 사례는 수신된 데이터를 프런트 엔드 애플리케이션에 저장하거나 구문 분석하기 전에 처리하거나 압축하는 데 사용할 수 있습니다.

결론

이 자습서에서는 JavaScript에서 .map() 메서드의 네 가지 용도를 살펴보았습니다. 다른 메서드와 함께 .map()의 기능을 확장할 수 있습니다. 자세한 내용은 JavaScript에서 배열 메서드를 사용하는 방법: 반복 메서드 문서를 참조하세요.