자바스크립트 작동 원리 (실행 컨텍스트, 호이스팅, 클로저) - FE study4

1. 개념

실행 컨텍스트 : 코드들이 실행되기 위한 환경

즉, 자바스크립트의 실행 컨텍스트는 자바스크립트가 어떠한 방식으로 코드들이 실행되는지에 대한 문법들을 이야기한다.

2. 컨텍스트의 4가지 원칙

1. 먼저 전역 컨텍스트가 생성되고 함수 호출시마다 컨텍스트가 생성됨.

2. 컨텍스트 안에는 변수객체(arguments, variable), scope chain, this 가 생성됨.

3. 컨텍스트가 생성되고 함수가 실행되는데, 변수객체(arguments, variable) => scope chain 순으로 변수를 참조함.

4. 함수 실행이 끝나면 해당 컨텍스트는 사라지고, 페이지가 종료되면 전역 컨텍스트가 사라짐.

'전역 컨텍스트': {
  변수객체 : {
    arguments : null,
    variable : []
  },
  scopeChain : [],
  this : 
}

• this 를 따로 설정하지 않으면 window이며, new 를 호출하면 this를 바꿀 수 있음. //다시보기

3. lexical scoping (정적 스코프) - 자바스크립트

• lexical scope : 함수를 처음 선언하면, 함수 내부 변수는 자기 스코프에서 상위 스코프의 변수를 참조한다.

function foo() {
  console.log(x);
}

function bar() {
  var x = 15;
  foo();
}

var x = 10;
foo(); // 10
bar(); // 10

foo() 랑 bar() 를 서로에게 영향을 안주는 별개의 함수로 생각하면 쉽다.

• dynamic scope

function foo() {
  console.log(x);
}

function bar() {
  var x = 15;
  foo();
}

var x = 10;
foo(); // 10
bar(); // 15

함수의 컨텍스트에 따라 변수를 참조하는 것이 달라진다.

4. 호이스팅

호이스팅 : 변수와 함수 선언이 최상단으로 올려지는 현상

console.log(a);
func();
function func() {
  console.log('함수실행');
}
var a = '변수';

이 경우, 함수실행은 제대로 작동하고, 변수는 초기화가 아직 되지않은 값이라 undefined가 출력된다.

비슷한 경우로, 함수 표현식 (함수를 변수에 담하서 그것을 실행하는 경우) 으로 작성하면, 호이스팅으로 인해 선언만 먼저 되므로, 에러가 뜬다.

5. 클로저

클로저 : 내부함수가 외부함수의 지역변수에 접근할 수 있는데, 외부함수의 실행이 끝나서 컨텍스트가 소멸이 된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있는 매커니즘.

function outter(){
    var title = 'coding everybody';  
    return function(){        
        alert(title);
    }
}
inner = outter();
inner();

이 예제에서 outter함수가 inner 에 초기화되고 컨텍스트가 끝났음에도 inner() 호출이 되었을 때 outter함수의 title변수가 사라지는 것이 아니라 내부 함수에 의해 불러와지고 잘 실행이 된다.

장점 : 이런 방식으로 내부함수에서는 변수를 활용할 수 있지만 외부함수에서는 참조하지 못하게 해서 변수조작이나 변수의 중복을 막을 수 있는 특징이 있다.

그래서, 라이브러리에 많이 사용되는 방식!

[참고] https://opentutorials.org/course/743/6544

[참고] https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0