jQuery $.each() 이용한 배열 객체 반복 함수

jQuery의 each() 함수는 배열과 객체를 반복 처리할 때 매우 강력하고 유연한 도구입니다.

아래는 each() 함수의 동작 원리, 사용 방법, 배열 및 객체를 다루는 구체적인 사례를 정리한 내용입니다.

---

jQuery each() 함수로 배열과 객체 반복하기

기본 개념

$.each() 함수는 배열, 객체, 또는 jQuery 객체를 순회하며 각 항목에 대해 콜백 함수로 작업을 수행할 수 있도록 도와줍니다.

• 배열의 경우: 인덱스와 요소 값을 제공합니다.
• 객체의 경우: 키와 값을 제공합니다.

each()는 DOM 요소에 국한되지 않고, 일반 데이터 구조에도 적용할 수 있어 범용적으로 활용 가능합니다.

---

배열 반복 예제

간단한 배열 반복

다음은 배열의 각 요소를 반복 처리하는 예제입니다.

var fruits = ['사과', '바나나', '포도'];

$.each(fruits, function(index, value) {
  console.log(`index : ${index} - ${value}`);
});

 

출력:

index : 0 - 사과  
index : 1 - 바나나  
index : 2 - 포도

인덱스 기반 조건 처리

특정 인덱스에 따라 작업을 분기할 수도 있습니다.

var fruits = ['사과', '바나나', '포도'];

$.each(fruits, function(index, value) {
  if (index === 1) {
    console.log(`${value}는 내가 좋아하는 과일이다!`);
  } else {
    console.log(value);
  }
});

---

객체 반복 예제

간단한 객체 반복

다음은 객체의 각 속성을 순회하는 예제입니다.

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

$.each(websites, function(key, value) {
  console.log(`${key} : ${value}`);
});

 

출력:

구글 : 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'
};

$.each(websites, function(key, value) {
  if (key === '네이버') {
    console.log(`${key}는 한국에서 인기 있는 검색 엔진입니다.`);
  } else {
    console.log(`${key}의 URL: ${value}`);
  }
});

---

배열과 객체의 동시 처리

배열과 객체 혼합 반복

배열 안에 객체가 포함된 구조에서도 반복 처리가 가능합니다.

var personData = [
  { 이름: '홍길동', 나이: 30 },
  { 이름: '홍순이', 나이: 26 }
];

$.each(personData, function(index, obj) {
  console.log(`사람 ${index + 1}`);
  $.each(obj, function(key, value) {
    console.log(`- ${key} : ${value}`);
  });
});

 

출력:

사람 1  
- 이름 : 홍길동  
- 나이 : 30  
사람 2  
- 이름 : 홍순이  
- 나이 : 26

---

반복 중단과 건너뛰기

반복 중단하기

return false를 사용하여 반복을 중단할 수 있습니다.

var nums = [10, 20, 30, 40, 50];

$.each(nums, function(index, value) {
  if (value === 30) {
    return false; // 반복 중단
  }
  console.log(value);
});

 

출력:

10  
20  

반복 건너뛰기

return true를 사용하여 현재 항목을 건너뛸 수 있습니다.

var nums = [10, 20, 30, 40, 50];

$.each(nums, function(index, value) {
  if (value === 30) {
    return true; // 현재 항목 건너뛰기
  }
  console.log(value);
});

 

출력:

10  
20  
40  
50