[JavaScript] Scope

1. Scope

Scope는 변수가 사용될 수 있는 범위를 정의한다.

어떤 변수는 프로그램 전체에서 접근할 수 있는 반면, 다른 변수는 특정 부분에서만 접근할 수 있다.

 

2. Block 

block은 { } 내부의 코드이다.

block은 여러 개의 문장을 그룹화하고 코드의 구조를 구분할 수 있게 한다.

 

ex) 함수의 body, if문 등에서 block을 찾을 수 있다.

const logSkyColor = () => {
// block
  let color = 'blue'; 
  console.log(color); // blue 
// block
}

if (dusk) {
// block
  let color = 'pink';
  console.log(color); // pink
// block
}

 

3. Global Scope (전역 스코프) 

global scope (전역 스코프)에서는 변수가 블록 밖에 선언된다.

이러한 변수들을 global variables (전역 변수)라 한다.

특정 블록 안에 있지 않기 때문에 프로그램 내 어느 코드에서나 접근 가능하다.

const color = 'blue'; // global scope 

const returnSkyColor = () => {

return color; // 변수가 전역 스코프에 있으므로 함수 블록 내에서도 접근 가능 

};

console.log(returnSkyColor()); // blue

 

4. Block Scope (블록 스코프)

block scope (블록 스코프)는 변수가 특정 블록 내에서만 접근 가능하도록 정의된 스코프를 의미한다.

변수가 중괄호 { } 안에서 정의되면, 해당 변수는 그 블록 내의 코드에서만 접근할 수 있다.

이러한 변수를 local variable (지역 변수)라고 부르며, 동일한 블록 내의 코드에서만 사용할 수 있다.

const logSkyColor = () => {

 let color = 'blue'; // local scope(함수 내부)에서 정의

 console.log(color); // 함수 블록 내부에서만 접근 가능

};

logSkyColor(); // blue

console.log(color); // ReferenceError, 함수 블록 외부에서 접근하려고 하면 에러

 

5. Scope Pollution (스코프 오염) 

global variables (전역 변수)를 선언하면, 이 변수는 전역 네임스페이스에 저장된다.

 

전역 네임스페이스는 프로그램 어디에서나 변수에 접근할 수 있게 해주는 공간이다.

 

전역 네임스페이스에 너무 많은 전역 변수가 존재하거나,
다른 스코프에서 변수를 재사용하려 하면 스코프 오염이 발생한다. 

 

스코프 오염이 발생하면 변수의 충돌이나 오류가 발생할 가능성이 커진다.
 

let num = 50; // global scoope 

const logNum = () => {
num = 100; // 재할당 - 전역 변수 num에 영향
console.log(num);
};

logNum(); // 100 출력
console.log(num); // 100 출력

 

const logSkyColor = () => {
  const dusk = true;
  let color = 'blue'; 
  if (dusk) {
    let color = 'pink';
    console.log(color); // pink
  }
  console.log(color); // blue
};

console.log(color); // ReferenceError

 

따라서, 전역 변수를 최소화하고, 블록 스코프를 활용하여 변수의 스코프를 가능한 한 좁게 설정하는 것이 좋다. 

---

 

예제 코드 : https://github.com/inyeongjang/Snoopy/blob/main/week02/4-Scope.js

Snoopy/week02/4-Scope.js at main · inyeongjang/Snoopy

 

출처/참고자료 : https://www.codecademy.com/enrolled/courses/introduction-to-javascript

Learn JavaScript | Codecademy