물결 괄호 없는 화살표 기능

물결 괄호 없는 화살표 기능

ES6도 리액트도 처음이고 화살표 기능도 계속 보입니다.왜 어떤 화살표 기능은 뚱뚱한 화살표 뒤에 곱슬곱슬한 괄호를 사용하고 어떤 기능은 괄호를 사용하는가?예를 들어 다음과 같습니다.

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

대.

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

괄호는 단일 값을 반환하고 있으며, 중괄호는 여러 줄의 코드를 실행합니다.

이 예제는 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

한 줄 화살표 함수가 값을 반환하지 않도록 하거나 다음 개발자에게 이 경우 한 줄 화살표 함수가 아무것도 반환하지 않도록 하기 위해 곱슬곱슬한 중괄호를 사용할 수도 있습니다.

예를 들어 다음과 같습니다.

const myFunc = (stuff) => { someArray.push(stuff) }
const otherFunc = (stuff) => someArray.push(stuff)

console.log(myFunc())    // --> logs undefined
console.log(otherFunc()) // --> logs result of push which is new array length

괄호는 화살표 함수로 객체를 반환하는 데 사용됩니다.

() => ({ name: 'YourName' })  // This will return an object

그것은 에 상당한다.

() => {
   return { name : 'YourName' }
}

실제로 서류가방에서는 화살표 함수 선언에서 중괄호를 사용할 때 다음과 같습니다.

const arrow = number => number + 1;

|||

const arrow = (number) => number + 1;

|||    

const arrow = (number) => ( number + 1 );

|||

const arrow = (number) => { return number + 1 };

괄호에는 암묵적인 return 문이 있고, 중괄호는 명시적인 return 문이 필요합니다.

화살표 뒤에 물결 괄호를 사용하여 함수 본문을 정의할 경우 반환 키워드를 사용해야 합니다.

예를 들어 다음과 같습니다.

const myFun1 = (x) => {
    return x;
}; // It will return x

const myFun2 = (x) => {
    x;
}; // It will return nothing

괄호를 사용하면 'return' 키워드를 언급하지 않아도 됩니다.

예를 들어 다음과 같습니다.

const myFunc1 = (x) => x; // It will return x

const myFunc2 = (x) => (x); // It will also return x

첫 번째 예에서는 화살표 함수의 오른쪽에 그룹화 연산자로 둘러싸인 단일 식이 표시됩니다.

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

이와 유사한 사례는 다음과 같습니다.

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

위의 경우 단일 식을 사용하는 경우의 구별은 오른쪽이 함수의 반환값이라는 것입니다.

괄호, 물결 괄호, 물결 괄호, 물결 괄호, 물결 괄호, 물결 괄호, 물결 괄호, 물결 괄호, 물결 괄호, 물결 괄호, 물결 괄호, 물결 괄호, 물결 괄호, 물결 괄호 ,JavaScript하다

const foo = (params) => {} // this is not an object being returned, it's just an empty statement 

따라서 스테이트먼트를 사용하는 것은 코드를 여러 줄에 삽입하는 것이 좋습니다.함수가 값을 반환하는 것을 의도하고 있는 경우에는 "return"을 사용해야 합니다.

const foo = (params) => {
    let value = 1; 
    return value;
}

빈 개체를 최단 형식으로 반환하려는 경우:

const foo = (params) => ({}) 

'테스트' 참조

중복 투고(여기에 게재된 질문)에 답변하려면 다른 사용자를 위한 참조를 위해 다음 절차를 따릅니다.

  var func = x => x * x;                  
    // concise body syntax, implied "return"

    var func = (x, y) => { return x + y; }; 
    // with block body, explicit "return" needed

참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Function_body

주의사항:팻 화살표 함수의 결과로 개체 리터럴을 반환하는 경우 다음과 같이 개체를 괄호로 묶어야 합니다.myFunc = () => ({ data: "hello"})괄호를 생략하면 오류가 발생합니다.왜냐하면 빌드 툴에서는 오브젝트 리터럴의 컬리 괄호가 함수 본문의 시작과 끝이라고 간주하기 때문입니다.

모든 기능에는 두 가지 측면이 있습니다.

우선 화살표 기능뿐만 아니라 각 기능에는 변수가 생성되어 사용되는 실행 컨텍스트(블록 스코프)가 있습니다.

바꿔 말하면, 물결 괄호 {...} 안쪽에 있습니다.함수의 }은(는) 해당 함수에 선언 및 할당되어 있으며 외부 함수/변수에는 표시되지 않습니다.

예를 들어, 다음과 같이 쓸 때

let x = 100;

function doSomething() {
  let x = 50;
  console.log(x);
}

doSomething();     // 50
console.log(x);    // 100

두 값 모두 콘솔에 표시됩니다('외부에서 x가 함수 내부에서 x로 대체됨' 참조).

일반적으로 다른 변수 x가 (같은 이름 x로) 다시 선언되는 것을 허용하지 않지만, 이 경우 두 번째 x가 선언되고 {...} 내에서 초기화되기 때문에 외부 변수 x는 변경되지 않습니다.이것은 doSomething 함수가 호출된 후에 그 내부에서 x가 생성되어 할당되어 printe가 됩니다.(메모리에서 삭제).따라서 이 프로세스는 doSomething()을 실행하여 함수를 호출할 때마다 발생합니다.

따라서 함수를 이해할 때 고려해야 할 첫 번째 측면은 다음과 같습니다.즉, 이 함수는 실행 후 중괄호 안에 있는 코드로 작성된 값을 잊어버립니다.

