[Javascript - ES6 문법 시리즈1] var, let, const 비교 & Property Shorthand

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

JavaScript Tutorial

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN

https://poiemaweb.com/js-prototype

Prototype | PoiemaWeb

https://curryyou.tistory.com/192