자바스크립트 - 화살표 함수(arrow function)

 

화살표 함수(arrow function)

기존의 함수에 대한 정의를 좀 더 간결하게 할 수 있는 ES6 의 새로운 문법이다.

 

지금까지는 아래와 같이 함수의 이름이 있다면 이름을 정의하고, 함수의 입력값으로 들어오는 인자값과 반환값 까지 모두 작성해주는 방식으로 함수를 작성해왔다.

function add(num1, num2){
    return num1+num2
}

let num1 = 10;
let num2 = 20;
let result = add(num1, num2);
console.log(result);

결과 : 30

 

여기서 화살표 함수를 활용하면 위의 함수를 좀 더 간결하게 작성해 줄 수 있다.

 

화살표 함수는 이름이 없다. 즉, 익명 함수이다.

소괄호 안에 매개변수를 작성하고, => 를 입력한 다음 중괄호 내부에 함수 본문과 반환값을 작성해주는 방식으로 함수를 정의할 수 있다.

 

만약 매개변수가 하나라면 소괄호를 생략하는 것이 가능하다.

또한 만약에 본문이 한 줄이라면 중괄호 또한 생략이 가능하다.

그리고 중괄호가 생략이 되었다면, 반환 키워드 또한 생략이 가능해진다.(암묵적으로 값의 반환이 이루어진다.)

 

- test.js

// 매개변수가 2개 이기 때문에 소괄호는 생략이 불가능하나,
// 함수의 본문은 한 줄이면 되기 때문에 과감하게 중괄호를 생략하고 함수의 내용만 작성해주는 것이 가능하다.
const arrowAdd = (num1, num2) => num1+num2;

let result = arrowAdd(10,3);
console.log(result);

결과 : 13

 

그런데 만약 여기서 본문이 한 줄 보다 더 많이 작성되어서 중괄호를 써야 한다면 반드시 return 키워드를 같이 붙여서 결과값을 반환시켜 줘야 한다.

const arrowAdd = (num1, num2) => {return num1+num2;}

 

이번엔 매개변수가 1개인 경우 소괄호를 생략하여 작성해보자.

const arrPow = num1 => num1*num1;
let result = arrPow(10);
console.log(result);

결과 : 100

 

이번엔 화살표 함수에 조건문을 추가해보자.

// 숫자를 인자로 받아서 0 보다 크면 입력받은 숫자 리턴
// 0 보다 같거나 작으면 0 을 리턴
const isPositive = num => num <= 0 ? 0 : num;
console.log(isPositive(10));

결과 : 10

 

* 화살표 함수는 콜백 함수의 가독성을 높여주는 역할을 해준다.

setTimeout( () => console.log("hello"), 3000);

 

 

 

참고 : 

https://edu.goorm.io/learn/lecture/19879/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-javascript-es6

프레임워크를 위한 JavaScript ES6 - 구름EDU