[JS] 변수 var, let, const

 

 

var와 let은 크게 다르지 않지만 차이점은..

var 한 번 선언된 변수명을 다시 선언해도 Error가 뜨지 않는다.

let 한 번 선언한 변수명은 다시 사용할 수 없다.

var name = "aoto";
console.log(name); // aoto

var name = "yae";
console.log(name); // yae

let name = "aoto";
console.log(name); // aoto

let name = "yae";
console.log(name); // Error!

 

💡 var 호이스팅 되기 때문에 선언 전에 사용해도 작동한다.

이 때 선언만 호이스팅 되고 값은 호이스팅 되지 않는다.

console.log(name); // undefined
var name = "aoto";

// 호이스팅 되기 때문에 아래처럼 작동함
var name;
console.log(name);
name = "aoto";

 

💡 let Temporal Dead Zone (선언 전에 작성된 영역. 작동 XXX)

console.log(name); // ReferenceError, 이 부분이 TDZ
let name = "aoto";

let age = 30;

function showAge() {
  console.log(age); // 이 부분이 TDZ
  let age = 20; // 여기서 다시 age를 선언하지 않았다면 정상 작동함
}

showAge();

변수의 생성과정

1. 선언  2. 초기화  3. 할당

 

var

1. 선언 + 초기화 : 동시에 이뤄짐. 값을 할당하지 않아도 Error가 뜨지 않고 undefined 출력

2. 할당

 

let

1. 선언 : 호이스팅 될 때 이뤄짐

2. 초기화 : 값이 할당 될 때 이뤄짐

3. 할당

 

💡 const

1. 선언 + 초기화 + 할당 : 셋이 같이 이뤄짐

var age;
age = 20;

let name;
name = "aoto";

const gender // Error
gender = "femaie"

 

var : 함수 스코프 function-scoped

함수 내에서 선언된 변수만 그 지역변수가 됨

 

let, const : 블록 스코프 block-scoped

모든 코드블록 내에서 선언된 변수는 코드블록 내에서만 유효하며 외부에선 접근할 수 없다.

코드블록 : 함수, if문, for문, while문, try/catc문 등

const age = 20;

if (age > 19) {
  var txt = "성인";
}

console.log(txt); // "성인"

// if문 내에서 변수를 선언했지만 밖에서 사용 가능
// let, const는 if문 내에서만 사용 가능

function add(num1, num2) {
  var result = num1 + num2;
}

add(2, 3);
console.log(result); // Uncaught ReferenceError: result is not defined

// 하지만 var가 함수 내에서 선언됐다면 그 안에서만 사용 가능

 

 

 

🔗 https://youtu.be/ocGc-AmWSnQ?si=uU8_U_Tv0k6fxpf7

 

 

➕ let, const 작성 방식

둘을 구분하기 위해 let은 CamelCase로, const는 대문자와 _로 작성한다

let myName = 'aoto';
const MY_NAME = 'yae'

 

 

 

codeit 프로그래밍 핵심 개념 in JavaScript 14. 상수

🔗 https://www.codeit.kr/topics/core-concept-of-javascript-programming

프로그래밍 핵심 개념 in JavaScript - 자바스크립트 강의 | 코드잇