arrow, normal function의 차이

arrow, normal function의 차이

기존에 js에서 사용하던 함수구문을 arrow function 방식을 이용해
더 간결하게 작성할 수 있게 되었다.
하지만 이 arrow function! 사용하다보면, 이게 안된다고? 하는 순간이 있다.

오늘은 이 arrow function과 normal function의 차이점을 알아보자!

1. arrow function 선언 방식

• arrow function의 큰 장점이자, 선호이유는 간단한 구문 때문일 것이다.
• 아래 코드는 arrow function 구문을 작성하였다.

(1). 매개변수 여부

: 매개변수 개수에 따라 표현 구문이 달라질 수 있다.

//매개변수 0개 (소괄호 필요)
() => {...}  

//매개변수 1개 (소괄호 생략가능)
(x) => {...}
x => {...}

//매개변수 2개 이상 (소괄호 필수)
(x, y) => {...}

(2). 소괄호로 return 대신하기

: 앞서 예시에서는 ()⇒{} 구문을 사용했다.
: 하지만, 여러분이 return을 생략하고 싶다면, ()⇒() 구문을 사용하면 된다.

// 두 구문의 결과값이 같음
(x) => {return x}       //x값이 return
(x) => (x)              //x값이 return

2. 이름 없는 arrow function

• arrow function의 특징 중 하나는 함수명을 정의할 수 없다는 점이다.
  (그래서 익명함수라고도 불림)
• normal function의 경우 아래와 같이 함수명(testFunc)을 지을 수 있다.
• 만약 여러분이 arrow function의 함수명을 짓고 싶다면, 변수안에 담는 방식으로 진행해야한다.

// normal function
testFunc() {
  ....
}

// arrow function
const testFunc = () => {
  ....
}

3. this 범위 차이

(1). 일반함수의 this는 동적이다.

: 일반함수에서 함수 호출시 어떤 방식으로 호출하냐에 따라 this가 달라진다.
: 이말은 일반함수는 본인이 어떤 객체에 속해있냐, 어떤 객체 안에서 호출되냐에 따라 this가 달라진다는 말이다.

const normal = {
    hello: 'world',
    button.addEventListener('mouseover', function() {
        this.hello = 'bye';   //undefined
    })
}

: 위 코드는 button 객체에서 일반 함수를 호출하고 있다.
: 이 말은 함수가 호출되는 객체가 button이기 때문에, this가 가리키는 객체는 button이다.
: 하지만 button 객체 안에는 hello라는 변수가 없기 때문에 hello를 undefined라고 인식한다.

(2). 화살표 함수의 this는 정적이다.

: 그에 비해 화살표 함수의 this는 본인이 어떤 객체에서 호출되든지 간에 변하지 않는다.
(그만큼 일편단심이라는 거징~)
: 화살표 함수는 항상 상위 스코프의 this를 가리킨다!

const arrow = {    //상위스코프
    hello: 'world',
    button.addEventListener('mouseover', () => {
        this.hello = 'bye';
    })
}

: 위 코드에서는 button 객체 안에 화살표 함수를 호출하고 있다.
: 하지만 화살표 함수의 this는 상위 스코프 영역을 가리키므로 hello를 사용할 수 있다.

앗 그렇다면 아래와 같은 경우에는 this는 무엇을 가리키나요?

//상위스코프는 window

button.addEventListener('mouseover', () => {
    console.log(this)
})

: 앞선 예시와 달리, arrow function의 상위에는 어떠한 스코프도 없다.
: 그러므로 이 경우에 this는 window를 가리킨다!

---

출처
아래 출처로 이동시 더 자세히 알 수 있습니다 :)

• MDN Web Docs 자료, 화살표 함수
• poiemaweb님의 포스팅, Arrow function
• wookkk님의 포스팅, Arrow Function function() 의 this 차이
• 서상혁님의 포스팅, 화살표 함수란