졸업 작품을 위한 팀 프로젝트에서 처음으로 자바스크립트를 제대로 사용하게 되었을 때 많이 당황했던 기억이 난다.
자바스크립트에 대한 지식이 거의 없었고, 무엇보다 변수를 선언하려는데 어떤 차이점이 있는지 잘 몰랐기 때문이다.
당시엔 팀 프로젝트 결과물 제출이 시급했기에 주먹구구식으로 했었다.
어찌 되었든 결과물은 성공적으로 나왔지만 이후로도 해당 프로젝트에 대해 아쉬움이 컸기에 자바스크립트를 제대로 다시 공부해보고자 한다.
자바스크립트에서 변수를 선언하는 방법은 다음과 같다.
- var
- let
- const
위 세가지를 사용해 변수를 선언하는 것인데, 각각의 차이를 제대로 알지 못하면 코드 작성 시 제대로 된 결과값을 얻지 못 할 수 있다.
우선, 변수 선언에 대해 설명하기에 앞서 아래 용어에 대해 알아두면 이해가 쉬울 것이다.
- 스코프
- 호이스팅
1. 스코프(scope)
: 스코프란 곧 '범위'를 의미한다.
프로그래밍에선 변수/함수/클래스 등의 식별자가 유효한 범위라고 이해하면 좋으나, 이 말이 헷갈리는 사람들은 단순하게 선언한 변수를 사용할 수 있는 범위로 이해해도 좋을 것 같다.
또한, 하위 스코프는 상위 스코프에 접근이 가능하지만 그 반대는 불가능하다.
예를 들어, 함수 밖(상위 스코프)에서 선언된 전역 변수는 함수 내(하위 스코프)에서도 사용이 가능하다.
(하위 스코프에서 상위 스코프에 선언된 변수를 참조)
그러나 함수 내(하위 스코프)에서 선언된 지역 변수는 함수 바깥(상위 스코프)에서 사용할 수 없다.
(상위 스코프에서 하위 스코프에 선언된 변수를 참조)
2. 함수레벨/블록레벨 스코프
: 각각 function scope / block scope라고 불린다.
함수레벨 스코프는 only 함수인 스코프로, 함수 내에서만 사용이 가능하다.
블록레벨 스코프는 if문, for문, while문 등의 지역 스코프로, 특정 블록 내부에서만 사용이 가능하다.
let과 const를 쓰면 블록단위의 스코프 사용이 가능하다.
3. 호이스팅(hoisting)
: 호이스팅의 의미가 '끌어올리기'인 것처럼, 선언되지 않은 함수나 변수를 끌어올려 사용하는 방식이다.
예를 들어, 아래와 같은 코드를 한 번 봐보자.
console.log(a); //호이스팅에 의해 선언됨. undefined 출력
var a; //먼저 실행됨.
a='테스트';
console.log(a); //'테스트' 출력맨 첫 줄에 console.log(a)가 나왔지만 a는 선언되지 않은 상태이다.
그러나 바로 아래인 둘째줄을 보면 var a가 선언됨을 볼 수 있다.
a가 선언되기 전의 코드인 console.log(a)에선 바로 아래줄에 선언된 var a를 끌어올려 사용(호이스팅)하였다.
이 때, a의 값은 할당되지 않은 상태이므로 undefined가 출력된다.
호이스팅은 가독성을 해치고, 에러가 잘 나지 않아 오류 발생 가능성이 높다.
해당 내용들을 통해 다음 게시물에선 var, let, const의 차이점을 알아보고 어떻게 사용하면 되는지 작성해보도록 하겠다.
