스코프(scope)란
scope란 함수가 실행될때, 함수 내에서 변수에 대한 접근이 어떻게 되든지를 나타낸다.
컨텍스트(context)란
this 키워드 값이 무엇인지를 나타내는 용어이다. 실행 컨텍스트 내에서 어떤 객체를 현재 참고하고 있는지를 의미한다.
만약 함수가 글로벌 스코프에서 선언되었다면, 이때의 컨텍스트는 global(window)이다.
함수 스코프(var) 와 블록 스코프(let, const)
함수 스코프를 이용해서 변수 i를 초기화했을 경우
function loop() { for(var i = 0; i < 5; i++) { console.log(i); } console.log('final',i); } loop(); /* 0 1 2 3 4 final 5 */
이 경우 블록 스코프가 아닌 함수 스코프를 따르게 되는데, loop라는 함수 스코프 안에 둘 모두 존재하기 때문에 문제없이 i에 접근해서 값을 출력한다.
자바스크립트는 기본적으로 함수 스코프를 따르고 새로운 함수가 생성될때 새로운 스코프가 발생한다.
블록 스코프를 이용해서 변수 i를 초기화했을 경우
function loop() { for (let i = 0; i < 5; i++) { console.log(i); } console.log('final', i); } loop(); /* 0 1 2 3 4 final undefined */
블록스코프는 {}이 생성될 때마다 새로운 스코프가 형성되는 것을 의미
for문 내에서 i를 블록 스코프로 선언한 순간, 변수i는 for문 내에서만 종속되며, for문 외부에서는 i에 접근할 수가 없다.
스코프가 다르기 때문이다.

'리액트' 카테고리의 다른 글
| [React] React GlobalStyle (0) | 2024.03.07 |
|---|---|
| FE 면접 질문 (0) | 2024.03.03 |
| [Front] 시멘틱태그 (0) | 2024.02.27 |
| [JavaScript] Closure (0) | 2024.02.23 |
| [React] useState 와 일반 변수의 차이 (0) | 2024.02.22 |