javascript map 함수에 대해 알아보자. 자바스크립트 map 함수

javascript map 함수에 대해 알아보자. 자바스크립트 map 함수

  

이번 포스팅에서는 javascript의 map 함수에 대해 알아보도록 하겠습니다.

map 함수는 callbackFunction 을 실행한 결과를 가지고 새로운 배열을 만들 때 사용합니다.

 

구문은 아래와 같습니다.

 

array.map(callbackFunction(currentValue, index, array), thisArg)

 

이전 포스팅에서 알아본 filter, forEach와 같은 구문 입니다.

callbackFunction, thisArg 두개의 매개변수가 있고

callbackFunction은 currentValue, index, array 3개의 매개변수를 갖습니다.

currentValue : 배열 내 현재 값

index : 배열 내 현재 값의 인덱스

array : 현재 배열.

 

thisArg : callbackFunction 내에서 this로 사용될 값

 

그럼 예를 보도록 하죠.

기존 배열에서 값의 x2를 한 배열을 생성해보도록 하겠습니다.

<script type="text/javascript">
(function test(){
    var testArray = [1,2,3,4,5];
    var returnArray = testArray.map(function(currentValue, index, array){
        console.log(currentValue);
        console.log(index);
        console.log(array);
        return currentValue*2;
    });
    console.log(returnArray);
})();
</script>

 

testArray의 currentValue*2 값을 해서 returnArray를 만들었습니다.

결과는 아래와 같습니다.

 

 

배열내 값이 반복되는 것이 보이시죠?

 

그리고 기존 testArray의 값에 곱하기 2가 된 값이 returnArray 만들어졌습니다.

 

map 함수는 filter함수와 같이 오브젝트도 컨트롤 할 수도 있습니다.

<script type="text/javascript">
(function test(){
    var testJson = [{name : "이건", salary : 50000000},
                    {name : "홍길동", salary : 1000000},
                    {name : "임신구", salary : 3000000},
                    {name : "이승룡", salary : 2000000}];

    var newJson = testJson.map(function(element, index){
        console.log(element);
        var returnObj = {}
        returnObj[element.name] = element.salary;
        return returnObj;
    });
    console.log("newObj");
    console.log(newJson);
})(); 
</script>

 

기존의 testJson object에서 name과 salary를 빼고 값 만으로 object를 만드는 코드입니다.

결과는 아래와 같습니다.

 

 

 

map 함수는 기존의 배열을 callbackFunction에 의해 새 배열을 만드는 함수입니다.

그러니 기존의 배열이 변하지는 않죠.

 

이제 고차함수의 막바지에 왔네요.

다음 포스팅에서는 some과 every 함수를 마지막으로 고차함수를 마무리 하도록 하겠습니다.