var let const

변수를 선언할때 초기값을 할당(초기화)하지 않으면 자동으로 undefined값으로 초기화됩니다.

var variable;
console.log(variable) // undefined

var로 선언하면 같은 이름으로 중복선언이 가능합니다.

var variable = 1;
var variable = 2;
console.log(variable) // 2

const는 중복선언과 재할당이 불가능하며 선언과 동시에 초기화 해주어야합니다.

const constance = 0;
constance = 1; // TypeError: Assignment to constant variable.
const initial; // Uncaught SyntaxError: Missing initializer in const declaration
const count = 0;
let count; // SyntaxError: Identifier 'count' has already been declared.

let은 초기화해주지 않아도 재할당이 가능합니다.

let count;
console.log(count) // undefined
count = 0;
console.log(count) // 0;

스코프

스코프(scope)는 식별자(변수명, 함수명, 클래스명 등)의 유효범위를 말합니다.
전역에 선언된 전역변수는 전역 스코프를 가져 하위 모든 곳에서 참조가 가능하고
지역에 선언된 지역변수는 지역 스코프를 가져 해당 지역과 하위 지역에서만 참조가 가능합니다.

var let const의 스코프

var은 함수에서만 지역변수가 되는 함수레벨 스코프만을 가지지만

function a() {
  var variable = 1;
}
console.log(variable) // ReferenceError: variable is not defined

if (true) {
  var variable = 1;
}
console.log(variable) // 1

let과 const는 블록레벨 스코프를 가져 모든 코드블록(if for while try/catch 등 포함)이 지역 스코프를 가집니다.

function a() {
  const constance = 1;
}
console.log(constance) // ReferenceError: constance is not defined

if (true) {
  let string = '';
}
console.log(string) // ReferenceError: string is not defined

호이스팅

자바스크립트 엔진은 소스코드를 한 줄씩 읽으며 순차적으로 실행하기 전에,
변수 선언을 포함한 모든 선언문을 찾아내어 먼저 실행합니다. (필요한 메모리공간을 미리 할당)
마치 함수안의 선언들을 모두 끌어올려 해당 함수 유효 범위 최상단에 선언된 것과 같은 특징을 호이스팅(hoisting)이라 합니다.

var let const의 호이스팅

var let const function function* class 로 선언한 모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 되어 먼저 선언됩니다.

단, var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화까지 해주는 반면,
let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않아 에러가 발생합니다.

console.log(a); // undefined
var a = 1;

console.log(b); // ReferenceError: b is not defined
let b;

console.log(c); // ReferenceError: c is not defined
const c = 0;

함수 호이스팅

함수의 정의 방식 4가지

// 1. 함수 선언문
function add(a, b) {
  return a + b
}

// 2. 함수 표현식 (함수 이름 생략 가능)
const add = function (a, b) {
  return a + b
}

// 3. 화살표 함수 (리턴값만 있는 경우 한줄로 표현 가능)
const add = (a, b) => a + b

// 4. Function 생성자 함수
const add = new Function('a', 'b', 'return a + b')

함수 선언문과 함수 표현식의 호이스팅 차이

console.log(add) // f add(a, b)
console.log(func) // undefined
console.log(func2) // ReferenceError: func2 is not defined

console.log(add(1, 1)) // 2
console.log(func(1)) // TypeError: func is not a function
console.log(func2(2)) // ReferenceError: func2 is not defined

function add(a, b) {
  return a + b;
}

var func = function (num) {
  return num;
}

const func2 = num => num; // 매개변수 하나 일 경우 () 생략 가능

함수 선언문의 경우 호이스팅되어 사용이 가능하지만
변수에 담은 표현식의 경우 변수들의 호이스팅 규칙을 따르기 때문에 런타임때 값이 할당되기전에는 사용할 수 없습니다.