[Javascript/ES6+] Arrow Function

출처

자바스크립트 ES6+ 기본 - 인프런 | 강의

 

---

 

🚀 Arrow Function

[코드 1. 일반 함수]
const add = function(one, two) {
    return one + two;
}
console.log(add(1, 2));

[코드 2. 화살표 함수]
// 'function'이 '=>'로 바뀌었다.
const total = (one, two) => {
    return one + two;
}
console.log(total(1, 2));

 

◽ 특징

- function(){}의 축약 형태이지만 고려할 사항도 있다. (this 참조가 다름)

- '=>' 앞에서 줄을 분리하면 SyntaxError가 발생한다.

 

 

 

◽ 형태

1) 함수 블록과 return 작성을 생략

const total = (one, two) => one + two;
console.log(total(1, 2));

[실행결과]
3

 

2) 함수 블록{}만 작성한 형태

// return을 작성하지 않은 것과 같아서 undefined를 반환하게 된다.
const total = (one) => {};
console.log(total(1, 2));

[실행결과]
undefined

 

3) {key:value}를 반환하는 형태

// 소괄호를 반드시 작성해야한다.
const tester = (param) => ({test: param});
const result = tester("테스트");
for(const key in result) {
    console.log(key + " / " + result[key]);
}

[실행결과]
test / 테스트

 

 

◽ 파라미터 사용

- 파라미터가 하나일 때 소괄호를 생략할 수 있다.

// 파라미터가 하나면 (param)에서 소괄호를 생략할 수 있다.
// const get = (param) => param + 20; // 이 문법을
const get = param => param + 20; // 이렇게 생략가능하다.

 

- 파라미터가 없으면 소괄호만 작성한다.

const get = () => 10 + 20; // 이렇게 생략가능하다.