[jQuery] $ / $.fn 은 뭐고 함수는 어떻게 쓰는 걸까?

 

실무에서 아직까지는 jQuery를 사용하는 분이 많을거라 생각이 든다. 내가 관리하는 웹 프로그램 또한 jQuery가 많은데, 개발시 사용을 하긴 했지만 개념이 명확하지 않은 부분이 있어 정리해보도록 하겠다. 일단 내가 헷깔렸던 부분은 아래와 같다

 

---

막연한 나의 의문

 

1. 자바스크립트 문법으로 함수를 선언하는 방법과  jQuery를 이용해 함수를 선언하는 방법의 차이

 

2. jQuery에서 $  /  $.fn  /  그리고 $.write() 와 같은 함수는 대체 무엇인가

---

 

 

 

1.  JavaScript 와 jQuery의 명확한 개념부터 정립하기.

 

JavaScript 하나의 언어이고, jQuery 는 JavaScript 라이브러리이다.

쉽게 말해 JavaScript 언어로 코딩을 하는데,  'jQuery'라는 확장 프로그램의 도움을 받는 것과 같다.

이 개념을 전제로 시작해야 이해하기 쉬울 것 같다.

 

 

 

 

 

2. 함수 선언 및 사용 방법

 

JavaScript에서 함수를 선언하는 방법은 여러가지인데,

대표적으로 기명함수, 익명함수를 자주 사용한다. (최근엔 화살표 함수도 종종 보인다.)

 

// 기명함수 : 함수 이름 지은 거
function 더하기함수 () { // 함수 이름은 더하기함수이고, 더하기함수가 호출되면 3을 return하게 된다. 
	return 1+2;
}

// 무기명함수(익명) : 함수이름 없는 거
var 빼기 = function () { // 함수 이름은 없고 '빼기'라는 변수에 함수의 결과 값인 -1을 저장한다.
	return 1-2;
}

 

 

 

 

 

3. jQuery 문법으로 객체에 접근 및 프로퍼티 등록 및 사용

 

jQuery를 사용하는 웹 프로그램을 브라우저에서 열고

콘솔창에서  jQuery 와 $를, 또  $  /  $.fn  /  $. prototype 을 각각 입력해보고

어떤 타입인지 출력해보면 아래와 같이 나오는 것을 볼 수 있다.

 

 

jQuery와 $는 똑같은 함수를 가리킨다. jQuery의 Alias로 $를 사용한다고 생각해도 되겠다.

 

 

 

jQuery 문법을 사용해 코딩해왔지만,, 오늘 문득 깨달은 것은

문법의 구조가 거의 대부분 [ $("선택자").함수(); ]의 형태를 가진다는 것이다.

콘솔창에서 $. 을 눌러보면 사용 가능한 다양한 함수 목록이 나올것이다. 

이 말은 jQuery 내부에도 내장된 함수가 있기 때문에  $("선택자").on(); 처럼 함수를 호출하는 문법을 사용 한다는 것이다.

(jQuery 자체가 함수이지만 이 jQuery 내부에도 함수가 존재한다.)

 

 

 

 

 

 

 

jQuery가 가지고 있는 것들 중 $.fn 과 $.prototype을 보면

아래와 같이 토씨하나 틀리지 않고 '완벽히 똑같은 객체' 라는 것을 알 수 있다.

여기서도 prototype의 Alias 로 fn을 쓴다고 생각하면 되겠다.

 

 

 

$ 가 곧 jQuery 이고, 거대한 함수 집합이란 것을 알았고, $는 Alias처럼 사용하는 것이며

$.prototype 은 객체이고 $.fn 이라는 Alias로 사용하는 것을 알게 되었다.

 

 

 

$와 $.fn의 사용 예제를 만들어 보기로 했다.

먼저 $ 테스트를 해보기 위해 $.test1 을 입력해본다.

해당 코드를 입력하면 $.test1이 선언되었지만, 값이 할당되지 않았기 때문에 타입이 정해지지 않은 undefied 로 나오게 된다. 

 

 

 

 

 

