ES6에서 기존 함수를 간결하게 표현 할 수 있고 기능이 개선된 화살표 함수가 추가 되었습니다. 화살표 함수는 function 키워드를 사용하지 않고 => 모양의 연산자를 사용해 정의합니다.
- 매개변수가 하나일 경우 인자를 정의 할 때 괄호()를 생략할 수 있습니다.
- 매개변수가 없거나 둘 이상일 경우 괄호를 작성해야 합니다.
- 코드블록을 지정하지 않고 한 문장에서 작성 시 별도의 return 문을 사용하지 않아도 됩니다.
- 코드블록을 지정했을 경우 반환 하고자 하는 값에서 return 문을 작성해야 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const addNum = x => x + x;
console.log(addNum(2)) <-- 실행 결과 4
const addNum2 = (a, b) => a + b ;
console.log(addNum2(2, 4)) <-- 실행 결과 6
const printNum = () => {
console.log(arguments)
}
printNum(1, 2, 3) <-- Uncaught ReferenceError: argument is not defined
const addNum3 = (...args) => {
let result = 0;
for(let i = 0; i < args.length; i++){
result += args[i]
}
return result
}
console.log(addNum3(1, 2, 3, 4, 5)) <-- 실행 결과 15
setTimeout(() => {
console.log('화살표 함수')
}, 100)
1 코드 설명
- 매개변수 x를 전달 받아 x + x 결과를 반환하는 화살표 함수를 정의하고 addNum 변수에 할당합니다.
- addNum(2)는 2 + 2 결과인 4가 반환되고 console.log에 전달하여 4가 출력이 됩니다.
4 ~ 5 코드 설명
- a 와 b 두 매개변수를 가지는 화살표 함수를 정의 했으므로 괄호를 사용하였습니다.
7 ~ 10 코드 설명
- 아무런 매개변수를 지정해주지 않았기 때문에 빈 괄호를 사용해 매개변수가 비었음을 표현합니다.
- 코드블록을 작성하고 내부에 arguments 객체를 콘솔에 출력합니다. return 문이 없기 때문에 반환값은 없습니다.
- printNum(1, 2, 3)을 사용해 인자로 1,2,3을 호출하지만 에러가 발생합니다. 그 이유는 기본 함수와 다르게 arguments라는 객체가 만들어지지 않아 에러가 발생하게 되는것 입니다.
12 ~ 19 코드 설명
- 전달받은 인자들의 합을 구하는 화살표 함수를 정의합니다.
- 전달받은 인자를 spread operator문법을 사용해 인자 목록을 받아옵니다.
- for문을 사용해 전달 받은 args의 인자의 길이만큼 더한 값을 리턴해서 콘솔로그에 출력이 됩니다.
21 ~ 23 코드 설명
- 화살표 함수 또한 함수의 인자로 전달이 가능합니다.
- setTimeout 함수의 인자로 화살표 함수가 전달되고 이 때 매개변수가 없으므로 괄호를 작성해 줍니다.