[리액트] 자바스크립트 배열의 map함수

오랜만에 글을 남겨 보내요. 한동안 일이 많아서 신경을 쓰지 못했습니다. 가끔은 이 블로그를 누가 보려나 싶긴한데 그래도 오늘 부터 다시 틈나는대로 공부해보려고 합니다. 

 

오늘의 주제인 배열의 map 함수는 ES5 버전에서 부터 지원을 합니다. 이전에는 아마 for문을 이용해서 배열을 다뤘을 겁니다.

 

var arr = [1,2,3,4,5]

 

for(var i = 0; i < arr.length; i++){

        console.log("arr["+i+"] : " + arr[i])

}

 

이와 같이 입력하는게 가장 알아 보기 쉽죠! 하지만 ES5에서 부터 map함수를 지원하니 map함수를 공부해 봅시다.

 

arr.map(callback, [thisArg]) 

 

위와 같은 형태로 작성을 합니다. 각각의 설명은

 

callback > currentValue : 현재 처리하고 있는 요소의 요소

              > index : 현재 처리하고 있는 인덱스 값

              > array : 현재 처리하고 있는 원본 배열

 

말로 만 설명하면 어려우니 for문을 이용한 함수를 새롭게 만들어 봅시다.

 

var arr = [1,2,3,4,5]

 

arr.map(function(currentValue, index, array){

     console.log(currentValue);

     console.log(index);

     console.log(array);

     console.log(this);

},this)

 

 

 

이처럼 작성하면 결과는

왼쪽 처럼 나옵니다. 하나하나 보면 첫번째 결과는 현재의 원소값을 나타내고 있구요

두번째 줄은 인덱스 값 그리고 마지막은 전체 배열을 보여주고 있습니다. 이전에 for문을 사용하는 

것보다 훨씬 간단하죠?

그리고 마지막으로 thisArg는 선택사항 인데요 callback 함수 내에서 사용할 this 레퍼런스 입니다.

그냥 맨땅에 사용하면 윈도우 객체가 나타납니다. 개발을 하면서 소스내에서 이벤트에 사용하면 해당이벤트가 일어나는 요소를 가져올수 있겠죠???

 

 

여기서 멈추지 말고 ES6 문법에서 제공하는 화살표 함수를 이용하여 소스를 더욱 간단하게 만들어 봅시다.  함수는 더욱 간단해 집니다. 

var arr = [1,2,3,4,5]

 

arr.map((currentValue,index,array) => {

     console.log(currentValue);

     console.log(index);

     console.log(array);

     console.log(this);

},this)

 

 

함수는 더욱 간결해 졌고 이번에도 결과는 동일 합니다. for문에 익숙한 그대들이여 map함수에도 익숙해집시다!

끝!