[JS 함수] 화살표함수 vs 일반함수
화살표함수 vs 일반함수
1. 함수 최소화
일반함수와 달리 일부 내용을 생략하여 축약형으로 함수 최소화가 가능합니다.
화살표 함수의 축약
- 실행문을 제외하고 {}와 return을 생략해줄 수 있습니다.
- 단, return 키워드 앞에 특정 로직이 들어 있다면 축약이 어렵습니다.
- 매개변수가 1개인 경우에는 ()도 생략을 해줄 수 있습니다.
- 단, 실행문 부분을 {}로 감싸게 되면 실행문이 반환될 수 없습니다. 반환하기 위해서는 반드시 return 키워드를 써야합니다.
2. this
아래 코드를 살펴보면 기본적인 로직은 똑같지만 일반함수로만든 normal 값과 arrow값이 다르게 출력되는 것을 확인할 수 있습니다. 이는 화살표함수와 일반함수에서의 this가 다르기 때문입니다.
const Yseo = {
name: '0seo',
normal: function () {
console.log(this.name)
},
arrow: () => {
console.log(this.name)
}
}
Yseo.normal() //noraml함수가 호출될 때 연결되어 있는 객체가 Yseo이기 때문에 this는 "0seo"가 됩니다
Yseo.arrow() // undefined : 호출위치와 상관 없이 함수 범위에서 this가 정의됩니다.(즉, 화살표함수가 만들어지는 위치에서 정의됩니다.)
- 일반(Normal) 함수는 "호출 위치"에 따라 this 정의
- 화살표(Arrow) 함수는 자신이 선언된 "함수 범위"에서 this 정의
- 화살표 함수는 콜백 함수 내에서 this가 정의되지 않으면, window 전역 객체로 설정
예제
const timer = {
name: '0seo!',
timeout: function () {
setTimeout(function () {
console.log(this.name)
}, 2000)
}
}
timer.timeout() // undefined
아래 코드의 경우 timeout이 호출된 위치가 setTimout이라는 함수 내부이기 때문에 this.name은 undefined가 출력되게 됩니다. 따라서 timer의 name을 출력하고 싶었다면 코드를 아래와 같이 일반함수가 아닌 화살표함수로 수정해야합니다.
const timer = {
name: '0seo!',
timeout: function () {
setTimeout(() => {
console.log(this.name)
}, 2000)
}
}
timer.timeout() // 0seo! (2초 뒤)
setTimeout 또는 setInterval과 같은 타이머 함수를 실행시키는 경우 콜백함수로는 일반함수보다는 화살표함수를 사용하는 것이 활용도가 높습니다.
Author And Source
이 문제에 관하여([JS 함수] 화살표함수 vs 일반함수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@0seo8/JS-함수-화살표함수-vs-일반함수저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)