40. 화살표 함수 | Modules

 화살표 함수

1. 함수를 정의할때 function 이란 키워드를 사용하지 않고 => 로 대체

2. 흔히 사용하는 콜백 함수의 문법을 간결화 

// ES5 함수 정의 방식
var sum = function(a, b){
	return a + b;
};

// ES6
var sum = (a, b) => {
	return a + b;
}

sum(10, 20);

// ES5
var arr = ['a', 'b', 'c'];
arr.forEach(function(value){
	console.log(value); // a, b, c
});

// ES6
var arr = ['a', 'b', 'c'];
arr.forEach(value => console.log(value)); // a, b, c

---

Modules - 자바스크립트 모듈화 방법

1. 자바스크립트 모듈 로더 라이브러리 (AMD, Commons JS) 기능을 js 언어 자체에서 지원

2. 호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있음

3. 재사용성 뛰어난 기능들 필요할때 쓰게 모듈화 하는것

 

자바는 클래스, 패키지 단으로 구분이 되는데

자바스크립트는 구분이 안되서 나온게 모듈화 

 

import, export

// libs/math.s
export function sum (x, y){
	retrun x + y;
}
export var pi = 3.141593;

// main.js
import {sum} from 'libs/math.js';
sum(1, 2);

 

vue.js 에서 마주칠 defult export

defult 는 한개의 파일에서 하나밖에 export 되지않는다.

// util.js
export default function (x){
	retrun console.log(x);
}

// main.js
import util from 'util.js';
console.log(util); // function (x) {return console.log(x);}
util("hi");

// app.js
import log from 'util.js';
console.log(log);
log("hi");