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

화살표 함수에서 괄호 또는 중괄호 사용

ES6에서 화살표 함수는 함수 정의를 위한 간결한 구문을 제공합니다. 그러나 흔히 혼동되는 것 중 하나는 굵은 화살표(=>) 뒤에 괄호나 중괄호를 사용하는 것입니다.

단일 값 반환: 괄호

괄호는 다음과 같은 경우에 사용됩니다. 화살표 함수는 다음과 같은 단일 값을 반환합니다.

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

이 예에서 화살표 함수는 다음을 반환합니다. JSX 요소. 단일 요소이므로 괄호를 사용합니다.

여러 줄 코드: 중괄호

화살표 함수가 여러 줄의 코드를 실행할 때는 중괄호가 필요합니다.

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

여기서는 화살표 함수가 여러 연산을 수행하므로 curly를 사용합니다.

JSX의 모호성

다음 예의 괄호는 JSX를 사용하기 때문에 혼란스러워 보일 수 있습니다.

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

여러 줄을 사용하면 JSX는 실제로 단일 요소로 컴파일되므로 괄호가

다른 예

명확한 설명을 위해 다음은 몇 가지 추가 예입니다.

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

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