JavaScript Scope

유지후·2022년 8월 21일

목록 보기

1/4

Scope : 우리가 생각하는 코드의 접근 범위를 결정하는 개념(유효범위)

모든 변수는 범위를 가지게 되는데 , 선언 위치에 따라 범위가 달라진다.

Global scope : 전역 스코프 (코드를 어디에서나 참조할 수 있음.)
Local scope or Funtion-level scope : 지역 스코프
(함수 자신과 하위 함수에서만 참조할 수 있음.)

Global variable : 전역 변수
Local variable : 지역 변수

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

var a = 1;
function foo () {
  var a = 2;
  console.log(a); // 2
}
foo();

var a = 1 이부분이 전역변수
foo 함수안에서 선언된
var a = 2 이부분이 지역변수

어떤 변수에 대한 정보를 필요로 할때 자바스크립트는 현 실행문의 위치를 기준으로 하위 Scope부터 시작하여 해당 변수의 값을 찾아감.

변수를 선언할때, 해당 변수가 사용되는 스코프를 잘 판단하여 불필요하게 상위 스코프에 선언하지 않도록 해야 함.

그리고 전역 변수의 사용은 변수 이름이 중복될 수도 있고 , 의도치 않은 재할당으로 인해 코드를 예측하기 어렵게 만듦 => 사용 지양

참고로 var는 함수 블록 스코프만 가능한데
ES6 에서 나온 let,const 는 코드 블록 스코프도 가능함
if(true) {
var a = 1;
let b = 2;
}
console.log(a) // 1(전역변수)
console.log(b) // 2(지역변수)

Lexical Scope(렉시컬 스코프) : 함수가 어디서 호출되는지가 아니라 어디서 선언했는지에 따라 정해지는 것
다른말로 정적 스코프(Static scope)라고도 함

var x = 1; // global

function foo1() {
  var x = 10;
  foo2();
}

function foo2() {
  console.log(x);
}

foo1(); // 1
foo2(); // 1

당연히 foo1은 10 foo2 는 1 이 나올줄 알았는데
둘다 1이 나온다.

JavaScript