#기본기3_var, let, const의 차이

var는 구식자바스크립트의 잔재다.

대부분의 경우 let으로 대체가 가능하나 다른방식으로 동작이 되기 때문에 무작정 바꿀 수는 없는 노릇이다.

여전히 var로 만들어진 많은 코드들이 있기에 var와 let,const와의 차이점에 대해 알아야 한다.

 

-- Var  / let, const 차이 (var의 특성)

 

1. var는 블록스코프가 없다, 함수스코프 이거나 전역스코프이다. (let과 const는 블록스코프)

블록 기준으로 생기지 않기 때문에 블록 밖에서 접근이 가능하다.

// let이나 const로 선언시 Uncaught ReferenceError: test is not defined
if (true) {
    var test = true; // 'let' 대신 'var'를 사용했습니다.
  }
  alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

// 함수 안에서 선언시 함수스코프로 인식이 된다.
function test(){
  var say = "hello";
  console.log(say);
}

test(); // hello
console.log(say); // Uncaught ReferenceError: say is not defined

 

for문에서의 var는 반복문이 끝나도 접근이 가능하다.

for(var i =0; i < 10; i++){
 // 어떤 코드
}

console.log(i) // 10

// let이나 const로 선언시 Uncaught ReferenceError: i is not defined

 

2. var는 변수의 중복 선언을 허용한다. (정확히 말하면 재할당이 허용된다)

// 선언은 처음 한 번만 발생하며, 이후 같은 이름의 변수가 발견되면 값을 재할당한다.(변수의 값만 업데이트)

var test = "allow"; // 선언, 할당
var test = "yes";  // 재할당

alert(user); // John


// let, const로 할경우 
// Uncaught SyntaxError: Identifier 'test' has already been declared

 

3. var는 변수를 선언하기 전에 사용할 수 있다.

// var : undefined, 호이스팅되어 undefined, 초기값으로 할당됨
console.log(test1);
var test1;

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

// const : 선언과 할당을 동시에 해야함, Uncaught SyntaxError: Missing initializer in const declaration
// 위 아래 순서 바꾸면 Uncaught ReferenceError: test4 is not defined
const test2= "something";
console.log(test2)

 

함수스코프에서의 var

function sayWhat() {
  var test; // 선언은 함수 시작 시 처리됨, 밑에 써도 호이스팅됨.
  alert(test); // undefined
  phrase = "What"; // 할당은 실행 흐름이 해당 코드에 도달했을 때 처리됨.
}
sayWhat();

 

4. 브라우저에서 let이나 const가 아닌 var로 선언한 전역 함수나 전역 변수는 전역 객체의 프로퍼티 된다.

var test = 5;
alert(window.test); // 5 (var로 선언한 변수는 전역 객체 window의 프로퍼티가 됨)

// let, const로 할 경우 undefined 나옴

 

-- let과 const와의 차이점

 

1. 변수 재할당 가능 여부

• let: 선언된 변수를 나중에 다시 할당할 수 있습니다. 즉, 변수의 값을 변경할 수 있습니다.
• const: 선언된 변수에는 재할당이 허용되지 않습니다. 한 번 할당된 값은 변경할 수 없습니다.

// let 

let test = "냐옹";
test = "미야옹";

console.log(test); // 미야옹

// const 
const test = "냐옹";
test = "미냐옹"; // Uncaught TypeError: Assignment to constant variable.

 

2. 선언 시점에서의 초기화:

• let: 변수를 선언할 때 초기값을 지정하지 않아도 됩니다. 초기화하지 않은 변수는 undefined로 초기화됩니다.
• const: 변수를 선언할 때 반드시 초기값을 지정해야 합니다. 초기화되지 않은 const 변수는 SyntaxError를 발생시킵니다

 

// let 
let test;
console.log(test) // undefined
test = "냐옹";
console.log(test); // 냐옹


// const : 선언과 할당을 동시에 해야함 
// Uncaught SyntaxError: Missing initializer in const declaration
const test2; 
test2 = "something";
console.log(test2)