ES6 문법 정리

리액트를 다시 공부하면서 생소한 문법(화살표문법 같은?)이 적응이 안되서 ES6 문법에 대해 정리를 해보았다. (모두는 아니고 배운 내용 일부만!)

1. ES6

- ECMAScript 표준의 가장 최신 버전으로 ECMAScript 6 ( ECMAScript 2015 )를 줄인 말이다.

- ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트다.

---

2. 추가된 기능

• arrows
• classes
• enhanced object literals
• template strings
• destructuring
• default + rest + spread
• let + const
• iterators + for ... of
• generators
• unicode
• modules
• module loaders
• map + set + weakmap + weakset
• proxies
• symbols
• subclassable built-ins
• promicses
• math + number + string + array + object APIs
• binary and octal literals
• reflect api
• tail calls

---

2.1 화살표 함수

- 화살표 기호 => 를 사용하여 함수를 선언.

var x = function(x, y) {
    return x * y;
}

// 화살표 함수로 표현
const x = (x, y) => x * y;

 

2.2 클래스

- 기존 자바스크립트 문법은 클래스 표현식이 없었지만 ES6는 클래스를 정의하여 사용할 수 있다.

- class 키워드로 클래스를 정의할 수 있고 클래스 내에 생성자(constructor())도 항상 포함되어 있어야 한다.

// 자동차의 이름과 연도에 대한 정보를 담는 클래스
class Car {
    constructor(name, year) {
        this.name = name;
        this.year = year;
    }
}

// 클래스 객체 생성
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

 

2.3 forEach() 함수

- forEach() 함수를 사용하면 반복문의 순번과 배열의 크기를 따로 변수에 저장하는 과정을 생략할 수 있다.

- 구조 분해 할당 방식(키를 넣어주면 키값을 반환)

var fruits = ["apple", "orange", "cherry"];

// 배열의 각 요소를 반복문 forEach()를 이용해 접근
fruits.forEach(myFunction);

// myFunction은 인덱스와 이이템을 출력하는 함수
function myFunction(item, index) {
    document.write(index + ":" + item + "<br>");
}

// for 문 사용시
for (i=0; i<3; i++){
    document.write(i);
    document.write(":" + fruits[i] + "<br>");
}

// 실행 결과
// 0:apple
// 1:orange
// 2:cherry

 

2.4 map() 함수

- 각 배열 요소를 정의된 함수를 통해 변환한 결과값들로 새 배열을 반환.

var persons = [
    {firstname : "Malcom", lastname: "Reynolds"},
    {firstname : "Harry", lastname: "Kim"},
    {firstname : "Pika", lastname: "Chu"}
];

function getFullName(item){
    var fullname = item.firstname + " " + item.lastname;
    return fullname;
}

document.write(persons.map(getFullName));

// 실행 결과
// Malcom Reynolds,Harry Kim,Pika Chu

// 예제 2
var numbers = [1, 4, 9, 16];
var x = numbers.map(Math.sqrt)
document.write(x);

// 실행 결과
// 1,2,3,4

 

2.5 reduce() 함수

- 배열의 각 요소에 대해 주어진 함수를 실행한 후, 하나의 결과값을 반환

- map이 배열의 각 요소를 변형한다면, reduce는 배열 자체를 변형한다.

- 예를 들어, 배열에 들어있는 숫자를 더하거나 평균을 구하는 것을 배열을 값 하나로 줄이는 동작이다.

// 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초기값);

var numbers = [175, 50, 15];

document.write(numbers.reduce(myFunc));

function myFunc(total, num) {
    return total - num;
}

// 실행 결과
// 115

// 이유 : (175, 50) -> (125, 10) -> 115 의 순으로 실행이 된다.

 

2.6 Modules

- JavaScript 모듈 로더들(AMD, CommonJS)의 패턴을 적용

- 묵시적 비동기 형태로 요구되는 모듈들이 정상적으로 로드되기 전까지 코드가 실행되지 않는다.

// lib/math.js
export function sum(x, y) {
    return x + y;
}

export var pi = 3.141593;

// app.js
import * as math from "lib/math";
console.log(math.sum(pi, pi));  // 6.283186
console.log(math.pi);  // 3.141593

 

export default와 export * 문법도 제공한다.

// module1.js
export default function test() {
    console.log('module1 test');
}

export function test1(){
    console.log('module1 test1');
}

export function test2(){
    console.log('module1 test2');
}

// 또는 이렇게도 가능하다.
function test() {
    console.log('module1 test');
}

function test1(){
    console.log('module1 test1');
}

function test2(){
    console.log('module1 test2');
}

export default test;
export {test1, test2};

// main.js
import test from './module1.js';

// export default로 내보낸 것은 하나의 변수로 받아서 사용할 수 있다.
// test를 받아올 때 이름을 원하는대로 지어도 된다.
import f1 from './module1.js';

// 반면 export는 객체 형태이기 때문에 object destructing을 활용하여 접근이 가능하다.
import {test1, test2} from './module1.js';

// export로 내보내는 이름과 동일해야 하지만 as를 사용해 별칭을 붙여줄 수 있다.
import {test1 as t1, test2 as t2} from './module1.js';

그런데 만약 module1.js에 export로 내보내는 함수가 100개(test1, test2, ..., test100)라 가정해보자.

그렇다면 import 할때 엄청나게 길어지게 될 것이다.

이러한 반복을 방지하기 위해 다음과 같은 문법을 사용할 수 있다.

// main.js
import * as module1 from './module1.js';

//호출하는 방법
module1.test1();
module1.test50();
module1.test100();

 

2.7 Binary and Octal

- 2진법 (b), 8진법 (o) numeric 리터럴 형식이 추가되었다.

0b111110111 === 503  // true
0o767 === 503  // true