[JavaScript] 블록과 스코프

자바나 자바스크립트 등의 언어에서는 블록안에서 프로그램이 실행됩니다. 

즉, 아래 형식으로 동작합니다.

{
	//실행문
}

이 블록안의 범위를 스코프라고 합니다. 즉, 영향을 미치는 범위라고 할 수 있습니다.

 

이해를 돕기 위해 예제를 살펴보겠습니다

{
  const x = 'Hello';
  let y = 'world!';
  console.log(x, y); //Hello world!
}

console.log(x); //에러 발생
console.log(y); //에러 발생

위 코드는 스코프 안에서 변수가 선언된 것입니다.

위 코드를 실행해보면 {}안에서의 console.log는 실행되는 반면 {} 바깥의 console.log는 에러가 발생하는 것을 확인할 수 있습니다. 왜냐하면 {}안과 {}바깥은 스코프가 다르기 때문입니다.

 

또 다른 예제를 살펴보겠습니다.

let x = 1;

{
  let y = 2;
  console.log(x, y); // 1 2
}
console.log(x); //1
console.log(y); //에러 발생

위 코드에서는 x는 스코프밖이든 안이든 모두 에러가 발생하지 않습니다. 이유는 스코프 밖에서 선언된 변수는 스코프 안에서도 적용되기 때문입니다.

 

이러한 스코프를 적용한 것이 전역변수와 지역변수의 개념입니다.

 

이때 자바스크립트가 자바와 다른 점은 스코프가 다르다면 같은 변수명을 사용할 수 있다는 것입니다.

const xx = 0;
let yy = 'Hello!';
console.log(xx, yy); //0 'Hello!'

{
  const xx = 1; // 블록 안에서 바깥의 const 재선언 가능
  let yy = '안녕하세요~';

  console.log(xx, yy); //1 '안녕하세요~'
  
}

console.log(xx, yy); //0 'Hello!'

 

const와 let 키워드는 변수를 선언할때 사용하며 같은 스코프에 있다면 다시 선언하는 것은 불가능합니다. 

 

자바스크립트 변수에 대한 개념은 아래 페이지를 살펴보시면 됩니다.

[JavaScript] 변수와 상수 (tistory.com)

[JavaScript] 변수와 상수

 

그럼에도 불구하고 위 코드를 실행해보면 에러가 발생하지 않습니다. 이것이 가능한 이유는 스코프가 다르기 때문입니다.

만약 내부 스코프의 const를 없앤다면 상수를 변하게 만드므로 에러가 발생하며, let 키워들 없앤다면 외부 스코프가 전역변수가 되어 스코프를 빠져나와도 변수값이 변경되어서 출력됩니다.

 

이는 자바스크립트의 특성인 스코프 체인때문입니다. 스코프체인은 스택이라는 개념을 활용하기 때문에 나중에 들어온 것. 즉, 내부 스코프의 값이 먼저 return됩니다. 

 

let a = 0;
let b = 1;
let c = 2;
console.log('시점 1:', a, b, c); //시점 1: 0 1 2

{
  let a = 'A';
  let b = 'B'
  console.log('시점 2:', a, b, c); //시점 2: A B 2

  {
    let a = '가'
    console.log('시점 3:', a, b, c); //시점 3: 가 B 2
  }

  console.log('시점 4:', a, b, c); //시점 4: A B 2
}

console.log('시점 5:', a, b, c); //시점 5: 0 1 2

 

이를 메모리 관점에서 확인하면 아래와 같습니다.

 

위 그림을 보면 지역변수는 블록이 끝나면 소멸되지만 전역변수는 프로그램이 종료되기 전까지는 계속 유지됩니다. 그래서 전역변수를 많이 사용하면 메모리 낭비가 발생합니다. 따라서 코드를 작성할 때 전역변수는 최소화 하는 것이 좋습니다.