[JavaScript] 변수 신문법 : var let const Hoisting

javascript 변수의 선언, 할당

자바스크립트의 변수 선언 방식은

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

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

결론부터 말하자면
var : 재선언 O 재할당 O
let : 재선언 X 재할당 O
const : 재선언 X 재할당 X 의 특징을 가진다.

let 나이;
let 나이; //에러
const 성별 = '여자';
const 성별 = '남자'; //에러

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

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

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

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

javascript 변수의 범위

var, let, const로 만든 변수들은 각각 존재 범위가 있다.
var 변수의 존재 범위는 function 안이다.
let과 const 변수는 존재 범위가 중괄호({}) 안이다.(for, if, function 등)
==> 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이라고 한다.
예를 들어

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(이름);
// 위와 같은 순서로 코드가 실행되기 때문이다.

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