index
② let 키워드
1. var 키워드로 선언한 변수의 문제점
🤪 1.1 변수 중복 선언 허용
var 키워드로 선언한 변수는 중복 선언이 가능하다.
var x = 1;
var y = 1;
// var 키워드로 선언된 변수는 스코프 내 중복 선언을 허용한다.
// 초기화 문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
var x = 100;
// 자바스크립트 엔진이 변수를 다시 선언하지만, 값의 변경이 없으면 무시한다.
var y;
console.log(x); // 100
console.log(y); // 1
🤪 1.2 함수 레벨 스코프
var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역변수가 된다.
1. if 문
var x = 1;
if (true) {
var x = 10;
}
console.log(x); // 10
2. for 문
var i = 10;
for (var i = 0; i<5; i++) {
console.log(i); // 0 1 2 3 4
}
console.log(i); // 5
🤪 1.3 변수 호이스팅
var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다.
즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다.
단, 할당문은 이전에 변수를 참조하면 언제나 undefined를 반환한다.
//1. 선언단계, 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언되었다.
// 2. 초기화 단계, 변수 foo는 undefined로 초기화된다.
console.log(foo);
// 3. 할당단계, 변수에 값을 할당한다.
foo = 123;
console.log(foo);
var foo;
🤪 1.4 var 키워드로 선언한 전역변수와 전역함수, 암묵적 전역
var 키워드로 선언한 전역변수와 전역함수, 그리고 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역 객체 window의 프로퍼티가 된다.
var x = 1; // var 키워드로 선언한 전역변수
y = 2; // 선언하지 않은 변수에 값을 할당한 암묵적 전약
function foo() {} // 전역함수
// var 키워드로 선언한 전역변수는 전역 객체 window의 프로퍼티다.
console.log(window.x); // 1
console.log(x); // 1
// 암묵적 전역은 전역 객체 window의 프로퍼티다.
console.log(window.y);
console.log(y);
// 전역함수는 전역 객체 window의 프로퍼티다.
console.log(window.foo);
console.log(foo);
2. let 키워드
😁 2.1 변수 중복 선언 금지
let 키워드로 이름이 같은 변수를 중복 선언하면 문법에러(syntaxError)가 발생한다.
let foo = 123;
let foo = 456; // syntaxError: Identifier 'foo' has already been defined
// let이나 cosnt 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용되지 않는다.
😁 2.2 블록 레벨 스코프
let 키워드로 선언한 변수는 모든 코드 블록(함수, if문, for문, while문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.
let foo = 1; // 전역변수
{
let foo = 2; // 지역변수
let bar = 3; // 지역변수
}
console.log(foo); // 1
console.log(bar); // ReferenceError: bar is not defined
😁 2.3 변수 호이스팅
let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는다.
console.log(foo); // undefined
var foo;
console.log(bar); // ReferenceError: bar is not defined
let foo;
var & let keyword
Jay Tak.
3. const 키워드
😁 3.1 선언과 초기화
const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
const foo; // syntaxError: Missing initializer in const declaration
😁 3.2 재할당 금지
const 키워드로 선언한 변수는 재할당이 금지된다.
const foo = 1;
foo = 2; // TypeError: Assignment t constant variable
😁 3.3 대문자로 상수임을 명확하게
const TAX_RATE = 0.1;
let preTaxPrice = 100;
let afterTaxPrice = preTaxPrice + (preTaxPrice = TAX_RATE);
console.log(afterTaxPrice); // 110
😁 3.4 객체일 경우 변경가능
변경 불가능한 값인 원시 값은 재할당 없이 변경 할 수 있는 방법이 없지만 변경가능한 객체는 재할당 없이도 직접 변경이 가능
const person = {
name: "Lee",
};
person.name = "Kim";
console.log(person); // {name: "Kim"}