ES6 lesson 1 ~ 2

2023.03.26

자바스크립트 스터디 10회차

공부 사이트: https://poiemaweb.com/

1. ECMAScript 6

ES5까지는 변수를 선언하기 위해 var 키워드를 사용했다.

그러나 var 키워드로 선언된 변수는 몇 가지 문제점이 존재한다. (이전 포스팅)

 

① 함수 레벨 스코프

- 전역 변수의 남발 문제

- for loop 식에서 사용한 변수를 for loop 외부/전역에서 참조할 수 있음

 

② 중복 선언 허용

- 의도치 않은 변수값 변경

 

③ var 키워드 생략 허용

- 의도치 않은 변수의 전역화

 

④ 변수 호이스팅

- 변수 선언 전에 참조가 가능

 

대부분의 문제는 전역 변수로 인해 발생한다고 한다. 유효 범위(scope)가 넓고, 비순수 함수이기에 의도치 않게 변경될 수 있기 때문이다. 복잡성이 증가할 수 있으므로, 변수의 유효범위는 좁을수록 좋다.

ES6에서는 var 키워드 단점을 억제하기 위해 let과 const 키워드를 도입했다.

 

 

1) let

① 블록 레벨 스코프

let a = 123;

{
	let a = 456;
	let b = 654;
}
console.log(a);
// console.log(b);  // b is not defined

위 코드를 실행시켜보면, 123이 출력된다.

let 키워드는 블록 레벨 스코프를 따르기 때문에, 코드 블록 내 선언된 a와 b는 블록 내에서만 유효하다. 

 

② 중복 선언 금지

var a = 123;
var a = 456;

let b = 123;
// let b = 456;   //Identifier 'b' has already been declared

var 키워드는 중복 선언을 해도 문제가 없었으나, let 키워드는 중복 선언 시 에러가 발생한다.

 

③ 호이스팅

＃ 호이스팅: var 선언문, function 선언문 등이 해당 스코프의 선두로 옮겨진 것처럼 동작하는 특성

console.log(a); // undefined
var a = 123;

console.log(b); // Error: Uncaught ReferenceError: bar is not defined
let b = 123;

let 키워드로 선언된 변수는 선언문 이전에 참조하면 참조 에러가 발생한다.

 

[TIP] 변수 생성 3단계

ⓐ 선언 단계 : 변수를 실행 컨텍스트의 변수 객체에 등록

ⓑ 초기화 단계 : 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보, 이 때 변수는 undefined로 초기화

ⓒ 할당 단계 : undefined로 초기화된 변수에 값 할당

 

var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어지나, let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. let 키워드로 선언된 변수의 초기화 단계는 변수 선언문에 도달했을 때 이루어지기에, 참조 에러가 발생하는 것이다.

 

④ 클로저

✔ 클로저란?

- 반환된 내부함수가 자신이 선언됐을 때의 환경인 스코프를 기억

- 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있음.

▷ 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수

 

✔ 자유 변수

- 클로저에 의해 참조되는 외부함수의 변수

 

let 키워드를 사용하면 클로저를 사용하지 않아도 클로저를 사용한 것과 같은 동작을 할 수있다.

 

[예시]

/* 
해당 코드는 의도와 다르게 3이 세 번 출력된다.
이유는 for문의 i가 전역 변수이기 때문
*/

var funcs = [];

for (var i = 0; i < 3; i++) {
	// 배열에 함수를 push
	funcs.push(function () { console.log(i); });
}

for (var j = 0; j < 3; j++) {
	// 함수 꺼내서 호출
	funcs[j]();
}

/* 
클로저를 사용해서 의도대로 출력
*/

var funcs = [];

for (var i = 0; i < 3; i++) {
	// 자유변수 index, 그리고 자신이 선언됐을 때의 환경을 기억하는 함수
	(function (index) { 
		funcs.push(function () { console.log(index); });
	}(i));
}

for (var j = 0; j < 3; j++) {
	// 함수 꺼내서 호출
	funcs[j]();
}

/* 
let 키워드를 for문 초기화 식에 사용
변수 i는 for문에서만 유효한 지역 변수가 됨.
*/
var funcs = [];

for (let i = 0; i < 3; i++) {
	funcs.push(function () { console.log(i); });
}

for (var j = 0; j < 3; j++) {
	// 함수 꺼내서 호출
	funcs[j]();
}

 

⑤ 전역 객체와 let

＃전역 객체: window 객체, global 객체

var 키워드로 선언된 변수를 전역 변수로 사용하면, 전역 객체의 프로퍼티가 된다. (global.a와 같이 접근 가능)

그러나 let 키워드로 선언된 변수를 전역 변수로 사용하는 경우, 전역 객체의 프로퍼티가 아니다. let 전역 변수는 개념적인 블록 내에 존재하게 된다. (global.a와 같이 접근 불가능)

 

 

 

2) const

const는 상수를 위해 사용한다. let과 거의 동일하나, 다른 점을 몇가지를 꼽자면...

 

① 재할당

let은 재할당이 자유롭지만, const는 재할당이 금지된다.

또한 const는 선언과 동시에 할당이 이루어 진다.

const test;  // 문법오류

 

② 상수

가독성과 유지보수성을 위해 적극적으로 사용된다.

// 10이 무엇을 의미하는지 모름
if (rows > 10) {
	...
}

// 값의 의미 명확. 가독성 향상
const MAXROWS = 10;
if (rows > MAXROWS) {
	...
}

 

③ 객체의 프로퍼티

const는 재할당이 금지된다. 만약 const로 선언된 변수가 객체일경우, 객체에 대한 참조를 변경하지 못한다는 것을 의미한다. (참조하는 주소 변경 불가능)

그러나 객체의 프로퍼티는 변경 가능하다. (프로퍼티 추가, 삭제, 값 변경 O)

✔ 객체 타입 변수 선언에는 const를 사용하는 것이 좋다. 

 

 

3) 키워드 비교

① 변수 선언에는 기본적으로 const를 사용

② 재할당이 필요한 경우에 한정해서 let 사용

③ 재할당이 필요하지 않은 원시 값, 객체에는 const 키워드를 사용할 것.

④ ES6이라면 var 키워드 금지

 

 

 

 

2. 템플릿 리터럴

[특징]

-  '. " 와 같은 따옴표 문자 대신 백틱 문자를 사용함.

- 여러 줄에 걸쳐 문자열을 작성할 수 있고, white-space를 있는 그대로 적용함.

- + 연산자를 사용하지 않아도, 간단하게 새로운 문자열을 삽입할 수 있음 ▶ 문자열 인터폴레이션

-  문자열 인터폴레이션은 ${ }으로 표현식을 감싼다. 해당 표현식은 문자열로 강제 타입 변환된다.

const first = "GilDong";
const last = "Hong";

// ES5
console.log("My name is " + first + ' ' + last + '.');

// ES6
console.log(`My name is ${first} ${last}.`);