[Javascript] Codecademy 4. Scope

4. Scope

프로그래밍에서 가장 중요한 개념 중 하나인 범위, Scope는 "식별자 접근 규칙에 따른 유효 범위"라는 뜻입니다. 일부 변수, 전역 변수는 프로그램 어디에서나 접근이 가능하지만, 다른 변수, 지역 변수는 특정 구역에서만 사용할 수 있습니다. 이 범위를 우리는 스코프라고 부릅니다.

---

4-1. Blocks and Scope (블록과 스코프)

스코프에 대해 이야기하기 전, 블록에 대해 먼저 이야기해 봅시다. 블록은 함수와 if 명령문 등에서 사용하는 것이고, 사용 방법은 '{ }' 으로 코드를 묶어 주기만 하면 됩니다. 

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

 

본 코드에서 const logCitySkyline에 해당하는 내용들을 { }으로 묶어, 한 그룹임을 표현해 주었습니다. 블록은 코드의 구조를 나타내는 데에 중요한 역할을 할 뿐만 아니라, 명령문을 그룹화하는 데에도 도움을 줍니다.

 

4-2. Global Scope (전역 스코프)

블록 바깥쪽의 스코프를 전역 스코프, 전역이 아닌 다른 스코프(함수, 블록 등)를 지역 스코프라고 부릅니다.

변수는 블록의 외부, 내부에 모두 존재할 수 있습니다. 블록의 외부에 존재하는 변수, 즉 전역 스코프에서 선언된 변수를 전역 변수, 그 외 지역 스코프에서 선언된 변수를 지역 변수라고 부릅니다. 

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

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

console.log(callMyNightSky());

 

위 코드에서 satellite, galaxy, stars는 전역 스코프에서 선언되었기 때문에 전역 변수가 되며, 전역 변수는 프로그램의 어떤 부분에도 접근할 수 있습니다. 자연스럽게 앞에서 언급한 세 가지 변수는 callMyNightSky라는 지역에서도 사용할 수 있습니다.

 

4-3. Block Scope (블록 스코프)

지역 스코프는 블록 스코프와 함수 스코프, 두 가지로 나눌 수 있습니다. 우리는 이 중 블록 스코프에 대해 알아보고자 합니다.

앞서 지역 스코프에서 선언된 변수가 지역 변수라고 이야기하였습니다. 지역 변수는 변수가 선언된 스코프에서만 사용이 가능하며, 그 외의 스코프(전역 스코프 등)에서는 사용이 불가능합니다. 아래의 코드를 보며 자세히 이야기해 보겠습니다.

const logVisibleLightWaves = () => {
  const lightWaves = 'Moonlight';
  console.log(lightWaves);
};

logVisibleLightWaves();

//console.log(lightWaves);

 

lightWaves라는 변수가 logVisivleLightWaves라는 블록 스코프 안에서 선언되었습니다. line 3의 console.log를 실행하면 Moonlight라는 결과가 출력됩니다. 같은 지역 스코프 안에 있기 때문입니다. 

그러나 line 8의 console.log를 실행하면 오류가 발생하며 아무것도 실행되지 않는 것을 확인할 수 있습니다. 왜 이런 결과가 나오는 것일까요? lightWaves라는 변수가 전역 스코프에는 선언되어있지 않기 때문입니다. 

이를 통해 우리는 지역 변수는 변수가 선언된 스코프에서만 사용이 가능하며, 그 외의 스코프(전역 스코프 등)에서는 사용이 불가능하다는 것을 알 수 있습니다.

 

4-4. Scope Pollution (스코프 오염)

변수를 선언할 때 전역 스코프에 선언하여 모든 지역에 접근할 수 있게 하는 것이 좋아 보일 수 있지만, 사실은 전역 변수가 많으면 프로그램을 실행할 때 문제가 발생할 수 있습니다.

 

전역 변수를 선언하면 전역 네임스페이스로 이동합니다. 전역 네임스페이스를 사용하면, 프로그램의 모든 스코프에서 변수에 접근할 수 있게 됩니다. 이 변수는 프로그램이 종료될 때까지 유지되고, 이에 따라 전역 네임스페이스가 차지하는 저장공간이 늘어나며, 저장공간을 낭비하게 됩니다.

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

const callMyNightSky = () => {
  stars = 'Sirius';
	return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};

console.log(callMyNightSky());
console.log(stars) //Sirius

위 코드는 스코프 오염이 발생한 코드입니다. 스코프 오염은 전역 네임스페이스에 존재하는 변수가 너무 많거나, 전역 변수를 코드 블록 안에서 덮어쓰기하는 경우에 발생하게 됩니다. 전역 변수와 지역 변수가 충돌하여 예기치 못한 오류가 발생하기도 하고, 변수의 값이 언제 변경되었는지 알아차리기 힘들 뿐만 아니라 코드를 유지 보수하는 데에도 방해가 됩니다.

 

4-5. Practice Good Scoping (코드를 잘 스코핑하는 방법)

코드를 작성할 때 전역 변수와 스코프 오염을 고려하여 스코핑하게 되면  여러 가지 장점이 있습니다.

1. 코드를 각 블록으로 나누기 때문에, 코드를 더 쉽게 읽을 수 있게 됩니다.

2. 어느 변수가 프로그램의 어떤 부분과 관련있는지 명확하게 구분해 주면서 코드 이해가 더 쉬워집니다.

3. 코드를 보기 쉽게 묶어주며, 코드를 유지보수하는 것을 편리하게 해 줍니다.

4. 블록 실행이 끝난 뒤, 해당 블록이 차지하던 공간이 사라지기 때문에 메모리를 아낄 수 있게 됩니다.

 

 

 

 

Corner React Starter #1

Editor PEEP