함수와 이벤트 4 - var를 사용한 변수의 특징

자바스크립트 ES6 버전에서는 변수를 선언하기 위해 let과 const라는 새로운 예약어가 생겼다. 기존에 var가 있는데 왜 let과 const가 필요했을까? 그렇다면 먼저 var 예약어를 사용한 변수의 특징을 알아야 한다.

---

 

 

 

 

변수의 적용 범위 스코프 알아보기

자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프라고 한다. 변수가 어디까지 유효한지 범위를 가리키는 영역이 필요한 것이다. 자바스크립트 함수에서 변수를 사용할 때는 이 영역에 주의해야 한다.

한 함수 안에서만 사용하고 다른 함수에서는 사용할 수 없는 변수가 있고, 어느 함수에서나 다 사용할 수 있는 변수가 있다. 한 함수에서만 사용할 수 있는 변수를 지역 변수 또는 로컬 변수라 하고, 스크립트 소스 전체에서 사용할 수 있는 변수를 전역 변수 또는 글로벌 변수라고 한다.

 

 

함수 안에서만 쓸 수 있는 지역 변수

지역 변수는 함수 안에서 선언하고 함수 안에서만 사용한다. 지역 변수를 선언하려면 예약어 var와 함께 변수 이름을 지정해야 한다. 

이 예제에서 addNumber()라는 함수 안에서 var를 사용해 sum이라는 변수를 선언했다.

 

var 예약어로 지역 변수 선언하기

 

 

이 오류 메시지는 변수 sum이 정의되지 않았다는 뜻이다. 변수 sum은 함수 addNumber() 안에 선언했는데 함수 밖에 있는 console.log()에서 사용해서 오류가 발생한 것이다. 즉, 변수의 적용 범위를 벗어난 것이다. 이처럼 함수 안에서 var로 선언한 변수는 함수 안에서만 쓸 수 있는 지역 변수이다.

---

 

 

 

 

스크립트 안에서 자유롭게 쓸 수 있는 전역 변수

전역 변수는 적용 범위를 제한하지 않고 쓸 수 있다. 전역 변수로 사용하려면 함수 밖에서 선언하거나 함수 안에서는 var 예약어를 빼고 선언해야 한다. 함수 안에서 선언한 변수라 하더라도 var 예약어를 사용하지 않으면 전역 변수가 된다. 

다음 예제를 웹 브라우저의 콘솔 창으로 확인하면 결과값 200이 나타난다. addNumber() 함수 안에서 선언한 multi 변수 이름 앞에 var 예약어를 사용하지 않았다. multi 변수를 전역 변수로 사용한 것이다.

 

var 예약어를 사용한 지역 변수와 전역 변수

 

---

 

 

 

var와 호이스팅

자바스크립트에서 변수를 사용할 때 조심해야 할 개념이 있다. 바로 호이스팅이다. 호이스팅이란 '끌어올리다'를 뜻한다. 상황에 따라 변수의 선언과 할당을 분리해서 선언 분분을 스코프의 가장 위쪽으로 끌어올리는 것이다. 끌어올린다고 해서 실제로 소스 코드를 끌어올리는 것은 아니고 소스를 그런 식으로 해석한다는 의미이다.

 

다음 예제 파일을 확인해보면 x의 변수값은 10이지만, y의 변수값은 아직 할당되지 않은 자료형인 undefined로 나타난다. 

 

변수와 호이스팅

 

 

이런 결과가 나타난 것은 변수 호이스팅 때문이다. 자바스크립트 해석기는 함수 소스를 훑어보면서 var를 사용한 변수는 따로 기억해 둔다. 즉, 변수를 실행하기 전이지만 '이런 변수가 있구나'하고 기억해 두기 때문에 마치 선언한 것과 같은 효과가 있는 것이다. 이것이 호이스팅이다.

그래서 앞에서 작성한 예제를 자바스크립트 해석기가 인식하는 코드로 다시 나타내면 다음과 같다. 다음 코드의 ①과 같이 변수 y를 선언하고 할당했지만, ②에서는 변수값이 할당된 위치가 다르게 나타난다.

 

 

간혹 호이스팅처럼 var 예약어를 사용한 변수는 선언하기 전에 사용하면 프로그램 오류를 발생시킬 수 있다.

---

 

 

 

 

 

변수의 재선언과 재할당

var를 사용한 변수는 호이스팅 외에도 재선언과 재할당을 할 수 있다. 다음 예제에서 변수 sum에 처음에는 변수값 30을 저장했지만 코드를 작성하면서 다른 값을 할당하면 아예 변수를 새로 선언한다. 

 

var 예약어를 사용한 변수의 재할당과 재선언

---

 

 

 

학습을 마치고

호이스팅에 대한 내용을 수업으로 들었으나 무슨 말인지 잘 이해하지 못했다. 책을 읽고 학습하며 어느 정도 이해할 수 있었다. var에 대해서도 공부했으니 이제 let과 const에 대해서도 학습해 보겠다.