본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 화살표 함수

화살표 함수

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 좀 더 간단하게 함수를 사용할 수 있는 함수입니다.


화살표 함수

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 좀 더 간단하게 함수를 사용할 수 있는 함수입니다.

() => {
    //실행문
};

화살표 함수 규칙

  • 매개변수가 하나인 경우 괄호를 생략할 수 있습니다.
  • 매개변수가 두개 이상인 경우 괄호를 생략할 수 없습니다.
  • 코드블록을 지정하지 않고 한 문장으로 작성시 return 문은 생략할 수 있습니다.
  • 코드블록을 지정했을 경우 return 문은 생략할 수 없습니다.

Sample1

화살표 함수를 사용하는 기본 예제입니다.

결과
1. 기본함수: function가 실행되었습니다.
2. 익명 함수: function가 실행되었습니다.
3. 리턴문 함수: function가 실행되었습니다.
4. 화살표 함수(기본): function가 실행되었습니다.
5. 화살표 함수(익명): function가 실행되었습니다.
6. 화살표 함수(리턴문): function가 실행되었습니다.
7. 화살표 함수(괄호): function가 실행되었습니다.
8. 화살표 함수(괄호 생략): function가 실행되었습니다.
9. 화살표 함수 간략화(return 생략): function가 실행되었습니다.
10. 화살표 함수 간략화(return, 괄호 생략): function가 실행되었습니다.
11. 화살표 함수(괄호 생략X): function가 실행되었습니다.
12. 템플릿 리터럴: function가 실행되었습니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자바스크립트(Javasript)</title>
</head>
<body>
    
    <script>
        //기본함수
        function func1(){
            document.write("1. 기본함수: function가 실행되었습니다.<br>");
        }
        func1();
        
        //익명 함수
        const func2 = function(){
            document.write("2. 익명 함수: function가 실행되었습니다.<br>");
        }
        func2(); 
                
        //리턴문 함수
        const func3 = function(){
            var str = "3. 리턴문 함수: function가 실행되었습니다.<br>";
            return str;
        }
        var value = func3();
        document.write(value); 

        //화살표 함수(기본)
        func4 = () => {
            document.write("4. 화살표 함수(기본): function가 실행되었습니다.<br>");
        }
        func4();

        //화살표 함수(익명)
        const func5 = () => {
            document.write("5. 화살표 함수(익명): function가 실행되었습니다.<br>");
        }
        func5();

        //화살표 함수(리턴문)
        const func6 = () => {
            var str = "6. 화살표 함수(리턴문): function가 실행되었습니다.<br>";
            return str;
        }
        var value1 = func6();
        document.write(value1); 
        
        //화살표 함수(괄호)
        const func7 = (str) => {
            return str;
        }
        const value2 = func7("7. 화살표 함수(괄호): function가 실행되었습니다.<br>");
        document.write(value2); 

        //화살표 함수(괄호 생략)
        const func8 = str => {
            return str;
        }
        const value3 = func8("8. 화살표 함수(괄호 생략): function가 실행되었습니다.<br>");
        document.write(value3); 
        
        //화살표 함수 간략화(return 생략)
        const func9 = (str) => str;
        
        const value4 = func9("9. 화살표 함수 간략화(return 생략): function가 실행되었습니다.<br>");
        document.write(value4); 

        //화살표 함수 간략화(return, 괄호 생략)
        const func10 = str => str;
        
        const value5 = func10("10. 화살표 함수 간략화(return, 괄호 생략): function가 실행되었습니다.<br>");
        document.write(value5); 

        //화살표 함수(괄호 생략X)
        const func11 = (x, y) => {
            return x + y;
        }
        const value6 = func11("11. 화살표 함수(괄호 생략X): ","function가 실행되었습니다.<br>");
        document.write(value6); 

        //템플릿 리터럴와 화살표 함수
        const func12 = (str) => {
            document.write(`${str}`);
        }
        func12("12. 템플릿 리터럴: function가 실행되었습니다.");
    </script>
</body>
</html>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기