[JavaScript & jQuery] JavaScript와 jQuery 차이점

jQuery와 JavaScript 차이점

JavaScript는 웹브라우저에서 작동하는 스크립트입니다. 기능을 포함하는 거의 모든 홈페이지들이 사용하고 있습니다.

jQuery 또한 역시 자바스크립트 입니다. 다만 JavaScript로 빈번하게 사용되는 기능들을 조금 더 함축적인 코드를 통해 사용하게 만든 라이브러리 입니다

 

자바스크립트는 아래와 같이 크게 4가지 요소로 구성되어있습니다.

1.  자바스크립트 core 문법
2.  자바스크립트 core 라이브러리
3.  자바스크립트 BOM (Browser Object Model)
4.  자바스크립트 DOM (Document Object Model)

jQuery는 이중 자바스크립트 DOM 작업을 쉽게 처리할수있도록 도와주는 라이브러리입니다. 또한 jQuery는 DOM 작업을 쉽게 도와주는 라이브러리일 뿐, 자바스크립트 문법이나 라이브러리를 대체하는 프로그래밍 언어가 아님을 인지해야 합니다.

 

---

JQuery와 JavaScript  문법 차이점

<ul id="pet">
  <li>dog</li>
  <li>cat</li>
  <li>pig</li>
</ul>

// JavaScript - id가 pet인 element를 선택해 li 갯수만큼 for문 돌려 스타일 변경
var pet = document.getElementById("pet");
var liList = pet.getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
    var li = liList[i];
    //각 i번째 스타일 변경
    li.style.color="#ffc0cb";
}

// jquery - i가 pet인 ul의 자식 요소 li 태그에 모두 스타일 변경
$("#pet li").css("color", "#ffc0cb");

 

위와 같이 JavaScript 코드와 jQuery의 코드는 색을 변경하는 같은 기능을 가지고 있습니다. 하지만 같은 기능을 함에도 불구하고, jQuery의 코드가 더 간결하다는 것을 확인할 수 있습니다. 

 

jQuery의 사용법을 잘 알고 있다면 개발 속도는 빨라지지만 jQuery가 항상 JavaScript보다 우월한 것은 아닙니다.

 

jQuery는 어디까지나 JavaScript를 토대로 만든 것이기 때문에 개발 속도가 아닌 처리 속도 부분에서 성능이 떨어집니다.  jQuery라이브러리를 거치면서 브라우저에 맞는 네이티브 자바스크립트로 변환된 뒤 실행되기 때문입니다.

 

Reference : https://hajoung56.tistory.com/51