[자바스크립트] 짧게짧게 개념정리①

[먼저보면 좋은 게시글]

- [프로그래밍기초] 컴퓨터는 명령을 내부적으로 어떻게 처리하는가 : http://jinbroing.tistory.com/109

- [자바스크립트] 카테고리 글

[짧게 개념정리]

- 변수 선언 : var로 선언해야함, 메모리에 올린다는 것, 메모리의 주소를 저장함. 무분별한 선언 === 메모리 누수

- 변수 종류 : 전역, 지역, 지역 선언의 경우 

- 호이스팅 : 변수 선언과 값 할당을 구분, 선언부를 최상단으로 끌어올리고 undefined 임의할당, 함수가 실행되면서 값 할당

- undefined : 변수 선언만 되었고, 값이 할당되지않은 상태, undefined가 자동 할당됨

- 스코프 : 함수 단위의 유효범위

1) 함수 내에 정의된 변수, 함수는 함수 내에서 사용, 함수가 정의되는 시점에 지역변수, 내부함수가 정의됨(컨텍스트, AO)

2) 기본적으로 자바스크립트는 함수레벨스코프, 함수 안에서 정의한 변수는 함수 내 어디에서나 사용가능

3) 뒤에서 나오는 스코프체인을 통해 내부 함수 참조 가능

4) ES6부터 블록레벨스코프(  {   ...   }  - 괄호 내에 정의된 변수는 괄호 내에서만 사용가능) 도 지원함

function a(){
     var name = "a";
     b()
}
 
function b(){
     return name;
}
 
a();
/*
     name is not defined 에러뜸, a가 정의될 때 name이 정의되고,
     b가 정의될 때에는 name 변수가 존재하지않아 스코프 형성때 정보없음(undefined)
*/

- 실행컨텍스트 : global 코드, function, eval 등 자바스크립트 코드가 실행되면 실행컨텍스트에 들어와 실행됨, 실행 관리자

1) global 코드 : 어플리케이션이 실행되면 모든 코드가 글로벌 컨텍스트로, 컨텍스트 스택의 가장 아래에 위치, 프로그램 종료 시 제거

2) function 코드 : 호출될 때 컨텍스트가 만들어지며, 내부에는 함수 정보가 포함된 객체가 있음, 종료된 후 컨텍스트 스택에서 제거됨

3) eval 코드 : 2번 항목과 동일

- callee : 현재 실행되고 있는 실행컨텍스트

- caller : 실행컨텍스트 내에서 다른 컨텍스트를 실행시키기위해 필요한 것

- 컨텍스트 스택 흐름 : callee가 종료된 후 caller가 다음 컨텍스트를 callee로, 동작을 마친 callee는 return 값을 뿌림

- 컨텍스트 스택 구조 : 글로벌 컨텍스트 > 함수 컨텍스트

- 컨텍스트 내부 구조 : Variable Object(변수객체), Scope chain(스코프체인), thisValue로 이뤄져있음

- Variable Object(변수 객체) : 컨텍스트와 연관된 전역객체나 함수의 데이터 정보를 담고 있는 객체

- Variable Object 종류 : 전역객체(window, VO), 함수객체(AO, 함수의 실행컨텍스트가 생성되면 Activation Object 생성)

실행컨텍스트 = {
     Variable Object : { 
          ...
     }
}
/* 
     전역 실행컨텍스트, function 실행컨텍스트, eval 실행컨텍스트 각각 객체 생성
*/

- 전역객체와 함수객체의 차이

1) 전역객체는 어디서나 참조 가능함, Math, String, window(브라우저 다루는 객체) 등 자바스크립트가 제공하는 객체를 가지고 있음

2) 전역객체는 프로퍼티명(전역변수명, 전역함수명, Math, String 등)으로 접근가능함

3) 함수객체 즉 Variable Object는 직접적으로 접근 불가, caller에 의해서 함수가 실행되면 Activation Object가 생성됨

4) Activation Object는 Variable Object의 내용을 그대로 가지고 있음, 이 객체를 함수의 변수 객체로 사용 

5) 함수 변수객체의 프로퍼티 + 값을 알고싶다면 함수 내에 함수명.프로퍼티로 콘솔찍어보기

function foo(x, y){
     var name = "jinbro";
     function bar() {}
}
 
foo(1,2);
 
/*
     Activation Object 프로퍼티 
     - x, y, name 변수 각각
     - arguments : [1, 2, caller: function] 인자를 배열형태로 저장
*/

- 호이스팅 + 실행컨텍스트 + 변수객체

0) 전역변수, 전역함수 선언부 최상위단으로 당겨온 후 전역객체(window)의 프로퍼티로

1) 함수 Variable Object 생성(프로퍼티 생성, 값은 undefined), 컨텍스트 스택에 실행컨텍스트가 쌓임

2) caller가 컨텍스트 스택 중 호출 : callee

3) 해당 함수 호출될 때 Variable Object(함수 Activation Object) 프로퍼티 값 할당

- 스코프체인 : Activation Object + [[Scopes]]

1) 현재 스코프(실행컨텍스트, VO/AO)에서 변수가 없다면(프로퍼티가 X) 부모 객체의 AO( [[Scopes]] )에서 찾음

2) 없으면 최상위 객체인 window(VO)에서 접근하여 변수를 찾는 개념

- undefined : 스코프체인을 통해서 찾다찾다 못찾으면 undefined를 띄움

- 스코프체인과 실행컨텍스트 역설

function foo(){
      var name = "jinbro"
 
      return (function bar(){
          console.log(name)
     })()
}
 
foo()
 

1) 실행컨텍스트 싸이클을 되새겨보면 foo 함수가 호출하고 내부적으로 bar를 리턴하면서 foo는 끝남

2) 컨텍스트 스택에서 foo는 제거되고 bar가 callee가 되어 함수가 동작을 하는데 foo는 이미 컨텍스트에서 사라져 AO가 정보가 없어야함

3) 하지만 bar 함수에서 foo 함수의 지역변수(foo의 AO 변수 프로퍼티) name이 참조가 되고(스코프체인) 콘솔창에 name의 값이 찍힘

=> 이미 없어진 foo 함수 객체(AO)를 참조하는 상황, 여기서 등장하는 개념이 클로저

- 자바스크립트 코드 흐름

1) 자바스크립트 코드 실행(파일 실행)

2) 호이스팅 : 전역객체(VO, window)

3) 글로벌 컨텍스트 생성 : VO, this, scope chain, 글로벌은 어플리케이션이 실행되면 실행되는 것

4) 클라이언트 요청에 의한 자바스크립트 함수 호출 

5) 함수 컨텍스트 생성 : 함수별 객체(AO) 생성 후 AO 포함, this, scope chain

6) 함수 종료 후 함수 컨텍스트 제거, 객체 제거

7) 어플리케이션 종료 후 글로벌 컨텍스트 제거, 객체 제거

[다음 포스팅]

- 짧게짧게 개념정리 2탄 : 클로저, thisValue(실행컨텍스트), 프로토타입 등

[참고자료]

- MDN, 클로저 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures

- TOAST Meetup! 자바스크립트의 스코프와 클로저 : http://meetup.toast.com/posts/86

- 개인블로그, 코어 자바스크립트(7) - 클로저 : http://blog.jui.io/?p=25

- Yuby's Lab(개인블로그), [자바스크립트] 변수로 자바스크립트 이해하기 : https://goo.gl/GNvhvB

- Yuby's Lab(개인블로그), [자바스크립트] 그림으로 이해하는 Scopes, Closures : https://goo.gl/3l1GlO