[jQuery] $().each, $.each 차이 알아보기

제이쿼리로 DOM을 다룰 때..

객체나 배열 등 반복이 필요할 때 주로 쓰는 each() 에 대해 알아봤다.

 

주의 깊게 봤던 부분은 $. each()와 $("selector").each() 두 가지 표현법이다.

하나만 쓰면 되지 왜 두 개일까.. 차이점을 찾아봤다! 

 

우선 기본적인 사용법은

 

$("li").each(function(i, e) {
	// li 요소를 반복함
});

 

제이쿼리의 selector로 요소를 가져와서 반복문을 처리한다.

 

Type: Function( Integer index, Element element )
A function to execute for each matched element.

 

반복을 돌 때마다 받아 올 수 있는 파라미터는 index와 element이다.

 

<li>A</li>
<li>B</li>
<li>C</li>

$("li").each(function(i, e) {
    if(i == 1) {
        $(e).text("D");
        $(this).css("color", "red");
    } else {
    	$(this).addClass("cls");
    }
});

 

2번째 li 요소의 텍스트와 색상을 변경하는 예제이다.

index와 element를 활용해서 DOM 제어를 자유자재로 가능하다.

 

More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

 

공식 홈페이지의 설명을 참고해봤다.

this 키워드로 반복하는 요소를 참조해서 this로 요소 제어도 가능하다.

 

그러면 $.each()는 무엇이냐?

 

The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time.

 

공식 홈페이지에도 $.each()와 $(selector).each()는 다르다고 설명되어있고

객체이든 배열이든 모든 컬렉션을 반복하는 데 사용할 수 있다고 한다.

 

var arr = [1,2,3,4];
var obj = {"a":1, "b":2};

// 배열
$.each(arr, function(index, value) {
    // index = 0, value = 1
    // index = 1, value = 2
    // index = 2, value = 3
    // index = 3, value = 4
});

$(arr).each(function(index, value) {
    // index = 0, value = 1
    // index = 1, value = 2
    // index = 2, value = 3
    // index = 3, value = 4
});


// 객체
$.each(obj, function(key, value) {
    // key = a, value = 1
    // key = b, value = 2
});

$(obj).each(function(index, value) {
    // index = 0, value = {"a":1, "b":2}
});

 

배열은 비슷하게 동작하지만.. 특이한 점은 객체 부분이다.

$.each()의 경우 key와 value로 객체의 값이 반복되어 전달된다.

 

 

jquery-3.6.0.js

 

each() 의 내부 코드도 살펴봤다.

배열과 객체를 구분하여 배열 일 때는 for문으로 반복,

객체일 경우 for in 문으로 객체의 key, value에 가져올 수 있었다.

 

또 특이한 점은 each()의 리턴 값이 false일 경우 반복을 중지한다는 내용이다.

 

결론은

$(selector).each : DOM 요소를 반복하면서 제어하기 위해 사용

$.each : 자바스크립트의 배열, 객체 등 컬렉션 데이터를 반복하면서 제어하기 위해 사용

으로 정리하면 되겠다.