# Array.prototype.map : Javascript Map functio

# Array.prototype.map : Javascript Map functio

by jihoon kim

HTML

<h1>Array.prototype.map : Javascript Map function</h1>
<script>
function autolink(id) {
  var container = document.getElementById(id);
  var doc = container.innerHTML;
  var regURL = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi");
  var regEmail = new RegExp("([xA1-xFEa-z0-9_-]+@[xA1-xFEa-z0-9-]+\.[a-z0-9-]+)","gi");
  return doc.replace(regURL,"<a href='$1://$2' target='_blank'>$1://$2</a>").replace(regEmail,"<a href='mailto:$1'>$1</a>");
}

window.onload = function () {
  var container = document.getElementById("contents");
	container.innerHTML = autolink("contents");
}
</script>

<pre id="contents">
■ Array.map     : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
■ 참고          : http://www.wirfs-brock.com/allen/posts/166

■ 문법
    var new_array = arr.map(function callback(currentValue[, index[, array]]) { // new_array의 새 요소 반환 }[, thisArg])

    : 매개변수
        callback        :   새로운 배열 요소를 생성하는 함수로 다음 세 가지 인수를 가집니다.
        currentValue    :   배열의 요소 중, 현재 처리되고 있는 요소
        indexOptional   :   현재 처리되는 요소의 배열 내 인덱스
        arrayOptional   :   map 메소드가 적용되는 본래 배열
        thisArgOptional :   callback을 실행할 때 this로 사용되는 값.

    : 반환 값
        배열의 각 요소에 대해 실행한 함수(callback)의 결과를 모은 새로운 배열.

ex) 배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기
    다음 코드는 숫자의 배열을 받아 각 숫자들의 제곱근이 들어있는 새로운 배열을 만듭니다.

    var numbers = [1, 4, 9];
    var roots = numbers.map(Math.sqrt);
    // roots는 [1, 2, 3]
    // numbers는 그대로 [1, 4, 9]

ex) map을 활용해 배열 속 객체를 재구성하기
    다음 코드는 오브젝트의 배열을 받아 각 오브젝트를 다른 형태으로 재구성해 새로운 배열을 만듭니다.

    var kvArray = [{key:1, value:10},
                   {key:2, value:20},
                   {key:3, value: 30}];

    var reformattedArray = kvArray.map(function(obj){
       var rObj = {};
       rObj[obj.key] = obj.value;
       return rObj;
    });
    // reformattedArray는 [{1:10}, {2:20}, {3:30}]

    // kvArray는 그대로
    // [{key:1, value:10},
    //  {key:2, value:20},
    //  {key:3,...