var / let / const 차이
✅ 변수 선언방식에 따른 세가지의 차이 알아보기
hoisting
✅ hoisting 의 의미 알아보기
세가지는 변수 선언방식에 따른 차이점이 있다.
각각 살펴보겠다.
💥 var
var 특징
한번 똑같은 변수를 선언하고 다른곳에서 같은 변수명, 다른값이 사용되더라도 적용이 된다.
var age = 30 ;
console.log(age) //30;
var age = '20' ;
console.log(age) //'20'으로 변경이렇게 되면 유연하게 변수가 선언되기때문에 위와같이 간단한 테스트에서는 편할 수 있지만 코드량이 많아지고 같은 변수가 나타날 시 어디서 어떻게 사용될지 모르며 값이 바뀔 가능성이 많아 오류잡기가 힘들어 질 수 있다.
이를 방지하기 위해 js ES6에서 let 과 const 같은 새로운 변수선언방식이 나왔다.
💥 let
let 특징
var 와 달리 같은 변수명을 두번 선언하지 못하지만 값은 재할당이 가능하다.
let name = 'sook'
let name = 'young'
//불가
let name = 'sook'
name = 'young'
//가능
console.log(name) // young 💥 const
변수 재선언, 변수 재할당 모두 불가능하다.
호이스팅(Hoisting)
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.
자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
유효 범위: 함수 블록 {} 안에서 유효
즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
실제 메모리에서는 변화가 없다.
호이스팅의 대상
var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
