치악산 복숭아

[Javascript] Map 함수 알아보기 본문

FE/Javascript

[Javascript] Map 함수 알아보기

Juliie 2021. 6. 24. 21:14

Array.prototype.map

자신을 호출한 배열의 요소들에 대해 인수로 전달받은 함수를 호출한다, 그리고 그 결과를 모아서 새로운 배열을 반환한다

원본 배열은 변경 X

 

구문

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

 

매개변수

1. callback: 새로운 배열 요소를 생성하는 함수(다음 세 가지 인수를 가진다)

    1) currentValue: 처리할 현재 요소

    2) index(optional): 처리할 현재 요소의 인덱스

    3) array(optional): map()을 호출한 배열

2. thisArg(optional): callback을 실행할 때 this로 사용되는 값

const vege = ["가지", "호박", "시금치"];
const police = vege.map(item => "밥경찰 "+item);
const police2 = vege.map((item, index) => "밥경찰 실적 "+(index+1)+"위! "+item);

// 원본 배열
console.log(vege);
// expected output: Array ["가지", "호박", "시금치"]

// map()이 생성한 배열
console.log(police);
// expected output: Array ["밥경찰 가지", "밥경찰 호박", "밥경찰 시금치"]
console.log(police2);
// expected output: Array ["밥경찰 실적 1위! 가지", "밥경찰 실적 2위! 호박", "밥경찰 실적 3위! 시금치"]

 

화살표 함수를 사용할때는 자신을 감싸는 함수의 this를 참조하기 때문에 따로 thisArg를 지정 안해줘도 된다고 하는데...

이 부분은 다른 포스팅에서...!😋

Comments