ES6의 주요변화

메론맛캔디·2021년 11월 5일

기술면접 자바스크립트

기술면접

목록 보기

14/30

화살표 함수

익명함수로만 만들 수 있다.
this가 없다
new 연산자와 함께 호출할 수 없다.
why ? - this가 없기 때문에 생성자 함수로 사용할 수 없다.
arguments가 없다.
모든 인수에 접근할 수 있게 해주는 유사 배열 객체 arguments를 지원하지 않는다.
super가 없다.

ES5랑 함수 선언 방식에 있어서 어떻게 달라진걸까?

ES5같은 경우, 객체 내에 있는 메서드를 실행하면 메서드의 this는 메서드가 선언된 해당 객체를 가리킨다.
하지만 객체안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보기 때문에 함수의 this는 window값이 나오게 된다.
이런 경우, this를 바인딩 시키거나 this를 해당 변수에 담아서 사용할 수 있었다.

ES6에서의 this는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없이 사용 가능하다.

결정적인 차이점은
일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된느 것이 아니고, 함수를 호출할 때 어떻게 호출되었는지에 따랏 this에 바인딩할 객체가 동적으로 결정된다.
화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. (화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다)

템플릿 리터럴

ES5에서는 이미 준비되어있는 틀안에 해당하는 값만 상황에 알맞게 넣어서 사용할 수 있었다.
ES6부터는 `` 백틱과 ${} 을 통해 한줄로 표기 가능하며 single quotation과 double 모두 자유롭게 사용 가능하다.

객체 리터럴

객체의 속성을 작성할 때 변수명과 동일할 경우 생략 가능.
객체 생성 시, 변수 값을 객체의 속성을 지정하는 경우 속성 값을 생략하여 표기 가능

클래스

ES5 이전 버전에서는 클래스가 제공되지 않았다.
ES6 부턴 공식적으로 클래스를 지원한다.

컬렉션

Set객체 - 중복을 제거한 값들의 집합
Map객체 - 키-값 쌍의 집합체이며, 키는 고유한 값이어야한다. Iteration 기반으로 만들어졌다. (키 순서가 보장된다)
WeakSet
WeakMap

모듈 (ESM)

ES5의 자바스크립트 파일은 script 태그로 분리해서 독자적인 모듈 스코프를 갖지 않았다.

모듈 : 독립성을 가진 재사용 가능한 코드블록
import, export 구문을 이용해 모듈 가져오기 & 내보내기 가능

모듈 내부에서 선언된 모든 변수, 함수, 객체, 클래스는 모두 지역적인 것 (local)로 간주된다. 따라서 외부로 공개하고자 하는 것은 export하고 다른 모듈에선 import 구문으로 참조하여 사용 가능하다.

import 할 때 이름 변경하고 싶으면 as 예약어 사용
import 할 때 단일 객체 (export default) 되었다면 구조분해할당 사용하지 않고 단일 객체로 가져온다.

export default func;

import func from './utils/func';

Promise

이전까진 AJAX 처리를 위한 비동기 작업을 수행할 때 비동기 처리가 완료되면 콜백함수가 호출되도록 작성했지만, 이 방법은 비동기로 처리해야할 작업이 많다면 콜백이 중첩되어 콜백헬을 만들어 예외 처리가 어려울 수 있다.

ES6부터는 Promise 객체를 지원해 비동기 처리를 보다 깔끔하게 수행할 수 있다.

Spread Operator 전개 연산자

... 연산자를 함수의 인자로 사용하는 경우 가변 파라미터 (Rest Parameter)라고 부른다.
rest parameter는 개별 값을 나열하여 함수의 인자로 전달하면 함수의 내부에서 배열로 사용할 수 있도록 한다.

spread operator는 rest parameter와 사용법이 다르다.
배열이나 객체를 ...와 함께 객체 리터럴, 배열 리터럴에서 사용하면 분해된 값으로 전달된다.

let obj1 = { name: 'melon', age: 20 }; 
let obj2 = { ...obj1 }; 
let obj3 = { ...obj1, nationality: 'KR' }; 

console.log(obj1 === obj2); // false
console.log(obj2); // { name: 'melon', age: 20 }
console.log(obj3); // { name: 'melon', age: 20, nationality: 'KR' }; 

let arr1 = [ 1, 2, 3 ]; 
let arr2 = [ 'apple', ...arr1, 'pineapple' ]; 

console.log(arr2); // ['apple', 1, 2, 3, 'pineapple']

let & const

var

중복 선언 가능
함수 스코프

let

재할당 가능
중복 선언 불가능
블록 스코프

const

재할당 불가능
중복 선언 불가능
블록 스코프
선언과 동시에 초기화

구조분해할당

배열, 객체의 값을 추출하여 여러변수에 할당할 수 있는 기능

let arr = [1, 2, 3, 4];
let [a1, a2, a3] = arr;
console.log(a1, a2, a3); // 1, 2, 3

let obj = { name: 'melon', age: 30, nationality: 'KR' };
let { name: n, age: a, nationality } = obj;
console.log(n, a, nationality); //melon 30 KR