[jQuery] map()을 활용한 반복 처리 방법

---

"map()"이란?

이번 포스팅에서는 "map()"에 대한 기본적인 부분을 알아보고자 합니다.

"map()"은 HTML요소나 배열 객체 등에 대해서 반복 처리를 실행하고 새로운 배열 요소를 

반환한다는것이 특징입니다.

"map()"의 사용법은 2가지며, 헷갈리지 않도록 주의하면서 사용해야 합니다.

첫째, "HTML요소등 jQuery객체를 대상으로 한다" 라는 의미의 용법.

둘째, "배열과 객체에 대한 실행" 이라는 의미의 용법.

각각의 용도에 따라서 구분할 필요가 있으므로, 그 기본과 응용에 대해서 제대로 알아보겠습니다.

HTML요소에서 ". map()"의 사용법

HTML요소를 대상으로 한 ". map()"의 기본적인 사용법에 대해서 살펴보겠습니다.

기본적인 구문과 구현하는 방법

우선은 가장 기본이 되는 구문을 살펴보겠습니다.

". map()"은 주로 HTML요소를 대상으로 반복 처리를 할 수 있습니다.

jQuery객체(HTML요소).map(function(index, element) {
 
    return 처리
 
})

". map()"에서 실행하고자 하는 프로세스를 설정할 수 있습니다.

매개변수로 "index(인덱스 번호)", "element(HTML요소)"를 받아서 처리하기 때문에

여러 요소에 대해서 반복 처리 실행이 가능한 것입니다.

또한, "return"을 사용하여 처리한 결과를 반환받을 수 있으며, 그 결과값은 최종적으로 배열인

형태로 추출되는것이 특징입니다.

HTML요소 반복 처리하는 방법

그럼 실제 프로그래밍 방법에 대해서 살펴보겠습니다.

우선은 다음과 같은 HTML요소가 있다고 가정하겠습니다.

<p>샘플 샘플1</p>
<p>샘플 샘플 2</p>
<p>샘플 샘플3</p>

위 p 요소에 대해서 ". map()"의 반복 처리를 이용하여  각 텍스트만 추출해 보겠습니다.

다음 샘플 예제를 보겠습니다.

var result = $('p').map(function(index, element) {
 
    return element.innerHTML;
 
});
 
console.log(result);
console.log(result[0]);

실행 결과

["샘플 샘플 1", "샘플 샘플 2", "샘플 샘플 3"]
 
샘플 샘플1

위 예제에서는 p요소에 대해서 ". map()"을 이용하여 반복 처리를 실행하고 있습니다.

함수 내 처리에서는"return"를 사용, 매개변수의 element로 "innerHTML"속성를 호출하여

텍스트 문자를 반환하고 있습니다.

이처럼 "return"에 할당된 값은 최종적으로 배열로 반환 받을수 있다는 것을 실행 

결과에서 알 수 있습니다.

배열 객체에서의 "map()"의 사용법

배열과 객체에 대해서 이용할 수 있는 "$. map()"의 사용법에 대해서 살펴보겠습니다.

기본적인 구문과 구현하는 방법

우선은 가장 기본이 되는 구문을 살펴보겠습니다.

기본적인 기능은 위에서 작성한 용법 "HTML요소등 jQuery객체를 대상으로 한다" 와 같지만 

"배열·객체를 다룬다"라는 의미에서 "$. map()"은 다릅니다.

다음 구문 예제를 통해 자세히 알아보겠습니다.

$.map(배열 객체, function(value, index) {
 
    return 처리
 
})

대상 배열이나 객체를 첫번째 매개변수로 지정한다는 것을 명심하세요.

게다가 함수의 매개변수에는 "value(값)", "index(인덱스 번호)"를 할당할 수 있으나 

index가 두번째 매개변수라는 것에 주의해야 합니다. 

(첫번째 용법 ". map()"에서는 첫번째 매개변수가 index였습니다)

"return"을 사용하는 것으로 처리한 결과를 반환 받을수 있으며, 최종적으로 배열형태로 변환하여 

결과값을 얻을수 있다는 것은 동일합니다.

배열 요소를 반복 처리하는 방법

실제로, 배열을 만들고 "$. map()"에 따른 반복 처리를 해보겠습니다.

다음과 같은 배열을 준비합니다.

var array = ['사과', '바나나', '딸기', '메론'];

이 배열에 대해서 각 요소에 임의의 문자열을 추가하고 새로운 배열을 생성합니다.

다음 샘플 예제를 보세요.

var result = $.map(array , function(value, index) {
  
  return value + '입니다';
  
});
 
