js 자바스크립트 .map( ) 이란? javascript Map 함수 배열 메소드

배열에 있는 요소들의 값들을 변경해서 새로운 배열을 사용해야할때가 있는데

그때 for문을 돌려서 루프를 사용하여 배열을 수동으로 반복처리하는 방법도 있지만

js에서 간단하게 기본으로 제공되는 Array.map( ) 메소드를 사용하면 간단하게 가능합니다.

 

예를들어

#아래와 같은 변수가 있는데

var arr = ['red', 'blue', 'yellow']

 

# 이렇게 만들고 싶을때

var arr = ['선택하신 색깔은 red입니다', '선택하신 색깔은 blue입니다', '선택하신 색깔은 yellow입니다']

 

 

 

#for문을 사용하면

for(var i=0; i<arr.length; i++) {

  arr[i] = `선택하신 색깔은 ${arr[i]}입니다`

}

 

 

 

# .map( ) 함수를 사용하면

arr.map = function(fn) {

  for(var i=0; i<arr.length; i++) {

    arr[i] = `선택하신 색깔은 ${arr[i]}입니다`

  }

}

 

 

 

만약 .map함수가 없어서 만들어야한다면?

 

정의해둔 arr의 값이 바뀌게 만든거

 

#변수 만들기

var arr=['red','blue','yellow']

#변수 출력

arr
#결과값

(3) ['red', 'blue', 'yellow']

# ._map이라는 함수 만들기
arr._map=function(fn){console.log(this)}
#결과값

ƒ (fn){console.log(this)}

#arr인자값 가져오게 기존의 ._map이라는 이름으로  .map함수같은걸 만듬
arr._map(function( ){ })

#결과값

VM336:1 (3) ['red', 'blue', 'yellow', _map: ƒ]
undefined

#직접 만든 ._map이라는 배열함수 
arr._map = function(fn) { for(item of this) { fn(item) } }               
#결과값                
ƒ (fn) { for(item of this) { fn(item) } }

#
arr._map(function(item){console.log(item)})

#결과값
VM789:1 red
VM789:1 blue
VM789:1 yellow
undefined

arr._map = function(fn) {for(idx in this) { this[idx] = fn(this[idx])}}

#결과값
ƒ (fn) {for(idx in this) { this[idx] = fn(this[idx])}}

arr._map(function(item) { return `선택하신 색깔은 ${item}입니다` })

#결과값

undefined

arr

#결과값

1.  ['선택하신 색깔은 red입니다', '선택하신 색깔은 blue입니다', '선택하신 색깔은 yellow입니다', _map: '선택하신 색깔은 function(fn) {for(idx in this) { this[idx] = fn(this[idx])}}입니다']