일반함수 VS 화살표 함수

일반함수

함수 선언식

• 호이스팅이 됨: 따라서 함수 위에 main()을 호출해되 잘 작동이 됨
• 함수의 이름이 필수적이어야 해서 익명함수는 불가능

function main() {
   console.log('main')
}

 

 

함수 표현식

• 익명함수로 사용 가능
• 호이스팅이 되지 않음

cosnt main = function() {
   console.log('main')
}

 

 

화살표 함수

• 함수 표현식을 간결하게 만들어줌 

const main = () => {
   console.log('main')
}

 

 

일반함수와 화살표 함수의 차이점(arguments)

• 일반함수는 매개변수를 넘겨주지 않아도 arguments라는 변수에 매개변수들이 담김
• 화살표 함수는 arguments 변수를 사용하면 not defined가 나오기 때문에 () 안에 명시해줘야 함.

// 일반 함수
function main() {
   console.log('arguments')
}

main(1,2,3) // [1,2,3]이 출력이 됨


// 화살표 함수
const main = () => {
   console.log('arguments')
}
main(1,2,3) // 화살표 함수에도 적용을 하면 not defined가 나옴

// 화살표 함수에서 arguments 사용하기
const main = (...args) => {
   console.lo(args)
}
main(1,2,3)

 

 

일반함수의 this와 화살표함수의 this

• 일반 함수는 함수의 호출 위치 시점에서 결정됨
• 화살표 함수의 this는 선언된 위치 시점에서 결정됨
  • 아래의 object는 전역 상태에서 선언됐기 때문에 window 객체가 출력이 됨
• 화살표 함수는 this에 접근하기 어렵기 때문에 객체의 메서드로 사용하기에 좋지 않음

const object = {
   name: 'object',
   main: function() {
      console.log(this)
   }
   mainArrow: () => {
      console.log(this)
   }
}

object.main() // object 객체가 출력
object.mainArrow() // window(전역) 객체가 출력