jQuery 쉽게하기 - 기본부터 시작하자, 함수(Function) 편

함수(Function)란 객체의 행동을 나타내는 일련의 과정을 프로그램으로 표현한 것입니다.

즉 영어문법으로 보자면 동사가 됩니다. "~을 실행하다"의 의미로 받아 들이시면 됩니다. 모니터를 예로 들어볼까요. 모니터는 화면, 전원 단자, 비디오 단자, 파워버튼 등으로 이루어져 있습니다. 이것들이 모니터의 속성(Properties)이죠. 그럼 모니터로 할 수 있는 일을 정리해 보면 "화면을 표시한다" 라는 중요한 기능외에 "각도를 조절한다.", "밝기를 조절한다." 등의 부가기능들이 있습니다. "화면을 표시한다"라는 기능을 구현하기 위해 그 안에 뭔가 처리를 해야 합니다. 이런 일련의 내용들을 함수를 구현한다 정도로 정리가 되는 것 같습니다.

괜히 사족을 달아서 더 어려운 개념처럼 만든건 아닌가 모르겠네요. 결론은 간단합니다. JavaScript의 함수들은 아래와 같은 형태를 가지고 있습니다.

function named() {}
var handler = function() {}

위와 같은 형태를 띠고 먼가 열심히 처리하고 있으면 그게 함수입니다. 함수들과 속성들의 모음이 객체가 되지요.

jQuery 에서는 더 많은 형태의 함수를 사용하고 있습니다.(개인적으로는 이 부분이 jQuery 소스를 복잡하게 만드는 것 같습니다.)

 $(document).ready(function() {});
 $("a").click(function() {});
 $.ajax({
   url: "someurl.php",
   success: function() {}
 });

함수명이 없는 함수(anonymous functions)의 타입인데요. 기존의 함수의 모양과 많이 달라서 좀 보기가 힘드실 수도 있겠습니다. 자바스크립트의 확장성이 너무 좋은것도 그리 좋은점만 있는건 아니네요.

Arguments : 인자 전달

어찌됬든 위와 같이 jQuery에서는 함수들을 사용하고 있습니다. 함수에는 인자들을 처리할 수 있게 되어 있습니다. 인자를 받을수도 인자를 반환할 수도 있죠. 아래 함수를 보시죠.

function log(x) {
  console.log(typeof x, arguments.length);
}
log(); // "undefined", 0
log(1); // "number", 1
log("1", "2", "3"); // "string", 3

log 함수에서 인자를 받아서 인자의 타입과 인자의 개수를 표시하는 함수입니다. 첫줄에 log 함수 호출이 오류인 것은 인자가 없는 log 함수는 없기 때문입니다. 그런데 조금 이상한 것은 3번째 log 함수 호출 부분입니다. 인자가 3개가 넘어가는 함수 정의는 없는데 정상적으로 처리가 되고 있습니다. 유의해서 사용하셔야 할 것 같습니다.(엄격한 의미에서는 말이 안되는 상황입니다만 자바스크립트의 특성이니 이해해 주세요.)

Context, Call and Apply : 문맥, 호출과 적용

Context 을 직역하니 뭔지 잘 모르겠습니다. 여기에서는 "this" 키워드를 설명하기 위해 문맥(context) 이라는 단어를 사용했는데요. "this" 키워드는 절대적인 것이 아닌 상대적인 객체를 표시합니다. 즉, 프로그램의 내의 흐름(문맥과 일맥상통)에 따라 "this" 가 지칭하는 내용이 달라진다는 얘기 입니다. 아래 예제를 보세요.

$(document).ready(function() {
  // this refers to window.document
});
$("a").click(function() {
  // this refers to an anchor DOM element
});

보시면 위쪽 함수에서의 "this"는 window.document 가 됩니다. 아래 "this"는 문서상의 A 태그들이 되죠. Context 란 의미는 이런 의미에서 사용한 것 같습니다. "this" 란 키워드는 참 재미있는 녀석인데요. 이 키워드가 아마 프로그램에서 배우면서 배열 다음에 만나는 둘째판왕(王) 정도 될 겁니다.

Scope : 범위

해당 내용이 영향을 미치는 범위가 있습니다. 전역변수, 지역변수와 같은 용어들로 사용하는데요. 자바스크립트에서도 그리 다르지는 않습니다. 하지만 아주 엄격한 것도 아니죠.

// global
var x = 0;
(function() {
	// private
	var x = 1;
	console.log(x); // 1
})();
console.log(x); // 0

변수 x 는 함수안에서 재정의 하여도 영향을 받지 않습니다. 위처럼 전혀 다른 변수처럼 취급되죠. 함수안의 var x = 1; 을 그냥 x = 1 로 바꾼다면 얘기가 다릅니다. 실제로 수정해서 확인해 보시기 바랍니다.

이 외에 Closures 와 Proxy Pattern 에 대한 내용이 더 기술되어 있으나 이 부분은 따로 정리하지 않겠습니다. Closures 는 예시를 들면서 OOP의 캡슐화에 대한 얘기도 살짝 언급되어 있습니다. 관심이 있으신 분은 원문을 참고하시기 바랍니다.

음.. 한 메뉴를 너무 길게 포스팅을 했네요. 쓰고 나니 왜 이걸 이리 길게 썼으며, 굳이 쓸 필요가 있을까 생각이 되기도 합니다. 깊이도 없고 넓은 지식도 없고.. 어쨌든 다음 포스트 부터는 API 레퍼런스에 대해서 시작하겠습니다. 예제들이 많아서 재미있는 포스팅들이 되었으면 좋겠네요.

그럼 즐프하세요.