map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행합니다. 다만, callback에서 return 되는 값을 배열로 만들어냅니다.
1. [].map(callback, thisArg)
기본적인 map의 사용법은 아래와 같습니다.
const arr = [0,1,2,3];
let squaredArr = arr.map(function(element){
return element * element;
});
// 혹은 arrow 함수 가능
squaredArr = arr.map(element => element * element);
console.log(squaredArr); // [ 0, 1, 4, 9 ]위 코드를 보면 배열 속 숫자들이 제곱되어 새로운 배열이 생성되는 모습을 볼 수 있습니다.
2. 약간의 실용적인 예
map은 다음과 같은 쓰임이 가능합니다.
<body onload="render()">
<table>
<thead>
<th>이름</th>
<th>전화번호</th>
</thead>
<tbody id="test">
</tbody>
</table>
<script>
const userList = reqUserList(); // 함수 선언 전 변수 선언은 호이스팅에 의해 허락됨
function reqUserList(){
// ajax를 통해 데이터를 불러왔다고 가정
return [
{ name: "윾또막", phone: "010-1111-1111" },
{ name: "장꾸", phone: "010-2222-2222" },
];
}
function makeListToDom(list){
const dom = list.map(elem => `<tr><td>${elem.name}</td><td>${elem.phone}</td></tr>`);
return dom;
}
function renderList(dom){
const d = dom.join('');
document.getElementById("test").innerHTML = d;
}
function render(){
const userListDom = makeListToDom(userList);
renderList(userListDom);
}
</script>
</body>위 코드는 유저 목록 api를 요청한다고 가정하여, 받아온 데이터를 table에 그리는 작업을 합니다.
map 함수를 사용하여 html 형태의 배열을 생성하고, 이를 innerHTML을 사용하여 tbody에 삽입합니다.
서버로부터 배열 형태의 데이터를 요청하고, 화면에 그려야 하는 경우에 효과적으로 사용할 수 있습니다.
출처 : https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Array-map
'Front-end > Javacript' 카테고리의 다른 글
| Javascript | Fetch vs Axios 차이점 비교 (0) | 2021.09.08 |
|---|---|
| JavaScript 이벤트 처리 속성 정리 (0) | 2021.09.03 |
| Arrow Functions (0) | 2021.07.18 |
| Return (0) | 2021.07.14 |
| Parameters and Arguments (0) | 2021.07.12 |
