Javascript

자바스크립트 map메서드

2023. 3. 15. 12:37
목차
  1. map()
  2. map() 메서드 기본구문
  3. map() 메서드 콜백함수
  4. 예시1
  5. 예시2
  6. 요약

map()

let arr = [2,3,4,5,6,7] // arr배열 선언
let newArr= arr.map((a)=> a * 3)  //배열arr에 map 메소드를 이용하여 객체마다 *3을 한 값을 newArr 변수로 선언후 출력
console.log(newArr) //[ 6, 9, 12, 15, 18, 21 ]

Array.map()

- map메서드는 배열 메서드이다. 반복문을 돌며 배열안의 요소들을 1대1로 짝을 만든다(mapping).

어떤 방식으로 짝지어 줄 것인가 정의한 함수를 메서드의 인자로 넣어준다

map으로 만든 배열은 새로운 배열을 짠다.

map() 메서드 기본구문

Array.map(function(element, index, array){  }, this);

콜백함수 function()은 각 배열요소에 대해 호출된다.

배열.map((요소,인덱스,배열) => (return 요소));

map() 메서드 콜백함수

Array.map((element)=> element + 실행하고 싶은 연산자와 값)

예시1

- 여기서 a는 배열안에 들어가있는 요소 하나하나를 가리키는 element이므로 a가 들어가도 되고 z가 들어가도 된다.

let arr = [2,3,4,5,6,7] // arr배열 선언
let newArr= arr.map((a)=> a * 3)  //배열arr에 map 메소드를 이용하여 객체마다 *3을 한 값을 newArr 변수로 선언후 출력
console.log(newArr) //[ 6, 9, 12, 15, 18, 21 ]

예시2

- 'string' 이라는 문자를 str이라는 변수로 선언하고 split메소드를 이용해 문자를 배열로만든다.

let str = 'string' //str변수로 선언
let strarr = str.split('')  //[ 's', 't', 'r', 'i', 'n', 'g' ]
let newArr= strarr.map((a)=> a + 'z')  //배열안에 있는 요소 하나하나 z문자를 추가한다.
console.log(newArr) //[ 'sz', 'tz', 'rz', 'iz', 'nz', 'gz' ]

요약

  • map메소드는 배열에서 사용할 수 있는 메소드이다.
  • for문으로 작성할 수 있는 식은 map메소드로도 작성 할 수있다.
  • 기존의 배열의 값을 변경하는 것이 아니라 새로운 배열을 선언하고 새로운 배열에 map의 값이 들어간다.

'Javascript' 카테고리의 다른 글

자바스크립트 전개연산자  (0) 2023.03.16
자바스크립트 split메서드  (0) 2023.03.15
자바스크립트 퀴즈 어플  (0) 2023.03.12
배열  (0) 2023.03.08
변수 const, let ,var  (0) 2023.03.08
  1. map()
  2. map() 메서드 기본구문
  3. map() 메서드 콜백함수
  4. 예시1
  5. 예시2
  6. 요약
'Javascript' 카테고리의 다른 글
  • 자바스크립트 전개연산자
  • 자바스크립트 split메서드
  • 자바스크립트 퀴즈 어플
  • 배열
index.ys
index.ys
머리속에 떠도는 코드조각들을 맞추는 공간입니다.
index.ys
코린이 개발일지
index.ys
전체
오늘
어제

공지사항

블로그 메뉴

  • 홈
  • 방명록
  • Github
  • Notion
  • Figma
  • 타닥타닥 (235)
    • 개발일지 (124)
    • html , css (0)
    • Javascript (30)
    • Node.js (8)
    • React (2)
    • 네트워크 (1)
    • DB, SQL (5)
    • AWS (11)
    • CS (21)
    • 면접 (13)
    • 사진 (4)
    • 북로그 (3)
    • 머릿속 (5)

인기 글

최근 글

최근 댓글

hELLO · Designed By 정상우.
index.ys
자바스크립트 map메서드
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.