변수 (var 대신 let을 쓰자.)

자바스크립트의 두 번째 주제는 프로그램 작성에 있어서 기본이라 할 수 있는 변수이다.

변수

정적 프로그래밍 언어와 동적 프로그래밍 언어, PC 프로그래밍 언어와 PLC 프로그래밍 언어, 모두 제각각의 특징을 가지고 있지만, 이들이 모두 공통적으로 변수를 통해 데이터를 저장하고 접근한다. 이처럼 변수는 프로그래밍에 있어서 기본이 되는 내용이라 할 수 있고, 그래서 대부분의 프로그래밍 책자에서는 변수를 항상 초반부에 다루고 있다.

거두절미하고 위 프로그램을 한번 살펴보자. 프로그램의 3번 라인에서 iVar를 콘솔 창에 출력하라는 명령을 주고 있고, 그에 따라 콘솔 창에는 12라는 값이 출력되었다. 다시 말해, iVar가 곧 12라는 의미이다.

콘솔 창에 iVar를 출력하는 또 다른 프로그램을 살펴보자. 똑같이 iVar를 콘솔 창에 출력하는 명령 (3번과 7번 라인)임에도 불구하고, 다른 값이 출력된다. 5번 라인에 작성된 코드에 의해 iVar의 값이 변경되었기 때문이다. 위 프로그램의 결과처럼, 프로그램이 실행되는 동안 연산 등에 의해 데이터가 변경되는 iVar를 변수라고 부른다.

프로그램에서 변수를 사용하려면, 먼저 선언이라는 과정을 거쳐야 한다. 위 그림의 예제 프로그램에서는 마찬가지로 iVar를 콘솔 창에 출력하는 프로그램임에도 불구하고, 변수를 선언하지 않았으므로 에러 메시지가 콘솔 창에 출력된다.

자바스크립트에서 변수는 let 키워드와 함께 사용할 변수 이름을 정의하는 형태로 선언된다. 아마도, ES5 버전에 익숙한 사람들은 이 부분에 대해서 let 대신 var를 떠올렸을 것이다.

위 그림에서 확인할 수 있듯이, 변수를 선언할 때 var 키워드와 함께 선언하는 것도 가능하다. 그럼에도 불구하고, let이라는 키워드를 먼저 언급한 이유는 지금부터 설명할 내용 때문이다.

먼저, let과 var에 대한 정확한 배경부터 알아보자. var은 ES5 표준에서 변수를 선언할 때 사용하던 키워드이다. 그리고 let은 ES6 표준부터 추가된 키워드이다. 그리고, 위 그림에서 보는 것과 같이 표준의 버전이 달라졌지만, ES6에서도 여전히 var을 지원한다.

위 그림의 예제 프로그램을 살펴보자. 콘솔 창에 표시된 프로그램의 실행 결과를 보면, 4번 라인에서 문제가 있음을 알려주고 있다. 그렇다. 1번 라인에서 이미 선언된 iVar 변수를 4번 라인에서 let 키워드를 이용해 또 다시 선언하고 있으므로, 자바스크립터의 인터프리터에서 에러 메시지를 보여주고 있다.

똑같은 상황에서 var를 이용해 변수를 선언한 위 그림의 상황을 보자. 마찬가지로 4번 라인에서 같은 이름의 변수를 중첩해서 선언하고 있음에도 불구하고, 프로그램이 정상적으로 실행되고 있다. 놀라고 팔짝 뛸 지경이다.

이런 경우도 생각해보자. 위 그림에서는 선언되지 않은 변수 iVar를 참조하는 1번 라인에서 에러가 있음을 보여주고 있다. 비록 3번 라인에서 let 키워드와 함께 변수 iVar를 선언하고 있지만, 이미 1번 라인에서 에러가 발생했기 때문에 인터프리터는 남은 3번과 4번 라인의 코드를 실행하지 않는다.

하지만, 3번 라인의 let을 var로 바꿔주면 위 그림과 같이 프로그램이 정상적으로 실행된다. 방금 전의 예제 프로그램처럼 변수를 선언하기 전에 참조했음에도 불구하고 말이다. 솔직히 말해서, 내가 가진 상식으로는 도저히 이해되지 않는 일이지만, 이 부분에 대해 설명하고 있는 여러 사람의 말을 빌리자면, 자바스크립트는 같은 스크립트 언어인 파이썬과 달리, 코드를 실행하기 전에 문법을 체크하는 과정을 먼저 거치므로, 뒤에 선언된 변수도 참조할 수 있도록 만들어주기 때문이라고 한다. 그리고 이것을 변수 호이스팅이라고 부른다.

아무리 그렇다해도, 이건 좀 너무하다 싶다. 아무리 자바스크립트만의 특색이라 치부하고 넘어가려고 해도, 지금껏 배워온 다른 프로그래밍 개발 환경과 너무나도 차이가 커서, 도저히 납득하기 어려운 정도가 아닐까 생각한다. 아마도, 지금 내 생각과 비슷한 생각을 가진 전 세계 프로그래머들이 이 부분에 대해 나름 반항(?)을 함으로써, ES6 버전부터 let이라는 우리가 상식적으로 받아들일 수 있는 키워드를 추가한게 아닐까 생각된다. (지금은 글을 전개해 나가는 순서 때문에 이 정도만 이야기하지만, 사실 var의 만행(?)은 더 있다. ㅎㅎ)

어쨌든, 자바스크립트에서 변수 선언은 let 키워드와 함께 한다는 것을 염두해두면서, 다음 주제를 통해 좀 더 자바스크립트를 알아가보자.