[jQuery] $.fn.extend와 $.extend 비교

오늘은 프론트엔드 개발에서 자주 사용되는 두 가지 메서드인 $.fn.extend와 $.extend의 차이점을 알아보려고 합니다. 이 두 메서드는 jQuery 라이브러리에서 제공되는데, 정확히 어떤 차이가 있는지 알아보도록 하겠습니다.

 

 

 

 

jQuery는 아직도 많이 사용되고 있는 js 라이브러리죠!

 

 

 

 

$.fn.extend는 jQuery에서 사용되는 메서드로, jQuery 객체에 새로운 메서드를 추가하는 역할을 합니다. 이 메서드를 사용하면 개발자는 jQuery 객체의 프로토타입에 새로운 메서드를 추가하여 사용할 수 있습니다. 이는 jQuery의 확장성과 유연성을 높여주는데 도움을 줍니다. $.fn.extend는 주로 플러그인 개발이나 jQuery 확장 기능을 구현할 때 사용됩니다.

 

 

 

 

 

 

 

반면에 $.extend는 jQuery에서 사용되는 또 다른 메서드로, 두 개 이상의 객체를 병합하거나 확장하는 역할을 합니다. 이 메서드를 사용하면 여러 개의 객체를 하나의 객체로 합치거나 기존 객체에 새로운 속성을 추가할 수 있습니다. $.extend는 객체 간의 병합이나 확장이 필요한 상황에서 유용하게 사용됩니다.

 

 

 

 

 

 

 

 

주의해야 할 점은 $.fn.extend는 jQuery 객체에 새로운 메서드를 추가하는 데 사용되는 반면, $.extend는 객체의 병합 또는 확장을 위한 메서드로 사용된다는 것입니다.

 

 

 

아래는 $.fn.extend와 $.extend의 사용 예제입니다:

 

// $.fn.extend 예제

$.fn.extend({
  customMethod: function () {
    // 커스텀 메서드의 동작
  },
  anotherMethod: function () {
    // 다른 커스텀 메서드의 동작
  }
});

$("#myElement").customMethod();



// $.extend 예제

var obj1 = { name: "David" };
var obj2 = { age: 25 };        // ※ 중복된 속성 주의 ※

var mergedObject = $.extend({}, obj1, obj2);

console.log(mergedObject); // { name: "David", age: 25 }

※ 중복된 속성 주의 ※

만약 $.extend() 메서드 예제에서 obj2 에 { name : "Navi", age : 25 } 로 name 속성이 중복된다면, 최종적으로 name 속성의 값은 obj2에 나오는 name 인 'Navi' 로 초기화됩니다.

 

 

 

 

이상으로, $.fn.extend와 $.extend의 차이점에 대해 알아보았습니다. 아래에 둘의 차이점을 간단히 요약해 두었으니 참고해 주시고, 추가적인 질문이나 궁금한 점이 있으시다면 언제든 댓글로 남겨주세요. 감사합니다!

 

 

 

---

 

$.fn.extend( );  : 프로토타입 기능에 함수 추가 (또는 객체 추가)                  // 기능의 확장

 

 

$.extend(''객체1", "객체2", ...);  : 객체1에  객체2, .. 순서로 병합                 // 객체의 병합

 

---

 

 

 

참조 : jQuery 공식 문서

https://api.jquery.com/

jQuery API Documentation