[JavaScript] map 반복문
- 웹/자바스크립트
- 2021. 7. 16.
JAVASCRIPT / MAP
map 이란 ?
반복문을 돌며 배열 안의 요소들을 새로운 배열로 리턴한다. (매핑한다.)
어떻게 매핑할 지 정의한 함수를 전달하면 된다.
forEach와 다른점은 새로운 Array를 반환한다.
예제1
const numbers = [45, 1, 9, 100, 55, 22, -37];const map_result = numbers.map(myMapFunction); // 변수 선언하면서 map(func) 호출
// 함수 정의
function myMapFunction(value, index, array) {
return value + 10;
// 현재 value + 10 을 리턴한다
// ex > [1, 2, 3] 인 배열을 전달받았다면 [11, 12, 13]인
// 새로운 배열을 생성해서 리턴
}
console.log(map_result); // [55, 11, 19, 110, 65, 32, -27]위의 형태를 아래처럼 간략하게 줄일 수 있다.
map_test = numbers.map((value) => {return value + 10});
console.log(map_test);예제2
map을 이용해 전달받은 배열을 HTML 태그 형태로 변환후
forEach를 이용해 HTML 태그내의 값 변경
const map_result3 = numbers.map(function (value, index) {
return "<li>[ " + index + "] " + value + "</li>\n";
});
console.log(map_result3);
// ["<li>[ 0] 45</li>\n", "<li>[ 1] 1</li>\n", ...]위의 코드를 아래의 코드 처럼 간략하게 줄일 수 있다.
const map_result3 = numbers.map((value, index) => {return "<li>[ " + index + "] " + value + "</li>\n"});문자열을 표현하는 방법도 두 가지가 있다.
// 1
return "<li>[ " + index + "] " + value + "</li>\n";
// 2
return `<li>[${index}]${value}<li>\n`;
태그내에 작성될 부분
<body>
<ul id ="out"></ul>
</body>map_result3.forEach((value) => {
document.getElementById("out").innerHTML += value;
})forEach를 사용해 map_result에 저장된 문자열을 HTML 태그처럼 사용
브라우저에서 잘 적용된 것을 볼 수 있다.
'웹 > 자바스크립트' 카테고리의 다른 글
| [JavaScript] filter 원하는 조건에 맞는 배열 생성 (0) | 2021.07.16 |
|---|---|
| [JavaScript] forEach 함수 (0) | 2021.07.16 |
| [JavaScript] BOM(Browser Object Model) 브라우저 객체 모델 (0) | 2021.07.15 |
| [JavaScript] 자바스크립트 배열 (Array )과 배열을 다루는 메소드 (0) | 2021.07.13 |
| [JavaScript] 자바스크립트 숫자 타입 메소드 (0) | 2021.07.13 |