[JavaScript] 04. SCOPE 범위

프로그래밍에서 중요한 아이디어는 범위(Scope) 입니다. 변수에 액세서하거나 참조할 수 있는 범위를 다르게 설정하여 원하는 변수에 접근시킬 수 있습니다.

변수의 범위는 다른 프로그래밍 언어에서도 중요한 개념입니다. 이번 포스트를 통해 자바스크립트 내의 변수의 선언과 범위 설정에 대해 배워 봅시다.

---

📌 Scope / 범위

📚 Blocks and Scope / 블록 및 범위

if 문을 배우면서 중괄호 { } 안에 있는 코드인 블록을 배웠습니다. 블록은 하나 이상의 명령문을 함께 그룹화하고 코드에 대한 구조적 표식 역할을 합니다.

 

const city = 'New York City';

function logCitySkyline(){
  let skyscraper = 'Empire State Building';
  return 'The stars over the ' + skyscraper + ' in ' + city;
}

console.log(logCitySkyline());

• function 블록 외부에 city라는 변수가 선언되어 있습니다.
• function 블록 내부에는 skyscraper라는 변수가 선언되어 있습니다.
• logCitySkyline() 메서드에서는 두 변수에 자유롭게 접근할 수 있습니다

---

📚 Global Scope / 전역 범위

범위(Scope)는 변수가 선언되는 곳으로 외부 또는 내부에 존재할 수 있습니다. 때문에 프로그래밍할 때 블록과 관련된 범위에 대해 생각해야합니다.

let satellite = 'The Moon';
let galaxy = 'The Milky Way';
let stars = 'North Star';

function callMyNightSky(){
  return 'Night Sky: ' + satellite + ', ' + stars + ', and ' + galaxy;
}

console.log(callMyNightSky());

• 전역 범위에서 변수는 블록 외부에서 선언됩니다.
• 전역 변수는 블록 내부에 바인딩되지 않기 때문에 블록의 코드를 포함하여 프로그램 모든 코드에서 접근 가능합니다.
• 전역 변수를 사용하여 프로그램 내의 모든 위치에서 액세스할 수 있는 방법을 위의 코드를 통해 볼 수 있습니다.

---

📚 Block Scope / 블록 범위

변수가 블록 내에서 정의되면 중괄호 안에 있는 코드에서만 접근할 수 있습니다. 변수는 해당 블록 내의 코드 행에서만 접근이 가능하기 때문에 외부에서는 접근이 불가능합니다. 블록 범위로 선언된 변수는 동일한 블록의 일부 코드에서만 사용할 수 있어 지역 변수 라고 합니다.

const logSkyColor = () => {
  let color = 'blue'; 
  console.log(color); // Output: "blue"
};
 
logSkyColor(); // Output: "blue"
console.log(color); // throws a ReferenceError

• color는 블록 범위이기 때문에 logSkyColor 메서드 내부에서만 접근이 가능합니다.
• logSkyColor 메서드를 호출하면 함수 내부에서 접근이 가능합니다.
• 그러나 블록 외부에서 color 변수를 출력하려고 하면 부적절한 접근이기에 예외가 발생합니다.

---

📚 Scope Pollution / 범위 오염

배운 것을 생각해보면 변수에 항상 접근하도록 모든 변수는 전역 변수로 선언하는 것이 좋아보입니다.

그러나 전역변수가 너무 많으면 문제가 발생할 수 있습니다. 전역 변수를 선언하면 전역 네임 스페이스(global namespace)로 이동합니다. 이러한 변수는 프로그램이 끝날 때까지 그대로 유지도며 전역 네임 스페이스의 내용은 끝없이 늘어날 수 있습니다.

범위 오염(Scope Pollution)은 1)네임스페이스에 너무 많은 전역 변수가 있거나 2)다른 범위에서 변수를 재사용하는 경우입니다.범위 오염으로 인해 변수끼리 충돌하여 원하는 변수에 접근하지 못할 수도 있습니다.

 

범위오염의 예시를 봅시다.

let num = 50;
 
const logNum = () => {
  num = 100; // 주목
  console.log(num);
};
 
logNum(); // Output: 100
console.log(num); // Output: 100

• 변수 num을 사용할 때 함수 본문내에서 사용하려 했지만 let 키워드를 작성하지 않았습니다.
• logNum() 을 호출하면 num에 재할당됩니다.
• 내부의 재할당된 변수 num은 전역 변수에 영향을 미칩니다.
• 재할당이 허용되고 오류가 발생하지 않아 잘못된 값에 접근할 가능성이 높아집니다.

---

📚 Practice Good Scoping / 올바른 범위 지정

변수 범위를 엄격하게 지정하면 여러가지 방법으로 코드가 크게 향상됩니다.

• 블록이 코드를 개별 섹션으로 구성하므로 코드를 더 읽기 쉽게 만들 수 있습니다.
• 변수를 줄마다 추적할 필요없이 프로그램의 다른 부분과 연결된 변수를 명확히하여 가독성을 높입니다.
• 코드가 모듈식이므로 유지 및 관리가 쉽습니다.
• 지역 변수는 블록 실행이 끝나면 더이상 존재하지 않아 코드의 메모리가 절약됩니다.

 

const logSkyColor = () => {
  const dusk = true;
  let color = 'blue'; 
  if (dusk) {
    let color = 'pink';
    console.log(color); // Output: "pink"
  }
  console.log(color); // Output: "blue"
};
 
console.log(color); // throws a ReferenceError

• logSkyColor 메서드 내부에 dusk 변수를 생성합니다.
• 명령문 다음에 중괄호 if 로 새 코드 블록을 정의합니다. 여기서 if문의 조건이 참이라면 color 새 변수에 값을 ㅏㅎㄹ당합니다.
• if 블록 내부에서는 color 변수가 pink 값을. if 블록 외부에서는 color 변수가 blue 값을 가집니다.
• 메서드 블록 내부를 벗어나면 color  변수에 접근할 수 없습니다.