(6) Modern JavaScript - 변수와 스코프

변수는 이름을 통해서 어떤 값에 특별한 의미를 부여할 수 있는 하나의 상자라고 할 때

다르게 표현하면 프로그래밍에서 추상화의 가장 기본적인 수단이 변수라고 할 수 있다.

자바스크립트에서 이 변수를 만드는 방법은  ES2015 기준으로,

이전에는 var 키워드를 사용하여 변수를 만들었지만

이후에는 let, const가 등장하여 지금까지 사용하고 있다.

 

필자 TIL을 꾸준히 읽었거나 기초를 아는 사람이라면 이 두 가지 키워드의 용도를 잘 알 것이다.

값의 재할당이 필요한 경우 - let

값의 재할당이 필요하지 않은 경우 - const 

 

앞으로 변수를 선언할 때 let과 const를 왜 사용해야 하는지 조금 더 자세히, 명확하게 알 필요가 있다.

---

▼ 1. 변수가 유효한 시점의 차이

var 키워드는 변수를 만들기도 전에 사용이 가능한 문제가 있었는데,

// 변수와 스코프

console.log(title);
var title;

위와 같이 title이라는 변수를 만들기도 전에 콘솔창에 title을 출력했음에도 

에러가 발생하는 것이 아니라 undefined값이 출력되는 것을 확인할 수 있다.

이런식으로 코드상에서는 선언이 분명히 나중에 되었지만

마치 선언이 위로 올라간 듯한 현상을 호이스팅(Hoisting)이라고 부른

---

ㅤ

참고로 호이스팅은 선언 부분만 끌어 올려지기 때문에 

아래와 같이 변수 선언과 동시에 값을 할당하더라도 할당된 값 자체는 그 이후에 접근이 가능하다

// 변수와 스코프

console.log(title);
var title = "SeopE";
console.log(title);

---

아무튼 이런 현상은 선언문만 호이스팅되기도 하고

코드를 작성할 때도 변수를 선언한 다음에 사용하면 큰 문제가 없긴 하겠지만

let이나 const 키워드는 애초에 변수 선언 이전에 접근할 수가 없기 때문에

아래와 같은 결과가 나온다.

console.log(title);
let title;

"선언 이전에 접근할 수 없다" 라고 에러가 나오며 예상치 못한 오류가 발생했을 때

그 원인을 파악하기가 훨씬 더 수월하다는 장점이 있다.

---

▼ 2. 중복 선언의 차이

var 키워드는 중복 선언이 가능하다는 문제가 있다.

아래와 같이 똑같은 변수를 두 번 선언해도 코드를 실행해보면 다음과 같은 결과가 발생한다.

var title = "SeopE";
console.log(title);
var title = "JavaScript";
console.log(title);

이렇게 아무런 문제 없이 동작하는 결과를 볼 수 있는데

문제 없는데 뭐 어떠냐 싶겠지만..

 

"SeopE" 이라는 문자열 값도 사용해야되고

"JavaScript" 이라는 문자열 값도 사용해야 하는데

만약 이 두 선언 사이에 많은 코드들이 있어 

실수로 이미 선언한 변수명을 중복으로 선언해 버리면 

그 이후부터는 의도치 않게 위에서 선언한 "SeopE"이라는 값은 사라지게되는 문제가 발생한다.

---

반면에 let이나 const 키워드는 중복 선언이 불가능하기 때문에

나중에 같은 이름으로 변수를 선언하려고 하면 에러 메시지가 나타나기 때문에 문제점을 찾을 수 있다.

let title = "SeopE";
console.log(title);
let title = "JavaScript";
console.log(title);

위와 같이 '같은 이름으로 이미 선언된 변수가 있다' 라고 메시지 출력된다.

---

▼ 3. 변수의 유효 범위, 스코프(Scope)

여기서 먼저 전역 변수와 지역 변수를 한번 복습한다.

• 전역변수(Global variable) : 어느 위치에서든 호출하면 사용이 가능
  (함수 밖에 선언하여 클래스 전체에서 사용이 가능한 변수)
• 지역변수(Local variable) : 특정구역({ }) 내에서 생성되어 그 구역에서만 사용
  (함수 속에 선언되어 해당 함수 속에서만 사용이 가능한 변수)

var 키워드는 변수의 스코프가 함수 단위로만 구분이 되는데

아래의 코드에서 x는 전역 변수이기 때문에 함수 안에서 자유롭게 사용이 가능하고

y는 함수의 지역 변수이기에 함수 밖에서 사용할 수 없다.

var x = 3; // 전역 변수

function myFunc() {
  var y = 4; // 지역 변수
  console.log(`x in myFunc: ${x}`);
  console.log(`y in myFunc: ${y}`);
}

myFunc();
console.log(x);
console.log(y);

그런데 var 키워드는 함수 단위로만 구분이 되기 때문에

아래와 같이 조건문이나 반복문 안에서 새로운 변수를 만들게 되더라도

모두 전역 변수로 평가된다.

var x = 3;
if (x < 4) {
  var y = 3;
}

for (var i = 0; i < 5; i++) {
  console.log(i);
}

console.log("x:", x);
console.log("y:", y);
console.log("i:", i);

그렇기 때문에 어떤 조건문이나 반복문에서 고유하게 사용할 수 있는

지역 변수는 만들수 없는 문제가 있던 것이다.

이 부분을 해결하기 위해 let과 const 키워드는

중괄호가 사용되는 부분을 기준으로 변수의 유효 범위를 구분한다.

---

자바스크립트에서는 중괄호가 감싸진 부분을 코드 블록 이라고 부르는데

구체적으로 설명하기위해 var을 한번 let 키워드로 변경해보자면..

let x = 3;
if (x < 4) {
  let y = 3;
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

console.log("x:", x);
console.log("y:", y);
console.log("i:", i);

if문 안에서 let 키워드로 선언된 변수 y는

if문의 코드 블록 안에 있는 지역 변수로 평가 됐기 때문에

if문 밖에서는 사용할 수 없어서 아래와 같이 오류가 발생한다.

---

심지어 let과 const 키워드는 아래와 같이 어떤 문법에 해당하는 특별한 키워드 없이 

단순히 코드 블록으로만 구분되어 있어도 모두 스코프를 구분하기 때문에 

{
  let title = "JavaScript";
}
console.log(title);

코드 블록 안에서 문자열은 출력되지만

코드 블록 밖에서는 에러가 발생하는 모습을 확인할 수 있다.

---

var x;  // 함수 스코프 (function scope)
var y;  // 블록 스코프 (block scope)
const z;  // 블록 스코프 (block scope)

그래서 var 키워드는 함수를 기준으로만 스코프가 결정되기 때문에

함수 스코프를 가지고 let과 const 키워드는 코드 블록을 기준으로 스코프라 결정되기 때문에

블록 스코프를 가진다 라고 표현하는 부분도 알고 있어야 한다.

---

자바스크립트에서 변수를 선언할 때 사용되는 키워드와 각 키워드가 가지는 스코프에 대해 설명하였는데

변수를 선언할 때 어떤 키워드를 사욯하는지,

그렇게 선언한 변수는 어떤 스코프를 가지는지 앞으로 구분할 필요가 있다.