[Javascript] 배열 관련 메소드( map 메소드와 forEach 메소트 )

map 메소드

map 메소드의 대상에 대해서 map 메소드를 이용하여 콜백함수를 호출하면 기존의 배열에서 사용자가 원하는 새로운 형태의 배열을 반환할 수 있다. 사용법은 아래와 같다. 

arr.map( callback(v, i ){})

v는 배열의 value 값이며, i 의 경우 value값에 대한 index 값이다. 

var arr = [1,2,3,4,5];
arr.map( function(v,i){
    console.log("배열의 value값은 " + v + "이고, 그 value값의 index는 " + i + "이다.");
})
//result : 배열의 value값은 1이고, 그 value값의 index는 0이다.
//result : 배열의 value값은 2이고, 그 value값의 index는 1이다.
//result : 배열의 value값은 3이고, 그 value값의 index는 2이다.
//result : 배열의 value값은 4이고, 그 value값의 index는 3이다.
//result : 배열의 value값은 5이고, 그 value값의 index는 4이다.

map의 반환값으로는 원본 배열 요소에 대한 콜백 함수의 반환값으로  이뤄진 새로운 배열이 된다. 

var arr = [1,2,3,4,5];
var newArr = arr.map(function(v, i){
    return v + i;
})
console.log(newArr) //result : [1, 3, 5, 7, 9]

위의 소스를 보면 callback 함수는 value값과 index값을 인자로 받아서 둘을 합한 값을 반환해준다. 그 후, 그 반환값이 ,newArr이라는 변수에 담겨지며, newArr를 살펴보면 값으로는 callback함수의 반환값으로 이뤄진 새로운 배열로 이뤄져 있다.

forEach 메소드

forEach의 사용법은 map 메소드와 동일하다. 마찬가지로 callback함수로 value값과 index 값을 인자값으로 던져줄 수 있으며, callback함수는 그 인자값을 받아 사용자가 지정한 작업을 수행한다.

arr.forEach( callback(v, i ){})

var arr = [1,2,3,4,5];
arr.forEach(function(v, i){
    console.log("배열의 value값은 " + v + "이고, 그 value값의 index는 " + i + "이다.");
});
//result : 배열의 value값은 1이고, 그 value값의 index는 0이다.
//result : 배열의 value값은 2이고, 그 value값의 index는 1이다.
//result : 배열의 value값은 3이고, 그 value값의 index는 2이다.
//result : 배열의 value값은 4이고, 그 value값의 index는 3이다.
//result : 배열의 value값은 5이고, 그 value값의 index는 4이다.

다만, map 메소드와의 차이점은 forEach 메소드는 return을 하지 않는다.

var arr = [1,2,3,4,5];
var newArr = arr.forEach(function(v, i){
    return v + i;
});
console.log(newArr);    //result : undefined