logo

JavaScript의 화살표 함수

화살표 기능이란 무엇입니까?

화살표 함수 {()=>} 더 짧은 방식으로 JavaScript 함수를 작성하는 간결한 방법입니다. 화살표 기능 ES6 버전에서 소개되었습니다. 이는 우리의 코드를 더욱 구조화하고 읽기 쉽게 만듭니다.

화살표 기능 익명 함수, 즉 이름이 없는 함수이지만 어떤 변수에나 할당되는 경우가 많습니다. 그들은 또한 불린다 람다 함수 .



모델 예

통사론:

const gfg = () =>{ console.log( '안녕하세요 괴짜!' ); }>

아래 예는 JavaScript에서 Arrow 함수의 작동을 보여줍니다.

매개변수가 없는 화살표 함수

자바스크립트
const gfg = () =>{ console.log( 'GeekforGeeks에서 안녕하세요!' ); } gfg();>

산출
Hi from GeekforGeeks!>

매개변수가 있는 화살표 함수

자바스크립트
const gfg = ( x, y, z ) =>{ console.log( x + y + z ) } gfg( 10, 20, 30 );>

산출
60>

기본 매개변수가 있는 화살표 함수

자바스크립트
const gfg = ( x, y, z = 30 ) =>{ console.log( x + ' ' + y + ' ' + z); } gfg(10, 20);>

산출
10 20 30>

화살표 함수는 표현식 앞에 async 키워드를 추가하여 비동기화할 수 있습니다.

async param =>표현식 비동기(param1, param2, ...paramN) => { 명령문 }>

화살표 함수의 장점

  • 화살표 함수는 코드 크기를 줄입니다.
  • 단일 행 함수의 경우 return 문과 함수 대괄호는 선택 사항입니다.
  • 코드의 가독성이 높아집니다.
  • 화살표 함수는 어휘 this 바인딩을 제공합니다. 즉, 바깥쪽 범위에서 this 값을 상속받습니다. 이 기능은 값이 불확실할 수 있는 이벤트 리스너나 콜백 함수를 처리할 때 유용할 수 있습니다.

화살표 기능의 한계

  • 화살표 함수에는 프로토타입 속성이 없습니다.
  • 화살표 함수는 new 키워드와 함께 사용할 수 없습니다.
  • 화살표 함수는 생성자로 사용할 수 없습니다.
  • 이러한 함수는 익명이므로 코드를 디버그하기가 어렵습니다.
  • 화살표 함수는 시간이 지남에 따라 여러 값을 반환하기 위해 항복 키워드를 사용하는 생성기 함수로 사용할 수 없습니다.

지원되는 브라우저

  • 크롬 45 이상
  • 엣지 12 이상
  • 파이어폭스 22 이상
  • 오페라 32 이상
  • 사파리 10 이상