Javascript (스코프)

Java Script(스코프)

Scope

스코프를 이해하기 위해서는 먼저 block을 이해 해야 한다. 일단 Scope 자체는 비유를 들면, 우리가 살고 있는 도시의 경관을 들 수 있다. 우리가 도시에 살고 있다면 밤에 도시의 스카이 라인을 볼 수 있는데, 이 스카이 라인은 이 도시가 아니라면 볼 수 없다. 하지만 밤 하늘의 별은 어딜 가더라도 똑같이 볼 수 가 있다.

이 경우 스카이라인은 local scope가 되고, 보다 큰 범주인 밤하늘은 어디에서도 접근이 가능한 global scope가 된다. 중간에 샜지만, block이라는 것은 중괄호로 둘러싸인 코드 스니펫(코드 덩어리) 라고 생각하면 된다.

if 절의 {} 중괄호나, 함수 생성의 {} 중괄호 모두 block이 된다.

const city = 'New York City';

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

}

console.log(logCitySkyline())

위 코드의 경우 city 변수 한 개는 바깥에, skyscraper 변수 한 개는 block 안쪽에 위치한다. 이러한 방식이 선호된다고 한다.

Global Scope

Global scope , 블록 바깥에서 선언된 변수는 global variable이라고 불린다. 이들은 블럭 바깥, 안 모두에서 접근 가능하다.

Block Scope

변수가 블록 내에서 선언되면, 블록 내에서만 접근 가능하다 이럴 때 우리는 변수가 block scope를 가지고 있다고 한다.

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

Scope Pollution

global variable 들은 선언이 되면 global namespace라고 하는 공간에 저장이 된다. 만약 코딩을 하면서 너무 많은 과도한 양의 글로벌 변수를 선언하게 되면, namespace가 꽉 차게 되고 다른 로컬변수와 충돌을 일으키거나 할 수 있다. 이러한 것들을 Scope Pollutio(오염) 이라고 한다.

아래는 scope pollution의 예이다.

let num = 50;
 
const logNum = () => {
  num = 100; // Take note of this line of code
  console.log(num);
};
 
logNum(); // Prints 100
console.log(num); // Prints 100

좋은 scope 사용을 하는 것의 장점은 다음과 같다.

• 코드를 더 잘 읽을 수 있게 한다.(명확한 구획으로 나뉘기 때문)
• 코드를 보다 명확하고 이해가 쉽게 만들어준다. 어떤 변수들이 프로그램의 각각의 파트와 연결이 되어있는지 잘 보여주기 때문이다.
• 코드 유지보수에 쉽다. 모듈화 되어있기 때문이다.
• 메모리를 아낄 수 있게 해준다. 블락이 끝나면 작동을 멈추기 때문이다.