javascript 변수 및 호이스팅(Hoisting) : var, let, const, Hoisting

javascript 변수의 선언, 할당

자바스크립트의 변수 선언 방식은 총 세 가지 경우가 있다.

var 이름;
let 나이;
const 성별;

 

var, let, const는 키워드마다 변수의 선언, 할당, 범위에서 차이가 있다.

결론부터 말하자면 var, let, const는 각각 아래와 같은 특징을 가진다.

var : 재선언 O 재할당 O
let : 재선언 X 재할당 O
const : 재선언 X 재할당 X

var

var은 중복해서 선언이 가능하고, 이 경우, 마지막에 할당된 값이 변수에 저장된다. 또한 값의 재할당도 가능하다.

따라서 기존에 선언해 둔 변수의 존재를 잊어버리고, 값을 재할당 하게 되는 등의 실수가 발생할 수 있다.

var 이름 = '홍시'; // 초기 선언
var 이름 = '감홍시'; // 중복 선언 가능
이름 = '감중에홍시'; // 값의 재할당 가능

let

let은 값의 재할당은 가능하나, 중복으로 선언이 불가능하다. 이미 선언한 변수를 다시 선언할 경우, 에러가 발생한다.

let 나이 = 10; // 초기 선언
나이 = 20; // 재할당 가능
let 나이; // 재선언은 불가능. 에러 발생

 

Const

const는 중복 선언 및 값의 재할당이 모두 불가능하다.

또한 const는 var과 let과 달리, 선언과 동시에 반드시 값을 정의하여야 한다.(값의 재할당이 안되니 어찌보면 당연한 것)

하지만 const로 객체를 만들었을 때, 오브젝트 내부 값을 변경해도 에러가 나지 않는다.

const 사람 = { 이름 : 'Kim'};
사람.이름 = 'Park' // OK. 에러 안남

왜냐하면 사람이라는 const 변수 값을 변경했을 뿐, '사람'이라는 변수를 재할당 한 것은 아니기 때문에 오류가 나지 않는다.
c.f) 만약 오브젝트 안의 값 자체를 못 바꾸게 하려면 Object.freeze(사람); 이라는 자바스크립트 내의 freeze 문법을 사용하면 된다.

const 사람 = { 이름 : 'Kim'};
Object.freeze(사람);
사람.이름 = 'Park' //에러

 

javascript 변수의 범위

var, let, const로 만든 변수들은 각각 존재 범위가 있다.

var 변수의 존재 범위는 function 안이다. (함수 레벨 스코프)
let과 const 변수는 존재 범위가 중괄호({}) 안이다.(블록 레벨 스코프)(for, if, function 등)

정리하자면, var은 함수 내부에 선언된 변수만 지역 변수로 인정하고

let, const는 모든 블록 내부에서 선언된 변수까지만 지역 변수로 인정한다.
=> var의 존재 범위가 let이나 const보다 살짝 더 넓다.

function 함수(){
  var 이름 = 'Kim';
  console.log(이름); //가능
}
console.log(이름); //에러
// 위와 같이 function 내에서 선언한 var은 function 내에서만 유효하고,
// function을 벗어나면 의미가 없어진다.


if ( 1 == 1 ){
  let 이름예제 = 'Kim';
  console.log(이름예제); //가능
}

console.log(이름예제); //에러

// 위와 같이  let 변수는 {} 중괄호 내에서 만들면 중괄호 내에서만 쓸 수 있다.

 

javascript 변수의 Hoisting

자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석하는 것을 변수의

호이스팅(Hoisting)이라고 한다.

자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석하는 것을 변수의 Hoisting이라고 한다. 예를 들어보자.

function 함수(){
  
  console.log('hello');
  var 이름 = 'Kim';
  
}

다음과 같은 코드를 작성할 경우, 자바스크립트에서 실제로 동작되는 순서는 다음과 같다.

function 함수(){

  var 이름; 
  console.log('hello');
  이름 = 'Kim';
  
}

다음과 같이 변수의 선언 부분을 강제로 변수의 범위 맨 위로 끌고가서 해석하고 지나간다.

다른 예제 코드를 보자

console.log(이름);
var 이름 = 'Kim';
console.log(이름);

// 만약 다음과 같이 코드를 작성하면 실행결과는
// undefined
// Kim이다.
// 왜냐하면 Hoisting 때문에

var 이름;
console.log(이름);
이름 = 'Kim'
console.log(이름);

// 위와 같은 순서로 코드가 실행되기 때문이다.

 

 

한편, Google JavaScript Style Guide 에서는 다음과 같은 변수들의 사용 규칙을 정의하고 있다.

• 모든 변수들은 const와 let을 기본으로 사용하고, var은 절대 사용하면 안된다.
• const를 기본으로 사용하되, 값을 재할당 할 일이 있다면 let을 사용하라
• 변수 선언을 할 때는, 한 번에 하나의 변수만 선언해라

let a = 1, b = 2; // Not Good

let a = 1;
let b = 2; // Good

 

출처 

1. 코딩애플 "매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법"

2. https://inpa.tistory.com/entry/JS-📚- var-let-const-차이점-변수-호이스팅

3. Google JavaScript Style Guide