14. 함수

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

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

함수명([매개변수]); // 함수 호출

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

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

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

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

3) 즉시 실행 함수

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

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

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

4) 화살표 함수

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

매개변수 e(또는 event)

매개 변수 e (또는 event) : 이벤트 관련 정보를 모두 갖고있는 객체

e.target : 이벤트가 발생한 대상(요소)  

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