부끄럽게도 기초적인 개념이지만 정확히 이해하지 않고 관행적으로 코딩하다가 언젠가 꼭 정리를 해봐야 겠다싶어 기록한다.

 

 

var, let, const 차이

구분 호이스팅대상 변수선언전 접근시 스코프 변수할당없는 선언 동일변수명 재선언 변수 재할당 특징
var ○ 접근가능하나 undefined으로 초기화 Global (Window Object) ○ ○ ○ 특정 함수내의 선언된 변수가 함수밖에서도 접근가능하다.
let × ReferenceError 발생 (코드실행흐름에 도달시 초기화) Block ({}) ○ × (Error) ○ 선언된 Block내에서만 접근가능하다.
const × ReferenceError 발생 (코드실행흐름에 도달시 초기화) Block ({}) × (Error) × (Error) × (Error) 선언된 Block내에서만 접근가능하다.

Constant의 약자로 값이 변경되면 안되는 상수선언에 사용.
But Object내 속성은 변경가능
const _user = {name:'kim'};
_user.name = 'park'; // 변경됨
함수선언문 ○ 　 　 　 　 　 　
함수표현식 × 　 　 　 　 　 　

 

 

 

호이스팅(Hoisting)이란

스크립트가 실행되기 전에 변수와 함수의 선언을 최상단 스코프로 끌어올리는 동작을 말한다.

여기서 끌어올린다는 의미는 메모리에 Load하는 행위를 말한다.

 

 


함수선언문(Function Declaration)

foo(); // 정상작동
function foo() {}

함수선언문은 호이스팅대상으로 함수호출보다 아래에 있어도 정상작동한다.

 

 


함수표현식(Function Expression)

foo(); // Error
var foo = function() {}

함수표현식은 호이스팅대상이 아니므로 함수호출보다 아래에 있어면 오류발생한다.

 

 


결론

함수와 변수의 정의는 가급적 코드의 상단에 선언하여 선언보다 먼저 변수나 함수를 접근하는 경우를 애초에 없도록하자.

var보다는 let, const를 사용하자.

var는 ES6이전의 유산으로 ES6이후 도입된 let, const보다 안정성과 가독성, 유지보수성이 모두 부족하나,

ES6만이 허용되는 브라우저 컴파일이 강제되기에는 시간이 필요하므로 위 개념을 이해 하고 있어야 한다.