JS 함수 | 함수 형태, return, arguments, 화살표 함수, 즉시실행(IIFE), 호이스팅, 타이머 함수, 콜백(Callback)

함수 형태

function sum(x, y) {
  // 인수를 받아줄 수 있는, 함수 선언부에 선언된 변수 = 매개변수
  console.log(x + y)
}

sum(1, 3)
sum(4, 12)
// 함수가 호출될 때 같이 들어가는 특정한 값 = 인수

 

return

function sum(x, y) {
  return (x + y)
  // sum 함수 실행되어 x+y된 값이 
  // return 통해서 이 함수 밖으로 내보내질 수 있음
}

const a = sum(1, 3)
const b = sum(4, 12)

console.log(a)
console.log(b)
--------------
console.log(sum(1, 3))
console.log(sum(4, 12))

// 함수의 결과가 반복적으로 사용될 때에는 변수에 담기
// 단일로만 사용될 때는 그냥 넣어서 호출해도 괜찮음

 

return이 사용된 부분에서 함수가 종료됨. return 밑의 코드는 실행되지 않음

function sum(x, y) {
  return (x + y)
  console.log(x)
  // 실행되지 않음

 

조건을 만들어서 특정한 내용 실행 여부를 return 키워드를 통해서 함수 안에서 작성 가능

function sum(x, y) {
  if (x < 2) {
		return 123
  }
    return (x + y)
console.log(sum(1, 3))   >> 123
// if 조건에 부합
console.log(sum(7, 3))   >> 10
// if 조건에 부합하지 않음

 

arguments

인수가 너무 많아서 매개변수 이름을 지정하기 어려울 경우 사용함

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

}

console.log(sum(7, 3))

// 매개변수 지정히지 않아도 함수 안에서 언제든지 사용 가능
// 7, 3이 배열 형태로 들어가 있음

 

화살표 함수

축약형으로 작성하는 함수

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

//화살표 함수
const doubleArrow = (x) => x * 2
console.log('doubleArrow', doubleArrow(7))
// 매개변수 하나일 때는 소괄호도 생략 가능

 

매개변수 추가 가능

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


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

 

객체데이터를 반환하는 경우에는 ({소괄호로 중괄호를 감싸줘야 함})

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

 

즉시실행

IIFE (함수를 만들자마자 즉시 실행하는 함수 표현)

익명의 함수로 내용을 만들고 소괄호를 이용해서 바로 실행 가능

세미콜론 붙이는 것 주의

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()

const double = function () {
  console.log(a * 2)
}
// 함수 표현일 때
// 함수 정의 전에 선언하여 오류

const a = 7

double()

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

// 함수 선언
// 함수 선언이 호출하는 부분보다 밑에 작성되어 있어도
// 호이스팅 때문에 문제없이 작동

 

타이머 함수

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

setTimeout(function () {
  console.log('heropy')
}, 3000) 
//3초 후에 console에 나타남

   

   2. clearTimeout(): 설정된 Timeout 함수를 종료

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

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

//h1 클릭하면 함수 실행되어 timeout 실행해서 함수 종료

   

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

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

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

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

// h1 클릭하면 함수 실행되어 interval 실행해서 3초마다 출력하던 함수 종료

 

콜백(Callback)

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

코드의 특정한 실행 위치를 보장해주는 방법으로 활용 가능

function timeout(callback) {
  setTimeout(() => {
    console.log('heropy')
    callback() 
    //timeout이라는 전체 함수에서 내가 정확하게 실행을 보장하고 싶은 곳에서 하나의 함수 실행해줄 수 있음
  }, 3000)
}
timeout(() => {
  console.log('done')
}) 

//3초 뒤에 heropy 나오고 그 다음에 done 출력