블로그 메뉴

    Tonkatsu
    Developer Lee
    Tonkatsu
    전체 방문자
    오늘
    어제
    • 분류 전체보기 (52)
      • Frontend (7)
        • React (3)
        • JavaScript (3)
        • HTML\CSS (1)
        • etc (0)
      • Backend (0)
        • Python\Django (0)
        • etc (0)
      • CS (32)
        • Algorithm\Coding Test (19)
        • Computer Science (8)
        • devops (5)
        • etc (0)
      • Languages (5)
        • Javascript (5)
        • Python (0)
        • etc (0)
      • 비상다반 (3)
      • 학원 (4)

    인기 글

    태그

    • DFS
    • CS
    • Push
    • fetch
    • 코테
    • js
    • 자바스크립트
    • 리트코드
    • BFS
    • 네트워크
    • CSS
    • 프론트엔드
    • merge
    • 프로그래머스
    • 코딩테스트
    • 백준
    • leetcode
    • javascript
    • HTML
    • Git

    최근 댓글

    최근 글

    티스토리

    hELLO · Designed By 정상우.
    Tonkatsu

    Developer Lee

    Languages/Javascript

    Javascript-map

    2021. 11. 20. 23:52

    JS의 map 메서드는 배열 내의 모든 원소에 callback 함수를 실행하는 메서드입니다.

     

    reduce와 동일한 일을 한다고도 볼 수 있지만 return 값이 다릅니다. 

    reduce의 리턴은 하나의 값이지만, map의 리턴은 배열입니다.

     

    예를 들면 reduce는 한 배열의 모든 원소를 더해서 하나의 sum 을 구할 때 사용하고

    map 은 한 배열의 모든 원소 각각에 * 2 를 하여 새로운 배열을 구할 때 사용합니다.

     

    // sum reduce
    const sum = [0, 1, 2, 3].reduce(
      ( accumulator, currentValue ) => accumulator + currentValue,
      0
    );
    // return is 6
    
    // multiple map
    const map1 = [0, 1, 2, 3].map((x) => x * 2);
    // return is [0, 2, 4, 6]

     

    이 때 map 의 input 은 다음과 같습니다.

     

    • callback
      • currentValue
      • index (optional)
      • array (optional)
    • thisArg (optional)

     

    다음은 그 예시들 입니다.

     

    제곱근

     

    var numbers = [1, 4, 9];
    var roots = numbers.map(Math.sqrt);
    // roots는 [1, 2, 3]
    // numbers는 그대로 [1, 4, 9]

     

    두 배열의 각 원소 더하기

     

    const arr1 = [1, 2, 3, 4];
    const arr2 = [10, 11, 12, 13];
    
    const map1 = arr1.map(function (x, i) {
      return x + arr2[i];
    });
    // return is [11, 13, 15, 17]

     

    index를 사용하면 여러 배열을 계산할 수 있다.

     

    이처럼 map과 reduce를 잘 사용하면 for 문 대신하여 간결한 코드를 만들 수 있다.

     

    '모든 출처는 mdn으로부터 옴'

    저작자표시 (새창열림)

    'Languages > Javascript' 카테고리의 다른 글

    JS에서 string을 number로 바꾸는 방법들  (0) 2022.05.06
    Closure &Scope chain  (0) 2022.04.01
    Javascript-1d or 2d array 간단히 만들기  (0) 2021.12.03
    Javascript-reduce  (0) 2021.11.09
      'Languages/Javascript' 카테고리의 다른 글
      • JS에서 string을 number로 바꾸는 방법들
      • Closure &Scope chain
      • Javascript-1d or 2d array 간단히 만들기
      • Javascript-reduce
      Tonkatsu
      Tonkatsu
      한 번 뿐인 인생 편하게 살고싶지만 그러려면 열심히 살아야 되니까 열심히 살려고 노력은 하지만 편하게 사는 사람

      티스토리툴바