반응형
⭕ 자바스크립트 JavaScript | JavaScript 변수 선언: var, let, const의 차이점 및 호이스팅
➡️ var
- 재선언 가능
- 코드의 가독성과 유지보수에 부정적인 영향을 미칠 수 있습니다.
var name = "Alice";
var name = "Bob"; // 재선언 가능
console.log(name); // "Bob"
- 재할당 가능
var number = 1;
number = 2; // 재할당 가능
console.log(number); // 2
- 전역 스코프
- 함수 스코프(function-scoped)
- 변수가 선언된 함수 내부에서만 접근 가능하게 하는 스코핑 규칙
function testScope() {
var insideFunction = "visible";
}
console.log(insideFunction); // Uncaught ReferenceError: insideFunction is not defined
- 호이스팅(hoisting)
- var로 선언된 변수는 호이스팅 시 선언과 동시에 undefined로 초기화됩니다.
- 변수 선언 전에 해당 변수를 참조해도 에러가 발생하지 않고 undefined 값을 반환합니다.
console.log(declaredLater); // undefined
var declaredLater = "Now it's defined";
console.log(declaredLater); // "Now it's defined"
➡️ let - ES6
- 재선언 불가능 ⚠️
let name = "Alice";
let name = "Bob"; // Uncaught SyntaxError: Identifier 'name' has already been declared
- 재할당 가능
let number = 1;
number = 2; // 재할당 가능
console.log(number); // 2
- 블록-스코프(block-scoped)
- {} 기준으로 변수의 유효 범위를 제한하는 스코핑 규칙
if (true) {
let blockScoped = "Inside block";
}
console.log(blockScoped); // Uncaught ReferenceError: blockScoped is not defined
- 호이스팅(hoisting)
- let로 선언된 변수는 호이스팅 되지만, 초기화는 실제 선언 위치에서 이루어집니다.
- 변수 선언 전에 해당 변수를 참조하면 ReferenceError가 발생합니다.
console.log(declaredLater); // Uncaught ReferenceError: declaredLater is not defined
let declaredLater = "Now it's defined";
➡️ const - ES6
- 초기값 필수
const mustBeAssigned; // Uncaught SyntaxError: Missing initializer in const declaration
- 재선언 불가능 ⚠️
const name = "Alice";
const name = "Bob"; // Uncaught SyntaxError: Identifier 'name' has already been declared
- 재할당 불가능 ⚠️
const number = 1;
number = 2; // Uncaught TypeError: Assignment to constant variable.
- 블록-스코프(block-scoped)
- {} 기준으로 변수의 유효 범위를 제한하는 스코핑 규칙
if (true) {
const blockScoped = "Inside block";
}
console.log(blockScoped); // Uncaught ReferenceError: blockScoped is not defined
- 호이스팅(hoisting)
- const로 선언된 변수는 호이스팅 되지만, 초기화는 실제 선언 위치에서 이루어집니다.
- 변수 선언 전에 해당 변수를 참조하면 ReferenceError가 발생합니다.
console.log(declaredLater); // Uncaught ReferenceError: Cannot access 'declaredLater' before initialization
const declaredLater = "Now it's defined";
반응형
'프론트엔드 > Javascript' 카테고리의 다른 글
자바스크립트 JavaScript | 스크립트 로딩 최적화: defer와 async 속성 (74) | 2024.05.14 |
---|---|
자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향 (74) | 2024.05.14 |
자바스크립트 JavaScript | JavaScript 패키지 매니저(package manager) (73) | 2024.05.14 |
자바스크립트 JavaScript | 비동기 처리 (73) | 2024.03.09 |
자바스크립트 JavaScript | 구문과 표기법: 전개 구문 (Spread Syntax), 객체 리터럴 표기법, 구조 분해 할당 (Destructuring Assignment) (71) | 2024.03.09 |
자바스크립트 JavaScript | 함수 및 반환 방법 (69) | 2024.03.09 |
자바스크립트 JavaScript | 예외 처리: try-catch-finally 구문 (69) | 2024.03.09 |
자바스크립트 JavaScript | 객체(Object) 및 접근 방법 (69) | 2024.03.09 |