자바스크립트를 잡아라.-03

안녕하세요. 송기석입니다.

오늘 아침 헬스장에서 헬스를 하고 나오면서 먼산을 보니 단풍이 멋지게 물들었습니다. 단풍을 보며 하루 하루가 너무 빠르게 지나가는 것을 느낄 수 있습니다. 산을 보고 있으니 갑자기 산에 가고 싶은데 시간은 없고, 어떻게 하지. 한번 미친척하고 일에서 벗어나 산에 갔다 올까 하는 마음이 가득합니다. 고민 중에 이번주 일요일 예배를 보기 전에 산에 갔다 와서 예배에 가려고 합니다. 단풍이 곱게 물든 이쯤. 여러분도 한번쯤 산에 갔다 오는 것이 어떨까요?

함수

함수는 실행 문장들의 집합을 감싸고 있습니다. 함수는 자바스크립트에서 모듈화의 근간입니다. 함수는 코드의 재사용이나 정보의 구성 및 은닉 등에 사용하고, 객체의 행위를 지정하는데 도 사용합니다.

함수 객체

자바스크립트에서 함수는 객체입니다. 객체는 프로토타입 객체로 숨겨진 연결을 갖는 이름/값 쌍들의 집합체입니다. 함수는 객체이기 때문에 다른 값들처럼 사용할 수 있습니다. 함수는 변수나 객체 배열 등에 저장되며, 다른 함수에 전달하는 인수로도 사용하고 함수의 반환값으로도 사용합니다.

// ‘hello’를 리턴하는 간단한 함수입니다.

function test() {

  console.log('test()');

  return 'hello';

}

// 인자로 함수를 받아서 그 함수의 리턴값을 alert합니다.

function test2(func) {

  console.log('test2()');

    var str = func();

    alert(str);

}

// test2 함수를 호출할 때 인자로 test()의 함수명 test를 넘겨줍니다.

test2(test); // ‘hello’가 alert 됩니다.

// test2 함수는 함수명(함수에 대한 참조)을 인자로 받을 뿐아니라

// 함수 자체도 인자로 받을 수 있습니다.

// 익명함수 (anonymous function)을 인자로 넘깁니다.

test2(function() {

    return 'test'; // 실행결과 ‘hello’가 alert 됩니다.

});

함수 리터럴

함수 객체는 함수 리터럴로 생살할 수 있습니다.

// add라는 변수를 생성하고 두 수를 더하는 함수를 이 변수에 저장.

var add = function (a, b) {

    return a + b;

}

함수 리터럴에는 네 가지 부분이 있습니다. 첫 번째 부분은 function이라는 예약어 입니다.

두 번째 부분은 선택사항으로 함수의 이름입니다. 함수의 이름은 함수를 재귀적으로 호출할 때 사용하며, 디버거나 개발 툴에서 함수를 구분할 때도 사용합니다. 함수의 이름이 주어지지 않은 경우 익명함수(anonymous)라 부릅니다. 다음은 함수의 이름이 있는 경우 입니다.

var add = function add(a, b) {

    return a + b;

}

예시로 보인 함수는 함수 표현식입니다. 함수 문장으로 다음과 같이 표현 할 수 있습니다.

function add( ) {}

이것은 var add = function add( ) {} 같은 의미입니다. 함수 문장은 var 문장과 함수값 조합의 축약형입니다. 저는 보통 함수 표현식을 사용합니다. 이유는 add가 함수값(function value)을 가진 변수라는 것을 명확히 나타내기 때문입니다. 자바스크립트라는 언어를 잘 사용하기 위해서는 함수도 값(value)이라는 것을 이해하는 것이 중요합니다.

세 번째 부분은 괄호에 둘러싸인 함수의 매개변수 집합입니다. 괄호 안에 아예 없거나 하나 이상의 매개변수를 쉼표로 분리해서 열거합니다. 이 매개변수들은 함수 내에서 변수로 변수로 정의합니다. 일반적인 변수들을 undefined로 초기화하는 것과는 달리 매개변수를 함수를 호출할 때 넘겨진 인수로 초기화합니다.

var add = function add(a, b) { // 매개변수 a, b를 사용합니다.

    return a + b; // 매개변수를 변수로 사용합니다.

}

네 번째 부분은 중괄호에 둘러싸인 문장들의 집합입니다. 이러한 무장들은 함수의 몸체(body)이며 함수를 호출했을 때 실행합니다.

var add = function add(a, b) {

    return a + b; // {} 안에 수행 하고자 하는 작업내용을 넣습니다.

}

함수 리터렐은 표현식이 나올 수 있는 곳이며 어디든지 위치할 수 있습니다. 함수는 다른 함수 내에서도 정의 할 수 있습니다. 물론 이러한 내부 함수도 매개변수와 변수를 가질 수 있으며 자신을 포함하고 있는 함수의 매개변수와 변수에도 접근할 수 있습니다. 함수 리터럴로 생성한 함수 객체는 외부 문맥으로 연결이 있는데 이를 클로저(closure)라고 합니다. 클로저는 강력한 표현력의 근원입니다.

클로저(closure)

함수를 설명할 때 클로저 이야기가 있습니다. 클로저가 무엇인지 추가 설명을 하겠습니다. 클로저는 자신의 범위의 변수를 감싸서 외부에서도 그 변수를 사용할 수 있게 해주는 함수 입니다. 설명만으로는 잘 이해가 안되니 예제를 살펴보도록 하겠습니다.

(function() {})

이런 형식으로 사용하고 있는 것이 클로저입니다. 앞에서 설명한 감싸서라는 부분이 바로 ()이 부분입니다. 다음을 보면서 좀 더 자세한 설명을 하겠습니다.

function outer_func() {

    var num = 0;

// inner_func() 처럼 자신의 유효범위에 있는 변수에 접근할 수 있는 함수를 클로저라 합니다.

    function inner_ func() {

        return num++;

    }

    return inner_func;

}

alert(num); // 에러 발생

var func = outer_func();

alert(func()); // 실행 --> 함수를 ()로 감싸서 실행하고 있다.

다음 강좌도 함수에 대하여 이어서 이야기 해보겠습니다.