화살표 함수를 쓰면 안되는 때와 써야할 때.

https://velog.io/@raram2/%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EB%A5%BC-%EB%82%A8%EC%9A%A9%ED%95%98%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0#2-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%95%B8%EB%93%A4%EB%9F%AC%EB%A1%9C-%EC%84%A0%EC%96%B8%ED%95%A0-%EB%95%8C

화살표 함수를 남용하면 안되는 이유

 

 

코어 자바스크립트 책을 읽고 나니 더 도움이 된다.

이벤트 리스너에서는 this가 지정된 경우가 많이 있기에 func 사용.

 

화살표 함수에는, prototype, this, arguments와 관련된 이유임.

메소드로 사용 불가.

 

---

1. arguments property

✅  1 - 1. 일반 함수의 arguments

일반함수는 이미 내장된 arguments 라는 프로퍼티가 존재합니다.

어떤 (일반) 함수를 호출할 때 인자로 받은 매개변수를, 함수 내에서 arguments 라는 변수로 호출할 수 있습니다.

 

function func1() {
  console.log(arguments);
  console.log(arguments[3]);
}

func1(1,2,3,4);

>>> Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
>>> 4

✅  1 - 2. 화살표 함수에겐 arguments 프로퍼티가 없다.

대신 화살표 함수는 rest parameter 를 사용하여 arguments 프로퍼티의 효과를 낼 수 있습니다. 아래 코드에는 args 라는 임의의 변수를 사용했습니다.

중요한 것은 `...` spread 연산자로 함수의 매개변수를 그대로 받아와 화살표함수 내부에서 변수로 사용할 수 있게 도와준다.

const arrowFunc = (...args) => {
    console.log(args)
}

arrowFunc(3, 4, 5);

>>> [3, 4, 5]

 

 

✅  1 - 3. arguments 프로퍼티 와 rest parameter 의 차이

arguments 는 배열 객체처럼 보이지만 사실, 매개변수로 전달된 인수(argument) 의 정보를 담고있는 유사 배열 객체(array-like-object)이다. 배열처럼 iterable 한 속성을 가지지만 Array 객체의 메서드를 사용하지 못한다는 차이점이 있다. 아래 코드처럼 arguments 에 forEach() 메서드를 적용하면 에러가 발생한다. 유사 배열 객체는 Array.prototype 의 메서드를 사용하지 못하기 때문이다.

 

 

반면 rest parameter 는 배열객체의 메서드를 온전히 사용할 수 있다.

spread 연산자를 통해 가변 매개변수를 배열로 받을 수 있으며, 이는 실제 배열 객체이기 때문에 배열의 메서드를 그대로 사용할 수 있다. 

https://junior-datalist.tistory.com/207

자바스크립트, 화살표함수와 일반함수 차이

화살표 함수

화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.

• this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
• new.target키워드가 없습니다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
• 생성자(Constructor)로 사용할 수 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다.
•  

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN