happy cat image

everdevel

Brand New Day

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

함수 화살표 표기법

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

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>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript function-arrow-notation

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

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

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

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

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

<!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>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript function-arrow-notation

위와 같은 방법으로 사용하면 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>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript function-arrow-notation

파라미터를 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>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript function-arrow-notation

화살표 표기법 사용법에 대해 알아봤습니다. ^^









봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준