[개념] 스코프와 클로저, this, 호이스팅

 

스코프와 클로저

1) 스코프 : 변수의 접근성에 관한 것

- 전역 스코프 : 전역에 선언되어 있어 어느 곳에서든 해당 변수에 접근할 수 있는 것

- 함수 스코프 : 해당 지역에서만 접근 가능해, 지역을 벗어난 곳에서는 접근 불가

- 블록 스코프 : 블록 {}이 생성될 때마다 새로운 스코프가 생성(ES6)

2) 클로저 : 함수가 또 다른 함수 내부에 중첩된 형태

 

this

1) Java

- 현재 객체를 참조

 

2) Javascript

- javascript는 현재 실행 컨텍스트를 참조, 하나의 객체

- 실행 컨텍스트 스택이 존재

  -> 스택의 맨 아랫 부분에 모든 동작의 시작점인 전역 컨텍스트가 위치

- 실행 컨텍스트 : 동작 중인 실행 가능한 코드의 소유권

 

3) 실행 가능한 코드

- 전역 코드 : Javascript 프로그램이 시작되는 곳부터 수행되는 코드, 브라우저의 경우 window 객체가 존재

- Eval 코드 : 내장된 eval() 함수의 인자로 전달되는 문자열 값

- 함수 코드 : 함수의 본문 코드, 함수 내부의 모든 코드를 의미하지는 않음

 

4) 실행 컨텍스트를 변경하는 방법

- call() : 리스트 형태의 인자를 전달받음, 첫 번째 인자를 함수 코드의 실행 컨텍스트로 사용

- apply() : 배열 형태의 인자를 전달받음, 첫 번째 인자를 함수 코드의 실행 컨텍스트로 사용

- bind() : 새로운 함수의 실행 컨텍스트로 전달받은 첫 번째 인자와 바인딩될 새로운 함수를 생성, 새로운 함수는 실행 컨텍스트를 변경하지 않음

 

5) 실행 컨텍스트

- 생성자 함수 호출 : new User() -> 함수 본문 내의 this가 다른 세 가지 유형의 함수 호출로 만들어진 인스턴스를 제외하고 생성자로 생성된 객체를 참조

- 직접 함수 호출 : ask() -> 함수 본문 내부의 this가 다른 세 가지 유형의 함수 호출로 만들어진 인스턴스를 제외하고 전역 컨텍스트를 참조

- 메소드 호출 : user.speak() -> 함수 본문 내부의 this가 다른 세 가지 유형의 함수 호출로 만들어진 인스턴스를 제외하고 메소드에 속한 객체 참조

- 컨텍스트 변경 호출 : ask.call(this), ask.apply(this) -> 함수 본문 내부의 this가 다른 세 가지 유형의 함수 호출로 만들어진 인스턴스를 제외하고 call() 메소드의 첫 번째 인자로 전달받은 객체를 참조

 

호이스팅

- Javascript 인터프리터가 함수 선언과 변수 선언을 선언들이 속해 있는 스코프의 최상단으로 끌어올리는 방법

 

ex1)

msg = 'no msg';
var msg;
console.log(msg); // no msg 출력

function msg() {
	console.log('msg'); 
}
msg(); // Uncaught TypeError 출력

- 위 주석과 같이 출력되는 이유 -> Javascript 인터프리터가 다음과 같이 코드를 처리하기 때문

// 함수 선언을 최상위로 위치
function msg() {
	console.log('msg'); 
}
// 변수는 함수 아래
var msg;
msg = 'no msg';

console.log(msg); // no msg 출력
msg(); // Uncaught TypeError: msg is not a function 출력

var msg = function() {}와 같은 함수 표현식은 변수 선언이기도 하기 때문에 최상위로 이동하지 않음

 

ex2)

function work() {
	study();
    
    var study = function() {
   		console.log('Study at work!');
    }
    return;
    function study() {
   		console.log('Study at home!');
    }
}

study(); // Study at home! 출력

- 인터프리터가 다음과 같이 코드 처리

function work() {
	function study() {
   		console.log('Study at home!');
    }
    var study;
	study();
    study = function() {
   		console.log('Study at work!');
    }
    return;
}

study(); // Study at home! 출력

인터프리터는 함수 선언을 스코프의 최상위로 이동시키고 나서 변수 선언을 하지만, 대입은 하지 않음

 

=> Javascript 인터프리터는 해당 스코프의 최상위에 함수 선언을 이동시키고, 그 다음 대입 표현식이 없는 변수 선언을 이동시킴, 그래서 return 절 이후 함수를 선언해도 문제가 없음