UX·UI - FrontEnd Dev. Story

프론트엔드/Javascript

[Javascript]함수 선언 var / let / const 차이점 공부하기

클로이겅쥬 2019. 12. 10. 17:52
반응형

 

[ 자바스크립트 var ]

가장 많이 사용하는 선언은 " var " 입니다.

var는 변수를 선언 할 수 있습니다.

 

ex)

var a = 0; var b; car c = []; car d = {};

 

이렇게 선언하면서 값을 할당할 수도 있고 빈 변수로 선언해 둘 수도 있습니다.

변수를 덮어쓰기(재선언)도 가능합니다.

 


ex)

 

var a = 1;

var a = 2; // a = 2

 


 

 

[ 자바스크립트 let ]

let은 var의 문제점을 해결하기 위해 es2015부터 추가 되었습니다.

let으로 선언 된 변수는 재선언 할 수 없습니다.


ex)

 

let a = 1;

let a = 2; // Uncaught SyntaxError

a = 3; //a = 3


[ 자바스크립트 const ]

contst 역시 es2015부터 추가 되었습니다.

let과의 차이점은 재선언은 물론이고 재할당도 불가능합니다.

 


ex)

 

const a = 1;

contst a = 2; // Uncaught SyntaxError

a = 3; // Uncaught SyntaxError

//a = 1


 

이 차이점 외에도 호이스팅 문제가 있는데 일단 호이스팅(hoisting)이란 [끌어올린다]는 사전적의미를 지녔는데

자바스크립트 내에서도 비슷한 역할을 합니다.

 


ex)

 

rating();

funtion rating () {

console.log(rate); //undefined

var rate = "15";

console.log(rate); // "15"

}


 

다른 언어의 경우 에러가 나겠지만 자스의 경우 첫번째 console.log()에서 undefined로만 나옵니다.

이유는 자스가 이렇게 인식하기 때문입니다.

 


ex)

 

rating();

funtion rating () {

var rate;

console.log(rate); //undefined

var rate = "15";

console.log(rate); // "15"

}


 

이렇게 뒤에 선언을 했음에도 위에서 선언한것과 같은 효과를 호이스팅이라고 합니다.

var는 function-scope이기때문에 전역변수처럼 적용되며 let, const는 block-scope 이기때문에 호이스팅은 일어나지만 지역변수처럼 다뤄집니다.

함수역시 호이스팅이 일어납니다. 단, 함수의 경우 함수선언일때만 호이스팅이 일어나며 함수표현식은 호이스팅이 일어나지않습니다.

반응형