Map JavaScript:.map() 메서드 가이드

프로그래머는 코드의 반복을 줄이는 것을 좋아합니다. 코드를 더 많이 반복할수록 유지 관리가 어려워지고 프로그램 실행 속도가 느려집니다. 이것이 JavaScript에 데이터 세트를 반복하는 다양한 메소드가 있는 이유입니다.

이러한 방법 중 하나를 map()이라고 합니다. 방법. 이 메서드는 기존 배열을 반복하고 해당 배열의 모든 항목에 대해 특정 기능을 수행합니다.

이 가이드에서는 JavaScript map() 사용 방법에 대해 이야기할 것입니다. 함수. map()의 세 가지 일반적인 예를 살펴보겠습니다. 시작하는 데 도움이 되는 기능이 실행 중입니다.

지도 기능이란 무엇입니까?

자바스크립트 map() 메서드는 배열의 각 항목에 대해 특정 함수를 호출합니다. 이 함수의 결과는 자체 배열로 이동됩니다.

예를 들어, 배열의 모든 항목에 2를 곱한다고 가정합니다. 모든 배열 항목에 2를 곱하는 함수를 만들고 해당 함수를 map()으로 이동하면 됩니다. 방법.

map() 구문 기능:

const newArray = oldArray.map(function, thisValue);

function 배열의 각 요소에서 실행될 콜백 함수입니다. 함수에 대해 자세히 알아보려면 JavaScript 함수에 대한 궁극적인 가이드를 읽어보세요. thisValue this에 저장될 기본값입니다. 함수의 변수. 기본적으로 이것은 정의되지 않습니다.

map 메소드는 콜백 함수의 결과를 기반으로 새 배열을 생성합니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

map() 방법에는 여러 가지 용도가 있습니다. 가장 일반적인 것은 배열 요소 목록에서 함수를 호출하는 것입니다. 이에 대한 예는 숫자 목록의 모든 숫자를 곱하거나 문자열 목록에서 각 문자열의 길이를 찾는 것입니다.

또한 React 또는 Vue.js와 같은 JavaScript 라이브러리에서 목록을 렌더링하는 데 사용되는 함수를 찾을 수 있습니다.

지도로 함수 호출

map() 메소드를 사용하면 목록의 모든 항목에 대해 반복적인 작업을 수행할 수 있으므로 여러 경우에 유용합니다.

귀하가 쿠키 가게를 소유하고 있고 각 쿠키의 가격을 5% 인상한다고 가정해 보겠습니다. 새 가격을 모두 개별적으로 계산하는 대신 map() 방법.

사용할 코드는 다음과 같습니다.

const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45];
const newCookiePrices = cookiePrices.map(cookie => {
	var price = cookie * 1.05;
	return price.toFixed(2);
});

console.log(newCookiePrices);

코드 반환:

["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]

이 예에서는 모든 쿠키의 가격을 5% 인상했습니다. 먼저 "cookiePrices" 변수에 쿠키 가격 목록을 선언했습니다. 그런 다음 map() 각 쿠키에 대해 5% 가격 인상을 계산하는 함수가 있는 메서드입니다.

"cookie * 1.05"는 백분율 증가를 계산한 다음 해당 증가를 소수점 이하 두 자리까지 반올림하여 반환했습니다. 마지막으로 console.log()를 사용하여 콘솔에 새 배열을 인쇄했습니다. 방법.

코드를 더 읽기 쉽게 만들기 위해 함수를 자체 함수로 이동할 수도 있습니다.

function calculateIncrease(cookie) {
	var price = cookie * 1.05;
	return price.toFixed(2);
}

const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45];
const newCookiePrices = cookiePrices.map(calculateIncrease);

console.log(newCookiePrices);

코드는 이전과 동일한 값을 반환하지만 더 읽기 쉽습니다.

["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]

배열의 항목 변경

map() 메서드는 종종 배열의 항목을 변경하는 데 사용됩니다. 쿠키 가게에서 고객을 위한 로열티 프로그램을 구축하고 있다고 가정해 보겠습니다. 쿠키를 구매할 때마다 10포인트가 적립되며, 100포인트 적립 시 쿠키를 무료로 드립니다.

다음 프로그램을 통해 이 작업을 수행할 수 있습니다.

var customers = [
	{ name: "Hannah Geoffrey", cookiesPurchased: 2 },
	{ name: "Peter Clarkson", cookiesPurchased: 3 },
	{ name: "Steven Hanson", cookiesPurchased: 7 }
]

function calculateLoyaltyPoints(customer) {
	var newCustomer = {
		name: customer.name,
		cookiesPurchased: customer.cookiesPurchased,
		points: customer.cookiesPurchased * 10
	}

	return newCustomer;
}

var customersWithPoints = customers.map(calculateLoyaltyPoints);

console.log(customersWithPoints);

코드 반환:

[{ cookiesPurchased: 2, name: "Hannah Geoffrey", points: 20 }, { cookiesPurchased: 3, name: "Peter Clarkson", points: 30 }, { cookiesPurchased: 7, name: "Steven Hanson", points: 70 }]

이 예에서는 구매한 쿠키 수를 기반으로 각 고객이 부여해야 하는 총 포인트 수를 계산했습니다.

먼저 "customers"라는 객체 배열을 선언했습니다. 이 목록은 고객의 이름과 키:값 쌍을 사용하여 구매한 쿠키 수를 저장합니다.

그런 다음 calculateLoyaltyPoints()라는 함수를 선언했습니다. . 이 기능은 각 고객이 구매한 쿠키 수에 10을 곱하여 계산되는 "포인트"라는 각 고객 항목에 새로운 항목을 추가합니다.

map()을 사용합니다. 메서드를 사용하여 고객 목록을 반복하고 calculateLoyaltyPoints()를 적용합니다. 함수. 마지막으로 수정된 고객 목록을 인쇄합니다. 이제 이 목록은 각 고객의 항목에 추가한 "포인트" 값을 반영합니다.

라이브러리를 사용하여 목록 렌더링

map() 메소드는 일반적으로 React와 같은 JavaScript 라이브러리에서 사용됩니다. 이 메서드의 목적은 목록의 항목을 렌더링하는 것입니다. map()의 예를 살펴보겠습니다. 반응에서.

저희 매장에서 저희 웹사이트에서 판매하는 쿠키 목록을 보여주고 싶다고 가정해 보겠습니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

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

var cookies = ["Raspberry Chocolate Chip", "White Chocolate Chip", "Oat", "Milk Chocolate Chip"];

const CookieList = () => (
	<div>
		<ul>{cookies.map((cookie, i) => 
			<li key={i}>{cookie}</li>
		       )}
		</ul>
	</div>
);

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

이 코드는 목록을 렌더링하는 React의 구성 요소를 만듭니다. 각 목록 항목은 map()을 사용하여 렌더링되는