방문해 주셔서 감사합니다.
이번에는 또 다른 방법으로 함수를 선언하는 방법에 대해 알아보겠습니다.
ECMA Script6(ES6)에서 새로 생긴 방식입니다.
변수(함수명) = () => 리턴할 값;
기존의 함수표현식보다 좀 더 짧게 함수를 선언할 수 있습니다. 귀찮게 function을 타이핑할 필요가 없지요. ^^
그럼 실행해서 해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - 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>EVERDEVEL - 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>EVERDEVEL - 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>EVERDEVEL - JavaScript</title>
<script>
const arrowFunc = (num, num2) => num + num2;
document.write(arrowFunc(1999,2020));
</script>
</head>
<body>
</body>
</html>
결과는 바로 아래에서 확인하겠습니다.
화살표 표기법 사용법에 대해 알아봤습니다. ^^
봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.
컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.
컨텐츠
더보기
댓글 0개
정렬기준
