프론트엔드로 전환 후 , 빠른 2주를 달리며 개념을 복습할 시간이 부족했는데 오늘은 다행히 개념을 복습할 수 있는 시간이 주어져서 array.map 즉 maping 에 대해서 좀 더 공부하는 시간을 가져보기로 했습니다.
Map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행합니다. 다만, callback에서 return 되는 값을 배열로 만들어냅니다.
기본적인 map 사용법은 아래와 같습니다.
const arr = [0, 1, 2, 3 ];
let squaredArr = arr.map(function(element){
return element * element;
})
// or arrow function 을 활용할수도 있다
squaredArr = arr.map(element => element * element);
console.log(squaredArr); // [0 , 1, 4, 9 ]위는 간단한 map의 사용법이였습니다, 다음은 실용적인 예를 활용해 보겠습니다.
<body onload = "render()">
<table>
<thread>
<th>이름</th>
<th>전화번호</th>
</thread>
<tbody id = "test">
</tbody>
</table>
<script>
const userList = reqUserList(); //함수 선언 전 변수 선언은 호이스팅에 의해 허락됨
function reqUserList(){
//ajax를 통해 데이터를 불러왔다고 가정
return[
{name: "호균이" , phone: " 010 -4011-4040"}.
{name: "라프렐" , phone: " 010- 4929 -1020"},
];
}
function makeListToDom(list){
const dom = list.map(elem => `<tr><td>${elem.name}</td><td>${elem.phone}</d></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에 삽입합니다. 서버로부터 배열 형태의 데이터를 요청하고, 화면에 그려야 하는 경우에 효과적으로 사용할 수 있습니다.
callback 함수 인자
const arr = [0 ,1 ,2 ,3];
let squaredArr = arr.map(function(element, index, array){
console.log(`${array}의 ${index}번째 인자: ${element}`);
return element * elemnet;
});
//
0,1,2,3의 0번째 인자 : 0
0,1,2,3의 1번째 인자 : 1
0,1,2,3의 2번째 인자 : 2
0,1,2,3의 3번째 인자 : 3
console.log(squaredArr); // [ 0, 1, 4, 9 ]- map의 callback 함수에는 forEach와 마찬가지로 index와 전체 배열을 인자로 사용 할 수 있습니다.
유의할 점
for문은 continue나 break로 반복을 제어할 수 있지만 map은 forEach와 마찬가지로 throw(예외)를 발생시키지 않으면 중간에 반족을 종료할 수 없습니다.
map활용에 대한 이해를 돋기 위한 여러가지 예제들
객체로 된 배열을 새로운 구성을 한 객체로 변환 시켜주는 예제이다
let kvArray = [{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}]
let reformattedArray = kvArray.map(obj => {
let rObj = {}
rObj[obj.key] = obj.value
return rObj
})
// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}],
// kvArray is still:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]
만들고 싶은게 많은 개발자