JavaScript 배열 메서드 - 매핑

Array.prototype.map()

JavasScript(JS) 학습을 곧 시작하면 배열을 접하게 됩니다. 배열은 정보/값을 목록으로 저장할 수 있는 JS의 데이터 유형입니다. 배열을 만들려면 값을 구분하는 쉼표를 사용하여 한 쌍의 대괄호 안에 값 목록을 작성하면 됩니다.

예시:

let teamSeven = ["Naruto", "Sasuke", "Sakura", "Kakashi"];

어레이가 있으면 나중에 어레이로 무언가를 하고 싶을 가능성이 매우 높습니다. JS 여정을 시작할 때 무언가를 반복하는 데 사용할 수 있는 루프for를 발견하게 되며 특정 횟수만큼 코드 블록을 실행할 수 있는 기능을 제공합니다. 배열을 반복하고 싶은 경우 사용할 수 있는 방법 중 하나는 .map() 입니다.

.map() 사용 방법

.map()로 작업할 때 기억해야 할 한 가지 중요한 개념은 새 배열을 만들고 원래 배열을 변경하지 않고 그대로 두는 것입니다. 모든 메소드가 이런 식으로 작동하는 것은 아니며 프로그램에서 버그를 일으킬 수 있기 때문에 이것은 중요합니다.

각 teamSeven 구성원에 대한 추가 정보를 추가하여 배열(위)의 모든 값을 변경한다고 상상해 보십시오. 배열에서 .map()를 호출하고 콜백 함수*를 인수로 전달하기만 하면 됩니다. 관찰하다.

*함수를 다른 함수의 인수로 전달하는 경우 해당 함수를 콜백이라고 합니다.

예시:

function addVillage(str) {
   return str + " of Konoha";
}
let revampedTeamSeven = teamSeven.map(addVillage);

console.log(teamSeven, revampedTeamSeven);
/* ["Naruto","Sasuke","Sakura","Kakashi"] , 
["Naruto of Konoha","Sasuke of Konoha","Sakura of Konoha","Kakashi of Konoha"] */

위의 예에서 .map()는 각 값을 실행되는 addVillage(str) 함수의 인수로 전달하고 반환된 값은 새 배열에 저장됩니다.

요약

배열.프로토타입.맵():

배열의 각 값에 대해 제공된 콜백 함수를 호출하여 새 배열을 만듭니다.

원래 배열을 변경하지 않습니다.

배열의 각 값에 대해 한 번씩 콜백 함수를 실행합니다.

새로 만든 배열은 원래 배열과 길이가 같습니다.

이 방법에 대한 자세한 내용은 MDN - Mozilla의 공식 문서를 확인하십시오.

읽기 쉬웠기를 바랍니다. 피드백이 있으면 알려주세요. 가르침을 통해 지식을 강화하려고 노력하고 있습니다.

Dattebayo