어서와, 개발은 처음이지?

자바스크립트 Array map 본문

Javascript

자바스크립트 Array map

오지고지리고알파고포켓몬고 2019. 3. 25. 22:08
반응형


이번 글에서는 자바스크립트 Array(배열) 객체의 메서드인 map에 대해 작성하겠습니다.


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에 삽입합니다.


서버로부터 배열 형태의 데이터를 요청하고, 화면에 그려야 하는 경우에 효과적으로 사용할 수 있습니다.



3. callback 함수 인자


map의 callback 함수에는 forEach와 마찬가지로 index와 전체 배열을 인자로 사용할 수 있습니다.

const arr = [0,1,2,3];

let squaredArr = arr.map(function(element, index, array){
    console.log(`${array}의 ${index}번째 인자 : ${element}`);
    return element * element;
});
/*
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 ]




4. 약간의 실용적인 예


아래는 2번의 코드에 index를 사용하여 테이블을 지울 수 있도록 수정한 예 입니다.

<body onload="render()">
    <table>
        <thead>
            <th>이름</th>
            <th>전화번호</th>
            <th>관리</th>
        </thead>
        <tbody id="test">

        </tbody>
    </table>
    <script>
        const userList = reqUserList(); // 함수 선언 전 변수 선언은 호이스팅에 의해 허락됨 

        function reqUserList(){
            return [
                { name: "윾또막", phone: "010-1111-1111" },
                { name: "장꾸", phone: "010-2222-2222" },
            ];
        }

        function deleteUser(index){
            userList.splice(index, 1);

            render();
        }

        function makeListToDom(list){
            const dom = list.map((elem, index, array) => `<tr>
                <td>${elem.name}</td>
                <td>${elem.phone}</td>
                <td><button onclick='deleteUser(${index})'>삭제</button></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>

makeListToDom 함수에서 deleteUser라는 함수에 index를 넘겨주어 userList의 특정 배열을 삭제하도록 구현하였습니다.


react 같은 프레임워크에서는 종종 위와 같은 형태로 컴포넌트에 이벤트를 넣기도 합니다.



5. thisArg


1번의 제목에서 잠깐 언급됐지만, map 함수에는 callback 함수 뿐만 아니라 thisArg라는 객체(Object) 인자도 사용할 수 있습니다.


현 상황에서 실용성이 미비하고 이전 forEach에서 설명한 내용이기 때문에 이 링크를 참조하도록 하겠습니다.



6. 유의할 점


for문은 continue나 break로 반복을 제어할 수 있지만 map은 forEach와 마찬가지로 throw(예외)를 발생시키지 않으면 중간에 반복을 종료할 수 없습니다.

 

이상으로 map에 대한 글을 마치겠습니다.




'Javascript' 카테고리의 다른 글

자바스크립트 콜백의 문제점과 프로미스 쓰는 이유  (1) 2020.06.24
자바스크립트 Prototype(프로토타입)  (0) 2020.02.27
자바스크립트 Array forEach  (4) 2019.03.24
자바스크립트 {...} [...] 문법 (비구조화 할당/구조분해 할당)  (7) 2018.10.13
자바스크립트 클로저(Closure)  (6) 2018.09.23
'Javascript' Related Articles more
Comments