JS 함수

함수의 종류

- 기명함수

- 익명함수

function sum(x,y) {
  return x+y
} // 기명함수
const a = sum(1, 5) //익명함수
const b = sum(2, 4)

console.log(a)
console.log(b)
console.log(a+b)
console.log(sum(1, 7))
// 함수 호출 횟수를 최대한 줄이는 것이 좋으므로 보통은 변수에 담아서 사용

return 키워드를 만나면 함수가 종료됨.

return 키워드 밑의 코드들은 실행되지 않음.

const sum1 = function (x,y) {
  if (x<2) {
    console.log("x<2")
    return
  }
  console.log("x>=2")
  return x+y
}
console.log(sum1(6,6))
console.log(sum1(1,2))

인수가 많으면 arguments라는 키워드로 매개변수를 받을 수 있음.

arguments는 배열 형태를 띔

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

console.log(sum2(7,3))

 

화살표 함수

일반적인 함수의 형태는 다음과 같다.

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

화살표 함수의 형태는 다음과 같다.

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

함수 내용에 return 키워드만 존재한다면 함수를 축약할 수 있다.

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

매개변수가 하나라면 다음과 같은 형태로도 축약이 가능하다

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

모든 데이터를 반환 가능. (숫자, 문자, undefined, 배열, 객체 등)

객체 데이터를 반환할 때는 중괄호를 사용하므로 객체를 소괄호로 감싸줘야 한다.

const ObjectReturn = () => ({name: 'Riam'}) //매개변수가 없으므로 ()로 기술 가능
console.log('ObjectReturn: ', ObjectReturn())

 

즉시 실행 함수

IIFE, Immediately-Invoked Function Expression

함수를 만들자마자 바로 실행하는 함수.

아래와 같은 두가지 형태가 모두 가능하다. (괄호의 위치)

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

 

호이스팅(Hoisting)

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

const a = 7

double()

const double = function () {
  console.log(a2 * 2)
}

익명함수는 호출부가 선언부보다 위에 있으므로 오류가 발생한다.

const a = 7
double()

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

기명함수는 호출부가 선언부보다 위에 있어도 선언부를 자동으로 위로 끌어올려서 인식하므로 오류가 발생하지 않는다.

 

타이머 함수

setTimeout(함수, 시간)	일정 시간 후 함수 실행. (시간은 ms단위)
setInterval(함수, 시간)	일정 시간 후 함수 실행 반복. (시간은 ms단위)
clearTimeout()	Timeout 함수의 타이머 진행 정지.
clearInterval()	Interval 함수의 타이머 진행 정지.

setTimeout(function () {
  console.log('Riam~')
}, 3000) // 기명함수 표현. 3초 후 콘솔창에 Riam~ 표시

setTimeout(()=>{
  console.log('Riam~')
}, 3000) // 화살표함수 표현. 3초 후 콘솔창에 Riam~ 표시

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

const h1El = document.querySelector('h1')
h1El.addEventListener('click', () =>{
  clearTimeout(timer)
})  //타이머가 작동할 때 h1 태그를 클릭하면 타이머를 멈춘다.

 

콜백(Callback)

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

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

위 코드는 Done! 이 먼저 출력된 후 3초 뒤에 callback이 출력된다.

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

이렇게 하면 Callback 이 출력된 후 Done이 출력된다.

익명함수를 인수로 넘겨서 cb()라는 함수 호출문으로 실행하는 것.