---

Function

---

• 함수라는 의미도 갖고 있지만 function자체가 키워드가 되기도 한다.

function의 특징

• function을 변수에 저장할 수 있다.
  • 배열에 function을 저장할 수 있다.
  • 매개변수에 function을 저장할 수 있다. (function에 function을 전달)
    • 함수에 함수를 전달 : callback 함수
• function을 저장한 변수는 함수로 본다.

---

선언 함수

• 함수의 이름이 있다.
• 함수 정의(함수를 만드는 것)와 함수 호출(함수를 사용하는 것)

‣ 함수 정의 형식

function 함수명([매개변수]){
	함수 본문
	return 반환값;
}

‣ 함수 호출 형식

함수명([인수]);

‣ 활용 예제

// 함수 호출 
myFunc1();
  
// 함수 정의 (호이스팅 대상이므로 언제나 먼저 처리된다.)
function myFunc1(){
	console.log('myFunc1 실행');
}

---

익명 함수

• 함수의 이름이 없다.
• 호이스팅 대상이 아니다. (함수 정의를 반드시 먼저 해야 한다.)

---

‣ 함수 정의 형식

• 일반 익명 함수

function([매개변수]){
	함수 본문
	return 반환값;
}

• 화살표 익명 함수 (ES6, 최근 표준 권장)

([매개변수])=>{
	함수 본문
	return 반환값;
}

---

‣ 함수 호출 형식

<함수를 변수에 저장하기>

• 일반 익명 함수

var 함수명 = function(){

}
함수명();

• 화살표 익명 함수

var 함수명 = ()=>{

}
함수명();

---

‣ 자기 호출 (함수 정의와 함수 호출이 동시에 진행되는 방식)

• 일반 익명 함수

(function(){
                 
})();

• 화살표 익명 함수

(()=>{

})();

---

‣ 이벤트 리스너로 등록하기

• 일반 익명 함수

문서객체.addEventListener('이벤트', function(){

});

• 화살표 익명 함수

문서객체.addEventListener('이벤트', ()=>{
                 
});

---

‣ 활용 예제

• 함수를 변수에 저장하기

var myFunc2 = function(){
	console.log('myFunc2 실행');
}
myFunc2();

• 자기 호출

(function(){
	console.log('자기 호출 실행');
})();

• 이벤트 리스너로 등록하기

document.addEventListener('dblclick', function(){
	console.log('이벤트 리스너 실행');
});

---

인수와 매개변수

• 매개변수를 선언할 때는 선언 키워드(var, let, const)를 사용하지 않는다. (매개변수는 변수명만 작성한다.)

• 디폴트 매개변수 처리가 가능하다.
  • 변수를 선언하고 어떤 값도 저장하지 않으면 undefined 값을 가진다.
  • 매개변수로 인수를 전달하지 않으면 매개변수는 undefined 값을 가진다.
  • 매개변수의 undefined 여부에 따라 매개변수의 초기화 작업을 진행할 수 있다.
  • 매개변수에 디폴트 값을 직접 저장할 수 있다.

• 전개 연산자(...)가 존재한다.
  • 인수의 개수가 정해지지 않은 경우에 사용한다.
  • 매개변수를 배열로 처리한다.

• 인수를 저장하는 arguments 객체가 있다.
  • 매개변수를 선언하지 않아도 모든 인수는 arguments 객체에 저장된다.
  • arguments 객체는 배열과 유사하게 동작한다.

---

반환(return)

• 반환 타입을 작성하지 않는다.
• return 반환값; 을 통해서 값을 반환할 수 있다.
• return; 을 통해서 함수를 종료할 수 있다.

---

콜백 함수

• 함수에 함수를 전달할 수 있는 개념이다.

• 인수(함수) -> 매개변수(함수를 저장한 변수) 흐름으로 동작한다.

• 함수를 전달 받은 함수는 매개변수를 함수 호출하듯이 처리하여 전달 받은 함수를 실행한다.

기본형식

function 함수명(파라미터){
  파라미터();
}
함수명(function(){});

---

재귀 호출

Recursive Call

• 어떤 함수가 자신을 호출하는 것을 의미한다.
• 반복 동작을 구현할 때 사용한다.

factorial 구하기

• 5! = 5*4! = 5*4*3*2*1
• 4! = 4*3! = 4*3*2*1
• 3! = 3*2! = 3*2*1
• 2! = 2*1! = 2*1
• 1! = 1

• 포인트❕재귀 호출은 끝나는 위치를 잘 찾아야한다. (잘못하면 무한루프에 빠짐)

• tip ❕ 전산에서는 factorial값을 성능 계산 용도로 사용하기도 한다.

---

타이머 함수(내장 함수)

• setTimeout
  • 특정 시간 후에 한 번만 동작한다.
  • 동작
    var timerId = setTimeout(함수, 시간(밀리초));
  • 동작 취소
    clearTimeout(timerId);

• setInterval
  • 특정 시간 간격으로 여러 번 동작한다.
  • 동작
    var timerId = setInterval(함수, 시간(밀리초));
  • 동작 취소
    clearIntervar(timerId);

---

👉function예제 깃허브(클릭)

---

• NaN(Not a number) : 자바스크립트 내장함수

---

✍️함수별로 단위를 나누어 놓는 작업이 매우 중요! (Divide and Conquer)

---

자스 함수 너무 재.미.따~하!

---