JQuery 편집하기 (부분)

== 장점과 단점 ==

=== jQuery의 장점 ===

jQuery의 가장 큰 장점은 '''크로스 브라우저 호환성'''이다. 2006년 당시에는 각 브라우저마다 자바스크립트를 다르게 구현했기 때문에, 개발자들이 복잡한 브라우저 감지 코드를 작성해야 했다. jQuery는 이 문제를 한 줄의 코드로 해결해주었다.

'''간결한 문법'''도 큰 장점이다. 순수 자바스크립트로는 수십 줄이 필요한 작업을 jQuery로는 몇 줄로 처리할 수 있다. '''풍부한 플러그인 생태계'''도 jQuery의 강점이다. [[jQuery UI]]를 비롯해 수천 개의 써드파티 플러그인들이 존재한다. '''체인 방식의 직관적 API'''는 코드를 읽기 쉽고 작성하기 쉽게 만들어준다.

<syntaxhighlight lang="javascript">
// jQuery 없이 (2006년 당시)
function addEvent(element, event, handler) {
    if (element.addEventListener) {
        element.addEventListener(event, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, handler);
    } else {
        element['on' + event] = handler;
    }
}

// jQuery 사용
$('#element').on('click', handler); // 모든 브라우저에서 동작
</syntaxhighlight>

=== jQuery의 단점 ===

jQuery의 가장 큰 단점은 '''성능 오버헤드'''이다. jQuery를 거쳐서 DOM을 조작하는 것은 순수 자바스크립트보다 느리다. '''파일 크기'''도 문제가 될 수 있다. jQuery 3.x는 약 85KB(압축 시 30KB)로, 모바일 환경에서는 부담이 될 수 있다. 사용하지 않는 기능도 포함되어 있어 비효율적이다.

'''DOM 조작 중심의 접근'''도 현재로서는 단점이다. jQuery는 명령형 프로그래밍 방식을 사용하는데, 현대적인 프레임워크들은 선언적 프로그래밍 방식을 사용한다. '''전역 네임스페이스 오염'''도 문제가 될 수 있다. $ 기호가 전역 변수로 사용되어 다른 라이브러리와 충돌할 가능성이 있다.

<syntaxhighlight lang="javascript">
// jQuery (느림)
$('#myDiv').hide();

// 순수 자바스크립트 (빠름)
document.getElementById('myDiv').style.display = 'none';
</syntaxhighlight>