스코프란 무엇인가?
A. 변수에 접근할 수 있는 범위, 전체에서 접근할 수 있느냐 일부 지역에서만 접근할 수 있느냐에 따라 전역과 지역으로 나눠진다.
현재 실행되는 컨텍스트, 값과 표현식이 "표현" 되거나 참조 될 수 있는 컨텍스트. 만약 변수 또는 표현식이 해당 스코프 내에 있지 않다면 사용할 수 없다.
스코프는 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.
함수는 자바스크립트에서 클로저 역할을 해서 스코프를 생성하므로 함수 내에 정의된 변수는 그 함수 외부에서는 접근 할 수 없다. - by mdn
-
전역 스코프(Global Scope): 전체 영역에 선언되어 있어 어디에서든지 해당 변수에 접근할 수 있는 범위
-
지역 스코프(Local Scope): 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없는 범위
자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하는데, 함수 내부에 선언한 변수는 해당 함수 내부에서만 접근할 있고 이것을 함수 스코프(function-scoped)라고 하며 지역 스코프의 일종이다.
자바스크립트는 변수의 유효 범위를 검색할 때 안에서부터 바깥으로 찾아나가는데, 이것을 스코프 체인(scope chain)이라고 한다.
스코프는 식별자(변수, 함수 등)을 스코프 내에 숨겨 충돌을 피하거나 외부에서 접근할 수 없도록 캡슐화 하는 용도이다.
실행 컨텍스트
A. 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체.
전역 코드/eval 코드/함수 코드/블록문({..})을 통해 만들어지며 스택 구조를 가진다. 실행되는 순서대로 콜 스택(call stack)에 쌓였다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 방식으로 동일한 환경과 순서를 보장한다.
실행 컨텍스트의 객체 안에는 다음의 요소가 담긴다.
- VariableEnvironment : 현재 컨텍스트 내의 식별자 및 외부 환경에 대한 정보. 선언 시점의 LexicalEnvironment에 대한 스냅샷으로, 변경사항은 반영되지 않음
- environmentRecord: 컨텍스트와 관련된 코드의 식별자 정보. 컨텍스트 전체를 처음부터 끝까지 훑으면서 매개변수 식별자나 선언된 함수 등을 수집하는데, 이 과정을 호이스팅이라고 한다.
- outer-EnvironmentReference: 현재 호출된 함수가 선언될 당시의 Lexical Environment를 참조하는 포인터로 연결리스트 형태를 갖는다. 해당 함수가 속한 상위 스코프의 범위를 계속 찾아 올라가며 전역 콘텍스트의 Lexical Environment까지 스코프 체인을 가능하게 한다. - LexicalEnvironment : 처음에는 VariableEnvironment와 같았다가 코드 진행에 따라 변경 사항이 실시간으로 반영된다. 일반적으로는 해당 함수가 가지는 자신의 로컬 스코프 범위를 의미한다.
- environmentRecord
- outer-EnvironmentReference - ThisBinding :
this식별자가 바라보고 있는 대상 객체
Async-Await와 Promise의 차이
A. 에러 핸들링과 코드 가독성 면에서 async-await이 더 좋다.
에러 핸들링
- Promise 는
.catch()로 에러 핸들링이 가능하지만, 모든 에러를 처리하려면.catch()가 중복되어 쓰일 수 있고 이것은 어떤.then에서 에러가 발생했는지 찾기 어렵게 만든다. - async/await 은
try-catch()문을 활용해야 하는데.catch()를 한 번만 써서 모든 에러를 핸들링 할 수 있다.
코드 가독성
- Promise는
.then()지옥의 가능성이 있어 코드가 길어질수록 async/await 가 가독성이 좋다. - async/await 은 비동기 코드를 동기 코드처럼 읽히게 해주기 때문에 코드 흐름을 이해 하기 쉽다.
- async/await을 사용하면 Promise를 사용 할 때 응답 데이터로 들어오는 변수(일반적으로 많이 사용되는 data, response 등)를 없애 변수의 낭비를 줄이고 코드를 깔끔하게 작성할 수 있다.
