Chapter3. 함수가 핵심이다

JS에서는 함수를 일반 함수와 메소드로 함수를 구분할 수 있다.

사실 함수와 메소드는 동일한 구문으로 생성되는 문법인데,

메소드와 함수, 함수와 메소드로 이름을 달리하는 이유는 무엇일까?

메소드란 무엇인가를 설명하고 나면 함수를 설명하기 쉬울 것 같다.

메소드란 객체 안에 존재하는 함수를 의미한다.

함수는 객체에 속하지 않은 함수를 의미한다.

위의 설명에 대한 예시는 다음과 같다.

var object = {

method : function() {

console.log("안녕! 나는 메소드야!");

}

}

function func() {

console.log("안녕! 나는 함수야!:");

}

그렇다면 굳이 함수와 메소드로 분류한 이유는 무엇일까?

바로 컨텍스트(this)가 다르게 할당되기 때문이다.

일반 함수의 경우 함수가 실행되더라도 함수의 컨텍스트는 전역 컨텍스트인 window다.

하지만 메소드의 경우 실행 시 컨텍스트는 해당 메소드의 객체를 가리키게된다.

이는 테스트를 통해 쉽게 알 수 있다. 

var object = {

method: function() {

console.log("메소드의 컨텍스트는?", this);

}

}

function func() {

console.log("함수의 컨텍스트는?", this);

}

object.method(); // Object {method: function}

func(); // Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}

전역 객체, 메소드의 객체만이 함수의 컨텍스트가 될 수 있는 것이 아니다.

생성자 함수의 경우에는 함수 실행 시 컨텍스트는 빈 객체다.

 

그렇다면 생성자 함수의 역할과 하는 일이 무엇이기에 빈 객체가 함수의 컨텍스트가 되는 것일까?

생성자 함수는 특정 상태로 초기화된 값을 만들어 반환한다.

예시를 보면서 무슨 말인지 이해해보자. 

function NewObj() {

this.method = function() { return this; }

}

var object = new NewObj();

console.log(object); // NewObj {method: function}

예시에서 볼 수 있듯이 new 연산자와 함께 생성자 함수를 호출하게 되면

비어 있는 객체가 생성이 되고 

비어 있는 객체에 생성자 함수가 선언하고자 하는 내용이 들어가고

명시적으로 반환되는 값이 없으면 새로 생성된 객체가 반환된다.

여기서 궁금한 내용.

new 연산자가 없이 생성자 함수를 호출하게 되면 어떻게 될까?

위에서 예시로 든 내용(반환한 값이 없음)으로 테스트를 해보면,

var obj2 = NewObj();

console.log(obj2); // undefined

console.log(obj2.method()); // [1]

VM308:1

NewObj 함수에는 반환값이 없는 타입의 함수(void 함수)이므로,

undefined가 반환되어진다.

[1]에서와 같이 new 연산자를 사용하지 않고 생성자 함수를 호출 후

생성자 함수 내부의 메소드를 호출하게 되면, 

다음과 같은 에러를 뿜뿜!

Uncaught TypeError: Cannot read property 'method' of undefined

이유는 당연한거 같다. undefined를 반환하였는데 undefined에서 내부 메소드를 찾으려고 했으니!