[ JavaScript ] map ( ) 함수

📌 map ( ) 함수

map ( ) 함수는 새로운 자료구조 혹은 객체를 정의할 때 사용하는 함수이다.

 

알아두기

객체보다는 주로 새로운 자료구조를 필요로 하는 경우에 많이 사용한다.

 

이해가 안됩니다.

예를 들어 성과 이름으로 나누어진 사용자 데이터가 주어졌을 때 성과 이름을 합친 사용자 데이터를 사용해야 하는 상황이 발생할 수 있다.

이때 map ( ) 을 사용할 수 있다.

이렇게 보면 map ( ) 은 주어진 값을 새로운 값으로 구성하는 함수라고도 할 수 있다.

const users = [
    { firstName: 'a', lastName: 'A' },
    { firstName: 'b', lastName: 'B' },
    { firstName: 'c', lastName: 'C' },
    { firstName: 'd', lastName: 'D' },
    { firstName: 'e', lastName: 'E' },
    { firstName: 'f', lastName: 'F' },
    { firstName: 'g', lastName: 'G' },
    ];
    
const result = users.map(user => `${user.firstName}_${user.lastName}`);

console.log(result);

//코드 출처.
//https://7942yongdae.tistory.com/159

실행결과

선언적인 프로그래밍 방식으로 해결한다면?

for 문 혹은 while 문을 사용해서 다음과 같은 방식으로 코드를 작성할 수 있다.

const users = [
    { firstName: 'a', lastName: 'A' },
    { firstName: 'b', lastName: 'B' },
    { firstName: 'c', lastName: 'C' },
    { firstName: 'd', lastName: 'D' },
    { firstName: 'e', lastName: 'E' },
    { firstName: 'f', lastName: 'F' },
    { firstName: 'g', lastName: 'G' },
    ];
    
const result = [];

//for문 사용하기.
for ( let i = 0; i < users.length; i++ ) {
	const user = users[i];
    result.push(`${user.firstName}_${user.lastName}`);
    }

console.log(result);

//코드 출처.
//https://7942yongdae.tistory.com/159

실행결과

자바스크립트 배열 객체가 가지고 있는 map ( ) 함수를 적용하면 예제 코드처럼 쉽게 코드 라인 수를 줄일 수 있고, 가독성이 좋은 코드를 만들 수 있다.

---

📌 map( ) 함수 구현하기

map ( ) 함수는 값과 인덱스를 인자로 받아 자동으로 for 문을 돌려서 값을 빼도록 해준다.

 

∎ 코드 예제)

const users = [
    { firstName: 'a', lastName: 'A' },
    { firstName: 'b', lastName: 'B' },
    { firstName: 'c', lastName: 'C' },
    { firstName: 'd', lastName: 'D' },
    { firstName: 'e', lastName: 'E' },
    { firstName: 'f', lastName: 'F' },
    { firstName: 'g', lastName: 'G' },
    ];

//일반 함수 형태.
users.map(function(item,index){
	console.log(index + "번 값", item);
    });
    
//화살표 함수 형태.
users.map((item, index) => {
	console.log(index + "번 값",item);
    });
    
//원본 코드 출처.
//https://mjn5027.tistory.com/80

실행결과

index 인자는 배열 안의 인덱스 ( 몇 번째 ) 를 의미하며 item 에는 배열안의 값들이 하나씩 순서대로 담긴다.

---

🤍 if 문을 혼합해서 써보기

if 문을 써서 index 가 짝수인 값들만 객체 배열에서 뽑아내보자.

const users = [
    { firstName: 'a', lastName: 'A' },
    { firstName: 'b', lastName: 'B' },
    { firstName: 'c', lastName: 'C' },
    { firstName: 'd', lastName: 'D' },
    { firstName: 'e', lastName: 'E' },
    { firstName: 'f', lastName: 'F' },
    { firstName: 'g', lastName: 'G' },
    ];
    
users.map((item, index) => {
	if (index % 2 === 0) {
    	console.log(item);
        }
    });

//원본 코드 출처.
//https://mjn5027.tistory.com/80

실행결과

---

- map ( ) 함수 설명.

https://mjn5027.tistory.com/

[ JavaScript ] 자바스크립트 map( ) 함수

https://7942yongdae.tistory.com/

Javascript - 만들면서 배우는 map 함수의 정의와 사용 방법