JavaScript 입문 : map( ) 함수 메소드

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

지난 시간 for 반복문을 요소와 인덱스 성질을 이용한 forEach(  ) 함수 메소드로 변경을 해 보았습니다. 아직 정확한 함수의 기능을 깊이 알수는 없으나 for 반복문보다는 forEach(  ) 함수 메소드가 강력(?)하지는 않다고 합니다만 편리성에서는 확실히 forEach(  ) 함수 메소드가 난것 같습니다. 

 

연이어서 같이 사용하는 함수 메소드 중 map(  ) 함수 메소드가 있는데 이 부분을 이해하고 가보고자 합니다. 

 

▒ map(  ) 함수 메소드 

 

map(  ) 함수 메소드는 forEach(  ) 함수 메소드와 비슷합니다. 반복문 역할을 하는 부분은 같으나 함수내 명령어를 통하여 요소(element)의 내용을 직접 바꿀 수 있습니다. 

 

기본형은 다음과 같습니다. 

 

map((element, index) => { 

   return 명령어 ;

});

 

배열을 가지고 예를 들어 보겠습니다. [1, 2, 3, 4]의 배열의 각 요소를 2씩 곱한 값을 새로운 배열로 만드는 방법을 for문을 사용해서 만들어 보면 다음과 같습니다.  

 

for문을 이용한 요소에 2를 곱한 결과값

 

상기 코드를 map(  )함수 메소드를 이용하여 변경하면 다음과 같습니다. 

 

코드를 설명하면 

array 배열의 요소에 2를 곱한 값을 별도의 빈 배열을 만들 필요없이 바로 결과값을 도출해 냅니다.

 

map(  ) 함수 메소드에 대해 좀 더 알아보면 연결되는 배열의 형태를 결과값으로 도출합니다. 예를 들어 Array = [1, 2, 3, 4]에 map(  )함수를 연결하면 length 가 4인 배열 형태로 기본형으로 결과값으로 나옵니다. 

여기에 함수안에 수식을 반영하면 결과값이 나옵니다. 이번에는 각 요소별 1씩 더하면 다음과 같이 사용할 수 있습니다.