PinkCoding

CLASS web

JavaScript

함수 화살표 표기법

이번에는 또 다른 방법으로 함수를 선언하는 방법에 대해 알아보겠습니다.

ECMA Script6(ES6)에서 새로 생긴 방식입니다.

화살표 표기법으로 함수 선언하기

변수(함수명) = () => 리턴할 값;

기존의 함수표현식보다 좀 더 짧게 함수를 선언할 수 있습니다. 귀찮게 function을 타이핑할 필요가 없지요. ^^

그럼 실행해서 해봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pinkcoding - JavaScript</title>
<script>
    const arrowFunc = () => 'in arrow function';

    document.write(arrowFunc());
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

파라미터를 사용하려면 () 대신 파라미터명을 작성합니다.

화살표 표기법에서 파라미터 사용하기

변수(함수명) = 파라미터명 => 리턴 값;

그럼 파라미터를 사용해서 예제를 실행해 볼게요.

주의할 점은 파라미터 사용시 ``로 감싸며 파라미터는 ${파라미터명} 으로 사용합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pinkcoding - JavaScript</title>
<script>
    const arrowFunc = year => `I was born ${year}`;

    document.write(arrowFunc(2005));
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위와 같은 방법으로 사용하면 return문의 작성도 필요없이 짧게 코드를 작성할 수 있습니다.

하지만, 보통 어떠한 연산을 하고 값을 return합니다.

이럴때는 대괄호를 사용하여 명령문을 작성합니다. 대신 return키워드는 작성해야합니다.

변수(함수명) = 파라미터명 => { 명령문 };

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pinkcoding - JavaScript</title>
<script>
    const arrowFunc = sum => {
        const sumValue = sum + 10;
        return sumValue;
    };

    document.write(arrowFunc(2005));
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

파라미터를 2개이상 사용할때는 괄호로 감싸서 사용합니다.

변수(함수명) = (파라미터명,파라미터명) => 리턴할 값;

문자열속에서 파라미터를 사용하지 않는다면 ``를 사용하지 않아도 됩니다. 또한 파라미터를 사용할 때 ${파라미터명}도 필요없습니다.

즉 다음과 같이요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pinkcoding - JavaScript</title>
<script>
    const arrowFunc = (num, num2) => num + num2;

    document.write(arrowFunc(1999,2020));
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY