22-04-26 JS함수

1. 함수 복습

function sum()
  console.log(arguments)
  return arguments[0] + arguments[1]
}

console.log(sum(7, 3))

2. 화살표 함수

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

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

const doubleArrow = (x) => x * 2

const doubleArrow = x => x * 2

객체 데이터 반환

const doubleArrow = x => ({
  name: 'Heropy'
})

03. IIFE즉시실행함수 Immediately-Invoked Function Expression

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

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

4. 호이스팅Hoisting
   함수 선언부가 유효범위(스코프) 최상단으로 끌어올려지는 현상

double()

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

5. 타이머 함수
   // setTimeout(함수, 시간): 일정 시간 후 함수 실행
   // setInterval(함수, 시간): 시간 간격마다 함수 실행
   // clearTimeout(): 설정된 Timeout 함수를 종료
   // clearInterval(): 설정된 Interval 함수를 종료

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

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

clearTimeout

const timer = setTimeout(() => {
  console.log('Heropy!')
}, 3000)

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

6. 콜백Callback
   함수의 인수로 사용되는 함수

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

console.log('Done!')을 나중에 출력

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