12. 함수

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

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

 

익명함수

 - 필요 시 마음대로 호출하는 것이 불가(이름이 없기 때문) 

 - 선언된 함수가 여러 곳에서 재사용 되는 것이 아닌,

    이벤트핸들러와 같은 특정 동작이나 상황에서만 수행하는 함수가 필요한 경우 사용 

- 매개변수로 전달되는 함수의 형태가 일정하지 않을 때 사용

A.addEventListener("click", function(){ // 함수 선언(함수명X)
	console.log("함수 정의")
})

 

즉시 실행 함수 

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

 - 사용이유 

   1) 함수 선언 및 호출을 위한 탐색 과정이 생략되어 속도가 빠름 

   2) 변수명 중복 방지 -> 즉시 실행 함수 내부에서 작성되면 지역변수로 분류됨) 

   3) 페이지 로딩 시 바로 수행되어야 할 때 편리 

(function([매개변수]) {
	console.log("함수 정의")
})(); // **세미콜론 필수!!**

 

 

⭐️ 화살표 함수 

 - 함수 표현식을 간단히 표현한 표기법(es6 문법)

* 주의사항 *

   : 화살표 함수에서는 this를 사용할 수 없다(여기서 this는 window 객체를 나타냄)  

     -> e.target 으로 대체하여 사용해야 함. 

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

 

1. 기본 형태 : ([매개변수]) => {}

btn1.addEventListener("click", function(){ result.innerText = "기본형태" })

 

2. 매개변수가 "하나"인 경우 () 생략 가능 (매개변수가 없을 경우 생략 불가)

btn2.addEventListener("click",  e => { result.innerText = "매개변수 1개" })

 

3. 함수 정의가 return [식 or 값] 으로만 작성되어 있으면 {}, reutrn 생략 가능 

    * 단, return 되는 값이 객체인 경우 생략 불가 

btn3.addEventListener("click", () => {

    sum = () => 10 + 10
        
    // function sum () {
    //     return 10 + 10
    // } 와 같은 형태 

    result.innerHTML = sum()

})