이번시간에는 자바스크립트를 이용해 기능을 정의하고 제공하는 함수 기초 정의 사용법부터 ECMAScript 의 다양한 최신 함수정의 사용법들에 대해 알아보겠습니다.


간단히 기존 전통적인 자바스크립트 함수 정의 및 사용법을 이용해 함수내에 2개의 파라메터(매개변수)를 제공하고
함수내에서 두개값을 더해서 그 결과값을 반환하는 함수를 다양한 방식으로 정의하여 코드량을 최소화하여 개발생산성을 높여주는 예시코드를 함께 만들어가 봅니다.

ECMAScript-Basic 실습 폴더내에
ecma-fucntion.html 웹페이지를 하나 만들고 해당 문서내에서 ! 엔터키를 입력하여 기본적인 웹페이지 코드를 아래와 같이 자동으로 생성합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECMAScript-Function</title>
</head>

<body>
    <h1>다양한 형태의 함수 정의 사용법</h1>

    <script>

        console.log("웹브라우저 개발자도구 콘솔 출력 예시코드입니다.");

    </script>

</body>

</html>



아래와 같이 기본함수 정의 및 사용 방식으로 시작해서 익명함수,화살표함수, 반환 예약어까지 생략해 코딩하는 화살표함수 사용법까지 직접 코딩을 통해 다양한 함수정의 사용법을 실습해봅니다.

<script>

        console.log("웹브라우저 개발자도구 콘솔 출력 예시코드입니다.");

        //함수정의case1: 전통적인 자바스크립트 함수(기능) 정의 방식=명명함수정의방식,함수명정의방식
        //함수의 사용목적: 코드의 재사용성 제공
        //funciton 함수명(입력 파라메터=매개변수){ 처리로직 구현 return 반환구문 }
        function fnPlus(a, b) {
            let c = a + b;
            return c;
        };

        var result = fnPlus(1, 2);
        console.log("명명 함수 정의 방식:", result);


        //명명함수 표현식 방식 : 명명함수를 변수에 할당해서 사용하는방식
        var plus0 = function fnPlus(a, b) {
            let c = a + b;
            return c;
        };

        var result0 = plus0(1, 2);
        console.log("명명 함수 표현  방식:", result0);


        //함수정의 case2: 익명함수표방식= 함수명없이 함수를 정의하고 변수에 함수를 할당하는방식
        var plus1 = function (a, b) {
            return a + b;
        }

        var result1 = plus1(1, 5);
        console.log("익명 함수기능 정의 방식:", result1);


        //함수정의 case3: 화살표함수(화살표+익명함수):function예약어사용안함
        var plus2 = (a, b) => {
            return a + b;
        }

        console.log("화살표함수를 출력해보자1", plus2(10, 20));


        //함수정의 case4: 화살표함수의 return구문까지도 없애보자{}를 생략하고 return구문도 생략가능
        var plus3 = (a, b) => (a + b);
        console.log("화살표함수를 출력해보자2", plus3(100, 200));
    //함수정의 case4: 화살표함수의 return구문까지도 없애보자{}를 생략하고 return구문도 생략가능
        var plus3 = (a, b) => (a + b);
        console.log("화살표함수를 출력해보자2", plus3(100, 200));


        //함수정의 case5: 즉시실행함수
        //함수정의와 값할당을 동시에 처리
        var plus4 = (function (a, b) {
            return function () {
                return a + b;
            };
        })(10, 20);
        console.log("즉시실행함수 를 출력해보자", plus4());

    </script>


익명함수나 화살표함수와 같이 함수를 정의하고 사용하는데 다양한 코딩 문법을 제공하는 이유는
코딩량을 최소화하여 보다 효율적으로 생산적으로 코딩하는데 도움을 주기 위해 언어가 지속적으로 발전하기 때문입니다.

되도록 최신의 문법으로 적은 코딩을 통해 보다 효율적인 코딩을 통해 불필요한 코딩시간을 줄이고 해당 시간을 비지니스에 집중하는 개발자가 될수 있도록 
개발 언어들이 지속적으로 발전하고 신규 문법들이 쏟아지는 이유와 배경에 대해 이해하시면 좋을듯합니다.

오늘도 수고 많으셨습니다.