■ Javascript

[자바스크립트] Javascript를 기초부터 시작해보자! (6)

이제 자바스크립트의 핵심인 함수에 들어가보도록 하겠다.

 

1.함수

자바스크립트에서 함수는 First Class 함수라고 한다.
이말은 함수가 다음의 3가지 유형으로 사용이 가능하다는 의미이다.

1. 변수에 담을 값
2. 함수의 인자 값
3. 함수의 리턴 값

또한 다음의 3가지 말고도 다양한 기능이 있다.
함수는 생성자가 될수도 있다. 즉 new 키워드와 함수를 사용하면
자바스크립트에서 특별한 프로세스로 해당 생성자로 만들어진 인스턴스를 만들어 준다.
마지막으로 함수의 일반적인 기능인 (즉 타 언어에서의 진짜 함수의 목적) 호출가능한
루틴으로서의 역할이 있다.

정리를 하자면 크게 3가지의 역할

1. 일급함수의 역할
– 변수에 담을 값
– 함수의 인자 값
– 함수의 리턴 값
2. 생성자의 역할
3. 일반 루틴의로서의 역할

하나씩 짚고 넘어가 보자,

먼저 일급함수로서의 역할을 보자.

함수는 다음과 같이 두가지형태로 선언이 가능하다.

1. function FunctionName() {} // (파싱단계)

2. var FunctionName = function() {} // (실행단계)

둘다 함수를 만드는 방법이며 차이점은 수행단계에 대한 차이점 뿐이다.
그렇다면 일급함수의 3가지 역할을 이제 대입해보자.
먼저 일급함수의 1번의 역할은 이미 2번째 형태로 표현했다.
즉 var 키워드로 만든 변수에 함수를 대입했다.

다음은 함수의 인자값으로 설명해보겠다.

function OuterFunction(callbackFunction) {
    callbackFunction();
}

OuterFunction(FunctionName);

다음처럼 호출이 가능하다. 즉 파라미터로 바로 함수를 넘길수 있다.
위의 예문은 간단한 callback 함수의 설명이다.

마지막으로 함수의 리턴값을 보도록 하겠다.

function OuterFunction2() {
var InnerFunction() { return 10; };
    return InnerFunction();
}
console.log(OuterFunction2()());

뒤에 ()가 2번있는 것이 이상하게 보일수도 있지만, 정상적인 문법이다. 즉 리턴된 함수를 이어서 바로 호출 했기 때문에
()가 2번 호출된 것이다. 콘솔에는 10이 찍힐 것이다.

다음으로 함수를 생성자의 역할로서 살펴보도록 하겠다.
new키워드와 함께 사용되면 함수를 생성자의 역할로 활용한다고 하였다. 그렇다면 어떻게 생성자가 된다는 것일까?
이러한 물음에 가장 가까운 키워는 바로 this이다. 일반 객체지향언어에서 this는 해당 인스턴스 자신을 가르킨다.
즉 this는 class를 가르키는 것이 아니고 instance를 가르킨다는 점이다.

그렇다면 자바스크립트는 어떨까? 자바스크립트에서는 클래스가 없다. 이말이 이상하게 들릴수도 있다. 하지만 함수의 생성자로서의 역할을
생각해보면 납득이 갈 것이다. 즉 함수가 클래스와 비슷한 역할을 수행한다고도 볼수있다.(엄연히 말하면 다르지만 일단은 그냥 넘어가자.)

function Constactor() {
    this.name = “name”;
    this.lv = 10;
    function getLevel() {
        return this.lv;
    }
    this.getLevel = getLevel;
}

new 키워드 뒤에 함수가 호출이 되면, 먼저 함수 내부에서 this란 가상변수를 만들고, (여기서 가상변수란 우리가 명시적으로 선언하지 않은 변수를 말한다.)
해당 this에 새로운 오브젝트를 넣는다.

var this = new Object();
이런식으로 V8과 같은 엔진이 처리를 해주는 것이다.
다음으로 함수 내부에 this.name, this.lv등처럼 오브젝트에 프로퍼티를 할당해준다. (이것이 가능한 이유는 자바스크립트에서는 동적으로 바로 프로퍼티를 추가할 수 있기 때문이다.)
마지막 getLevel을 보자. 파싱단계에서 function키워드를 통해 getLevel을 해당 스택에 정의할 것이다.
다음으로 this.getLevel 프로퍼티(여기서는 메소드)에 해당 getLevel포인터를 넣는다. getLevel과 this.getLevel은 다른 영역에 있기 때문에 중복되지 않는다.
마지막으로 자동으로 return this;를 수행하면서 new키워드의 역할을 수행하는 것이다.
최종 코드를 보자. 해당 코드는 우리가 작성하지 않은 가상 변수를 합친 것이다.

function Constactor() {
    var this = new Object();
    this.name = “name”;
    this.lv = 10;
    function getLevel() {
        return this.lv;
    }
    this.getLevel = getLevel;
    return this;
}

마지막으로 일반함수 루틴으로서의 역할은 생략한다.
다음에는 해당 함수의 메모리 구조에 대해서 살펴보도록 하겠다.

Standard

댓글 남기기