Famを歓迎!
今日、私はJavascript機能の異なるタイプを最も基本的な用語で分解するブログを作成したかったです.
私が最初にコードを始めたとき、MDN Docsはほとんど私を混乱させました.したがって、これはCompScienceバックグラウンドから来なかった誰かによって書かれるJavaScriptの中心的な基礎への進行中のシリーズの一部です.

関数とは

そうです、我々は最初から始める必要があります!
機能はコーディングの非常にビルディングブロックです、そして、それがJavascriptかJavaであるかどうかにかかわらず、あなたはファンダメンタルズの基礎を知ろうとしています.
JavaScript(大部分の言語のような)では、関数はタスクを実行するか、値を返すコードのブロックです.
しかし、それをもう少し面白くするために、JavaScriptは進化して、彼らを宣言して、使うかなりのいくつかの異なる方法を持っています.

関数宣言

最初に来るので関数宣言から始めましょう.関数宣言がプログラムがコンパイルされた瞬間に巻き上げられるので意味します.
あなたが尋ねることを巻いている?Hoistingは、JavaScriptがメモリへの、そして、どんな順序で機能を割り当てるかという方法です、そして、これはそれ自身で探索する価値がある話題です、そして、this articleはそれをよく説明します.

function funcName(withParams) {
  // params can be declared, but are not enforced;
};

function funcName() {
  // without declared params;
};

funcName();

文法

は「機能」

から始まります

に続いて、

オプションのパラメータでは、paramsを宣言しない場合は、まだパスを渡すことができます.

関数名
関数宣言が最初にhoistedされた理由は、コンパイル時にJavaScriptが「関数」から始まる宣言を探すことです.
これは、プログラムがコンパイルされ、関数宣言が呼び出される前に関数宣言が呼び出されることを主に認識する必要がありますが、いくつかのGotchaモーメントにつながる可能性があります.

引数 関数式

関数式は、変数に匿名関数が割り当てられている場合です( var/let/const )

const funcName = function() {
  // do something;
};

funcName();

文法

は変数

で宣言された名前から始まります

Function ()が変数

に割り当てられました.

パームは、

と同じように動作します

は、

と同じ方法を起動しました
関数式はホストされていないので、関数式のこれらの厄介なインスタンスが呼び出される前に呼び出され、メモリにスタックされる前に、これらの厄介なインスタンスが呼び出されません.
p . s .関数式がvar宣言されていない間、varで関数を宣言すると、それはhoistedされます.
でも待ちます.

そして、それは名前付き関数式と呼ばれます

const funcName = function yoda(){
  // do something
};

typeof yoda; // -> "undefined"
funcName(); // -> "function"

では、なぜこの権利を行うのですか?yodaは、型をチェックしたとき、定義されていないときに「未定義」であるため、名前が関数自体で認識され、名前が呼び出しスタックに表示されるときに、デバッグ時に劇的に機能することができます.

const funcName = function yoda(param) {
  console.log(typeof yoda === 'function'); // -> true
  return typeof param;
}

funcName(3);     // -> 'number'
funcName.name;   // -> 'yoda'

あなたがレベルを上げるように、名前付き関数式があなたのためであるならば、それは考慮する価値があるかもしれませんか?

矢印関数

Ahの矢印機能、誰もがES 6に新しいお気に入りの追加.
矢印関数は関数式の構文上の拡張であり、私たちが太った矢印(または私はロケットを呼ぶことを好む)と呼ぶものを利用し、いくつかの異なる方法で構築することができます.

// -> no params
const funcName = () => {
  // do something;
};

// -> one param
const funcName = param => {
  // if one param the brackets arent needed;
};

// -> more than one param
const funcName = (paramOne, paramTwo, paramThree) => {
  // but if more than one they are required;
};

// -> if the function is simple enough it can be simplified to a single line, removing the need for brackets after the rocket.
const funcName = (x, y) => x * y;

今までのすべての機能と同じように、いくつかの回の矢印の機能があるので、これらのgotchasのいくつかを行ってみましょう.

これでファンキーになる

WES - BOsは、おそらく で、これを説明するより良い方法をすることができます.
彼がそのような良い仕事をするので、私は友人に電話して、繰り返しではなくその記事を批評するためにあなたを残します.

この コンストラクタ

矢印の関数は、コンストラクタとして使用することができますので、'新しい'カントは、矢印の関数で呼び出されます.

オブジェクトリテラル

そして、最終的な付箋部分の悪いカバーは、構文の矢印関数は、例えば、それらを解読できないため、オブジェクトリテラルです.
ES 5オブジェクトリテラルはこのように動作します.

const setColour = function (colour) {
    return {value: colour}
};

let backgroundColour = setColour('Blue');
backgroundColour.value; // -> "Blue"

しかし、矢印関数はデフォルトで巻き括弧を使用しているので、ブロックスコープとオブジェクトリテラルを区別できず、エラーになります.

const setColour = colour => {value: colour };

しかし、これは克服することができますが、そのように彼らを包むこと.

const setColour = colour => ({value: colour });

すぐに呼び出された関数式( IFE )

名前が示唆するように、これは定義された瞬間から呼び出される関数です.

(function () {
    // do something;
})();

これは少し奇妙に見えますが、それは単なるブラケットでラップされ、直後に呼び出された匿名関数です.
彼らはすぐに起動され、グローバルスコープ(およびこれは公害と見なされる可能性があります)に巻かれていないので、彼らは便利であることができます、彼らはロケットで表現することはできません.
コンパイルプロセスのために呼び出されるので、名前を必要としませんが、1つを指定できます.

(function funcName() {
  // do something;
})();

iIFEのボーナス機能の多くが、私は驚くほど には、すべてのこれらの非常に明確にカバーすることを指します.
閉じるこの動画はお気に入りから削除されています.
私はすぐにいくつかのJavaScript関連のコンテンツに戻るでしょう.
多くのLuv
コップ