jQuery 소스코드 분석과 함께하는 자바스크립트 공부 – 2

이 글은 Decoding jQuery series 를 보고 공부한 점을 정리한 글입니다. 원문의 내용과 똑같은 부분도 있고 제가 알고 있는 내용을 따로 덧붙인 부분도 있으니 원문 – Decoding jQuery – OOP and jQuery part 2 을 꼭 보시기 바랍니다.

——————————————————————————————————————–

이전 글에서 jQuery 소스를 통해 변수(데이터)와 함수에 대해 살펴보았습니다. 이번에는 jQuery의 객체에 대해서 알아보겠습니다.

1. 객체(object)는 단지 사람이나 의자와 같은 객체(속성을 가지고 있는 어떤 것)일 뿐입니다.
자바스크립트에서 객체란 무엇일까요? 이것은 마치 사람, 의자, 개와 같이 어떠한 대상에 대한 표현입니다. 이 대상은 자바스크립트 안에서 “자신의 속성(property)들을 가지고 있는 데이터”로 표현됩니다. 간단한 객체를 하나 만들어 보겠습니다.

var shichuan = {};

각각의 객체들은 프로퍼티(property)와 메서드(method)를 가질 수 있습니다. 메서드도 프로퍼티인데, 특별히 동작을 하는(즉, 함수) 프로퍼티를 메서드라고 부릅니다. 아래의 shichuan 객체는 hair라는 프로퍼티를 가지고 있습니다.

var shichuan = {
	hair: "black"
};

shichuan 객체에 ridingUnicorn 라는 프로퍼티를 추가해보겠습니다. ridingUnicorn 프로퍼티의 값은 함수입니다. 그래서 ridingUnicorn 를 메서드라고 부릅니다.

var shichuan = {
	hair: "black",
	ridingUnicorn: function() {
		// how I ride unicorn
	}
};

지금까지 살펴본 객체에 대한 내용들을 정리해보겠습니다.

  1. 이 객체의 변수명은 shichuan 입니다. shichuan 이라는 변수에 객체를 만들어 담은 것입니다.(shichuan 이라는 변수가 지금 만든 이 객체를 가리키고 있는 것입니다.)
  2. 자바스크립트의 객체는 { 와 } 로 둘러쌓여 있습니다.
  3. 객체의 프로퍼티와 메서드들은 콤마(,)로 구분됩니다.
  4. 각 프로퍼티는 key: value 의 형태로 구성이 됩니다. hair: “black” 에서 hair가 key이고 이 프로퍼티의 이름이 됩니다. “black”은 value이고 이 프로퍼티의 값입니다. key와 value는 콜론(:)으로 구분합니다.
  5. 프로퍼티중에서 value가 함수인 것을 메서드라고 부릅니다. shichuan 객체에서는 ridingUnicorn 가 메서드입니다.

2. jQuery의 객체
이전 글에서 jQuery의 소스코드에는 전역변수 jQuery와 지역변수 jQuery가 있는 것을 살펴보았습니다. 지역변수 jQuery의 소스코드를 다시 살펴보면, 아래와 같이 아주 간단합니다. jQuery라는 변수에 익명함수 하나를 할당하고 있는데 그 함수가 하는 일은 new 키워드와 jQuery.fn.init 생성자 함수로 생성된 객체를 반환하는 것입니다.

var jQuery = function( selector, context ) {
	// The jQuery object is actually just the init constructor 'enhanced'
	return new jQuery.fn.init( selector, context, rootjQuery );
}

jQuery 소스코드에서 “jQuery.fn”을 검색하면 아래와 같은 형태를 보실 수 있습니다.

jQuery.fn = jQuery.prototype = {
	constructor: jQuery,
	init: function( selector, context, rootjQuery ) {
	...
	},
	...
}

jQuery prototype(prototype에 대해서는 다음 글에서 알아보겠습니다.)은 많은 프로퍼티와 메서드들을 가지고 있는 큰 객체입니다. 위 코드에서 jQuery.prototype 이라는 객체를 정의하고 이것을 다시 jQuery.fn 에 할당하는 것을 보실 수 있습니다. 그래서 jQuery.prototype 에 있는 프로퍼티와 메서드를 호출할 때 jQuery.fn을 사용해도 되며 jQuery.fn.init은 jQuery.prototype.init을 가리키고 있다는 것을 알 수 있습니다.

3. 함수는 데이터입니다. 그리고 또한 객체입니다.
이전 글에서 함수는 단지 데이터이고 함수를 만드는 방법 두 가지를 보여드리고, 두 방법은 같다고 말씀드렸습니다.

// local jQuery
function jQuery( selector, context ){
	//...
}
// local jQuery
var jQuery = function( selector, context ){
	//...
}

사실 함수를 만들 수 있는 방법은 한가지 더 있습니다. new 키워드와 “Function” 생성자함수를 사용하는 방법입니다. new 키워드와 생성자 함수를 사용하면 결과물로 객체가 반환됩니다. 자바스크립트에서 함수는 객체이기 때문에(자바스크립트의 모든 것은 객체라고 말씀드릴 수 있습니다.) 아래와 같이 생성자 함수로 객체인 함수를 만드는 것이 가능합니다. 그러나 위에서 보여드린 방법이 더 직관적이고 이해하기 쉽기 때문에 이 방법은 추천하지 않습니다.

// local jQuery
var jQuery = new Function('selector', 'context', '//...');

다음글에서는 prototype에 대해서 알아봅니다.