JavaScript의 Arrow 함수에 대한 간략한 소개-JS 튜토리얼-php.cn

JavaScript의 Arrow 함수에 대한 간략한 소개

WBOY

풀어 주다： 2024-08-30 19:00:11

원래의

410명이 탐색했습니다.

A Brief Intro to Arrow Functions in JavaScript

JavaScript의 화살표 함수

화살표 함수는 JavaScript로 함수를 작성하는 간결하고 현대적인 방법입니다. 구문을 단순화하고 기존 함수 표현식에 비해 몇 가지 주목할만한 이점을 제공합니다. JavaScript의 화살표 기능을 이해하고 사용하는 방법에 대한 빠른 가이드입니다.

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

화살표 함수는 함수 작성을 위한 약식 구문입니다. 이는 함수를 정의하는 보다 효율적인 방법을 제공하며 특히 this 키워드를 처리하는 방법에서 기존 함수 표현식과 비교하여 몇 가지 주요 차이점이 있습니다.

기본 구문

화살표 함수의 구문은 간결하고 간단합니다. 기본 형식은 다음과 같습니다.

const functionName = (parameters) => {
  // function body
};

로그인 후 복사

단일 매개변수

화살표 함수에 단일 매개변수가 있는 경우 괄호를 생략할 수 있습니다.

const greet = name => {
  return `Hello, ${name}!`;
};

console.log(greet('Melissa')); 
// Outputs: Hello, Melissa!

로그인 후 복사

매개변수 없음

매개변수가 없는 함수의 경우 빈 괄호를 사용하세요.

const sayHello = () => {
  return 'Hello, World!';
};

console.log(sayHello()); 
// Outputs: Hello, World!

로그인 후 복사

다중 매개변수

함수에 여러 매개변수가 있는 경우 매개변수 주위에 괄호를 포함하세요.

const add = (a, b) => {
  return a + b;
};

console.log(add(5, 3)); 
// Outputs: 8

로그인 후 복사

간결한 본문

화살표 함수는 함수 본문이 단일 표현식으로 구성되면 더 간결한 구문을 가질 수 있습니다. 이 경우 중괄호와 return 키워드는 생략됩니다.

const square = x => x * x;

console.log(square(4)); 
// Outputs: 16

로그인 후 복사

기존 기능과의 주요 차이점

1. 이 바인딩

화살표 함수에는 자체 this 컨텍스트가 없습니다. 대신, 주변 어휘 컨텍스트에서 이를 상속받습니다. 이는 콜백과 같이 this 값을 유지해야 하는 상황에 유용합니다.

기존 함수 예:

function counter() {
  this.value = 0;

  setInterval(function() {
    this.value++; // `this` refers to the global object or undefined in strict mode
    console.log(this.value);
  }, 1000);
}

new counter(); 
// `this.value` will not behave as expected

로그인 후 복사

화살표 기능 예시:

function counter() {
  this.value = 0;

  setInterval(() => {
    this.value++; 
    // `this` refers to the instance of counter
    console.log(this.value);
  }, 1000);
}

new counter();

로그인 후 복사