함수와 프로토타입 체이닝 (1)

자바스크립트 단골 면접 질문 중 하나인 this란 무엇인가와 prototype에 대한 설명을 작성하기 위해서 이 글을 작성한다.

이 글은 책 '인사이드 자바스크립트' 중 4번째 챕터인 함수와 프로토타입 체이닝을 읽고 정리한 글이다.

 

책 내용 중 생성자 함수와 관련된 부분 위주로 정리할 것이다.

 

자바스크립트에서 가장 중요한 개념 1순위는 함수이다.

 

4.1 함수 정의

 

함수를 정의하는 방법은 세가지다.

1. 함수 선언문

2. 함수 표현식

3. Function 생성자 함수 (잘 안쓰임)

 

4.1.1. 함수 리터럴

function add(x,y) {
	return x + y 
}

위와 같은 모양이 함수 리터럴이다.

 

4.1.2 함수 선언문 방식으로 생성

- 함수 리터럴 형태와 같다. 반드시 함수명이 정의되어 있어야 한다.

 

4.1.3 함수 표현식 방식으로 생성

- 자바스크립트에서는 함수도 값 취급 받기 때문에 변수에 할당하는 것이 가능하다. 함수 리터럴을 하나의 변수에 할당하는 것이 함수 표현식 방식으로 생성하는 것이다. 보통 함수 리터럴은 익명 함수를 쓴다. 물론 기명 함수를 사용해도 상관 없다.

 

4.1.4 Function 생성자 함수로 생성

- 잘 안쓰인다.

 

4.1.5 함수 호이스팅

- 선언식 방식으로 선언된 함수는 호이스팅이 되어 최상단에 선언된 것과 같은 효과를 낸다. 그래서 실제로 코드 상 선언 전이라도 해당 함수를 사용할 수 있게 되는데, 더글라스 크락포드는 구조를 엉성하게 만들 수 있다는 우려 때문에 표현식 사용을 권장하고 있다.

 

 

4.2 함수도 객체다

 

함수도 프로퍼티를 가질 수 있다.

자바스크립트 함수는 일급 객체이며, 값으로 취급된다.

함수 생성 시 프로퍼티 중에 prototype 이라는 프로퍼티가 생성된다. (화살표 함수는 생성 안됨)

모든 객체의 부모 역할을 하는 __proto__와는 다르게 함수가 생성자 함수로 쓰일 때, 생성된 객체의 부모 역할을 하는 __proto__가 바로 이 prototype 프로퍼티이다.

 

4.3 함수의 다양한 형태

4.3.1 콜백 함수

- 어떤 이벤트가 발생했거나 특정 시점에 도착했을 때 시스템에서 호출되는 함수

- 특정 함수의 인자로 넘겨서, 코드 내부에서 호출되는 함수

 

4.3.2 즉시 실행 함수

- 함수를 정의함과 동시에 바로 실행하는 함수

- 만드는 법

  1. 함수 리터럴 전체를 ()로 감싸준다

  2. 함수가 바로 호출되도록 맨 뒤에 () 이렇게 호출해준다. 이 괄호 안에 함수의 인자를 넣어준다.

- 함수 외부의 코드에서 함수 내부의 변수를 엑세스 하는 게 불가능하다. 전역 네임스페이스를 더럽히지 않으므로 다른 라이브러리들이 동시에 로드 되더라도 라이브러리 간 변수 이름 충돌을 방지할 수 있다.

 

4.3.3 내부 함수

- 함수 내부에 정의된 함수

- 내부 함수에서는 자신을 둘러싼 부모 함수의 변수에 접근이 가능하다 (스코프 체이닝)

- 일반적으로 자신이 정의된 부모 함수 내부에서만 호출이 가능하다. 하지만 부모 함수에서 내부 함수를 외부로 리턴하면 부모 함수 밖에서도 내부 함수를 호출하는 것이 가능하다.

 

function parent() {
  var a = 100;
  var child = function () {
    console.log(a)
  }
  
  return child;
}

var inner = parent();
inner();

이렇게 실행이 끝난 parent()와 같은 부모 함수 스코프를 기억하고 있는 것 또는 그 스코프를 참조하는 함수를 클로저라고 한다.

 

4.3.4 함수를 리턴하는 함수

- 그냥 함수를 리턴하는 함수. 

- 호출과 동시에 자기 자신을 재정의 하도록 할 수 있다.