Arrow function

Goun Seo·2021년 12월 8일
0

Arrow function 에 대해 설명
화살표 함수는 function 키워드 대신 화살표 ⇒ 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의

  • 코드들을 기능으로 묶고 싶을 때 사용

  • 화살표 함수는 표현 뿐만 아니라 내부 동작도 기존의 함수보다 간략하다. 직관적이라서 그래서 입출력기계를 만들때 보기 쉬움

  • 화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용

const multiply = ( x,y ) => x * y ; 
multiply(2,3); 

매개 변수 선언 : 매개변수가 여러개인 경우 소괄호 () 안에 매개변수를 선언

const arrow =( x, y) => {...};
  • 매개변수가 한 개 인 경우 소괄호 () 생략 가능

    매개변수가 없는 경우 소괄호 () 를 생략 불가능

const arrow = x => {...};
const arrow =() => {...};
                    
                    
  • 코드가 한줄 이면 중괄호 도 생략 가능

<예시 >

  1. for each 콜백함수


    배열을 콜백함수로 사용할때
  1. 이벤트리스너 : 화살표 함수는 바깥쪽에 있던 this 값을
    내부에서 그대로 사용 ( 화살표 함수는 this 값을 내부에서 정의해주지 않음 상위에 있는 this 값을 가져옴 )
  1. object 안에 함수

<화살표 함수와 일반 함수의 차이 >

1. 화살표 함수는 인스턴스를 생성할 수 없는 non -constructor 이다

화살표 함수는 생성자 함수로서 호출 할 수 없다.

2. 중복된 매개변수 이름을 선언 할 수 없다.

// SyntaxError: Duplicate parameter name not allowed in this context
const arrow = (a, a) => a + a;

3. 화살표 함수는 함수 자체의 this, arguments, super,new,target 바인딩을 갖지 않는다.

  • 화살표 함수 내부에서 this, arguments, super, new.target을 참조하면 스코프 체인을 통해 상위 스코프의 this, arguments, super, new.target을 참조한다.
  • 만약 화살표 함수가 중첩되어 있다면, 스코프 체인 상에서 가장 가까운 상위함수 중에 화살표 함수가 아닌 함수의 this, arguments, super, new.target을 참조한다.

profile
그리다 보면 ~ ♪

0개의 댓글