[javascript] var, let ,const

자바스크립트에는 변수 선언을 세가지 키워드로 할 수 있습니다. var, let ,const

let과 const는 자바스크립트 ES6 이후에 등장한 문법입니다.

💡 변수는 다음 3단계를 통해 생성된다. 선언단계 → 초기화 단계 → 할당 단계 선언단계 : 변수를 변수 객체에 등록 초기화 단계 : 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. (초기화 단계에서 변수는 undefined로 초기화) 할당 단계 : undefined로 초기화된 변수에 실제 값을 할당한다.

var는 변수 선언시 선언과 초기화 단계가 한번에 이루어집니다.

let과 const는 변수 선언시 선언만 이루어집니다.

호이스팅 (Hoisting)

hoist : 감아 올리기

 

호이스팅은 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징입니다.

각 키워드의 특징

var

호이스팅

var v
console.log(v) // undefined

console.log(v2) // undefined
var v2 

v2를 선언하기 전에 console.log()로 출력을 하면 오류가 나야할것 같지만 undefined로 출력될 뿐 오류가 나지 않습니다. 코드상으로는 v2가 더 아래에 있지만 호이스팅으로 인하여 console.log보다 v2선언이 먼저 실행됩니다.

변수할당

변수 선언이 호이스팅되어 런타임 이전에 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 런타임에 실행됩니다.

console.log(v) // undefined

var v = 'hello world' // 변수 선언과 할당
console.log(v) // hello world

함수 호이스팅

함수 선언문 또한 호이스팅이 된다. 함수 표현식은 아래와같이 네가지 방법이 있습니다.

console.log(add); // [Function: add]
console.log(sub); // undefined
console.log(v); // undefined
console.log(arrow); // undefined

// 함수 선언문 
function add(x, y) {
	return x + y
}

// 함수 표현식 
var sub = function(x, y) {
	return x - y
}

// User 생성자 함수
function User(name, age) {
    this.name = name;
    this.age = age;
}
var v = new User("coke", 3)

// 화살표 함수
var arrow = (x,y) => x + y

함수 선언문의 경우 함수 자체가 호이스팅되어 함수 결과값을 볼 수 있습니다.

하지만 나머지의경우 var로 인해 변수가 선언과 함께 undefined로 초기화 될뿐 지정해준 코드의 값으로 할당은 진행되지 않음을 확인할 수 있습니다.

스코프

var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 스코프로 인정합니다.

var a = 1

if (true) {
  var a = 5
}

console.log(a) // output: 5

따라서 위와 같은 코드에서 if문은 함수가 아니므로 var a = 5가 중복선언 되면서 a는 전역변수를 가리키게 됩니다. 반면 let, const의경우 모든 블록을 지역스코프로 만듭니다. 따라서 위와같은 코드의 경우 두개의 a 변수는 다른 변수를 가리키게 됩니다.

let, const

let은 변수 중복 선언이 불가능합니다.

let a = 'a'
let a = 'a // Uncaught SyntaxError: Identifier 'a' has already been declared

const는 반드시 선언과 초기화를 동시에 해야합니다.

const name; // Uncaught SyntaxError: Missing initializer in const declaration
const name = 'a'

const 키워드는 재할당을 금지할 뿐, ‘불변’을 의미하지 않고

재할당의 경우 원시값은 불가능하지만 객체는 가능합니다.

const v = 'a'
v ='b' // error

const v2 = {
	a : 'a',
}

v2.a = 'b'

console.log(v2) // output : { a : "b" }

 

 

https://www.howdy-mj.me/javascript/var-let-const/

https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

https://ko.javascript.info/constructor-new