[Javascript] 변수와 상수

변수

변수 선언

• 변수 선언 시 초기화

// [변수 선언 예약어] [변수명] = [값]
let num = 1;

console.log(num); // 1

• 변수 선언 후 초기화

// [변수 선언 예약어] [변수명]
// [변수명] = [값]
let num;
num = 1;

console.log(num); // 1

• 변수 선언 및 초기화 후 재 할당

let num = 1;
num = 2;

console.log(num); // 2

• 변수 선언 및 초기화 후 재 선언 [불가능]

let num = 1;
let num = 2;

Uncaught SyntaxError: Identifier 'num' has already been declared

let으로 변수 선언 및 초기화 후 재 선언

상수

상수 선언

• 상수 선언 시 초기화

// [변수 선언 예약어] [변수명] = [값]
const num = 1;

console.log(num); // 1

• 상수 선언 후 초기화 [불가능]

// [변수 선언 예약어] [변수명]
// [변수명] = [값]
const num;
num = 1;

Uncaught SyntaxError: Missing initializer in const declaration

const로 상수 선언 후 초기화

• 상수 선언 및 초기화 후 재 할당 [불가능]

const num = 1;
num = 2;

Uncaught TypeError: Assignment to constant variable.

const로 상수 선언 및 초기화 후 재 할당

• 상수 선언 및 초기화 후 재 선언 [불가능]

const num = 1;
const num = 2;

Uncaught SyntaxError: Identifier 'num' has already been declared

const로 상수 선언 및 초기화 후 재 선언

let과 const 사용 이유

let과 const

• let과 const는 2015년 ECS6에서 추가됨
• 그전까지는 var를 사용해왔음
• var에 문제점이 있어서 ECS6 이후부터는 let과 const 사용을 권장하고 있음

var의 문제점

1. 호이스팅(hoisting)

console.log(hoi); // undefined
var hoi;
hoi = 1;
console.log(hoi); // 1

var의 hoisting

• 호이스팅 과정
  • 자바스크립트가 코드를 위에서 아래로 순차적으로 처리하지만 실행 전에 전체적으로 코드를 검사함
  • 코드 검사가 끝나면 코드를 실행
  • 코드 검사 시 var가 초기화되어있지 않고 선언만 되어 있으면 var를 최상단으로 옮김
  • var로 선언한 변수를 undefined로 초기화해버림

2. 재 선언 가능

• 재 선언이 가능해 코드가 길어질 시 같은 변수명을 사용해도 오류가 나지 않아 문제를 발생시킬 수 있음

var num = 1;
var num = 2;

console.log(num); // 2