27일차

JS 함수

---

함수 복습

// 함수 복습

function sum(x, y) { // 매개변수
    return x + y   
}

sum(1, 3) // 인수

화살표 함수

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

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

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

화살표함수는 축약형으로 코드를 최소화 할수 있어 편리함

화살표함수로 객체데이터{}를 반환할때는 ()로 꼭 감싸줘야함

IIFE

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

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

(function () {
  console.log(a * 2)
})(); // 즉시실행함수

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

호이스팅

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

const a = 7

double()

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

타이머 함수

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

setTimeout(function () {}, 3000)   // 3초뒤에 함수 실행

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

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

// 3초뒤에 taewook이 출력되지만, 만약 클릭한다면 멈춰버림

콜백

// 콜백(Callback)
// 함수의 인수로 사용되는 함수

// setTimeout(함수, 시간)

function timeout() {
  setTimeout(() => {
    console.log('Taewook!')
  }, 3000)
}
timeout()
console.log('Done!')  // Done이 먼저 출력되고 3초후에 taewook이 출력됨

function timeout(cb) {
  setTimeout(() => {
    console.log('Taewook!')
    cb()
  }, 3000)
}
timeout(() => {
  console.log('Done!')
})  // Taewook! 출력 된뒤 Done!이 출력됨 콜백함수 사용