자바스크립트 map에 대해 알아보고 간단한 예시를 살펴보자

자바스크립트는 ES6+ 문법에 적용된 map에 대해 알아보겠습니다.

 

MDN에 적혀있는 map의 정의는 '배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.'입니다.

 

가장 기본적인 사용방법은 이렇습니다.

순서가 있는 자료구조에 map이라는 메서드를 사용할 수 있습니다.

 

여기서 순서가 없는 자료구조란 Set을 의미합니다.

Set은 순서를 보장하지 않는 배열로 중복을 허용하지 않는 배열입니다.

 

 

---

간단히 Set에 대해 예시를 살펴보고 넘어가겠습니다.

a라는 이름의 리스트를 선언해줬습니다. 하지만 5라는 값이 중복되네요.

b라는 이름으로 a를 Set형식으로 저장했고 출력했더니

중복된 값이 하나만 저장된 것을 확인할 수 있었습니다.

 

중복을 허용하지 않는 것이 Set의 특성이며 추가적으로 순서를 보장해주지 않습니다.

순서가 없기 때문에 인덱스 요소에 접글할 수 없습니다.

자세한 Set의 내용과 사용 방법에 관해선 다음 글에서 살펴보겠습니다.

---

map함수는 함수형프로그래밍에서 정말 유용하세 사용됩니다.

함수형 프로그래밍은 불변성의 유지로 부터 시작합니다. 하지만 let이나 var같은 변수가 새로 초기화될 수 있는 선언방식은 함수형 프로그래밍에 맞지 않죠.

 

99%의 리액트 코드들이 클래스형이 아닌 함수형으로 작성되는 것을 보면 let의 사용을 줄여야 올바른 리액트 개발을 할 수 있겠네요.

 

함수형 컴포넌트

클래스형 컴포넌트

 

map은 let의 사용을 줄여줍니다.

예를들어 [1,2,3,4,5]라는 배열을 ['홀수','짝수','홀수','짝수','홀수']로 저장하고 싶습니다.

이때 map을 사용하면 let을 사용하지 않고 배열을 만들 수 있습니다.

const a = [1,2,3,4,5]
const b = a.map(function(num) {
	if (num % 2) {
    	return '홀수'
    }
    return '짝수'
})

console.log(b) // ['홀수','짝수','홀수','짝수','홀수']

 

function의 사용을 지양합시다.

const a = [1,2,3,4,5]
const b = a.map((data) => {
	if (data%2) {
    	return '홀수'
    }
    return '짝수'
})

console.log(b) // ['홀수','짝수','홀수','짝수','홀수']

arrow function으로 변경했습니다.

 

 

 

위 예시를 응용하여 각 배열에 1을 더한 배열을 만들고 싶다고 가정합시다.

const a = [1,2,3,4,5]

const b = a.map((data) => {
	return data+1
})

console.log(b) // [2,3,4,5,6]

 

javascript에선 순서가 있는 배열을 가공하고 싶을 때 map을 사용해 간단히 구현할 수 있습니다.

 

함수형 프로그래밍을 함수형 프로그래밍답게 개발하기위해 map을 생활화하는건 어떠신가요?