var let const 정리 (block-level scope, function-level scope)

var

var 키워드로 선언된 변수는 함수 레벨 스코프(function-level scope)를 가집니다. 즉, 변수는 선언된 함수 내에서, 또는 함수 외부에서 (전역 스코프에서) 접근 가능합니다. 또한 var로 선언된 변수는 재선언 및 재할당이 가능합니다.

 

let

let 키워드로 선언된 변수는 블록 레벨 스코프(block-level scope)를 가집니다. 즉, 변수는 선언된 블록 (예: if 문, for 문 등의 중괄호 {} 내부) 내에서만 접근 가능합니다. let으로 선언된 변수는 재할당은 가능하지만 재선언은 불가능합니다.

 

const

const 키워드로 선언된 변수도 블록 레벨 스코프(block-level scope)를 가집니다. 하지만 const로 선언된 변수는 재선언 및 재할당이 모두 불가능합니다. 즉, 한번 선언하고 초기화한 값을 변경할 수 없습니다. 그러나 객체나 배열과 같은 참조 타입의 경우, const 변수 자체를 재할당할 수는 없지만 그 내부의 프로퍼티나 요소는 변경할 수 있습니다.

 

함수 레벨 스코프(function-level scope)

var 키워드로 선언된 변수는 함수 레벨 스코프를 가집니다. 이는 var로 선언된 변수가 그 변수가 선언된 함수 내부에서만 접근 가능하다는 것을 의미합니다. 만약 var로 선언된 변수가 함수 외부에서 선언되었다면, 그 변수는 전역 스코프를 가지며 코드의 어느 곳에서나 접근 가능합니다.

 

예제코드 ¯\_(ツ)_/¯

function myFunction() {
  var x = 10; // 함수 레벨 스코프
  if (true) {
    var y = 20; // 여전히 함수 레벨 스코프
    console.log(x); // 10을 출력합니다. x는 같은 함수 내에 있기 때문에 접근 가능합니다.
  }
  console.log(y); // 20을 출력합니다. y는 같은 함수 내에 있기 때문에 접근 가능합니다.
}
myFunction();
console.log(x); // 에러! x는 myFunction 안에서만 접근 가능합니다.
console.log(y); // 에러! y는 myFunction 안에서만 접근 가능합니다.

블록 레벨 스코프(block-level scope)

let과 const 키워드로 선언된 변수는 블록 레벨 스코프를 가집니다. 이는 let과 const로 선언된 변수가 그 변수가 선언된 블록(중괄호 {}로 둘러싸인 영역) 내부에서만 접근 가능하다는 것을 의미합니다. 블록은 함수 뿐만 아니라 if 문, for 문, while 문 등에서도 생성됩니다.

 

예제코드 ༼ つ ◕_◕ ༽つ

function myFunction() {
  let x = 10; // 블록 레벨 스코프
  if (true) {
    let y = 20; // 블록 레벨 스코프
    console.log(x); // 10을 출력합니다. x는 같은 함수 내에 있기 때문에 접근 가능합니다.
    console.log(y); // 20을 출력합니다. y는 같은 블록 내에 있기 때문에 접근 가능합니다.
  }
  console.log(y); // 에러! y는 if 문의 블록 내에서만 접근 가능합니다.
}
myFunction();
console.log(x); // 에러! x는 myFunction 안에서만 접근 가능

---

정리

 

• 1. 스크립트 태그 안에 변수를 선언시 모든 함수와 {}는 참조가 가능하다.
• 2. 변수값이 바뀌면 안되는경우 const를 사용하고 바뀌어도 되는경우는 let 과 var를 사용하자
• 3. let와 var의 차이는 let는 선언된 함수 내부에서만 참조 가능하고 var은 어디서든 참조가 가능하다.