🐨CoalaCoding
DocsExamplesTry itBoardB반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • 01_start
  • 02_class
  • 03_ai이미지-생성기-구현
  • 04_자료형
  • 05_async--await
  • 06_변수와자료형
  • 07_xmlhttprequest-부터axios-까지
  • 08_1-자바스크립트와-ecma
  • 09_reduce
  • 10_캘린더-만들기
  • 11_generator
  • 12_destructuring
  • 13_spread-operator
  • 14_module-export-import
  • 15_http-통신-이란
  • 16_시작
  • 17_2-자바스크립트-코드-실행-과정-및-용어정리
  • 18_map
  • 19_동기와-비동기
  • 20_연산자
  • 21_promise-thencatch
  • 22_3-실행컨텍스트와-스코프
  • 23_콜백-함수
  • 24_제어문
  • 25_4-클로저
  • 26_windowlocation
  • 27_함수
  • 28_5-객체
  • 29_이벤트
  1. 홈
  2. 문서
  3. JavaScript
  4. JavaScript 기초
  5. 18_map

18_map

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1. map 함수

JavaScript에서 'map' 함수는 배열의 각 요소를 순회하면서, 각 요소에 대해 콜백 함수를 호출하고 그 반환값들을 모아서 새로운 배열을 만드는 함수입니다. 'map' 함수를 이용하면 코드의 중복을 줄이고 가독성을 높일 수 있습니다.

사용법

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

참고자료

  • MDN Web Docs: Array.prototype.map()

map 메소드: 배열이 갖고있는 합수. 콜백함수에서 리턴된 값을 기반으로 새 배열 생성함

    
  
      /*기존의 배열요소를 기반으로 새로운 배열요소를 만들어 리턴*/
      let cats=['땅콩','얼룩','회색'];
      cats=cats.map(function(value,index){
        return value+"밥먹자!!"
      })
		console.log(cats)


/**
 * 모든수를 제곱하라
 */
// 배열선언
let numbers = [273, 52, 103, 32, 57];

// 배열의 모든 값을 제곱하여 numbers에 할당
numbers = numbers.map(function (value, index, array) {
	return value * value;
});

// numbers의 요소를 console.log 에 순회한다
numbers.forEach(console.log);

목차

  • 구문