05-3. Arrow function

화살표 함수(Arrow function)

화살표 함수는 ES6문법입니다. function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있습니다. 화살표 함수는 항상 익명입니다.

1. 화살표 함수의 기본문법

// 매개변수가 없는 경우
const foo = () => console.log('bar');
foo(); // bar

// 매개변수가 하나인 경우 (가로가 필요 없다.)
const foo = x => x;
foo('bar'); // bar

// 매개변수가 여려개인 경우 (가로가 필요 합니다.)
const foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{}" 없으면 값이 반환(retuen)됩니다.!!
foo(1, 2); // 3

const foo = (a, b) => { return a + b }; 
foo(1, 2); // 3

const foo = (a, b) => { a + b }; // "{}"를 사용했는데 return이 없을 때 
foo(1, 2); // undefined

const foo = (a, b, c = 0) => { // 여러줄 썼을 경우 
	return a + b + c;
}
foo(1, 2, 3) // 6

// 즉시실행함수는 아래와 같이 표현할 수 있다.
(() => {
  console.log('foo');
})(); // foo

/*
1) "{}"을 사용할 때는 여러줄을 썼을 때 사용합니다.
2) "{}"를 사용하면 값을 반환할 때 return을 사용해야합니다.
3) 간단하게 한줄로 표현할 땐 "{}" 없으면 값이 반환(retuen)됩니다.!!
4) "{}"를 사용하지 않으면 undefied를 반환합니다.
*/

// 객체를 반환(return)할 때
const foo = () => ( { a: 1, b: 2, c: 3 } );
foo(); // { a: 1, b: 2, c: 3 };

2. 콜백 함수에서 사용하기

// ES5
var numbers = [1, 4, 9];
var oddArr = numbers.filter(function (x) { return x % 2 !== 0;});
console.log(oddArr); // [1, 9]

// ES6
var numbers = [1, 4, 9];
var oddArr = numbers.filter( x => (x % 2) !== 0 );
console.log(oddArr); // [1, 9]