JS함수 정리 - 화살표함수, 즉시실행함수, 호이스팅, 타이머함수, 콜백

* 화살표함수

// 화살표 함수
// () => {} vs function () {}

const double = function (x) {
  return x + 2
}
console.log('double: ', double(7))

const doubleArrow = x => x * 2
console.log('doubleArrow', doubleArrow(7))

// 화살표 함수 객체데이터 사용법
const doubleArrow = x => ({ name: 'jeongeun' })
console.log('doubleArrow', doubleArrow(7))

* 즉시실행함수 IIFE

: 함수가 한 번 실행되고 쓸 일이 없을 때

: 이름이 없는 익명함수를 만들자마자 그 자리에서 바로 실행가능

// 즉시실행함수
// IIFE, Immediately-Invoked Function Expression

    const a = 7
    function double() {
      console.log(a * 2)
    }
    double();

// 이것이 즉시 실행 함수 (x)() ot (x()) 후자가 더 많이 쓰임
    (function () {
      console.log(a * 2)
    })();

    (function () {
      console.log(a * 2)
    }());

* 호이스팅

: 함수의 이름만 보고도 함수의 로직을 추측해 볼 수 있어서 용이

: 함수호출이 함수선언보다 상단에 있는 모습

// 호이스팅
// 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

    const a = 7
    
    double()

// 함수 표현을 사용했을 때는 안됨.
    const double = function () {
      console.log(a * 2)
    }

// 함수 선언을 했을 때는 가능. 
// 왜냐하면 함수 선언부는 호이스팅이 발생하기 때문이다.
    function double() {
      console.log(a * 2)
    }

* 타이머함수

setTimeout(함수, 시간): 일정 시간 후 함수 실행

setInterval(함수, 시간): 시간 간격마다 함수 실행

clearTimeout(): 설정된 Timeout 함수를 종료

clearInterval(): 설정된 Interval 함수를 종료

// 타이머 함수

const timer = setTimeout(() => { 
  console.log('hi')
}, 3000) //1000ms는 1초


const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  clearTimeout(timer)
})

<h1>hello</h1>

const timer = setInterval(() => {
  console.log('hi')
}, 3000) //1000ms는 1초


const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  clearInterval(timer)
})

* 콜백

: 함수의 인수로 사용되는 함수

: 특정한 실행 위치를 보장해주는 함수

function timeout() {
  setTimeout(() => {
    console.log('Heropy!')
  }, 3000)
}

timeout()
console.log('Done!')
// 이렇게 하면 'Done!'이 먼저 실행되고 3초 뒤에 timeout()이 실행됨


// 콜백함수 사용
// 함수의 인수로 사용되는 함수
// 특정한 실행 위치를 보장해주는 함수
function timeout(cb) {
  setTimeout(() => {
    console.log('Heropy!')
    cb()
  }, 3000)
}

timeout(() => {
  console.log('Done!')
})