[JavaScript] The .map() Method

안녕하세요. 동기 여러분! 오늘은 .map() 메서드를 가지고 왔습니다. 그럼 보시죠!

 

The . map() Method

.map() 메서드는 지난 시간에 알아본 .forEach() 메서드랑 비슷하지만 하나의 기능을 더 가진 녀석입니다. 배열(Array)의 각 개체를 가져와서 실행 시켜주면 .forEach() 메서드이고 그 후에 새로운 배열을 만들어 준다면 .map() 메서드입니다. 

 

---

 

생김새

// JavaScript

const nums = [1, 2, 3, 4, 5]            // 배열(Array)

const tripledNums = nums.map(num => {   // .map() 메서드
	return num * 3;                     
});

console.log(tripledNums)                 // tripledNums를 출력하면
// 출력 : [3, 6, 9, 12, 15]              // 새로운 배열이 생성됨

 

---

 

예제

캐나다의 지폐는 5달러, 10달러, 20달러, 50달러, 100달러 이렇게 5가지의 종류가 있습니다. 2021년 10월 11일 기준으로 우리나라의 돈으로 환산을 한다면 얼마일지 .map() 메서드를 이용하여 만들어 보겠습니다.

 

1. cAD라는 배열(Array)에 5, 10, 20, 50, 100을 넣어줍니다.
2. cADToWon이라는 새로운 배열을 만들고, .map() 메서드를 사용하여 함수 dollars에 현재 환율 959.68원을 곱하여 리턴 값을 설정해줍니다. (저기서 dollars가 cAD의 각 개체가 될 것입니다.)
3. cADToWon을 출력하면 [ 4798.4, 9596.8, 19193.6, 47984, 95968 ]이 나옵니다.
4. 프로그래머로서 이렇게 끝내면 안 되겠죠? 환산한 값을 가시적으로 볼 수 있게 출력문을 적어봅니다.
5. for 반복문에 i = 0; (인덱스 번호 0번부터 뽑아낼 것이기 때문에) i < cADToWon.length; ( i가 4까지만 실행하면 되니까, 현재 배열에는 5개의 객체가 있습니다) i ++ (i는 1씩 더할 것입니다.)
6. 마무리로 출력문

---

오늘의 느낌

이제 점점 코드가 어려워지고 있습니다. 블로그 포스팅의 여러 가지 장점 중에 하나가 코드를 적다가 보면 막히는 경우가 생기는데 구글 검색 필요 없이 내가 만든 포스팅을 읽어보면 더욱 빠르게 기억이 나서 아주 편리한 거 같습니다. 허허허