JS 지식_3. var, let, const (feat. 호이스팅)

너무 흔한 주제지만,

var, let, const 에 대해서 부셔봅시다.

---

크게 3가지 분야로 나누어서 정리해보려 합니다.

scope

결론부터)

var 는 함수 레벨 스코프, let 과 const 는 블록 레벨 스코프이다.

var - 함수레벨 스코프

• 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.

  • 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

사실 이렇게만 보면 잘 이해가 가질 않더라구요. 블록 레벨 스코프와 함께 비교해보겠습니다.

var foo = 123; // 전역변수

console.log(foo); // 123

{
  var foo = 456; // 전역변수
}

console.log(foo) // 456

• 블록 레벨 스코프를 따르지 않는 var 키워드의 특성 상, 코드 블록 내의 변수 foo는 전역 변수이다.

• 즉, 쉽게말하면,

{ } 내부에서 선언되어도 전역변수처럼 사용된다.

let, const - 블록레벨 스코프

• 가장 흔하게 쓰이는 스코프입니다. 여러 언어의 변수들이 이에 해당됩니다.

let foo = "I'm foo";
if(true) {
    let bar = "I'm bar";
    console.log(foo);   //I'm foo
    console.log(bar);   //I'm bar
}

console.log(foo);   //I'm foo
console.log(bar);   //Uncaught ReferenceError: bar is not defined.

• foo 는 전역변수로 전역 / 함수 내부 어디든 접근 가능합니다.

• bar 은 블록 내부에서만 살아있는 변수로, 전역에서 접근은 불가능합니다.

---

선언 및 할당

아주 기본적인 차이점입니다! 정리해보죠.

선언, 재선언

var 는 재선언이 가능하지만, let과 const는 불가능합니다.

var a = 10;
var a = 20;

let b = 30;
b = 40;
let b = 50; // Uncaught SyntaxError: Identifier 'b' has already been declared

const c = 0;
c = -1; // Uncaught TypeError: Assignment to constant variable.
const c = 10; // Uncaught SyntaxError: Identifier 'a' has already been declared

---

호이스팅

그 유명한 호이스팅입니다.

먼저 호이스팅의 사전적인 의미는,

이렇다고 합니다. 무언가 끌어 올리는 행위를 말하죠.

이를 Javascript 에 적용하면, 아래와 같이 해석할 수 있습니다.

🎈 함수와 변수를 코드를 실행하기 전에 실행 컨텍스트를 위해 메모리에 저장

약간 어렵네요. 더 쉽게 풀어보자면,

🎃 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

이라고 할 수 있겠습니다.

그렇다면, Hoisting에 대해서 타입별로 살펴볼게요.

결론부터, 쓰겠습니다. (결론충)

호이스팅 - var

var 로 선언한 변수는, 선언과 동시에 undefined 값을 할당해줍니다.

그래서 할당하기 전에 접근해도 에러가 발생하지 않고 undefined 가 뜬것입니다.

console.log(varA); // undefined

var varA = 10;

호이스팅 - let, const

let 이나 const 으로 선언한 변수도 호이스팅이 됩니다.

다만, 이 친구들은 var 처럼 undefined 로 할당하지 않아요. 그래서 얘만 오류가 납니다.

console.log(letA);

let letA = 100; // Uncaught ReferenceError: letA is not defined

호이스팅 - 함수 표현식과 함수 선언식

함수 선언식은 호이스팅이 되지만, 표현식은 되지 않는다.

• 함수 선언식

function funcDeclarations() {
  return 'A function declaration';
}
funcDeclarations(); // 'A function declaration'

일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다.

• 함수 표현식

var funcExpression = function () {
    return 'A function expression';
}
funcExpression(); // 'A function expression'

유연한 자바스크립트 언어의 특징을 활용한 선언 방식이다.

선언식과 표현식에 대한 호이스팅은 아래 예제를 보자.

예제

logMessage();
sumNumbers();

function logMessage() {
  return 'worked';
}

var sumNumbers = function () {
  return 10 + 20;
};

💢 기존 c++개발자로서.. 굉장히 불편하지만.. javascript는 된다ㅜ

위와 같은 코드가 있을때, 아래처럼 해석이 된다.

function logMessage() {
  return 'worked';
}

var sumNumbers;

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {
  return 10 + 20;
};

1. logMessage 함수는 함수 선언식으로, 호이스팅 되었습니다.

2. sumNumbers 함수의 로직은 호출된 이후에 할당 되므로, sumNumbers 를 함수가 아닌 변수로 인식한다.

   • 따라서 함수 표현식은 호이스팅이 되지 않는다.

---

그 유명한 var, let, const 와 호이스팅까지 알아보았습니다.

잘못된 내용이 있다면 댓글로 알려주세요 :)