변수 선언 방식
1.var : 중복 선언 가능
var name = 'js';
console.log(name); //js
var name = 'html';
console.log(name); //html- var로 선언한 변수는 동일한 이름으로 중복 선언 가능
- 기존에 선언해둔 변수의 존재를 잊고 값을 재할당하는 등의 오류가 발생할 가능성 큼
2. let: 중복 선언 불가능, 재할당 가능
let name = 'javascript';
console.log(name); // javascript
let name = 'react';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'vue';
console.log(name); // vue- var와 다르게 let은 해당 변수가 이미 선언됐다는 에러 메시지가 출력됨
- 재할당은 가능
3. cost: 중복 선언 불가능, 재할당 불가능
const name = 'javascript';
console.log(name); // javascript
const name = 'react';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'vue';
console.log(name);
// Uncaught TypeError: Assignment to constant variable- const는 상수를 뜻하기 때문에 한번만 선언이 가능하며 값을 바꿀 수도 없음.
function func() {
const list = ["A", "B", "C"]
list = "D";
console.log(list);
// TypeError: Assignment to constant variable
list.push("D");
console.log(list); // ["A", "B", "C", "D"]
}-불변은 아님.
스코프
스코프 : 유효한 참조 범위
1. var: 함수 레벨 스코프
function func() {
if (true) {
var a = 5;
console.log(a); // 5
}
console.log(a); // 5
}
func(); // 5
console.log(a); // ReferenceError: a is not defined- 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없음.
- 함수 내부에서 선언한 변수는 지역 변수이고, 함수 외부에서 선언한 변수는 모두 전역 변수로 취급됨
2. let, const: 블록 레벨 스코프
function func() {
if (true) {
let a = 5;
console.log(a); // 5
}
console.log(a); // ReferenceError: a is not defined
}
console.log(a); // ReferenceError: a is not defined- 함수, if문, for문, while문, try/catch문 등의 모든 코드 블록 ({...}) 내부에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없음. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수로 취급됨.
호이스팅
호이스팅: 함수 내부에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것, 실제로 코드가 끌어올려지는 것이 아닌, 자바스크립트 parser가 함수 실행 전 해당 함수를 훑는 과정에서 내부적으로 끌어올려 처리하는 것. 실제 메모리에는 변화가 없음 * 미리 선언문을 실행해두는 것
1. var, 함수 선언문: 호이스팅이 발생함
/* 변수 호이스팅 */
console.log(a); // undefined
var a = 5;
console.log(a); // 5
/*
foo(); // foo
function foo() {
console.log("foo");
}- 변수 a가 선언되기 전에 참조했음에도 에러 발생 x, 이는 코드 실행 전에 자바스크립트 내부에서 미리 변수를 선언하고 undefined로 처리했기 때문, 함수 선언문 또한 동일하기 때문에 에러 발생 안함
2. let,const,함수표현식 : 호이스팅 발생, 다른 방식으로 작동
/* 변수 호이스팅 */
console.log(a); // ReferenceError: a is not defined
let a = 5;
console.log(a); // 5
/* 함수 호이스팅 */
foo(); // error
var foo = function() {
console.log("foo");
}- 변수 a 가 선언되기 전에 참조하니 에러가 발생함. 이는 호이스팅이 발생하지 않는 것이 아닌, 변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)에 빠졌기 때문에 보이는 현상임.
- 함수표현식을 사용하거나 let 또는 const 로 변수를 선언하는 경우, 자바스크립트 내부에서는 코드 실행 전 변수 선언만 해둘뿐 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행함. 그렇기 때문에 호이스팅이 발생하기는 하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보이는 것임.
프론트엔드 개발자