jQuery는 강력한 DOM 조작 라이브러리로서, 여러 유용한 메소드를 제공합니다. 그 중 each 메소드는 객체나 배열을 순회하면서 각 원소에 대해 지정된 동작을 수행할 수 있게 해줍니다.

간단한 예제

아래는 each 메소드를 이용하여 배열의 각 요소를 출력하는 간단한 예제입니다.

const arr = [1, 2, 3, 4, 5];
$.each(arr, function(index, value) {
  console.log(`인덱스: ${index}, 값: ${value}`);
});

이 코드는 배열 arr 의 각 요소를 순회하면서, 각 요소의 인덱스와 값을 콘솔에 출력합니다.

객체 순회하기

each 메소드는 객체를 순회할 때에도 유용하게 사용될 수 있습니다. 아래 예제는 객체의 키와 값에 대해 작업을 수행하는 방법을 보여줍니다.

const obj = { name: 'John', age: 30, city: 'New York' };
$.each(obj, function(key, value) {
  console.log(`키: ${key}, 값: ${value}`);
});

이 코드는 obj 객체의 각 키와 값에 대해 순회하면서, 각 항목의 키와 값을 콘솔에 출력합니다.

콜백 함수 활용

each 메소드의 두 번째 파라미터로 전달되는 콜백 함수는 해당 요소의 인덱스(또는 키)와 값을 매개변수로 받아 처리할 수 있는데, 이를 활용하여 특정 동작을 수행할 수 있습니다.

마무리

each 메소드를 이용하여 객체나 배열을 순회하면서 각 원소에 대해 동작을 수행할 수 있습니다. 이를 통해 데이터 관련 작업을 보다 효율적으로 처리할 수 있게 됩니다.

참고: jQuery 공식 문서 - each 메소드