[내배캠 Java 6기] Javascript 문법1

1. var vs let vs const

📌 Scope

var: 전역 범위 or 함수 범위

    var tester = "hey hi";
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

tester는 전역 범위
hello는 newFunction 함수 범위
따라서, hello를 함수 밖에 찍으려고 하면 error가 발생한다.

let: 블록 범위 {}

   let greeting = "say Hi";
   let times = 4;
   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);// "say Hello instead"
    }
   console.log(hello) // hello is not defined

hello는 {} 안에서만 사용할 수 있기 때문에 {} 밖에서 사용하면 정의되지 않는다.

const: 블록 범위 {}
let과 마찬가지로 {}안에서만 사용할 수 있다.

📌 업데이트 & 재선언

var: 업데이트 O, 재선언 O

 var greeter = "hey hi";
 greeter = "say Hello instead";

 var greeter = "hey hi";
 var greeter = "say Hello instead";

let: 업데이트 O, 재선언 X

 let greeting = "say Hi";
 greeting = "say Hello instead";

 let greeting = "say Hi";
 let greeting = "say Hello instead"; 
 // error: Identifier 'greeting' has already been declared

let은 업데이트는 가능하지만 재선언은 불가능하다

const: 업데이트 X, 재선언 X

const greeting = "say Hi";
greeting = "say Hello instead";
// error: Assignment to constant variable. 

const greeting = "say Hi";
const greeting = "say Hello instead";
// error: Identifier 'greeting' has already been declared

const는 업데이트도 재선언도 에러가 발생한다.

📌 호이스팅

👀 호이스팅이란? 변수와 함수의 선언이 맨 위로 이동되는 자바스크립트의 매커니즘이다.

var: 최상위로 호이스팅된다.
===> undefined으로 초기화

    console.log (greeter);
    var greeter = "say hello"

위와 같이 적으면 자바스크립트는 아래와 같이 해석한다.

    var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "say hello"

따라서, greeter는 undefined로 초기화되는 것이다.

let: 최상위로 호이스팅된다.
===> 초기화 x
맨위로 끌어올려지지만 초기화는 되지 않는다.
선언하기 전에 접근하면 reference error가 발생한다.

const: 최상위로 호이스팅된다.
===> 초기화 x
let과 마찬가지로 맨위로 끌어올려지지만 초기화는 되지 않는다.

초기화

var: 초기화하지 않은 상태에서 선언 O
let: 초기화하지 않은 상태에서 선언 O
onst: 선언 중에 초기화 해야한다.