배열에 저장된 값을 불러와 함수를 이용해 값을 반환하는 제이쿼리 메소드 map()에 대하여 알아보고 each() 메소드와의 차이점은 무엇인지 알아보도록 하자!!

먼저 아래는 map() 메소드의 간단한 사용방법이다.

$.map(배열이름, 수행할 함수)

보는 것처럼 매우 간단하다. 그럼 위의 메소드를 좀 더 쉽게 익힐 수 있도록 예제와 함께 알아보도록 하자.


# map() 메소드 예제보기

testArray = [1, 2, 3, 4]; // 배열 변수 선언
divEle = $('div');
$.map(testArray, function(item, index) {
   divEle[0].innerHTML += 'Array' + index + ' => ' + item;
})

위 예제는 배열 순서대로 나타내고 몇번째 index인지도 함께 보여준다. 이를 실행하면 결과는 다음과 같다.

// 실행 결과
Array0 => 1
Array1 => 2
Array2 => 3
Array3 => 4


! each() 차이점은?
사실 대부분의 경우 두 메소드 모두 거의 동일한 기능을 가지고 있어 똑같은 함수를 만들 수도 있다. 하지만, each()는 반복문을 수행하기 위해 고안되었고 map()은 새로운 배열값을 생성하기 위해 고안되었다는 점이 다르다!

또한 each() 메소드는 중간에 빠져나올 수 있는 return false가 사용이 가능하다.