자바스크립트 상위스코프를 결정하는 기준

Soozynn·2021년 8월 11일
1

JavaScript

목록 보기
1/6

참고하면 좋을 사이트)
참고사이트 poiema web
https://velog.io/@grinding_hannah/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C%ED%95%A8%EC%88%98arrow-function-%EC%95%8C%EA%B8%B0

this 개념을 정리하고 퀴즈를 풀며 헷갈리는 부분들이 있었는데
이는, 내가 scope 개념이 제대로 잡혀있지 않기 때문이라는 것을 알았다
scope의 개념과 자바스크립트가 취급하는 상위스코프의 개념을 정리해보고자 한다


스코프(Scope, 범위)란?

스코프란 식별자의 유효 범위 (변수에 접근할 수 있는 범위)이다. 자신이 어디서, 어떻게 선언되었는지에 따라 스코프가 결정된다.

자바스크립트에서 스코프를 구분해보면 다음과 같이 2가지로 나눌 수 있다.

  • 전역스코프 Global Scope
  • 지역스코프 Local Scope

전역 스코프 (Global scope): 코드 어디에서든지 참조할 수 있다.
지역 스코프 (Local scope or Function-level scope): 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다


모든 변수는 스코프를 갖는다. 변수의 관점에서 스코프를 구분하면 다음과 같이 2가지로 나눌 수 있다.

  • 전역 변수 (Global variable): 전역에서 선언된 변수이며 어디에든 참조할 수 있다.
  • 지역 변수 (Local variable): 지역(함수) 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

변수는 선언 위치(전역 또는 지역)에 의해 스코프를 가지게 된다.
즉, "전역에서 선언된 변수"는 "전역 스코프를 갖는 전역 변수"이고, "지역(자바스크립트의 경우 함수 내부)에서 선언된 변수"는 "지역 스코프를 갖는 지역 변수"가 된다.


전역 스코프를 갖는 전역 변수는 전역(코드 어디서든지)에서 참조할 수 있다.
전역 변수전역 객체(Global Object) window의 프로퍼티이다.

지역(함수 내부)에서 선언된 지역 변수는 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

자바스크립트함수 레벨 스코프(function-level scope)를 따른다.
함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다(참조할 수 없다)는 것이다.

단, ECMAScript 6에서 도입된 let keyword를 사용하면 블록 레벨 스코프를 사용할 수 있다.

위에서 말했듯 자바스크립트는 함수 레벨 스코프이므로 블록 레벨 스코프를 사용하지 않는다
때문에 함수 밖에서 선언된 변수코드 블록 내에서 선언되었다할지라도 모두 "전역 스코프"을 갖게 된다

if (true) {
var x = 5;
}
console.log(x);

변수 x는 코드 블록 내에서 선언되었지만, 자바스크립트는 함수 레벨 스코프이므로 x는 전역변수이다



스코프 체인이란?

자바스크립트 엔진은 식별자를 찾을 때 일단 자신이 속한 스코프에서 찾고 그 스코프에 식별자가 없으면 상위 스코프에서 다시 찾아 나간다. 이 현상을 "스코프 체인" 이라고 하며 스코프가 중첩되어있는 모든 상황에서 발생한다

먼저, 함수의 상위스코프를 정하는 기준은 2가지가 있다.

  • 동적스코프
  • 렉시컬스코프

동적스코프는 함수를 어디서 "호출"하였는지에 따라 상위 스코프를 결정하는 것이고
렉시컬스코프 함수를 어디서 "선언"하였는지에 따라 상위 스코프를 결정하는 것이다.

🔷 자바스크립트는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다.
함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미를 주지 않는다.

내가 this 문제를 풀면서 헷갈렸던 부분이 바로 이 부분이다.
자바스크립트의 상위스코프 기준은 바로 렉시컬스코프이다 따라서 호출하는 시점이 아닌 "함수를 어디서 선언하였는지"를 중점적으로 보며 문제에 접근하여야 한다

0개의 댓글