[js/jQuery] each 와 for 루프 비교

1. jQuery each

$('option').each((index, element) => {
    // jQuery 요소에 접근
    const $option = $(element);
    console.log($option.val());
});

장점

• jQuery 객체를 다룰 때 편리합니다. ($(element)를 사용해서 바로 jQuery 메서드를 호출 가능)
• 코드가 간결하고 가독성이 좋습니다.
• index와 element를 쉽게 얻을 수 있습니다.

단점

• 내부적으로 jQuery를 사용하므로 약간의 오버헤드가 있습니다.
• 성능이 for 루프보다 느릴 수 있습니다, 특히 많은 요소를 처리할 때.

 

2. JavaScript for 루프

const options = document.querySelectorAll('option');
for (let i = 0; i < options.length; i++) {
    const option = options[i];
    console.log(option.value);
}

장점

• 성능이 뛰어나며, 특히 대규모 반복 작업에서 효율적입니다.
• 브라우저가 기본적으로 제공하는 JavaScript 기능만 사용하므로 경량화된 코드 작성이 가능합니다.

단점

• DOM 요소를 jQuery 객체로 변환하려면 추가 작업이 필요합니다. ($(option) 등)
• 코드가 길어질 수 있습니다.

 

3. JavaScript for...of

const options = document.querySelectorAll('option');
for (const option of options) {
    console.log(option.value);
}

장점

• 간결하고 직관적이며, for 루프보다 가독성이 뛰어납니다.
• DOM 요소를 순회할 때 쉽게 사용할 수 있습니다.
• 배열이나 NodeList와 같은 iterable 객체에 적합합니다.

단점

• IE와 같은 구형 브라우저에서는 폴리필이 필요할 수 있습니다.

 

4. JavaScript forEach

document.querySelectorAll('option').forEach(option => {
    console.log(option.value);
});

장점

• 간결한 문법으로 콜백을 사용하여 직관적인 로직 작성이 가능합니다.
• 배열 및 NodeList 순회에 적합합니다.

단점

• 비동기 처리에서 루프를 종료하거나 continue/break를 사용할 수 없습니다.

 

 

언제 어떤 것을 사용할까?

상황권장 방법

jQuery 객체를 다룰 때	.each()
성능이 중요한 대규모 작업	for
간결하고 직관적인 코드가 필요한 경우	for...of 또는 forEach
브라우저 호환성이 중요하다면	for

 

---

 

결론

• DOM 요소를 다룰 때: 작은 프로젝트에서는 .each()로 충분하지만, 큰 프로젝트에서는 성능을 고려해 for나 for...of를 선호합니다.
• 성능이 중요한 경우: for가 가장 빠릅니다.
• 가독성과 유지보수성: for...of나 forEach가 더 적합합니다.

jQuery에 의존하지 않는 환경을 선호한다면, for...of와 forEach를 사용하는 것이 더 현대적이고 적합합니다. 하지만 이미 jQuery를 사용하는 프로젝트에서는 .each()를 활용하는 것이 일관성을 유지하는 데 유리합니다.