함수와 프로토타입 체이닝

함수 정의

자바스크립트 에서의 함수 정의 방법은 function이라는 키워드를 명시적으로 사용하고 있고 리턴값과 매개변수로 넘기는 값에 변수 타입등을

기술하지 않는다는 점에서 차이가 있다.

함수  표현식으로 생성된 함수를 호출하려면 함수 변수를 사용해야 한다.

ex ) var ex = function ex(n) {

return n;

};

함수 이름이 없는 함수 형태를 익명 함수라고 부른다. 

함수 표현식에서 사용된 함수 이름은 외부 코드에서는 접근 불가능하다.

함수 선언문 형식으로 정의된 함수는 자바스크립트 엔진에 의해 함수 이름과 함수 변수의 이름이 같은 표현식 형태로 변경된다.

함수 표현식 방식의 경우는 세미콜론을 붙이는 것을 권장한다.

함수 호이스팅

: 함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작한다.

함수 표현식 형태는 호이스팅이 일어나지 않는다.  

exfunc(3,3) // error

var exfunc = function(x,y) {

return x-y;

};

원인은 자바스크립트의 변수 생성과 촉화의 작업이 분리되어 진행되기 때문.

함수도 객체다

함수는 기본 기능인 코드 실행뿐 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다.

function ex(x,y) {
return x-y;

}

ex.ans = ex(3,2);

ex.status = "OK";

자바스크립트에서의 함수는 일급 객체이다.

- 리터럴에 의해 생성

- 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능

- 함수의 인자로 전달 가능

- 함수의 리턴값으로 리턴 가능

- 동적으로 프로퍼티를 생성 및 할당 가능

모든 함수는 객체로서 prototype 프로퍼티를 가지고 있다.

prototype 프로퍼티와 [[Prototype]] 프로퍼티??

공통점: 두 프로퍼팅 모두 프로토타입 객체를 가리킨다.

차이점 : [[Prototype]]은 객체 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리킨다.

prototype 프로퍼티는 이 함수가 생성자로 사용될 때 이 함수를 통해 생성된 객체의 부모 역할을 하는 프로토타입 객체를 가리킨다.

콜백 함수란? 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수

즉시 실행 함수? 최소 한 번의 실행만을 필요로 하는 초기화 코드 부분에 사용. 함수를 정의함과 동시에 바로 실행하는 함수이다.

ex ) (function (name) {

console.log('This is the immediate function -->' + name);

})('foo');

함수 내부에 정의된 함수를 내부 함수 라고 부른다.

클로저 생성, 부모 함수 코드에서 외부 접근을 막고 독립적인 헬퍼 함수를 구현하는 용도 등으로 사용 된다.

내부 함수는 일반적으로 자신이 정의된 부모 함수 내부에서만 호출이 가능하다.

(이는 자바스크립트의 함수 스코핑 때문 (5장) )

하지만 부모 함수 내에서 내부 함수를 외부로 리턴하면 호출 가능하다.

ex)

function parent() {

var child = function () {

}

return child;

}

// 이러한 parent()와 같은 부모 함수 스코프의 변수를 참조하는 inner()와 같은 함수를 클로저 라고 한다.(5장)

var inner = parent();

inner();

자바스크립트 에서는 런타임 시에 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르게 해줘야 할 경우가 있다.

이를 가능케 하는 것은 arguments 객체이다.함수를 호출할 때 인수들과 함께 암묵적으로 arguments 객체가 함수내부로 전달되기

(arguments 객체는 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체를 의미)

때문이다. 이 객체는 유사 배열 겍체이다.

호출 패턴과 this 바인딩

자바스크립트의 여러 가지 함수가 호출되는 방식(호출 패턴) 에 따라 this는 다른 객체를 참조한다.( this 바인딩 )

1. 객체의 메서드 호출시 this 바인딩

:  해당 메서드를 호출한 객체로 바인딩 된다.

2.  함수를 호출할 때 this 바인딩

: this는 전역 객체에 바인딩 된다.

자바스크립트에서는 내부 함수 호출 패턴을 정의해 놓지 않는다. 

생성자 함수 호출시 this 바인딩

기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.

객체 리터럴 방식과 생성자 함수를 통한 객체 생성 방식의 차이?

프로토타입 객체에 있다. 객체 리터럴의 경우 Object로 ( 실제로는 Object.prototype) 생성자 함수의 경우 자신의 프로토타입 객체로 설정한다.

call과 apply 메서드를 이용한 명시적인 this 바인딩

this 바인딩 외에 this를 특정 객체에 명시적으로 바인딩 시키는 방법 

ex ) function Person(name, age, gender) {

this.name = name;

this.age = age;

this.gender = gender;

}

Person.apply(foo, ['foo',30,'man']); // or Person.call(foo, 'foo', 30, 'man');

함수 리턴

자바스크립트는 함수는 항상 리턴값을 반환한다.

1. 리턴값 지정 않을 경우 undefined값이 리턴됨

2. 생성자 함수에서 리턴값 지정 않을 경우 생성된 객체가 리턴됨

프로토타입 체이닝

자바스크립트는 기존 c++와 자바 같은 객체지향 언어와는 다른 프로토타입 기반의 객체지향 프로그래밍을 지원한다.

따라서 프로토타입의 개념도 잘 이해해야한다. oop 상속에 근간이 되는 것은 프로토타입과 프로토타입 체이닝 이다.

oop는 일반적으로 클래스를 정의하고 객체를 생성하지만 자바스크립트는 클래스 개념이 없고 객체 리터럴이나 생성자 함수로 객체를 생성한다.

이렇게 생성된 객체의 부모 객체가 바로 프로토타입 객체.

prototype 프로퍼티는 함수의 입장에서 자신과 링크된 프로토타입 객체를 가리킨다

[[Prototype]] 링크는 객체의 입장에서 자신의 부모 객체인 프로토타입 객체를 내부의 숨겨진 링크로 가리킨다.

즉 자바스크립트에서 객체 생성 -> 생성자 함수의 역할

 

생성된 객체의 실제 부모 역할은 생성자 자신이 아닌 생성자의 prototype 프로퍼티가 가리키는 프로토타입 객체

프로토타입 체이닝이란?

한 객체가 있으면 자기 자신의 프로퍼티뿐만이 아니라, 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티 또한 자신의 것처럼 접근하는 것

특정 객체의 프로퍼티나 메서드에 접근하려고 할때, 해당 객채에 접근하려는 프로퍼티 또는 메서드가 없다면 [[Prototype]] 링크를 따라 자신의

부모 역할을 하는 프로토타입 객체의 프로퍼티를 차례대로 검색하는 것

- 디폴트 프로토타입은 다른 객체로 변경 하는 것이 가능하다. 이러한 특징을 이용해 객체지향의 상속을 구현한다

- 객체의 프로퍼티 읽기나 메서드를 실행할 때만 프로토타입 체이닝이 동작한다.

* 송형주, 고현준님의 인사이드 자바스크립트를 보고 원활한 공부를 위하여 요약해보았다.