console.log(result);

실행 결과

["사과입니다.", "바나나입니다.", "딸기입니다", "메론입니다."]
 

이 예제에서는 배열에 대해서 "$. map()"에 따른 반복 처리를 실행하고 있습니다.

함수 내 매개변수 "value"를 사용하여 "입니다"라고 하는 문자열을 추가하고 있는 프로세스 입니다.

이후 이를 return함으로써 실행 결과처럼 새로운 배열을 얻을 수 있는 것입니다.

객체를 반복 처리하는 방법

이번에는 오브젝트에 대해서 "$. map()"에 대한 예제를 다뤄보겠습니다.

다음과 같은 객체를 준비합니다.

var obj = {
  name: '대한',
  age: 30,
  area: 'Seoul'
};

"name/age/area"라는 3종류만의 데이터가 저장된 단순한 객체입니다.

이 객체에 대하여 각각 "값"을 추출해 보겠습니다.

var result = $.map(obj , function(value, index) {
  
  return value;
  
});
 
console.log(result);

실행 결과

["대한", 30, "Seoul"]

기본적인 사용법은 많이 다르지 않습니다. 

객체를 첫번째 매개변수에 지정하고 함수 내에 프로세스를 작성합니다.

함수 내에서는 단순히 "value"를 return하고 있을 뿐이며 객체의 "값"만 반환됩니다.

최종적으로 실행 결과처럼 값만 추출된 배열을 반환 받을 수 있습니다.

(객체의 경우 배열로 반환된다라는 점에 주의합니다)

"map()"의 활용

"map()"을 이용하여 응용하는 예제를 살펴보겠습니다.

"null"을 사용한 조건 분기의 방법과 "each()"의 분류에 대해서 살펴보겠습니다.

null을 사용하고 조건 분기하는 방법

먼저 "null"를 활용한 조건 분기 방법에 대해서 알아보겠습니다.

"null"이란? 값이 빈다라는 뜻을 가지고 있는데 map()에서 return에 이용하면 프로세스를 

통과했다라는 의미가 됩니다.

무슨 뜻인지 이해가 잘 안되시죠? 간단한 배열을 가지고 확인해보겠습니다.

다음 샘플 예제를 봐주세요.

var array = ['사과', '바나나', '딸기', '멜론'];
 
var result = $.map (array, function(value, index) {
  
  if(value == '딸기') {
    
    return null;
    
  } else {
    
    return value;
    
  }
  
});
 
console.log(result);

실행 결과

["사과", "바나나", "멜론"]

"$. map"함수 내의 작성한 내용을 잘 봐주세요.

IF문을 사용하고"value=='딸기'"다 라는 조건식을 적용 함으로써 내부에 "딸기"라는 값이 있으면

아래 처리를 실행하게 됩니다.

이때, 위에서 말했던 "프로세스 통과"라는 게"return null"입니다.

이렇게 기술함으로써 내부에 "딸기"라는 값이 들어오면 프로세스 처리를 통과한다는 의미입니다.

즉, 실행 결과처럼 "딸기"이외의 값을 빼내고 배열화된 것입니다.

"each()"와의 차이점에 대해서

"map()"의 유사 메소드인"each()"의 용도에 대해서 살펴보겠습니다.

가장 알기 쉬운 큰 차이는 새롭게 배열을 작성한다는 점입니다.

다음 샘플 예제를 봐주세요.

var  array = ['대한', '하나', '지훈', '은주'];
 
var result1 = $.map(array, function(value, index) {
  return value + '씨';
});
 
var result2 = $.each(array, function(index, value) {
  return value + '씨';
})
 
console.log(result1);
 
console.log(result2);

실행 결과

["대한씨", "하나씨", "지훈씨", "은주씨"]
 
["대한", "하나", "지훈", "은주" ]

이 예제에서는 같은 배열을 쓰고"map()", "each()" 각각의 반복 처리를 실행하고 있습니다.

처리 내용으로는, 각 배열의 값에 "씨"라고 하는 문자열을 추가하고 있을 뿐이지만 

실행 결과를 볼까요?

"map()"은 신규로 배열을 작성하므로 각각의 값에 "씨"라는 문자가 붙여서 생성됩니다.

하지만, "each()"의 경우는 원래의 배열 그대로인 모습을 볼수 있습니다.

즉, 신규로 배열을 만드는 것은 아니며, 원래의 배열을 사용한다는 것을 알수 있습니다.

jQuery map()을 활용한 반복 처리 방법 편을 마칩니다.

이 글이 도움이 되셨다면 공감과 댓글 부탁드립니다 :)