그 때문에, 그 두 번째 측면을 이해하기 쉬워집니다.함수는 다른 기능으로부터 격리되어 동작할 수 없기 때문에, 다른 기능에도 데이터를 송신할 필요가 있기 때문에, 곱슬곱슬한 괄호 안에서 계산한 결과의 일부를 외부화하기 위해서 사용하는 「보고」의 측면이 있기 때문에, return 스테이트먼트가 존재하는 것이 확실합니다.

반환은 console.log 또는 alert(), doSomething()에도 각 함수에 존재하지만, 명시적으로 설정하지 않은 경우에는 항상 'return undefined'입니다.

따라서 반드시 쓸 필요는 없지만, 대신 특정 항목을 반환하지 않는 경우에는 함수 자체가 정의되지 않은 상태로 반환함으로써 이를 대신 수행한다는 것을 알아야 합니다.

실행만을 의미하는 함수를 작성(또는 사용)하면 정의되지 않은 상태로 반환됩니다.항상.

(분명히) 선언된 반환이 없는 모든 함수에 대해 해당 항목을 확인할 수 있습니다.

let x = alert(100);
console.log(x); // undefined

let y = doSomething(); // console prints 50
console.log(y);        // 50, then undefined --- 2 lines

console.log(alert('Hello')); // undefined

console.log(console.log('Okay')); // Okay , then undefined

왜 그런 것일까요?

왜냐하면 alert()는 (브라우저에서) 글로벌오브젝트 창의 메서드(실제로 window)이기 때문입니다.alert() 및 console.log()도 마찬가지입니다(경보 상자 또는 콘솔에서 ()와 반환 사이에 있는 것을 인쇄하고 나서 정의되지 않음).

화살표 함수로 돌아가면 함수를 쓰는 새로운 표기법일 뿐만 아니라 특정 기능도 있습니다.

첫째, 화살표 함수의 () 사이에 파라미터만 있는 경우 괄호 없이 쓸 수 있습니다.

두 번째, 괄호 안에 하나의 문장이 있는 경우에는 괄호도 생략할 수 있습니다.

세 번째, 단일 스테이트먼트가 반환 스테이트먼트인 경우 반환이라는 단어를 생략할 수 있습니다.

필요에 따라 이러한 기능을 사용하여 많은 일반적인 기능을 화살표 기능으로 변환할 수 있습니다.

function doSomething() {let x = 50; console.log(x);} // as function declaration

let doSomething = function() {let x = 50; console.log(x);}; // as function expression, which is an anonymous function assigned to the variable 'doSomething'

let doSomething = () => {let x = 50; console.log(x);}; // as arrow function

// let's transform it further

let doSomething = () => {console.log(50)}; //

// that is equivalent to ---- let doSomething = () => {console.log(50); return undefined};
// or even to           ---- let doSomething = () => {return ( console.log(50) ) };
// because anyways, *console.log* has *return undefined* in it, as explained above

//which is the same as  ---- let doSomething = () => {return console.log(50) };

// let's now apply the rules 2 and 3 from above, one by one:

let doSomething = () => return console.log(50);

let doSomething = () => console.log(50);

// Obviously, this just shows how we could rewrite many usual functions (functions declarations) into arrow functions
// we can do that safely if we don't have any **this** involved in the functions, of course
// also, from all lines of code above only one must remain, for example the last one.

// the last one, despite only having ---- console.log(50) --- as the execution aspect, it also ---- returns undefined ---- as well

// obviously ---- console.log( typeof doSomething );   // function
// while     ---- console.log( typeof doSomething() ); // undefined

화살표 함수에 2개 이상의 파라미터가 있는 경우 이들 주위에 괄호를 생략할 수 없습니다.

function sum(a, b) {let total = a + b; return total}

let sum = function(a, b) {let total = a + b; return total};
// or
let sum = (a, b) => {let total = a + b; return total};
// or
let sum = (a, b) => {return a + b};
// or
let sum = (a, b) => a + b;

위와 같이 간단한 연산을 위해서는 뚱뚱한 화살표 기호 '=>'를 a와 b를 a+b로 변환하여 '읽기' 할 수 있다.

이와 반대로, 다음과 같이 일부 데이터를 검증하는 기능(예를 들어 데이터 유형 확인 등)도 있습니다.

let isNumber = x => typeof x === "number";
// or
let isNumber = (x) => {return (typeof x === "number")};
// obviously, 
isNumber("Hello, John!"); // false

이 경우 데이터를 변환하지 않으므로 화살표 기호는 다음과 같은 조건이나 유사한 조건을 더 많이 읽을 수 있습니다.

즉, 다음과 같은 기능이 있습니다.

let double = x => x * 2    // 'double' is a function that transforms x into x*2

는 체크기능과 동일하지 않습니다(필터, 정렬 및 기타 종류의 검증기능(통상 콜백함수 등)에서 사용됩니다).

let isArray = arr => Array.isArray(arr) // that last one already returns boolean by itself, no need to write return (Array.isArray() etc)

반환에 대해 마지막으로 알 수 있는 것은 여러 줄에 코드를 쓸 때 리턴 워드를 쓴 후 Enter 키를 잘못 누르면 ASI(자동 세미콜론 삽입)가 반환 후에 ';'를 삽입하여 코드가 깨진다는 것입니다.

return
a+b;

코드는 다음과 같이 동작합니다.

return;
a+b;

따라서 다음과 같이 괄호를 사용하여 코드를 작성하는 것이 좋습니다.

return (
  a + b
);

여기 MDN 웹사이트에도 설명되어 있습니다.

언급URL : https://stackoverflow.com/questions/39629962/arrow-function-without-curly-braces