[JavaScript] 함수 기초, 화살표 함수, 즉시실행함수(IIFE), 호이스팅, 타이머 함수

• 성능에 영향을 끼칠수있으므로 함수 호출 회수는 줄이는 게 좋다. 
• 반복적으로 사용 될때는 변수에 담아서 사용하고, 단일로만 사용될 땐 함수를 직접 호출하는 방법이 있다.

 

• 함수표현 : 변수에 담아서 사용하는 함수
• 익명함수 : 이름이 없는 함수
• 기명함수 : 이름이 있는 함수

 

• 함수 내에서 return 문을 만나면 종료된다.

 

• arguments : 인수를 지정하지 않아도 함수 내에서 활용할 수있다. 인수가 너무 많은 경우에 사용

• function sum(){
    console.log(arguments)
    return  arguments[0] + arguments[1] + arguments[2]
  }
  const z = sum(1,2,3)
  console.log(z)

 

• 화살표 함수 :  일반 함수의 축약형
• 매개 변수가 하나라면 소괄호를 생략할 수 있다.

• (x,y) => {}   
    x   => {}

• 중괄호도 생략이 가능하다.  객체 데이터를 반환할땐 주의!

• x => {return x * 2}
  x => x * 2
  
  x => ({ name:'solyi' })
  // 이와 같이 소괄호로 한번 감싸서 객체 데이터도 출력 할 수 있다.

 

• IIFE 즉시실행함수 : 한번만 사용할 함수

• //즉시실행함수 : 익명함수를 소괄호로 묶고, 뒤에서 소괄호 한번더 
  
  // 1 (함수)()
  (function (){
    console.log(a * 2)
  })();
  
  // 2 (함수())   //<- 강사님 권장
  (function (){
    console.log(a * 2)
  }());

 

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

• const double = function (){...} 
  // 위와같은 함수는 함수 윗줄에 실행 코드를 작성하면 에러가 발생하지만
  function double () {...} // 이 코드로 실행시 읽어올 수 있다

 

•  타이머 함수
• setTimout(함수, 시간) : 일정 시간 후 함수 실행
  setInterval(함수, 시간) :  시간 간격마다 함수 실행
  clearTimeout() :  설정된 Timeout 함수 종료
  clearInterval() : 설정된 Interval 함수 종료

• const timer = setTimeout(()=>{
    console.log('solyi')
  }, 3000)   // 1000ms = 1초
  
  const h1El = document.querySelector('h1')
  h1El.addEventListener('click', () => {
    console.log('h1 click')
    clearTimeout(timer)
  })
  
  
  const timerInterval = setInterval(()=>{
    console.log('solyi')
  }, 1000)   // 1000ms = 1초
  
  h1El.addEventListener('click', () => {
    console.log('h1 click')
    clearInterval(timerInterval)
  })

 

• 콜백 함수
• 함수의 인수로 사용되는 또 다른 함수를 의미
• 콜백함수는 실행 위치를 '보장'한다

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