JS 알아보기 (함수)

 

함수

 

https://bluelearn.tistory.com/39?category=947483

 

화살표 함수

 

// 화살표 함수
// 일부 내용을 생략해서 축약형으로 작성이 가능하다
// () => {} vs function () {}

// 함수 표현
const double = function (x) {
  return x * 2
}

// double: 14
console.log('double: ', double(7))

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

const doubleArrow2 = (x) => x * 2

// doubleArrow: 14
console.log('doubleArrow', doubleArrow(7))

// doubleArrow2: 14
console.log('doubleArrow2', doubleArrow2(7))

 

IIFE (즉시 실행 함수)

 

// 즉시 실행 함수
// 함수를 정의하자마자 바로 호출하는 함수
// IIFE, Immediately-Invoked Function Expression

(function () {
  내용
}())

// 예시
(function (x) {
  console.log(x * 2)
}(7));

 

호이스팅

 

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

const a = 7

double()

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

 

타이머 함수

 

// 타이머 함수
// setTimeout(함수, 시간(ms)): 일정 시간 후 함수 실행
// clearTimeout(): 설정된 Timeout 함수를 종료

// 3초 후에 IT Blue 출력
setTimeout(function () {
  console.log('IT Blue!')
}, 3000)

// 3초 후에 IT Blue 출력
const timer = setTimeout(() => {
  console.log('IT Blue!')
}, 3000)

// h1 요소를 클릭하면 타이머 함수 종료
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  clearTimeout(timer)
})

 

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

// 3초 마다 IT Blue 출력
const timer = setInterval(() => {
  console.log('IT Blue!')
}, 3000)

// h1 요소를 클릭하면 타이머 함수 종료
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  clearInterval(timer)
})

 

콜백

 

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

// setTimeout(함수, 시간)
// 콜백함수 예시

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

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