[JS] var & let & const

ShinJuYong·2022년 3월 16일

TIL js

공부한것들

목록 보기

8/33

javaScript의 변수 선언 방식에는 3가지가 있다.
var let const 3가지 선언에대한 차이점을 알아보자

var

ES6이전 쓰이던 JS의 변수선언 방식

var는 JS의 특징중 하나인 호이스팅(추후에 추가 포스팅) 때문에 어디에 선언이 되어있든 간에 코드가 실행되기 전에 처리가 된다.

선언된 변수는 변수가 선언된 실행문 안에서 생성된다
선언하지 않은 변수는 항상 Global 변수이다.

x = () => {
  y = 1;
  var z = 2;

x();

console.log(y) // => 1
console.log(z); // z is not defined outside x

선언된 변수는실행명령어가 실행되기 전에 만들어진다.

console.log(a); // Error!
console.log("what are you doing?"); // 절대로 실행되지 않는다.

선언된 변수는 변수의 실행문에서 Property를 변경하지 않는다.
선언되지 않은 변수는 변경이 가능하다(삭제또한 가능)

var a = 1;
b = 2;
delete this.a; 
// strict 모드에서는 TypeError를 출력합니다. 그렇지 않으면 자동적으로 실패합니다.
delete this.b;
console.log(a, b); // ReferenceError를 출력합니다.
//'b' 프로퍼티는 삭제되었고, 어디에도 존재하지 않습니다.

var 변수의 호이스팅

변수 선언과 일반적인 선언들은 코드가 실행되기전에 최상단에서 처리가 되기때문에. 코드안에서 최상위에 선언한 것과 동일하게 취급된다.

즉, 변수가 선언되기 전에 사용 할 수 있다는것과 동일한 의미이다.

aaa = 2;
var aaa;
// ......

// 위의 선언은 호이스팅이 적용되기때문에 아래 코드와 같은 의미이다
var aaa;
aaa = 2;

전역변수와 외부 함수의 범위

var x = 0;  // x는 전역으로 선언되었고, 0으로 할당됩니다.

console.log(typeof z); // undefined, z는 아직 존재하지 않습니다.

function a() { // a 함수를 호출했을 때,
  var y = 2;   // y는 함수 a에서 지역변수로 선언되었으며, 2로 할당됩니다.

  console.log(x, y);   // 0 2

  function b() {       // b 함수를 호출하였을때,
    x = 3;  // 존재하는 전역 x값에 3을 할당, 새로운 전역 var 변수를 만들지 않습니다.
    y = 4;  // 존재하는 외부 y값에 4를 할당, 새로운 전역 var 변수를 만들지 않습니다.
    z = 5;  // 새로운 전역 z 변수를 생성하고 5를 할당 합니다.
  }       

  b();     // 호출되는 b는 전역 변수로 z를 생성합니다.
  console.log(x, y, z);  // 3 4 5
}

a();                   // 호출되는 a는 또한 b를 호출합니다.
console.log(x, z);     // 3 5
console.log(typeof y); // undefined y는 function a에서 지역 변수입니다.

let

Block 스코프를 가지는 변수를 선언하며, 선언과 동시에 값을 초기화 할 수 있다.

그래서 let과 var의 차이는?

let을 사용한다면. {}이나, let을 사용한 표현식내로 범위를 제한하는 변수를 선언 할 수 있다.
이는 var과 let의 결정적 차이점으로 var는 변수의 블록을 고려하지 않고 접근이 가능하지만, let은 불가능하다.

let의 범위 규칙

let으로 선언한 변수는 자신을 선언한 {}와 모든 하위 {}를 스스로의 범위로 가지게 된다.

var의 경우는 자신의 선언을 포함한 함수까지도 범위로 포함시킨다.

function varTest() {
  var x = 1;
  if (true) {
    var x = 2; // 같은 변수!
    console.log(x); // 2
  }
  console.log(x); // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2; // 다른 변수
    console.log(x); // 2
  }
  console.log(x); // 1
}

재선언

같은 이름의 변수를 같은 {}안에서 재선언하면 SyntaxError가 발생한다.

function errormaker() {
	let thisError;
    let thisError; // SyntaxError!!
}

const

const는 {}범위의 상수를 선언한다.
재할당할 수 없으며 재선언또한 불가능하다는 의미이다.

const의 동작예

/*
일반적인 상수에대한 관습은 대문자로 하는것이 관습이다.
*/
const ERRORMAKER; // Error! 초기값을 생략한 에러.
const THISCONST = "CONST"

THISCONST = "NO THIS LET"; // Error!

const THISCONST = "CON"; // Error!

var THISCONST = "NO THIS VAR"; // Error!

let THISCONST = "NO THIS LET"; // Error!

//{}에 대한 특성이 중요하다.
const block_scope = "block"
if (block_scope === "block"){
	// {} 안에 새로운 변수를 만든다.
  	let block_scope = "no_this_let"
    
    // block_scope는 이제 "no_this_let"이다.
    
    // 하지만 var선언은 전역으로 선언되기에 에러가 발생한다
    var block_scope = "what is that"?
}
console.log(block_scope); // block_scope는 "block"인 상태이다.