ES6 문법
1. var, let, const 비교
자바스크립트의 변수 선언이 var만 가능했지만, ES6부터 let과 const가 추가되었다. let과 const를 사용하는 것에 적응하자!
var | let | const | |
중복선언 가능 | O | X | X |
재할당 가능 여부 | O | O | X (상수 선언 키워드) |
변수 스코프 유효범위 (유효한 참조 범위) |
함수 레벨 스코프 | 블록 레벨 스코프 | 블록 레벨 스코프 |
변수 호이스팅 방식 | O | Δ | Δ |
전역객체 프로퍼티 | 전역객체 (브라우저 환경시 window) |
X | X |
▪ 변수 스코프 유효범위
var는 함수 내부에 선언된 변수는 지역변수로, 함수를 제외한 영역에서 선언한 변수는 전역변수로 취급한다. let, const는 함수 내부와 if문, for문 등의 코드블럭 { }에서 선언된 변수 모두 지역변수로 취급한다.
▪ 변수 호이스팅 방식
let, const의 호이스팅 방식과 var의 호이스팅 방식은 다르다. let/const로 변수를 선언하는 경우, 코드 실행 전에는 1) 변수 선언만 해두고, 2) 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행한다.
1. let과 const 차이
// let 예약어는 한번 선언한 똑같은 변수를 재선언할 수 없다.
let a = 10;
// let a = 2; --> 오류 발생
// const 예약어는 한번 할당한 값을 변경할 수 없다.
// 그래서 처음 선언시 반드시 초기화(값 할당)을 해야한다.
const b = 20;
// b = 30; // Uncaught TypeError: Assignment to constant variable.
// 단 객체 { } 또는 배열 [ ]로 선언했을 경우 객체의 속성과 배열의 요소는 변경 가능.
const user = {
name: "SSAFY",
age: 25,
};
console.log(user.name); // SSAFY
user.name = "홍길동";
console.log(user.name); // 홍길동
const num = [];
console.log(num); // []
num.push(10);
console.log(num); // [10]
// var의 유효범위 : 블록 단위로 제한, 함수 스코프(function scope)
var x = 100;
function print() {
var x = 200;
console.log("print() local x : ", x);
}
print();
console.log("global x: ", x);
// 문제는 for에서의 범위
var i = 10; // i = 10
for (var i = 0; i < 5; i++) { // i = 0, 1, 2, 3, 4 로 변경됨
console.log("for inner ", i);
}
console.log("i = " + i); // i = 5 출력됨
// 해결 : var가 아닌 "let"을 사용하자!
// 호이스팅에서 제외.
var j = 10;
for (let j = 0; j < 5; j++) {
// let 변수 j의 유효범위가 {}로 제한
console.log(j);
}
console.log("j = " + j);
◽ 호이스팅 : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
- var로 선언한 변수의 경우, 호이스팅 시 undefined로 변수를 초기화
- let과 const로 선언한 변수의 경우, 호이스팅 시 변수를 초기화하지않음
호이스팅을 흔히 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 상단으로 옮기는 것"으로 말한다. 변수를 정의하는 코드보다 사용하는 코드가 먼저 등장할 수도 있다.
2. PropertyShorthand
// property shorthand (단축 속성명)
// 기존
const id = 'ssafy',
name = '싸피',
age = 3;
const user = {
id: id,
name: name,
age: age,
};
console.log(user);
// property shorthand
// 객체를 정의 할 때 객체의 key값과 value의 값이 같으면, 각각 표기하지 않고 한번만 표기
const id = 'ssafy',
name = '싸피',
age = 3;
const user = {
id,
name,
age,
};
console.log(user);
< 참고 >
https://www.w3schools.com/js/default.asp
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
https://poiemaweb.com/js-prototype
https://curryyou.tistory.com/192
'Development > HTML & CSS & Javascript' 카테고리의 다른 글
[Javascript Error] Uncaught TypeError: Cannot read properties of null (reading 'replace') 오류 해결 (0) | 2022.04.20 |
---|---|
[HTML] input 태그, label 태그 (0) | 2022.04.19 |