배열 불러와 변경하여 호출, map(array, callback)

아래 예제는 jQuery의 map() 메소드 방법입니다. 자바스크립트 Array.map()과는 다르니 참고하세요!


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

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

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

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

! map() 메소드 예제보기

먼저 아래 코드를 봐주세요. testArray는 배열 값을 가지는데요 ~ 배열이 가진 값을 div 태그에 텍스트로 index값과 함께 추가하는 코드를 작성하려고 합니다.

쓸데없이 복잡해진 코드입니다... div 태그는 사실 불필요해보입니다. 어쨌든 배열을 모두 순회하면서 배열값을 가져오기 위해서 map()을 사용하였다고 알면 됩니다.

코드를 실행하면 div 태그에 아래와 같은 값을 추가하도록 할 것입니다. 즉 배열의 값과 몇 번째 index인지 함께 innerHTML로 추가하게 됩니다. 이를 실행하면 결과는 다음과 같다.

대략 위와 같은 모습을 가질 것입니다.

사실 대부분의 경우 두 메소드 모두 거의 동일한 기능을 가지고 있어 똑같은 함수를 만들 수도 있습니다. 하지만, each()는 반복문을 수행하기 위해 고안되었고 map()은 배열에 적용하며 실행할 경우 새로운 배열값을 생성하여 리턴하기 위해 만들어졌다는 점이 다릅니다.

추가로 each() 메소드는 중간에 빠져나올 수 있는 return false가 사용이 가능하다는 점도 차이점입니다.