$.test1 에 숫자 1이라는 값을 넣어주게 되면 아래와 같이 타입은 number가 되고,

"test"라는 문자를 넣어주면 string, 객체를 만들어 넣어주게 되면 Object, 익명함수를 만들어 넣으면 함수가 된다.

 

 

 

 

 

 

 

 

위 테스트 결과로 jQuery 라는 큰 함수 내에는 기본 내장된 함수 뿐만이 아니라

사용자가 정의하는 임의의 값을 넣거나, 객체를 넣거나, 함수를 넣어서 필요할 때 꺼내 쓸 수 있다는 것을 알게 되었고

jQuery에 정의한 함수를 호출할 때 사용하는 문법이 바로 $.write(); 와 같은 형태인 것이다.

(number, string, object, function 등)

 

 

제이쿼리($)에 등록했던 익명함수를 호출했더니 실행결과가 나왔다.

 

 

 

이번엔 $.fn을 테스트 해보기 위해 브라우저 콘솔창에 $.fn. 을 입력하자 $ 를 입력했을 때 처럼 함수가 많이 나온다.

테스트를 위해 $.fn.test2 를 입력하면 위와 같이 'undefined'가 나온다.

 

 

 

number, string, object, function 값을 넣으면 역시 위 테스트 결과와 똑같이 나온다.

 

타입 확인

 

 

$.fn.test2(); 함수 호출

 

 

이번에도 $.fn.test2(); 함수를 호출하면 저장했던 익명함수를 실행한 결과값인 " --- test --- " 가 반환되는 것을 볼 수 있다.

그렇다면 $와 $.fn은 같은 것일까? 아래 결과를 보면 그렇지 않다는 것을 알 수 있다.

아래 이미지에는 없지만 $.fn이 $에 포함된 prototype이기에,

$.fn.davidev 의 값을 먼저 바꾸고 $.davidev에서 호출해보아도 결과는 false이다. 

$와 $.fn 는 독립적인.. 별개인 것이다.

 

 

 

 

 

그렇다면 사용함에 있어서 $와 $.fn은 어떤 차이가 있을까?

 

 

궁금해서 위의 결과들을 종합해 chat GPT에게 물어본 결과를 마지막으로 이만 글을 정리하고 마무리 해야겠다.

 

 

$와  $.fn 이 둘은 용도가 다르다!

 

요약 : $는 요소 선택 및 조작, 그리고 $.fn은 기능과 동작과 관련해 사용한다.

 

 

 

 

 

---

막연한 나의 의문에 대한 답

 

1. 자바스크립트 문법으로 함수를 선언하는 방법과  jQuery를 이용해 함수를 선언하는 방법의 차이

 

자바스크립트는 함수를 선언하고 호출할 수 있지만
jQuery는 함수를 선언하는 개념이 없고
jQuery 또는 jQuery prototype에 여러 종류(number, string, object, function)를
등록할 수 있고 필요할 때 마다 호출해서 사용할 수 있다. 

 

 

 

2. jQuery에서 $  /  $.fn  /  그리고 $.write() 와 같은 함수는 대체 무엇인가

 

 

$ 는 jQuery 그 자체이다. 라이브러리 그 자체.

$.fn은 jQuery의 *prototype이다. (*객체를 구성하는 메인 구성 요소)
$라는 jQuery에 질문1에 답변한대로 .write()와 같은 사용자 정의 함수 를 등록한 뒤
호출할 때 사용하는 문법이 $.write(); 이다.
$.fn 에도 위와 동일한 방법으로 등록할 수 있고, 호출할 때는 $.fn.write(); 와 같이 호출한다.    

---

 

 

 

 

 

 

 

 

 

ps.
jQuery API document에서 위 내용을 잘 못찾겠어서 직접 두들기며 알아보게되었다..
아래와 같이 $.fn.extend() 함수를 이용해 프로토타입에 함수를 추가 등록하는 방법도 있지만 여기서는 다루지 않았다..

 

$.fn.extend({

	create : function() {
		//구현로직
	},

	do : function() {
		//구현로직
	},
	
	add: function(ITEM) {
    	//구현로직
	}
    
});