[자바스크립트] 변수 const / let / var

자바스크립트에서 변수를 선언하는 방법은 크게 세 가지가 있습니다: const, let, var. 각 방식마다 변수의 특성과 용도가 다르기 때문에 상황에 맞게 적절하게 선택하는 것이 중요합니다.

1. const

• 상수 선언: const 키워드는 변수값을 변경할 수 없는 상수로 선언합니다. 한 번 선언된 값은 절대로 바꿀 수 없으며, 선언하지 않고 사용하려 하면 에러가 발생합니다.
• 호이스팅: const 변수도 호이스팅이 발생하지만, 선언되지 않은 변수처럼 undefined 값으로 초기화되지 않고 선언 블록까지 참조할 수 없습니다.
• 블록 범위: const 변수는 선언된 블록 범위 내에서만 유효합니다. 예를 들어, if 문이나 for 루프 안에서 const 변수를 선언하면 해당 블록 밖에서는 사용할 수 없습니다.
• 사용 예시: 상수값으로 정의된 값 (예: 원주율, 파일 경로, API 주소 등) 을 선언할 때 사용합니다.

const PI = 3.141592; // 원주율 상수 선언
const FILE_PATH = '/home/user/data.txt'; // 파일 경로 상수 선언
const API_URL = 'https://api.example.com'; // API 주소 상수 선언

2. let

• 변수 선언: let 키워드는 블록 범위의 변수를 선언합니다. 변수값을 변경할 수 있으며, 동일한 이름으로 변수를 재선언할 수도 있습니다.
• 호이스팅: let 변수도 호이스팅이 발생하지만, 선언되지 않은 변수처럼 undefined 값으로 초기화되지 않고 선언 블록까지 참조할 수 없습니다.
• 블록 범위: let 변수는 선언된 블록 범위 내에서만 유효합니다. 예를 들어, if 문이나 for 루프 안에서 let 변수를 선언하면 해당 블록 밖에서는 사용할 수 없습니다.
• 사용 예시: 블록 내에서 값이 변경될 수 있는 변수 (예: 루프 인덱스, 임시 변수 등) 를 선언할 때 사용합니다.

let count = 0; // 루프 인덱스 변수 선언
for (let i = 0; i < 10; i++) {
  count++;
}
console.log(count); // 10 출력

3. var

• 변수 선언: var 키워드는 함수 범위의 변수를 선언합니다. 변수값을 변경할 수 있으며, 동일한 이름으로 변수를 재선언할 수도 있습니다.
• 호이스팅: var 변수는 호이스팅이 발생하며, 선언되지 않은 변수처럼 undefined 값으로 초기화됩니다. 또한, 선언 블록 상관없이 함수 범위 전체에서 사용할 수 있습니다.
• 함수 범위: var 변수는 선언된 함수 범위 내에서 유효합니다. 즉, 함수 안에서 선언된 var 변수는 해당 함수 밖에서도 사용할 수 있습니다.
• 사용 주의: var 변수는 블록 범위가 없기 때문에 예상치 못한 변수값 변경 문제가 발생할 수 있습니다. 또한, ES6 이후에는 let 또는 const 사용을 권장하기 때문에 새로운 코드에서는 var 사용을 피하는 것이 좋습니다.

var message = 'Hello'; // 함수 범위 변수 선언
function greet() {
  console.log(message); // 'Hello' 출력
}
greet();
console.log(message); // 'Hello' 출력

1. 재선언(중복선언)

const 불가

const Hello = "안녕"
const Hello = "방가" // "error"

let 불가

let Hello = "안녕"
let Hello = "방가" // "error"

var 가능

var Hello = "안녕"
var Hello = "방가"
m // "say Hello"

2. 업데이트(재할당)

const 불가 / 객체는 가능

const Hello = "안녕"
Hello = "방가" // "error"

// 객체는 가능
const obj = { a: 1}
obj.a = 2
obj.a // 2
obj = { b: 1} // "error"

let 가능

let Hello = "안녕"
Hello = "방가"
Hello // 방가

var 가능

var Hello = "안녕"
Hello = "방가"
Hello // 방가

3. 스코프(유효범위) - 변수에 접근할 수 있는 범위 / 변수를 사용할 수 있는 위치

const 블록 레벨 { block-level scope }

const m = "안녕"
const n = 4

if (n > 3) {
  const m = "방가"
}
m // "안녕"

let 블록 레벨 { block-level scope }

let m = "안녕"
let n = 4

if (n > 3) { 
  let m = "방가"
}
m // "안녕"

let foo = 123;
{ // block-level scope
   let foo = 456;
   let bar = 456;
}
foo // 123
bar // "error"

var 함수 레벨 (){ function-level scope }

var m = "안녕"
var n = 4

if (n > 3) {
  var m = "방가"
}
m // "방가"

function foo() {
  var local = 'local';
}
foo();
console.log(local); // "ReferenceError: local is not defined

4. 호이스팅 동작 방식 - 변수/함수 실행 전에 자바스크립트 파서(parser)가 코드 재배열 한다.

1. 자바스크립트 parser가 함수 실행 전 해당 함수전체를 훑는다.

1. 함수 내 존재하는 변수, 함수 선언에 대한 정보를 기억하고 실행한다.
2. 유효범위는 함수 블록 {} 내 인데, 필요한 값들을 블록 위의 상단으로 끌어올리는 것이다.
3. 실제코드가 끌어올려지는 것은 아니고, 자바스크립트 parser내부적으로 끌어올려 처리하는 것이므로 실제 메모리에서는 변화가 없음!

2. 변수 호이스팅 (끌어올린다!!)

const X

console.log (m) // "error"
const m = "hello"

// 자바스크립트는 다음과 같이 해석
const m // 초기화 X
console.log(m) // "error"
m = "hello"

let X

console.log (m) // "error"
let m = "hello"

// 자바스크립트는 다음과 같이 해석
let m // 초기화 X
console.log(m) // "error"
m = "hello"

var O

console.log (m) // undefined (정의되지 않음)
var m = "hello"

// 자바스크립트는 다음과 같이 해석
var m // 초기화
console.log(m) // undefined
m = "hello"

2. 함수 호이스팅

함수가 정의되는 방식 네 가지

// 1. 함수 선언문
function add (x, y) { // 함수 이름 생략 불가능
  return x + y
}

// 2. 함수 표현식
var add = function (x, y) { // 함수 이름 생략 가능
  return x + y
}
// 함수 이름 작성 시,
// var add = function plus (x, y) {
//   return x + y
// }

// 3. Function 생성자 함수
var add = new Function('x', 'y', 'return x+ y')

// 4. 화살표 함수
var add = (x, y) => x + y

함수 선언문과 함수 표현식의 호이스팅 결과

// 함수 참조
console.dir(add) // f add(x, y)
console.dir(sub) // undefined
console.dir(add2) // undefined

// 함수 호출
console.log(add(2, 5)) // 7
console.log(sub(2, 5)) // TypeError: sub is not a function
console.log(add2(2, 5)) // TypeError: add2 is not a function

// 함수 선언문 O
function add (x, y) {
  return x + y
}

// 함수 표현식 X
var sub = function (x, y) {
  return x + y
}

// 화살표 함수 X
var add2 = (x, y) => x + y