[TIL] Function

関数:論理再実行を許可します.コードの再利用性の向上

greetWorld(); // Output: Hello, World!
 
function greetWorld() {
  console.log('Hello, World!');
}

🔍 TIP
上のように『Hello World!メッセージは外部に出力されないため、下図に示すようにパラメータ伝達によりlog関数を呼び出しながら必要なメッセージを柔軟に伝達することができる

function hello(message) {
  console.log(message);
}

hello ('Hi, there!'); // 값을 유동적으로 넣을 수 있음

​

パラメータ

関数は入力を受け入れ、入力によって操作を実行することができる.

「入力値」

パラメータは括弧の間で高さと幅として指定され、関数の本文での役割は通常の変数と同じです.
関数を呼び出すときに関数に渡される値を引数と呼びます.

上記の関数呼び出しでは、数字10を幅、6を高さとして指定します.

function sayThanks(name) {
  console.log('Thank you for your purchase '+ name +'! We appreciate your business.');
}

sayThanks('Cole');

// Thank you for your purchase Cole! We appreciate your business.

defaultパラメータ(デフォルトパラメータ)

ES 6に追加された機能は、

を含み、関数に渡されたパラメータがない場合、または呼び出し時にパラメータが定義されていない場合、パラメータは予め決定された値を有する.

function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}
 
greeting('Nick') // Output: Hello, Nick!
greeting() // Output: Hello, stranger!

上記の例では、=演算子を使用してパラメータ名に「見知らぬ人」をデフォルト値として割り当てます.
​

Rest parameters

ES 6に追加された機能...作成後、配列で渡されます

function printAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
}

printAll('hello', 'coding', 'world');

//output : hello coding world

📌 <参照>
1)配列を出力する場合、of構文出力配列ではなくfor loopを簡単に使用できる

for (const arg of args) {
  console.log(arg);
}
// arg에 있는 값들을 차례로 하나씩 지정되면서 출력하게 됨

2)もっと簡単にしたいなら.forEach()で出力できます

args.forEach((arg) => console.log(arg));

​

Return

関数+出力キーを終了します.

function monitorCount(rows, columns){
  return rows * columns;
};
const numOfMonitors = monitorCount(5, 4);

console.log(numOfMonitors);    // 출력값 : 20

📌 Early return, early exit

function upgradeUser(user) {
  if (user.point > 10) {
    // long upgrade logic...
  }
}

upgradeUserという関数に論理があり、ユーザーのポイントが10より大きい場合にのみアップグレードが行われる場合、ifとelseを置き換えるのではなく、条件を満たす場合に必要な論理を実行するために、以下のように迅速に戻ります.

function upgradeUser(user) {
  if (user.point <= 10) {
    return;
  }
  // long upgrade logic...
}

​

Function Expressions

変数=関数(){};

式で関数を定義し、関数キーワード

を使用します.

では、関数名は通常省略され、匿名関数と呼ばれる.

変数名が関数の名前または識別子であることを宣言する場合、es 6以降は主にconstを使用する

関数を呼び出すと、関数を格納する変数名を含むカッコが作成され、その後関数に渡されるパラメータが囲まれます.

関数式はアップグレードされていないため、定義前に

を呼び出すことはできません.

variableName(argument1, argument2)

関数を宣言すると同時にprintという変数に割り当てられます.以下に示します.
このようにfunctionには名前がなく、functionキーワードを使用してparameterとblockを使用するのは匿名関数(anonymousfunction)です.
別の変数に再割り当てされると、printダッシーが最初の行の関数を指しているため、印刷出力が表示されます.

const print = function() {
  console.log('print');
};
print();
const printagain = print;
printagain();

📌 関数宣言と関数式の最大の違いは
function expressionは、指定した後に呼び出すことができます.すなわちprint()を宣言する前に呼び出すとエラーが発生します
しかし、関数宣言は昇格しています.関数宣言の前に呼び出すことができます.

Arrow Functions(パラメータ)=>{}

ES 6は、

()=>を使用して関数を作成するArrow Functionを導入した

Arrow Functionは、関数の作成時に関数

を追加する必要はありません.
カッコにパラメータを入力し、

ではなく=>{}で実行します.つまり、

です.

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};

​

Concise Body Arrrow

単一パラメータ

()のみを使用する場合は、

を使用する必要はありません.

ただし、関数が0以上のパラメータを使用する場合は、カッコ

が必要です.

​

行のブロックを含む関数本文は{大かっこ}を必要とせず、戻りを省略することもできる

例:

const squareNum = (num) => {   
  return num * num;
};

胃が再構築されると.

const squareNum = num => num * num;   

単一パラメータ

、括弧

を省く

関数は1行ブロックであるため、括弧

は省略する.

は1行ブロックであり、

を省略する.

const plantNeedsWater = (day) => {
  if (day === 'Wednesday') {
    return true;
  } else {
    return false;
  }
}; 

再包装すると.

const plantNeedsWater = day => day === 'Wednesday' ? True : false;

​

Callback function (using function expression)

伝達関数、条件に合致するときに伝達された関数を呼び出す
すなわち、printyesとprintnoの2つのコールバック関数がパラメータとして渡され、正解がloveyouの場合、printyes()というコールバック関数、またはprintno()というコールバック関数が呼び出される.

function randomquiz(answer, printyes, printno) {
  if(answer === 'love you') {
    printyes();
  } else {
    printno();
  }
}

const printyes = function() {
  console.log('yes');
}

const printno = function print() {
  console.log('no');
};

randomquiz('worng', printyes, printno); // output : no
randomquiz('love you', printyes, printno); // output : yes

​

IIFE (Immediately Invoked Function Expression)

関数宣言と同時に呼び出され、関数の宣言を()に囲み、関数を呼び出すように()を入れます.

(function hello() {
  console.log('IIFE');
})();

​
📚 余分な物語!
JSにはタイプがないので、残念ながら、関数自体のインタフェースを見たときに文字列を渡すのか数値を渡すのかよくわかりません.
typeが重要であればJSは理解しにくいかもしれないのでtypescriptを使用したほうがいいです.

(*画像ソース:DREAM符号化YouTubeスクリーンショット)