JS 함수

1. 함수 복습

• function 키워드 뒤에 함수 이름 있으면 기명함수(->함수 선언), 없으면 익명함수(->함수 표현)
• arguments는 특별한 지정 없이 함수의 매개변수가 자동으로 저장되는 객체 -> 인수가 너무 많아 매개변수 지정 번거로울 때 arguments[0] 형태로 그냥 사용하기

2. 화살표 함수

• 익명 함수

const double = function (x) {
	return x*2
}

• 화살표 함수

const doubleArrow = (x) => { return x*2 }

const doubleArrow = x => x*2

🌟 화살표 함수는 function 키워드 없음 / {}+return은 세트로 생략 / 객체 반환 시 ({object}) -> 소괄호로 한 번 감싸주기

3. IIFE(즉시 실행 함수)

• IIFE = Immediately-Invoked Function Expression
• 만들자말자 그 자리에서 한 번만 실행시킬 때 사용
• 소괄호 안에 익명함수 작성하고 소괄호 붙여 실행

( function () {console.log(a)} ) ()

( function () {console.log(a)} () )

🌟 즉시실행함수 앞줄은 세미콜론 필요

4. 호이스팅(Hoisting)

• 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상
  -> 함수 표현(익명) 대신 함수 선언(기명)으로 함수 만들면 그보다 위에서 호출 가능

5. 타이머 함수

⭐ JS의 전역함수!
1) setTimeout(함수, 시간) 일정 시간 후 함수 실행
2) setInterval(함수, 시간) 시간 간격마다 함수 실행
3) clearTimeout() 설정된 Timeout 함수 종료
4) clearInterval() 설정된 Interval 함수 종료

• 시간단위 ms (1000ms = 1s)

const timer = setTimeout( () => {console.log('Hello')}, 3000)
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {clearTimeout(timer)})

6. 콜백(Callback)

• 함수의 인수로 시용되는 함수
• 매개변수로 함수 이름 지정해 내부에서 소괄호 붙여 호출도 가능
• 시작위치 보장 용도로 많이 사용

function timeout(cb) {
  setTimeout(() => {
    console.log('Hello')
    cb()
  }, 3000)
}
timeout(() => {console.log('Done')})