矢印関数

8811 ワード

テキストリンク

functionキーワードを矢印に縮めて関数を表す別の方法.

矢印関数と一般関数の比較

関数式

const add = function(x, y) {
  return x + y;
}

矢印関数

const add = (x, y) => { 
  return x + y
}

矢印関数は、functionキーワードを矢印で縮小表示します.
関数の本文(body)に戻り文しかない場合は、矢印関数は戻りを省略できます.(大かっこも省略します.)

const add = (x, y) => x + y // O, 정상 작동
const add = (x, y) => {x + y} // X, undefined 리턴

()カッコを使用することは可能です.これは一般式の「かっこ」と同じです.

const add = (x, y) => (x + y) // O, 정상작동

関数の式が2行より多い場合は、returnを省略するのではなく、カッコとreturnを明示的に使用することが望ましい.
bad

const getStudentAvg = arr => arr.filter(person => person.job === 'student').reduce((sum,person) => (sum + person.grade),0)

good

const getStudentAvg = arr => {
  return arr
  	.filter(person => person.job === 'student')
    .reduce((sum, person) => (sum + person), 0)
}

矢印関数は、エンクロージャを表すときにより強力です.
関数式

const adder = function(x) {
  return function(y) {
    return x + y;
  }
}
adder(5)(7) // 12

矢印関数
まずfunctionキーワードを削除

const adder = (x) => {
  return (y) => {
    return x + y;
  }
}

まず一番奥の部分を外しましょう
returnを省略する場合はカッコは使用しません.
また、パラメータが1つしかない場合は括弧は省略できます.

const adder = x => {
  return y => x + y
}

最後の残りの戻り値をスキップ

const adder = x => y => x + y

これにより、エンクロージャは複数の連続する矢印として表示されます.

この問題について(矢印関数), 我々は、より多くの情報をここで見つけました https://velog.io/@ehdgusdl9177/TIL-21.04.12화살표-함수

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol