Arrow function

선언

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

특징

• 익명 함수

//함수 표현식
const pow = x => x * x;
console.log(pow(10)); // 100

//콜백
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow); // [ 1, 4, 9 ]

this 바인딩

• 자신의 this, arguments, super 바인딩
• 화살표 함수의 this 언제나 상위 스코프의 this를 가리킴
• 함수에서 this 바인딩

function Person() {
    this.age = 0;
    setTimeout(function growUp() {
        console.log("growUp", this, this.age);
    }, 1000);
}
var p = new Person();
// growup / Window / NaN

• Es5

function Person() {
    var that = this;
    that.age = 0;
    setTimeout(function growUp() {
        // 콜백은 `that` 변수를 참조합니다.
        that.age++;
        console.log("growUp", this, that, that.age);
    }, 1000);
}
const p = new Person();
// growup / Window / Person,1

• Es6

function Person() {
    this.age = 0;
    setTimeout(()=>{
        this.age++;
        // this는 person 객체를 참조
        console.log(this, this.age);
    }
    , 1000);
}
var p = new Person();
// Person {age: 1} 1

• 생성자로서 사용할 수 x

활용

• forEach: 배열순회하며 callback 실행

const array = [ 1,2,3,4,5,6,7,8,9,10 ];
array.forEach(n => console.log(n*n));

• map: 배열순회하며 callback 결과 값을 새로운 배열 반환

const array = [ 1,2,3,4,5,6,7,8,9,10 ];
console.log(array.map(n => n * n)); //(10) [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

• filter: 배열순회하며 callback 결과값이 true인 원소만 담은 새로운 배열 반환

const array = [ 1,2,3,4,5,6,7,8,9,10 ];
console.log(array.filter(n => n % 2)); //(5)[1, 3, 5, 7, 9]

• reduce: 배열순회하며 callback 결과값 반환

const array=[1,2,3,4,5,6,7,8,9,10];
console.log(array.reduce((a, b) => a + b, 0)); // 55

• every: 배열순회하며 callback의 결과 bool값이 모두 true일 경우 true 반환

const array = [ 1,2,3,4,5,6,7,8,9,10 ];
console.log(array.every(n => n > 0)); // true,
console.log(array.every(n => n > 4)); // false,

• some: 배열을 순회하며 callback 결과 bool값에 하나라도 true일 때 true

const array = [ 1,2,3,4,5,6,7,8,9,10 ];
console.log(array.some(n => n > 100)); // true,
console.log(array.some(n => n > 4)); // false,

• sort: 배열 정렬(a, b: a가 작으면 -1 같으면 0 크면 1)

[100, 6, 89, 34, 0, 1].sort((a, b) => a < b ? -1 : a > b);
//(6) [0, 1, 6, 34, 89, 100]

Classes

1. 클래스

• 기본 방식

function Item(title='no name') {
    this._title = title;
}
Item.prototype = {
    getTitle: function() {
        return this._title;
    },
    setTitle: function(title) {
        this._title = title;
    }
}
const item = new Item();
console.log(item.getTitle());
// no name
item.setTitle('new title');
console.log(item.getTitle());
// new title

• Es6 class 이용 방식

class Item {
    constructor(title='no name') {
        this._title = title;
    }
    get title() {
        return this._title;
    }
    set title(title) {
        this._title = title;
    }
}
const item = new Item();
console.log(item.title);
// no name
item.title = 'new title';
console.log(item.title);
// new title

2. class의 body

constructor 생성자

: 객체 생성과 초기화

• super 키워드로 부모 클래스의 constructor 호출 가능

prototype method

• getter, setter method

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // Getter
    get area() {
        return this.calcArea();
    }
    // Method
    calcArea() {
        return this.height * this.width;
    }
}
const square = new Rectangle(10,10);
console.log(square.area);
// 100

static method

클래스의 인스턴스화 없이 호출 가능

Module

일정한 기능을 수행하기 위한 코드의 집합

export import

export

외부 접근이 가능한 변수 및 함수, 클래스를 지정

• named exports: 여러값을 export 하는데 유용

// module "lib.js"
export function cube(x) {
    return x * x * x;
}

const foo = Math.PI + Math.SQRT2;
export { foo };
export foo; //unexpected token error
export {cube};
//export { cube, foo }; //중괄호를 이용해 한번에 export 가능

// main.js
import {cube, foo} from 'lib.js';
console.log(cube(3)); // 27

• default exports: 스크립트 당 하나

// "lib.js"
let cube = function cube(x) {
return x * x * x;
}
export default cube;

// main.js
import cube from './lib';
console.log(cube(3)); // 27

• 둘 다

// module "lib.js"
export default function cube(x) {
    return x * x * x;
}

const foo = Math.PI + Math.SQRT2;
export { foo };
export const bar='baba'

// main.js
import cube, {bae, foo} from 'lib.js';

import

export한 함수, 클래스 등을 가져올 수 있다.

• 구문

import { range, Point, RADIAN } from './utils/util'; //default export가 아닐때
import Point from './utils/Point'; //default export일 때

• alias
  import { RADIAN as RAD } from './utils/util';
• 모듈 namespace 객체
  impmort * as util from './utils/util';