JavaScript
화살표 기능

소개

통사론

• x => y // 암시 적 반환 값

• x => {return y} // 명시 적 리턴

• (x, y, z) => {...} // 다중 인수

• async () => {...} // 비동기 화살표 함수

• (() => {...}) () // 즉시 호출 된 함수 표현식

• const myFunc = x

  => x * 2 // 화살표 앞의 줄 바꿈으로 '예상치 못한 토큰'오류가 발생합니다.

• const myFunc = x =>

  x * 2 // 화살표 뒤의 줄 바꿈이 유효한 구문입니다.

비고

소개

JavaScript에서 함수는 "화살표"( => ) 구문을 사용하여 익명으로 정의 할 수 있습니다.이 구문은 Common Lisp 유사성 으로 인해 람다 표현 이라고도합니다.

가장 간단한 화살표 함수 형태는 => 의 왼쪽에 인수가 있고 오른쪽에 반환 값이 있습니다.

item => item + 1 // -> function(item){return item + 1}

이 함수는 표현식에 인수를 제공하여 즉시 호출 할 수 있습니다.

(item => item + 1)(41) // -> 42

화살표 함수가 단일 매개 변수를 사용하는 경우 해당 매개 변수 주변의 괄호는 선택 사항입니다. 예를 들어, 다음 표현식은 동일한 유형의 함수를 상수 변수에 할당합니다.

const foo = bar => bar + 1;
const bar = (baz) => baz + 1;

그러나 화살표 함수에 매개 변수가 없거나 하나 이상의 매개 변수가없는 경우 새로운 괄호 세트는 모든 인수를 포함 해야합니다 .

(() => "foo")() // -> "foo"

((bow, arrow) => bow + arrow)('I took an arrow ', 'to the knee...')
// -> "I took an arrow to the knee..."

함수 본문이 단일 표현식으로 구성되지 않으면 대괄호로 묶어야하며 결과를 제공하기 위해 명시 적 return 문을 사용해야합니다.

(bar => {
  const baz = 41;
  return bar + baz;
})(1); // -> 42

화살표 함수의 본문이 객체 리터럴로만 구성된 경우이 객체 리터럴은 괄호로 묶어야합니다.

(bar => ({ baz: 1 }))(); // -> Object {baz: 1}

여분의 괄호는 여는 괄호와 닫는 괄호가 객체 리터럴의 일부임을 나타냅니다. 즉, 함수 본문의 구분 기호가 아닙니다.

어휘 범위 및 바인딩 ( "this"값)

화살표 기능은 어휘 적으로 범위가 지정됩니다 . 즉, this 바인딩은 주변 범위의 컨텍스트에 바인딩됩니다. 다시 말하면, 화살표 함수를 사용하여 this 무엇을 가리키는 지 보존 할 수 있습니다.

다음 예제를 살펴보십시오. Cow 클래스에는 1 초 후에 출력되는 사운드를 출력 할 수있는 메서드가 있습니다.

class Cow {

  constructor() {
    this.sound = "moo";
  }

  makeSoundLater() {
    setTimeout(() => console.log(this.sound), 1000);
  }
}

const betsy = new Cow();

betsy.makeSoundLater();

에서 makeSoundLater() 메소드는 this 컨텍스트의 현재 인스턴스를 지칭 Cow 개체 그래서 부르는 경우 betsy.makeSoundLater() 는 this 컨텍스트를 지칭 betsy .

화살표 함수를 사용하면 this 컨텍스트를 유지할 수 있으므로 "moo"를 올바르게 출력 할 시간이되면 this.sound 참조 할 수 있습니다.

arrow 함수 대신에 일반 함수 를 사용했다면 클래스 내에 있다는 컨텍스트를 잃어 버리고 sound 속성에 직접 액세스 할 수 없습니다.

인수 Object

화살표 함수는 arguments 객체를 노출하지 않습니다. 따라서 arguments 는 단순히 현재 범위의 변수를 참조합니다.

const arguments = [true];
const foo = x => console.log(arguments[0]);

foo(false); // -> true

이 때문에 화살표 기능은 발신자 / 수신자도 인식 하지 못합니다 .

인수 객체의 부족은 일부 엣지의 경우 제한이 될 수 있지만 나머지 매개 변수는 일반적으로 적합한 대안입니다.

const arguments = [true];
const foo = (...arguments) => console.log(arguments[0]);

foo(false); // -> false

묵시적 반환

화살표 함수는 함수 본문에 단일 표현식 만 포함되어 있으면 전통적으로 함수 본문을 래핑하는 중괄호를 생략하여 암시 적으로 값을 반환 할 수 있습니다.

const foo = x => x + 1;
foo(1); // -> 2

암시 적 리턴을 사용할 때, 오브젝트 리터럴은 중괄호 안에 감싸 져야하므로 중괄호가 함수의 본문 열기와 오인되지 않도록해야합니다.

const foo = () => { bar: 1 } // foo() returns undefined
const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}

노골적인 반환

Arrow 함수는 return 키워드를 사용하여 명시 적으로 값을 반환 할 수 있으므로 고전 함수 와 매우 유사하게 동작 할 수 있습니다. 단순히 함수의 본문을 중괄호로 묶고 값을 반환하십시오.

const foo = x => {
  return x + 1;
}

foo(1); // -> 2

화살표는 생성자로 기능합니다.

Arrow 함수는 new 키워드와 함께 사용될 때 TypeError 발생시킵니다.

const foo = function () {
  return 'foo';
}

const a = new foo();

const bar = () => {
  return 'bar';
}

const b = new bar(); // -> Uncaught TypeError: bar is not a constructor...