JavaScript 화살표 함수에서 언제 괄호와 중괄호를 사용해야 합니까?

화살표 함수 자세히

ES6에 도입된 화살표 함수는 함수를 정의하는 간결한 구문입니다. 중괄호나 괄호를 사용하여 다른 표기법으로 표시되는 경우가 많습니다. 이 문서에서는 이 두 가지 변형 간의 차이점을 자세히 설명합니다.

화살표 함수 정의

화살표 함수는 일련의 매개변수와 굵은 화살표(=>)로 시작합니다. 그런 다음 반환 값은 다음 중 하나로 묶인 본문에 의해 결정됩니다.

• 괄호: 본문이 단일 표현식으로 구성된 경우 괄호가 사용됩니다. 예:

  const foo = (params) => (
  <span>
    <p>Content</p>
  </span>
  );

  로그인 후 복사

• 컬리 중괄호: 본문이 여러 줄에 걸쳐 있거나 여러 문을 포함하는 경우 중괄호가 필요합니다. 예:

  const handleBar = (e) => {
  e.preventDefault();
  dispatch('logout');
  };

  로그인 후 복사

차이점 이해

구별점은 반환 값에 있습니다. 괄호는 단일 값이 반환됨을 나타내고 중괄호는 여러 줄의 코드 또는 여러 문이 실행됨을 나타냅니다.

JSX 및 괄호

JSX(JavaScript XML)에서는 foo에서 볼 수 있듯이 본문이 확장된 것처럼 보일 수 있습니다. 여러 줄이지만 실제로는 단일 요소로 컴파일됩니다. 이것이 바로 이 경우 괄호가 사용되는 이유입니다.

여러 줄과 괄호

혼란을 피하기 위해 다음은 모두 동일한 결과를 산출하는 화살표 함수의 예입니다.

const a = (who) => "hello " + who + "!";
const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (who) => {
  return "hello " + who + "!";
};

코드 피하기 블록

괄호는 화살표 함수의 객체 리터럴 주위에 사용되어 코드 블록으로 해석되는 것을 방지합니다. 예:

const x = () => {} // Does nothing
const y = () => ({}) // returns an object

결론적으로 중괄호와 중괄호 사이의 선택은 화살표 함수의 괄호는 단일 값을 반환할지 아니면 여러 줄의 코드를 실행할지 여부에 따라 달라집니다. 이러한 표기법의 미묘한 차이를 이해하면 JavaScript 코드에서 화살표 기능을 효과적으로 사용하는 데 도움이 됩니다.

위 내용은 JavaScript 화살표 함수에서 언제 괄호와 중괄호를 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!