함수 화살표 표기법
이번에는 또 다른 방법으로 함수를 선언하는 방법에 대해 알아보겠습니다.
ECMA Script6(ES6)에서 새로 생긴 방식입니다.
화살표 표기법으로 함수 선언하기
변수(함수명) = () => 리턴할 값;
기존의 함수표현식보다 좀 더 짧게 함수를 선언할 수 있습니다. 귀찮게 function을 타이핑할 필요가 없지요. ^^
그럼 실행해서 해봅시다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>COREASUR - JavaScript</title> <script> const arrowFunc = () => 'in arrow function'; document.write(arrowFunc()); </script> </head> <body> </body> </html>
파라미터를 사용하려면 () 대신 파라미터명을 작성합니다.
화살표 표기법에서 파라미터 사용하기
변수(함수명) = 파라미터명 => 리턴 값;
그럼 파라미터를 사용해서 예제를 실행해 볼게요.
주의할 점은 파라미터 사용시 ``로 감싸며 파라미터는 ${파라미터명} 으로 사용합니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>COREASUR - JavaScript</title> <script> const arrowFunc = year => `I was born ${year}`; document.write(arrowFunc(2005)); </script> </head> <body> </body> </html>
위와 같은 방법으로 사용하면 return문의 작성도 필요없이 짧게 코드를 작성할 수 있습니다.
하지만, 보통 어떠한 연산을 하고 값을 return합니다.
이럴때는 대괄호를 사용하여 명령문을 작성합니다. 대신 return키워드는 작성해야합니다.
변수(함수명) = 파라미터명 => { 명령문 };
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>COREASUR - JavaScript</title> <script> const arrowFunc = sum => { const sumValue = sum + 10; return sumValue; }; document.write(arrowFunc(2005)); </script> </head> <body> </body> </html>
파라미터를 2개이상 사용할때는 괄호로 감싸서 사용합니다.
변수(함수명) = (파라미터명,파라미터명) => 리턴할 값;
문자열속에서 파라미터를 사용하지 않는다면 ``를 사용하지 않아도 됩니다. 또한 파라미터를 사용할 때 ${파라미터명}도 필요없습니다.
즉 다음과 같이요.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>COREASUR - JavaScript</title> <script> const arrowFunc = (num, num2) => num + num2; document.write(arrowFunc(1999,2020)); </script> </head> <body> </body> </html>
화살표 표기법 사용법에 대해 알아봤습니다. ^^