js - ES6 문법 정리

https://itstory.tk/entry/JavaScript-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC#arrows

불러오는 중입니다...

https://woowabros.github.io/experience/2017/12/01/es6-experience.html

신선함으로 다가온 ES6 경험 - 우아한형제들 기술 블로그

이글은 위 글들을 참조하였습니다.

최근 스터디를 통해서 '모던 자바'를 익히고 있다. 자바의 모던자바를 배웠을 때, 신세계를 경험한 기분이었는데 JavaScript 또한 새로운 버전의 문법들이 존재했다. (부스트 코스에서 errow function을 언급하면서 ES6의 존재를 알게 되었다) 

그 새로운 문법들을 차례대로 짚어보려고 한다. 

먼저 ECMAScript란 자바스크립트 언어의 표준이다.

Introduction

ECMAScript 2015로도 알려진 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전이다.(현재 이미 ES10(2019)이 존재한다.ES11(2020)이 나왔거나 나올 예정인 것 같다.. 역시 가장 인기있는 언어답게 매년 꾸준히 새버전이 나오고 있는 것 같다. 년도 맨 뒷자리 -1 이 매년 꾸준히 나오고 있다) 그중에 ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 하다.  ECMAScript 6 언어의 전체 스펙을 확인하려면 ES6 Standard를 확인하면 된다.

ES6는 아래의 새로운 기능을 포함한다.

 

• 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
• promises
• math + number + string + array + object APIs
• binary and octal literals
• reflect api
• tail calls

ECMAScript 6 에 추가된 기능 

Arrows

Arrows function은 => 문법을 사용하는 축약형 함수이다. C#, Java8, CoffeScript의 해당 기능과 문법적으로 유사하다. Arrows는 표현식의 결과 값을 반환하는 표현식 본문(expression bodies)뿐만 아니라 상태 블럭 논문(statement block bodies)도 지원한다. 하지만 일반 함수가 자신을 호출하는 객체를 가리키는 dynamic this와 달리 arrows 함수는 코드의 상위 스코프(lexical scope)를 가리키는 lexical this를 가진다. (화살표 함수는 자신의 this가 바인드 되지 않기 때문에 함수의 스코프에서의 this 가 적용된다)

var evens = [2, 4, 6, 8,];

// Expression bodies (표현식의 결과가 반환됨) 
var odds = evens.map(v => v + 1); // [3, 5, 7, 9] 
var nums = evens.map((v, i) => v + i); // [2, 5, 8, 11] 
var pairs = evens.map(v => ({even: v, odd: v + 1})); // [{even: 2, odd: 3}, ...] 

// Statement bodies (블럭 내부를 실행만 함, 반환을 위해선 return을 명시) 
nums.forEach(v => {
	if (v % 5 === 0) {
    	  fives.push(v);
    }
}); 

// Lexical this 
// 출력결과 : Bob knows John, Brian 
var bob = {
	_name: "Bob",
    _friends: ["John, Brian"],
    printFriends() {
    	this._friends.forEach(f => 
        	console.log(this._name + " knows " + f)); 
    } 
}



printFriends() 함수의 서브루틴은 다음과 문법상 동일하게 동작합니다.

this._friends.forEach(function (f) { 
	console.log(this._name + " knows " + f)); 
}.bind(this));

 

화살표 함수의 더 자세한 설명은 MDN Arrow Functions를 참고하자. printFriends() 함수의 선언 표기법이 궁금하면 MDN Object Initializer를 참고하자

Classes

ES6 클래스는 프로토타입 기반 객체지향 패턴을 더 쉽게 사용할 수 있는 대체재이다. 클래스 패턴 생성을 더 쉽고 단순하게 생성할 수 있어 사용하기도 편하고 상호운용성도 증가된다. constructor 메서드(자바의 생성자 개념)도 사용할 수 있고 extends를 통한 클래스 상속도 가능하다.

class SkinnedMesh extends THREE.Mesh { 
	constructor(geometry, materials) { 
    	super(geometry, materials); 
        this.idMatrix = SkinnedMesh.defaultMatrix();
        this.bones = []; this.boneMatrices = []; //... 
    } 
    
    update(camera) { 
    	//... 
    	super.update(); 
    } 
    
    get boneCount() { 
    	return this.bones.length; 
    } 
    
    set matrixType(matrixType) {
    	this.idMatrix = SkinnedMesh[matrixType](); 
    } 
    
    static defaultMatrix() { 
    	return new THREE.Matrix4(); 
    } 
}

 

더 자세한 설명은 MDN Classes를 참고하자.

 

Enhanced Object Literals

ES6에서 객체 리터럴은 선언문에서 프로토타입 설정, foo: foo선언을 위한 단축 표기법, 메서드 정의, super 클래스 호출 및 동적 속성명을 지원하도록 향상 되었다. 그에 따라 객체 리터럴 및 클래스 선언이 더 밀집되어져, 객체기반 설계가 더 편리해졌다.

var obj = { 
    // __proto__ 
    __proto__: theProtoObj, 
    
    // ‘handler: handler’의 단축 표기 
    handler, 
    
    // Methods 
    toString() { 
    	// Super calls 
        return "d " + super.toString(); 
    }, 
    
    // Computed (dynamic) property names 
    [ 'prop_' + (() => 42)() ]: 42 
};

더 자세한 설명은 MDN Grammar and types: Object literals를 참고하자.

let & const

const는 블록 범위이며 값이 지정되면 나중에 바꿀 수 없다. 또한, 재선언 될 수도 없다.

const schoolName = "ABC";

schoolName = "CBA"; //Error

 

let

let은 블록 범위이며 값이 지정되어도 값을 바꿀 수 있다.

function test() {
	let x = "a";
    if (true) {
    	let x = "b";
        console.log(x); // b
    }
    console.log(x); // a
}

 

Modules

Export, Import 를 이용해 function이나 variables 들을 다른 곳에서 사용할 수 있다.

// utility.js
export const squares = (arr) => {return arr.map(x => x * x)};

// math.js
import { square } from "utility";
console.log(squares([1,2,3])); // [1,4,9]

 

Promises

비동기 프로세싱을 위해 사용된다. (Asychrnously)
가독성이 좋으며 중첩된 콜백의 단점을 완화한다.
(Callback 코드를 읽기도 관리하기도 힘들어지는 것을 완화할 수 있다)

Promise의 세가지 상태

• 대기중(pending)
• 이행됨(fulfilled)
• 거부됨(rejected)

var promiseTest = (num) => {
	return new Promise((resolve, reject) => {
    	if (num > 3) {
        	resolve(num);
        } else {
        	reject("err");
        }
    }
}

promiseTest(5)
	.then(val => console.log(val)) // 5
    .catch(err => console.log(err));
    

 

참고한 글중에 우아한 형제들 기술블로그에서 ES6 사용으로 코드가 간결해진 사례들을 소개한다. 
직접적으로 내가 써본적은 없기 때문에... 간접적으로 체험하는게 최선이지만 이전 코드에 비해서 많은 간결성과 더불어 의미를 한눈에 알아보기 쉽게 바꿀 수 있다는 것을 알 수 있다.