📌 스코프, 호이스팅, TDZ
- 스코프...?
: ‘변수에 접근할 수 있는 범위’
전역 스코프(Global Scope) : 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미.
지역 스코프(Local Scope) : 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미.
ex)
함수 스코프(function-scoped) : 자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성함. 그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있는데요. 함수 스코프가 바로 지역 스코프의 예라고 할 수 있습니다.
출처 : https://medium.com/@su_bak/javascript-%EC%8A%A4%EC%BD%94%ED%94%84-scope-%EB%9E%80-bc761cba1023
- 호이스팅...?
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.
반면, let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다.
따라서, 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다.
다만, 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.
TDZ(Temporal Dead Zone)
: 일시적인 사각지대. 이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 의미합니다.변수 사용시...
- 선언 단계(Declaration phase) : 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다.
- 초기화 단계(Initialization phase) : 변수 객체에 선언 단계의 변수를 위한 '메모리를 만드는 단계' 입니다. 이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다.
- 할당 단계(Assignment phase) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계 입니다.
var 키워드 변수의 경우...!
변수 선언 단계와 초기화 단계를 동시에 진행합니다. 그렇기 때문에 변수를 선언하기 전에 호출을 해도 undefined로 호출이 되는 호이스팅이 발생하는 것 입니다.let으로 선언된 변수의 경우...!
선언단계와 초기화 단계가 분리되어서 진행이 됩니다.
그렇기 때문에 실행 컨텍스트에 변수를 등록했지만,
메모리가 할당이 되질 않아 접근할 수 없어 참조 에러(ReferenceError)가 발생하는 것 입니다.
이것을 보고 우리가 호이스팅이 되질 않는다고 생각 할 수 있습니다.
참고:https://noogoonaa.tistory.com/78
📌 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
- 함수 선언문. ➡ 앞서서 호출해도 가능 !
function garden1(){... };
- 함수 표현식. ➡ 앞서서 함수를 호출하면 error.
const garden2(){... };호출 방식은
garden1();, garden2();로 같지만, '함수 호출 위치'에 따라 차이가 발생한다.
함수 선언문은 함수 호출이 선언보다 앞에 있어도 실행이 된다.
반면, 함수 표현식은 참조에러가 발생하여 실행되지 않는다.
📌 실행 컨텍스트와 콜 스택
📃 Execution context(실행 컨텍스트)
자바스크립트 코드가 실행되는 환경을 의미한다.
자바스크립트에서 대표적으로 두 가지 타입의 Execution context가 있다.
실행할 코드에 제공할 환경 정보들을 모아놓은 객체들로
자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.
- Global Execution context
자바스크립트 엔진이 처음 코드를 실행할 때 Global Execution Context가 생성된다. 생성 과정에서 전역 객체인 Window Object (Node는 Global) 를 생성하고 this가 Window 객체를 가리키도록 한다.- Function Execution context
자바스크립트 엔진은 함수가 호출 될 때마다 호출 된 함수를 위한 Execution Context를 생성한다.
모든 함수는 호출되는 시점에 자신만의 Execution Context를 가진다.<실행 컨텍스트가 활성화되는 시점에서 일어나는 현상.>
1. 호이스팅이 발생한다(선언된 변수를 위로 끌어올린다)
2. 외부 환경 정보를 구성한다
3. this 값을 설정한다.
📃call stack
코드가 실행되면서 생성되는 Execution Context를 저장하는 자료구조.
엔진이 처음 script를 실행할 때, Global Execution Context를 생성하고 이를 Call Stack에 push한다.
➡그 후 엔진이 함수를 호출할 때 마다 함수를 위한 Execution Context를 생성하고 이를 Call Stack에 push 한다.
➡자바스크립트 엔진은 Call Stack의 Top에 위치한 함수를 실행하며 함수가 종료되면 stack에서 제거(pop)하고 제어를 다음 Top에 위치한 함수로 이동한다.#프로그램이 함수 호출을 추적할때 사용한다.
https://ko.m.wikipedia.org/wiki/%ED%8C%8C%EC%9D%BC:Call_stack_layout.svg
https://junilhwang.github.io/TIL/Javascript/Domain/Execution-Context/#_4-outerenvironmentreference%E1%84%8B%E1%85%AA-scope
https://ssminji.github.io/2020/02/19/call-stack/
https://medium.com/sjk5766/call-stack%EA%B3%BC-execution-context-%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-3c877072db79
📌 스코프 체인, 변수 은닉화
📃 스코프 체인
함수는 '전역'에서 정의할 수도 있고 함수 '몸체 내부'에서도 할 수 있다. 함수 몸체 내부에서 함수가 정의된 것을 '함수의 중첩', 중첩 함수를 포함하는 함수를 '외부 함수'라고 한다.
함수는 중첩될 수 있으므로 함수의 '지역 스코프'도 중첩될 수 있는데, 이는 스코프가 함수의 중첩에 의해 '계층적 구조'를 갖는다는 것을 의미한다. 이때 '외부 함수의 지역 스코프'를 중첩 함수의 '상위 스코프'라고 지칭한다.
<스코프 체인에 의한 변수 검색>
변수를 참조할 때,
'변수를 참조하는 코드의 스코프'에서 시작하여 참조할 변수가 존재하지 않는다면
➡상위 스코프의 방향으로 이동하며 선언된 변수를 검색한다.이를 통해 상위 스코프에서 선언한 변수를 하위 스코프에서 참조할 수 있다. 반대로 하위 스코프에서 유효한 변수는 상위 스코프에서 참조할 수 없다.
📃 캡슐화와 정보 은닉
캡슐화는..?
객체의 상태를 나타내는 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것을 말한다.
캡슐화는 객체의 특징 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 '정보 은닉'이라 한다.정보 은닉은..?
적절치 못한 접근으로부터 객체의 상태가 변경되는 것을 방지해 정보를 보호하는 것을 말한다.대부분의 객체지향 프로그래밍 언어는 클래스를 정의하고 그 클래스를 구성하는 멤버에 public, private, protected 같은 접근 제한자를 선언하여 공개 범위를 한정할 수 있다. 하지만 자바스크립트는 접근 제한자를 제공하지 않는다.
