[JS] map es5

map은 콜백함수로 새 배열을 만들 때 사용

 

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

callback : 새로운 배열 요소를 생성 

인수
currentValue : 처리할 현재 요소

옵션
index : 처리할 현재 요소의 인덱스
array : map()을 호출한 배열


thisArg : callback을 실행할 때 this로 사용되는 값

 

문법은
arary.map(현재값, 인덱스, 배열, 디스배열?)

기능은
filter, forEach와 같다

 

예시는

<button type="button" id="click" onclick="render()">데이터 얻기</button>
<table id="tbl">
    <thead>
        <th>이름</th>
        <th>전화번호</th>
    </thead>
    <tbody></tbody>
</table>

// ajax를 통해 가져온 데이터라고 가정
var data = [
    {
        name: 'a',
        phone: '010-1000-2000'
    },
    {
        name: 'b',
        phone: '010-3000-4000'
    },
    {
        name: 'c',
        phone: '010-5000-6000'
    }
];

// Array.map 메서드를 사용하여 배열 요소의 데이터를 html로 변경
function makeDom() {
    var dom = data.map(function (item, index) {
        return '<tr><td>' + item.name + '</td><td>' + item.phone + '</td></tr>';
    });
    return dom;
}

// 배열을 하나의 값으로 만든 후 테이블에 html 추가
function addTbl(dom) {
    var tblList = dom.join('');
    document.getElementById('tbl').getElementsByTagName('tbody')[0].innerHTML = tblList;
}

// 위 로직을 실행
function render() {
    var list = makeDom();
    addTbl(list);
}

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map