[JavaScript]var, let, const 차이와 호이스팅(hoisting)

var

원래 자바스크립트가 처음 나왔을 때는 이 var만 존재해서 변수를 선언할 때 var만 사용가능했다고 한다.

그러다가 ES6 이후로 let과 const가 나오면서 변수 선언할 때의 다양성?이 더 늘었다고 보면 된다!

 

var의 특징으로는 중복 선언이 가능하고, 전역 스코프에서 사용이 가능하다는 점이 있다.

        // var: 함수 외부 선언: 전역 변수
        var no1 = 10;   
        if(true) {
            var no1 = 20;
            console.log('no1=', no1);   // 1. 20
        }
        console.log('no1=', no1);       // 2. 20

이 코드처럼 if문 안에서 no1을 재선언 해줬는데 아무 문제없이 선언이 되었다.

또, if문 밖에서, 안에서 선언한 변수를 어디서든 사용하고 있다.

 

그리고 평소에 우리가 알고 있는 변수처럼 값의 재할당도 가능하다!

 

let

let은 위에서 설명한대로 ES6 이후에 나왔고 var와 다르게 재사용이 불가능하다.

그리고 변수 자신이 포함된 스코프에서만 사용이 가능하다.

	// ES6: let : 블록 범위: 지역 변수
        let no2 = 20;
        if(true) {
            let no2 = 30;               // if 내부 블록 사용 지역변수
            console.log('no2=', no2);   // 30
        }
        console.log('no2=', no2);       // 20

이 코드처럼 if문 안과 밖에서 같은 이름의 변수가 선언이 되었지만 그 둘은 확연히 다른 변수라는 것을 알 수 있다!

var와 공통점이 있다면, 값의 재할당이 가능하다는 점??? 뭐 변수니까 당연하긴 하지만

 

const

const도 let과 마찬가지로 ES6때 나왔다. 얘도 해당 스코프에서만 사용이 가능하다!

	// ES6 상수
        const YEAR = 2022;
        console.log("년도: ", YEAR);
        if(true) {
           // YEAR = 2023;    // error: TypeError: Assignment to constant
        }

이 코드처럼 const로 선언하고 값을 할당한 변수의 값을 바꾸려고 하면 에러가 난다!

그니까 변수가 아니라 상수가 된거라고 할 수 있겠지???

 

 

함수 호이스팅(hoisting)

호이스팅이란?

음 쉽게 말하면 그냥 맨 위로 올리는 거라고 생각하면 된다!

자바스크립트(JavaScript)는 인터프리터 언어라서 컴파일러가 따로 없고, 위에서 부터 쭉 내려오면서 한줄씩 코드를 읽어내려가기 때문에 선언 위치가 정말 중요함!

(자바스크립트가 대표적인 인터프리터 언어이고, 컴파일 언어로는 많이들 알고 있는 C, C++, Java 등이 있음. 컴파일하는 언어가 뭐가 있는지 생각해보면 됨)

 

자바스크립트와 함수 호이스팅

함수 선언문의 경우, 함수 선언의 위치와 상관 없이 코드 내 어느 곳에서든지 호출이 가능함
자바스크립트의 경우에는 모든 선언(var, function)을 호이스팅하는데, 함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 이를 변수 객체 저장함. (런타임 이전에 자바스크립트 엔진에서 먼저 실행되어, 함수 자체를 호이스팅 시킬 수 있다!)
그렇기 때문에, 함수 선언, 초기화, 할당이 한번에 이루어진다.

함수 표현식의 경우, 함수 호이스팅이 아니라 변수 호이스팅이 발생 !(변수에다가 함수를 넣어주는 형태이다보니까)

(변수 호이스팅과 같이 런타임 이전에 해당 값을 undefined로 초기화만 시키고, 런타임에서 해당 함수 표현식이 할당되어 그때 객체가 되기 때문임. 이게 변수 호이스팅!)

💡 콜백함수로 인자값을 전달하는 함수들은 보통 함수 표현식으로 많이 만든다.

 

(함수의 정의 방법은 1. 함수 선언문, 2. 함수 표현식, 3. Function 생성자 함수 이렇게 3가지가 있다.)

참고: https://seokmimmmmmmmm.tistory.com/49

[JavaScript]JavaScript 기본 문법 (2)

 

 

정리

var -> 첨부터 있었음. 전역 변수로 코드 어디서나 쓸 수 있고, 중복선언이 가능하며, 값의 재할당도 가능함

 

let -> ES6 때 나옴. 지역 변수, 변수인 만큼 재할당은 가능하나, 중복선언 불가능

 

const -> ES6 때 나옴. 상수, 상수니까 재할당이나 뭐 중복선언 당연히 안됨!

 

호이스팅 -> 어디서든 사용 가능하게 맨 위로 올리는 느낌적인 느낌. 다만 함수 선언문이랑 함수 표현식과의 호이스팅 방식의 차이 기억!