변수가 접근할 수 있는 범위, 스코프 Scope

게임에서 스코프(Scope:범위)란 일반적으로 총에 장착하는 조준경을 말한다. JS의 Scope는 제한된 범위를 들여다보기 위한 개념으로, ‘변수에 접근할 수 있는 범위’로 사용된다. 이번 시간에는 Scope의 종류과 각 선언 키워드인 let, const를 어떻게 사용해야 하는지 알아본다. (수업 외 참고가 된 자료)

 

 

---

Scope의 정의와 기초 규칙

Scope란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다. 즉, 변수 접근 규칙에 따른 유효 범위를 뜻한다.

• scope의 범위는 중괄호{} 또는 함수에 의해 나누어진다.
• 범위 밖에서 선언한 변수는 안에서 접근할 수 있다. 하지만 안에서 선언한 변수는 밖에서 접근할 수 없다. (안→밖 참조만 가능)
• 스코프의 가장 바깥쪽을 전역 스코프(Global Scope), 안쪽의 나머지 스코프는 지역 스코프(Local Scope)라고 한다.
• 전역 스코프에서 선언한 변수는 전역 변수, 지역 스코프에서 선언한 변수는 지역 변수 라고 한다.
• 지역 변수는 전역 변수보다 더 높은 우선순위를 갖는다.

 

다음 예제를 직접 개발자 도구에 입력해 보고, 어떤 결과가 나오는지 확인해 보자.

let name = 'Alex'; // 전역 범위에서 선언된 전역 변수

function showName() {
  let name = 'James'; // showName이라는 함수 지역 범위에서 선언된 지역 변수
  console.log(name); // 두 번째 출력
}

console.log(name); // 첫 번째 출력
showName();
console.log(name); // 세 번째 출력

• 첫 번째 출력 → 'Alex' 
  첫째 줄의 전역 변수로 선언된 name인 Alex를 출력한다. showName 함수 안쪽은 접근할 수 없기 때문이다.
• 두 번째 출력 → 'James' 
  함수 안에서 선언한 name인 James에 접근할 수 있다. 지역 변수 James와 전역 변수 Alex는 변수 이름이 let = name으로 동일하지만, 지역 변수가 전역 변수보다 높은 우선순위를 갖기 때문에 지역 변수를 참조한다. 이렇듯 동일한 변수 이름으로 인해 지역 변수가 전역 변수를 가리는 현상을 쉐도잉(variable shadowing)이라고 한다.
• 세 번째 출력→ 'Alex' 
  첫 번째 출력과 마찬가지로, howName 함수 안쪽은 접근할 수 없기 때문에 전역변수 Alex를 출력한다.

 

만약 지역 스코프의 name을 변수로 선언하지 않으면 어떻게 될까?

let name = 'Alex'; // 전역 범위에서 선언된 전역 변수

function showName() {
  name = 'James'; // name에 'James'라는 값 재할당
  console.log(name); // 두 번째 출력
}

console.log(name); // 첫 번째 출력
showName();
console.log(name); // 세 번째 출력

let을 이용하지 않으면 함수 내부에 name 변수는 새로 선언하는 게 아닌, 전역 범위에 name 변수를 그대로 사용하겠다는 의미다. 따라서 첫 번째 출력은 'Alex'가, 함수 실행 뒤에는 전역변수 name에 'James'라는 값을 다시 할당해 두/세번째 출력은 'James'가 된다.

 

 

---

Scope의 종류와 변수 선언

📌 블록 스코프(block Scope)

중괄호를 기준으로 범위를 구분한다.

if (true) {
	console.log('I am in the block');
} // 중괄호로 감싼 부분이 블록 스코프

for (let i=0; i<10; i++) {
	console.log(i)
} // 중괄호로 감싼 부분이 블록 스코프

{
	console.log('It works');
} // 중괄호로 감싼 부분이 블록 스코프

 

📌 함수 스코프(function Scope)

function 키워드가 등장하는 함수 선언식 및 함수 표현식으로 범위를 구분한다.

function getName(user) {
	return user.name;
} // 중괄호로 감싼 함수 부분이 스코프

let getAge = function (user) {
	return user.age;
} // 중괄호로 감싼 함수 부분이 스코프

단, 같은 함수여도 화살표 함수를 사용하면 블록 스코프로 취급된다.