jQuery $.map() 이용한 새 배열 Array 생성

jQuery의 $.map() 메서드는 배열과 객체를 변환하고 새로운 배열을 생성하는 강력한 도구입니다.

이 메서드는 jQuery 객체에서도 사용할 수 있고 약간의 추가 기능을 제공합니다.

---

jQuery의 $.map() 메서드로 배열과 객체 변환하기

기본 개념

$.map()은 원본 배열 또는 객체의 각 요소를 특정 로직에 따라 변환한 뒤, 그 결과를 새 배열로 반환합니다.

변환 과정에서 특정 요소를 제외하거나 값을 변경할 수 있으며, 결과 배열을 평탄화하는 기능도 제공합니다.

---

$.map() 메서드의 기본 문법

배열 변환

$.map(array, function(element, index) {
  // 반환 값이 새로운 배열에 포함됩니다.
});

객체 변환

$.map(object, function(value, key) {
  // 반환 값이 새로운 배열에 포함됩니다.
});

---

배열 변환 예제

숫자 배열의 값 두 배로 만들기

var numbers = [1, 2, 3, 4];

var doubled = $.map(numbers, function(num) {
  return num * 2;
});
console.log(doubled); // [2, 4, 6, 8]

특정 조건을 기반으로 변환

3보다 큰 숫자만 새로운 배열에 포함

var numbers = [1, 2, 3, 4, 5];

var filtered = $.map(numbers, function(num) {
  return num > 3 ? num : null; // null은 결과에서 제외
});
console.log(filtered); // [4, 5]

---

객체 변환 예제

객체의 키와 값을 변환

객체의 각 키-값 쌍을 배열로 변환

var websites = {
  구글: 'https://www.google.com',
  네이버: 'https://www.naver.com',
  다음: 'https://www.daum.net'
};

var result = $.map(websites, function(value, key) {
  return `${key} : ${value}`;
});
console.log(result);
// ["구글: https://www.google.com", "네이버: https://www.naver.com", "다음: https://www.daum.net"]

특정 조건의 키-값만 포함

네이버에 대한 정보만 반환

var websites = {
  구글: 'https://www.google.com',
  네이버: 'https://www.naver.com',
  다음: 'https://www.daum.net'
};

var filtered = $.map(websites, function(value, key) {
  if (key === '네이버') {
    return `${key} : ${value}`;
  }
});
console.log(filtered); 
// ["네이버 : https://www.naver.com"]

 

---

jQuery 객체에서의 활용

DOM 요소의 속성 값 배열 생성

HTML의 모든 <img> 요소에서 src 속성 값을 추출

var imgSources = $.map($('#contentsArea img'), function(element) {
  return $(element).attr('src');
});
console.log(imgSources);

필터링 후 DOM 요소 반환

클래스 이름이 포함된 요소만 선택

var filteredElements = $.map($('#contentsArea .items'), function(element) {
  return $(element).hasClass('active') ? element : null;
});
console.log(filteredElements);