thumbnail
JS Function
JavaScript / FastCampus
2022.02.05.

함수 복습

  • 기명 함수 (함수 선언)
function sum(x, y) {
  return x + y
}
  • 익명 함수 (함수 표현)
const sum = function (x, y) {
  return x + y
}
  • return => 함수 종료
  • 그냥 return이면 undefined 가 출력됨
function sum(x, y) {
  if (x < 2) return

  return x + y
}

console.log(sum(1, 3)) // undefined

화살표함수

( ) => { } vs function ( ) { }

  • 매개변수 2개 이상 : 소괄호 생략 불가능
const double = function (x, y) {
  return x * 2
}
console.log('double: ', double(7))
  • 매개변수 1개 : 소괄호 생략 가능
  • 단순 return문 한개 : 중괄호 & ‘return’ 생략 가능
  • 중괄호 있으면 반환할 데이터는 ‘return’이 꼭 필요함!
const doubleArrow = x => x * 2
console.log('doubleArrow: ', doubleArrow(7))

return 하는게 객체데이터면?
=> 소괄호로 둘러싸야함!

const objectArrow = x => ({
  name: 'Heropy',
})
console.log('objectArrow: ', objectArrow(7))

즉시실행함수

IIFE : Immediately-Invoked Function Expression

(function (){} ())

  • 한번만 실행되고 안쓰이는 함수는 이걸로!
// 보통 실행
const aa = 7

function doubleAA() {
  console.log(aa * 2)
}
doubleAA()

주의

  • 즉시실행함수는 사용할 때 Uncaught TypeError 발생가능
  • js엔진이 IIFE 실행부분과 위의 코드 내용의 실행부분을 구분하지 못해서 에러남
    • -> ';' 세미콜론 붙여줘서 해결
  1. (x)()
(function () {
  console.log(aa * 2);
})();
  1. (x()) : 1보다 2가 더 선호됨
(function () {
  console.log(aa * 2);
}());

호이스팅(Hoisting)

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

  • 함수 표현일때
const seven = 7

doubleS()
const doubleS = function () {
  console.log(seven * 2)
}

=> TypeError 발생
=> doubleS가 function이 아니라고 뜸

  • 함수 선언일때
const seven = 7

doubleS() // 14
function doubleS() {
  console.log(seven * 2)
}

=> 함수 선언부가 유효범위 최상단으로 올라가짐!


타이머 함수

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

setTimeout(function () {
  console.log('Heropy!')
}, 1000) // 1000ms == 1sec

clearTimeout(setTimeout의 반환값) : 설정된 Timeout함수를 종료

const timer = setTimeout(() => {
  console.log('Heropy! ArrowFunc')
}, 3000)
// setTimeout의 반환값을 timer에 담아두기

const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  clearTimeout(timer)
})
// 만약 h1 클릭시,
// 설정된 Timeout 함수를 종료 -> 즉 3초뒤에 Heropy! ArrowFunc 안뜸!

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

const timer2 = setInterval(() => {
  console.log('Heropy! IntervalFunc')
}, 3000)

clearInterval(setInterval의 반환값) : 설정된 Interval 함수를 종료

h1El.addEventListener('click', () => {
  clearInterval(timer2)
})
// 설정된 Interval 함수를 종료 -> 즉 3초마다 Heropy! IntervalFunc 안뜸!

콜백(callback)

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

function timeout(cb) {
  setTimeout(() => {
    console.log('callback')
    cb()
    // 내가 실행하고 싶은 위치에 직접 지정가능
    // -> 위의 로직들 많을 시에 이런식으로 맨 끝에 실행되기를 보장할 수 있음
  }, 3000)
}

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