스코프(Scope) (1) - 전역, 지역(함수, 블록)

스코프(Scope)는 어떤 변수에 접근 혹은 참조 가능한 범위와 같다.

스코프는 전역 스코프(Global Scope), 지역 스코프(Local Scope)로 나뉜다. 이는 블록(Block)으로 나뉘는 경우가 대부분이다. 블록은 { }으로 감싸진 곳을 의미한다.  

 

 

전역 스코프

전역 스코프는 블록({ })밖에 선언된 변수를 뜻한다. 이러한 변수를 전역변수(Global Variable)라고도 부른다. 블록 밖에서 선언되었기에, 블록 내부를 포함한 어느 곳에서든 접근 가능하다.

var global = "전역변수";

function isGlobal() {
	return `${global}은 글로벌하다`
}

isGlobal(); // output: 전역변수는 글로벌하다

전역 스코프는 어디에서나 접근 가능한 장점이 있지만, 독이 될 수 있다. 이를 Scope Pollution(의역: 스코프 오염)이라 부른다. 

let a = 50;

const myNum = function() {
  a = 100;
  console.log(a);
}

myNum(); // output: 100
console.log(a); // output: 100

전역변수로 a라는 숫자를 50으로 선언했다. 

그 후, 블록({ }) 안에 지역변수로 a를 새롭게 선언했는데 실수로 let을 쓰는 걸 까먹었다. 

그렇다면 전역변수의 a도 100으로 바뀌면서, myNum()과 a 모두 100으로 바뀐다. 

이와 같은 실수를 방지하려면, 전역스코프에 변수를 선언하기보다 지역스코프에 선언하는 것이 더 좋다. 

 

지역 스코프

지역 스코프는 블록({ })안에 선언된 변수를 말한다. 지역 스코프는 크게 함수 스코프(Function Scope)와 블록 스코프(Block Scope)로 나뉜다. 두 가지 모두 오직 해당 블록안에 있을 때만 접근이 가능한 변수이다. 이러한 변수를 지역변수(Local Variable)라고도 부른다. 

 

먼저 위의 전역 스코프의 모습과 비슷한 함수 스코프에 대해 알아보자. 가장 큰 차이는 역시 변수 생성이 블록({ }) 안에 있다는 것이다. 

function isLocal() {
	var local = "지역변수";
	return `${local}는 로컬하다`
}

isLocal(); // output: 지역변수는 로컬하다

만약 바깥에서 변수 local를 부른다면 아래와 같은 참조에러가 뜬다.

function isLocal() {
	var local = "지역변수";
	return `${local}는 로컬하다`
}

console.log(local); // output: Uncaught ReferenceError: local is not defined

 

블록 스코프 역시 블록({ }) 안에 변수가 생성된다. 함수 스코프와 다른 점이 있다면 const 혹은 let으로 변수를 선언한다. 

{
  const hey = "Hello";
  console.log(hey);
}
// output: Hello

console.log(hey); // output: Uncaught ReferenceError: hey is not defined