JavaScript12

  <h2>기본적인 함수의 선언, 정의, 호출</h2>

    <pre>
        <code>
            function 함수명([매개변수]) { // 함수 선언
                // 함수 정의 == 코드
            }

            함수명([매개변수]); // 함수 호출
        </code>
    </pre>

    <hr>

    <h2>익명 함수(이름이 없는 함수)</h2>
    <pre>
        <code>
            function([매개변수])  함수 선언(함수명 X)
                // 함수 정의
        </code>

        - 이름이 없는 함수이기 때문에 필요 시 마음대로 호출하는게 불가능

        - 이벤트 핸들러와 같이
            선언된 함수가 여러곳에서 재사용 되는 것이 아닌
            특정 동작이나 상황에서 수행되는 함수가 필요한 경우에 사용한다.
        
        + 매개변수로 전된되는 함수의 형태가 일정치 않을 떄
    </pre>

    <hr>

    <h2>즉시 실행 함수</h2>
    <pre>
        <code>
            (
                function([매개변수]) {
                    // 함수정의
                }
            )();
        </code>

        -익명 함수의 한 종류로
        함수가 정의되자 마자 바로 실행되는 함수

        ** 즉시 실행 함수 사용 이유 **
        1) 함수 선언 및 호출을 위한 탐색 과정이 생략되기 때문에
        속도적 우위를 가지고 있다.

        2) 변수명 중복을 방지할 수 있다.
            -> 즉시 실행 함수 내부에 작성되면 
                지역변수로 분류되어 다른 지역변수명돠 중복되는 일이 없다.
    </pre>

    <hr>

    <h1 style="color: red">화살표 함수</h1>

    <pre>
        익명 함수의 표현식을 간단히 표현한 표기법 (es6)
        
        작성법 1. 기본 형태 ([매개변수]) => { 함수정의 }
            익명 함수 : function() {}
            화살표 함수 : () => {}

            익명 함수 : function(num) { return num * 2; }
            화살표 함수 : (num) => { return num * 2; }

        작성법 2. 매개변수가 "하나"인 경우 () 생략 가능
            익명 함수 : function(e) { e.target.style.backgroundColor = 'yellow'; }    
            화살표 함수 : e => { e.target.style.backgroundColor = 'yellow'; }
            
        작성법 3. 매개변수가 없을 경우 "무조건" () 작성
        
        작성법 4. 함수 정의 부분이 return [식 또는 값] 으로만 작성되어 있는 경우
            {}, return 생략 가능

            익명 함수 : function(num) {return num * 2;}
            화살표 함수 : num => num *2;
        
        작성법 5. 함수 정의 부분이 return 구문만 있으나
            return되는 값이 객체(object)인 경우 {}, return 생략 불가능
            
            익명 함수 : function() {return {"name" : "홍길동", "age" :20}}
            화살표 함수 : () => { return { "name" : "홍길동", "age" : 20}}
                // 객체 반환은 return 생략 불가능
    </pre>

    <button id="btn1">기본 형태</button>
    <button id="btn2">매개변수 1개</button>
    <button id="btn3">{}, return 생략</button>