자바스크립트 map 배열 sapui5 함수 기초

자바스크립트 map 배열 함수는 반복시 자주 쓰이는 함수 메소드입니다.

map 함수는 콜백 function 에서 실행된 결과를 바탕으로 다시 새로운 맵을 생성할 때 사용하는 함수입니다. 즉, 콜백 함수로 정의된 리턴값은 새로운 배열 객체를 리턴하게 됩니다.

파라메터 인자는 다음과 같습니다.

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

callback : 콜백 함수
currentValue : 배열에서 현재 처리되는 값
index : 배열에서 현재 처리되는 인덱스 값
array : 실제 map을 호출한 배열
thisArg : 콜백함수 내부에서 사용될 수 있는 this로 사용되는 값

자바스크립트 MAP 사용하기

일반 for문으로 반복을 하게 되면 다음과 같이 적용하게 됩니다.

    <script>
      const array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      const result = [];
 
      for( let i = 0; i < array1.length - 1; i ++){
        result.push( array1[i] * 2 );
      }
      console.log( result );
    </script>

당연히 같은 로직으로 기존 for문을 통해서도 만들 수 있지만, map을 활용하게 되면 기존에 여러줄로 작성되었던 반복문은 더 짧은 코드로 작성할 수 있어 가독성이 좋아지는 장점이 있습니다.

map으로 작성한 코드는 다음과 같으며, 배열 array에서 요소의 값을 2를 곱해 새로운 배열 mulArray를 만들게 됩니다.

<script>
      const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 
      const mulArray = array.map((number) => number * 2);
      console.log(mulArray); // [2, 4, 6, 8, 10, 12, 14, 16, 18]
    </script>

자바스크립트 map을 활용하여 섭씨 온도를 화시 온도로 변경하는 코드입니다.

<script>
      //섭씨 온도를 화씨 온도로 변경하기
      let celsi = [-15, -5, 0, 10, 16, 20, 24, 32];
      let fahren = celsi.map( ( value ) =>{
        return value = value * 1.8 + 32;
      })
      console.log( fahren );
    </script>

다음과 같이 string을 결합할 수 있습니다.

<script>
      let people = [
        { id: 20, name: "영수", age: 30, type: "editor" },
        { id: 25, name: "철수", age: 20, type: "programmer" },
        { id: 29, name: "영희", age: 35, type: "designer" },
      ];
 
      people.map( ( elem ) => {
        console.log( elem.age + " " + elem.id + " " + elem.name );
      })
 </script>

기본적으로 요소, 인덱스를 사용하는 예제입니다.

<script>
      const arrList = [150, 210, 310, 420, 510];
 
      //일반 함수 형태
      arrList.map(function (curr, idx) {
        console.log(idx + "번째", curr);
      });
 
      //화살표 함수 형태
      arrList.map((curr, idx) => {
        console.log(idx + "번째", curr);
      });
</script>

아래는 배열값을 받아 객체 형태로 변환하여 리턴하는 예제입니다. map을 활용하므로 역시난 원본 배열은 변경하지 않고 새로운 형태의 배열(객체를 담은)을 반환하게 됩니다.

아래는 기존 배열의 값은 그대로 두고 거꾸로 역배열 순서로 변경하는 코드입니다. 역순으로 배열의 요소를 바꾸는데 활용이 가능합니다.

<script>
      myArray = [1, 2, 3, 4, 5, 6, 7];
 
      const resultArr = myArray
        .map((item) => {
          return item;
        })
        .reverse();
      console.log(resultArr);
</script>

이상으로 배열의 map 메소드에 대해 알아보았습니다. 상세한 내용은 모질라 문서를 참고 해보시기 바랍니다.

그 외에 자바스크립트 foreach 및 filter 에 대한 각각의 문서도 참고하시기 바랍니다.