자바스크립트의 스코프(var, let, const)

스코프란 무엇일까요?

스코프는 유효범위, 가시성(visibility) 이라고 불립니다. 단어만 봐서는 어려울 수도 있습니다. 예시를 들어서 좀 더 설명해보겠습니다.

const x = 10;
console.log(x); //10
{
  const y = 9;
}
console.log(y); //?

아주 간단한 코드입니다. x를 정의하고 x의 값을 물어보고, y를 정의하고 y의 값을 물어보았습니다. 하지만 코드를 실행해보면 x 값은 콘솔창에 나오는데 y 값을 물어보면 에러가 뜹니다. 분명히 y를 정의했는데 정의되지 않았다고 나오는 이유가 뭘까요? 바로 스코프 때문입니다. 블록({}) 사이에 y 값을 정의했기 때문에 블록 밖에서는 y가 정의되지 않았다고 뜬 것이죠. 유효범위나 가시성이라는 단어가 조금은 이해가시나요?

정적 스코프와 동적 스코프

프로그래밍 언어를 배울 때 정적 스코프나 동적 스코프에 대한 이야기를 듣는 경우가 많습니다. 쉽게 이해하기는 어려운 개념이지만 한번 짚고 넘어가도록 하겠습니다. 

const x = 10;
function func1(){
  const x=7;
  func2();
}
function func2(){
  console.log(x);
}
func1(); //콘솔에 찍히는 x 값은 무엇일까요?

함수의 바깥에 x의 값을 정의했습니다.(x는 10입니다.) 그리고 func1을 실행하면 함수 내부에서 x 값이 다시 선언됩니다. (새로운 x는 7입니다.)그리고 func2가 func1의 내부에서 실행되는데요. 하지만 콘솔창에 x의 값은 10이라고 나옵니다. 왜그럴까요? 바로 자바스크립트의 스코프는 정적이기 때문입니다. 정적스코프는 선언되었을 때를 기준으로 합니다. func2가 실행되었을 때의 x값은 7일지 몰라도, 정의되었을 때는 x는 10을 가리키고 있습니다. 그래서 func1의 내부에서 실행되었더라도 10이라고 콘솔창에 나타나는 것입니다.

정적스코프는 선언되었을 때, 동적스코프는 실행될 때를 기준으로 유효범위를 가집니다.

전역스코프

전역 변수라는 말을 많이 들어보셨을 겁니다. 전역 변수는 간단히 말하면 모든 곳에서 접근할 수 있는 변수입니다. 따로 아무 블록없이 변수를 선언하면 전역변수가 되고, 전역 스코프를 가집니다.

const x = 10;
let y =11;
var z = 12;
function f(){
  a = 13;
  var b =14;
};
f();

위의 소스코드처럼 아무 블록이 없는 상태에서 변수를 선언하면 전역변수가 됩니다. 중요한 건 f라는 함수를 봐주세요. f라는 함수 안에 a와 b가 정의되어 있습니다. 함수를 실행하고 a나 b의 값을 확인해보면 a는 13이라고 뜨고, b는 정의되지 않았다고 나옵니다. 왜그럴까요? 블록이 있더라도 var를 붙이지 않으면 전역변수가 되기 때문입니다. 

전역변수를 되도록이면 없는 것이 좋습니다. 어디서든 접근할 수 있다는 것은 의도하지 않는 버그를 일으킬 수 있기 때문입니다.

함수 스코프

일단은 var에 대해서 알아볼까요? es6에 let과 const가 추가되기 전에는 변수엔 항상 var를 사용했습니다. var는 함수에서만 스코프를 가집니다. 

for(var i=0; i<3; i++){
  console.log(i);
}
console.log("i는 ", i);

함수에서만 스코프를 가진다는 것은 위의 소스코드처럼 반복문을 사용했을 시 i가 전역변수가 된다는 것입니다. 조건문에서도 마찬가지입니다. var를 사용하신다면 꼭 주의해주세요.

var를 써서 변수를 선언하면 함수스코프를 가집니다.

블록 스코프

새로 추가된 let과 const는 블록을 기준으로 합니다. var와 달리 반복문이나 조건문에서도 스코프가 적용이 됩니다.

for(let i=0; i<3; i++){
  console.log(i);
}
console.log("i는 ", i);

var를 let으로 바꿨습니다. 반복문이 실행되고, 콘솔창에 i의 값을 물어보면 에러가 납니다. 블록을 기준으로 스코프를 형성하기 때문에 스코프를 벗어나서 값을 물어보면 정의가 되지 않았다고 나옵니다. 차차 var 대신 let과 const만 사용하게 되겠지만 그 전까지는 var와 let, const의 차이를 꼭 알아두시길 바랍니다. 차이점을 더 공부하시려면 아래링크를 클릭해주세요.

자바스크립트의 새로운 변수 let과 상수 const

공감은 제작자에게 큰 힘이 됩니다.