🐨CoalaCoding
Docs▾
JavaScriptReactHTML & CSSBackendAI & LLMDev ToolsCreative
B반1
👾숏츠
🙉B반2
게시판
🐨CoalaCoding

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

문서

  • JavaScript
  • React
  • HTML & CSS
  • Backend
  • AI & LLM
  • Dev Tools
  • Creative

커뮤니티

  • 게시판
  • 예제 모음

기타

  • 관리자

정책

  • 소개
  • 개인정보처리방침
  • 이용약관
  • 연락처
© 2026 CoalaCoding. All rights reserved.
  • 1. 자바스크립트 기초
  • 2. class
  • 3. ai이미지-생성기-구현
  • 4. 자료형
  • 5. async--await
  • 6. 변수와자료형
  • 7. xmlhttprequest-부터axios-까지
  • 8. 1-자바스크립트와-ecma
  • 9. 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

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);
결과

목차

  • 1. map 함수