JavaScript_함수

기본적인 함수의 선언, 정의, 호출

       function 함수명([매개변수]) { // 함수 선언
            // 함수 정의 == 코드
        }
        함수명(); // 함수 호출

---

익명 함수(이름이 없는 함수)

       function([매개변수]) { 함수 선언(함수명 X)
            // 함수 정의
        }

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

    - 이벤트 핸들러와 같이
        선언된 함수가 여러곳에서 재사용 되는 것이 아닌
        특정 동작이나 상황에서 수행되는 함수가 필요한 경우에 사용한다.

    + 매개변수로 전달되는 함수의 형태가 일정치 않을 때
    

---

즉시 실행 함수

       (
            function([매개변수]) {
                //함수정의
            }
        )();

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

    ** 즉시 실행 함수 사용 이유 **
    1) 함수 선언 및 호출을 위한 탐색 과정이 생략되기 때문에
        속도적 우위를 가지고 있다.
    
    2) 변수명 중복을 방지할 수 있다.
        -> 즉시 실행 함수 내부에 작성되면
            지역변수로 분류되어 다른 지역변수명과 중복되는 일이 없다.
            

---

화살표 함수

익명 함수의 표현식을 간단히 표현한 표기법(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 생략 불가능

---

// 2. 매개변수 1개 : 매개변수 => {}
document.getElementById("btn2").addEventListener("click", e => {

    // 매개변수 e (또는 event) : 이벤트 관련 정보를 모두 갖고있는 객체
    console.log(e);
    // e.target : 이벤트가 발생한 대상(요소)
    console.log(e.target);

    e.target.style.backgroundColor = 'yellow';

    //*******[화살표 함수 주의 사항]*******
    // -> 화살표 함수를 이벤트 핸들러로 사용할 경우
    // this는 window 객체를 나타내게 된다.
    // (화살표 함수 내부에서 this 사용 불가)
    // --> e.target으로 대체
});