변수의 차이 스코프 그리고 호이스팅

JavaScript는 굉장히 유연한 언어다
C와 JAVA와는 다르게 변수를 선언 할 때에 재선언과 재할당이 가능한 언어이기 때문이다

ES6 버전 이전까지만 하더라도 'var' 라는 변수 선언 방식을 사용하여

재선언과 재할당이 가능하였다. 하지만 여러 사람이 협업하고 코드의 양이 많아짐으로써 'var' 변수 선언 방식은 혼란을 가지고 올 수 있다

그리하여 ES6 이후로 'let'과 'const'라는 새로운 변수 선언 방식이 등장하였다.

var, let, const 이 세가지의 변수 선언 방식과 스코프 그리고 호이스팅에 대해 알아보자.

var

var name="정민";
var name="길동";

console.log(name) //결과 : 길동

name="김두한";
console.log(name) //결과 : 김두한

위 코드와 같이 name의 변수명을 재선언과 재할당을 하였는데도 에러가 나오지 않고 정상 출력이 가능하다.

let

let name="정민";
let name="길동";
console.log(name) //결과 : SyntaxError

위와 같이 선언을 하고 재선언을 할시에 SyntaxError가 발생한다.
하지만 재 할당은 가능하다.

let name="정민";
name="길동";
console.log(name); //결과 : 길동

const

const name="정민";
const name="길동;
console.log(name); //결과 : SyntaxError

const name="정민";
name="길동";
console.log(name); //결과 : TypeError

const의 경우 위와 같이 재선언 재할당이 불가능 한 상수이다.

일단 기본적으로 변수 선언에는 const를 사용하는 것이 좋다 만약 재할당이 필요한 변수를 만들어야 할 경우에는 let을 한정적으로 사용하는 것이 좋기도 하다

함수스코프와 블록레벨스코프

함수스코프

함수 내에서 선언된 변수는 함수 내에서만 유효하고 함수 외부에선 참조가 안된다.
즉 함수 내부에서 선언한 변수는 지역변수이며 함수 외부에서 사용한 변수들은 모두 전역변수인 것이다.
var변수는 중복선언도 허용되고 블록레벨스코프를 따르지 않으므로 블록 안에 있는 name은 전역변수이다 그렇기에 결과에 아무런 문제가 없다

var name = "정민";

console.log(name) // 결과 : 정민

{
  var name = "길동";
}

console.log(name) // 결과 : 길동`

블록레벨스코프

모든 블록(for, if, while, try/chatch)내에서 선언된 변수는 그 해당 블록에만 유효하며 외부에서는 참조할 수 없다.
즉 코드 블록 내부에서 선언한 변수들은 지역변수인 것이다
아래를 확인해보자

let name="정민"; //전역변수
{
  let name="길동"; //지역변수
  let age=28; //지역변수
}
console.log(name); //결과 : 정민
console.log(age); //결과 : ReferenceError: age is not defined

블록안에 설정되어있는 변수들은 블록레벨을 가지고 있는 지역변수이다
그렇기에 전역에서 설정된 변수와 다르며 전역에서 지역변수의 값을 불러오려해도 불러 올 수가 없다.

호이스팅

호이스팅은 무엇일가

var를 제외한 let과 const는 선언이 되기전 사용하려하면
아래와 같이 Reference Error (참조오류)가 발생된다.

console.log(lettest);
console.log(consttest);
let lettest=323;
const consttest=311;
//결과 : ReferenceError: Cannot access 'lettest' before initialization

하지만 var의 경우는 선언을 하기전 사용을 하면 값은 들어가지 않지만
선언이 먼저 적용되어 undefined라는 공간이 생긴다

console.log(vartest);
var vartest=32144;
//결과 : undefined;

하지만 let과 const도 속한 스코프의 최상단으로 호이스팅은 되지만
선언되어 초기화 되기전에는 TDZ(Temporal Dead Zone)라는 영역에 속하게 된다
그 안에서 const나 let같은 class로 이후에 선언된 것들을 사용하면 오류가 나는 것이다.

---

언어의 자유가 높다는건 당장 개발할 때는 편할 수 있지만.. 오류를 찾아서 해결해야 할 때는 골치가 아파질수 있기에 안전장치인것이다 var라는 녀석은 오늘날과 같이 안전장치가 없는 시절에 사용되었던 옛날 개발시대의 잔재와 같다.

호이스팅은 추후에 더 자세히 들여다볼 필요가있다
조금만 더 여유가 생겼을때 자세히 포스팅해보자