JavaScript - ES6 - arrow function

ES 6 (ECMA 스크립트) 에서 추가된 화살표 함수 (Java 8부터는 람다) (arrow function) - 1

- 함수를 심플하게 정의할 수 있도록 해준다.
- 형태
    (매개변수) => {명령어; ...}

소스

var fn1 = function func1() {
  //func1(); // 재귀적 호출시, 이 블럭에서만 사용 가능
  console.log("익명 fn1");
};
// func1(); 호출안됨
fn1();

// 익명함수형태에서 function 키워드만 빠진것.. 기능이 다름
// 매개변수가 없는 경우의 화살표 함수
fn1 = () => {
  console.log("화살표 fn1");
};
fn1();

// 매개변수가 있는 익명 함수
var fn2 = function(num) {
  console.log("익명 fn2", num);
};
fn2(100);

// 화살표 함수로 변경, 매개변수가 하나인 경우
fn2 = num => {
  console.log("화살표 fn2", num);
};
fn2(100);

// 매개변수가 하나인 경우 괄호 생략 가능함 (없을땐 괄호 필수)
fn2 = num => {
  console.log("화살표 fn2", num);
};
fn2(100);

// 매개변수가 여러개인 경우
fn3 = function(num1, num2) {
  console.log("fn3 - 1");
};
fn3();

// 매개변수가 여러개인 경우 화살표 함수, 괄호 필수
// 괄호를 하지 않을 경우 fn3 = num1 에서 처리, num2 => 만 화살표함수로 선언되게 됨
fn3 = (num1, num2) => {
  console.log("화살표 fn3 - 2");
};
fn3(1, 2);

결과

익명 fn1
화살표 fn1
익명 fn2 100
화살표 fn2 100
화살표 fn2 100
fn3 - 1
화살표 fn3 - 2

- 실행 명령어 중심

소스

var fn1 = function(num) {
  return num * num;
};
console.log(fn1(10));

// 화살표 함수 변경
fn1 = num => {
  return num * num;
};
console.log(fn1(10));

// 블럭을 지우고 return을 삭제, 실행문이 한문장일경우
// {} 없이 사용할 경우에는 return 문을 생략한다 (return 자동 붙음)
fn1 = num => num * num;
console.log(fn1(10));

// 넘겨주는 값이 없는경우 undefined가 반환됨
fn1 = num => console.log(num);
console.log(fn1(10));

// 여러개의 실행문장을 화살표 함수로 처리하기 위해서는 {}로 묶는다
// {}이 있을 경우 return을 명시해줘야 함
fn1 = num => {
  console.log(num);
  return num * num;
};
console.log(fn1(10));

결과

100
100
100
10
undefined
10
100