JavaScript 함수

함수

function sum(x, y) {
    return x + y
}

arguments

• 모든 인수를 가지고 있는 객체 데이터

function sum(x, y) {
    return arguments[0] + arguments[1]
}

 

함수표현 (익명함수)

let sum = function (x,y) {
    return x + y
}

 

화살표함수

• 익명함수를 화살표함수로 축약해서 사용 할 수 있다.

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

 

축약형

• 단순 인수와 리턴만 있는 경우 축약해서 사용 할 수 있다.
• 아래와 같이 축약해서 쓸 수 있다.
• 인수가 한개 이면 (x)의 소괄호를 제외해도 된다.

const doubleArrow = (x) => x * 2

 

객체 데이터 반환하는 방법

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

 

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

• 즉시실행함수는 선언과 동시에 호출되어 반환하는 함수로 재사용이 불가능하다.
• 필요없는 전역 변수의 생성을 줄일 수 있고, private한 변수를 만들 수 있다.

const a = 7

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

double();                            // 즉시실행함수와 구분하기 위해 세미콜론(;)을 붙여줘야 한다.

(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(함수, 시간(ms))
일정 시간 후 함수 실행

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

 

clearTimeout(함수)
함수에 시간을 멈춰 실행시키지 않도록 한다.

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

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

 

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

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

 

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

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

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

 

Callback함수

함수의 인수로 사용되는 함수이다. 위에 타이머 함수들에 인수로 사용되었던 익명함수 또는 화살표함수들이 Callback함수이다.

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


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