Javascript 関数

5607 ワード
tutorial webdev javascript beginners テキストリンク

目次


  • Functions
  • Traditional Function
  • Arrow Function
  • Conclusion

    • 機能

    A fundamental building block for Javascript programs. The most common feature in all programming languages. What exactly is a function in technical terms? a function is a block of code that is defined once and can be executed or invoked numerous times. Another quick note is functions are also objects, meaning they can be manipulated by other programs too.

    We can declare a function by using the function keyword, following by a name of our liking, followed by a pair of opening and closing parentheses , a space for between the parameters and the curly braces with zero or more statements inside.

      function buzz() { }

    There is another way of declaring functions in modern javascript, and thats with the arrow function . Which actually looks like an arrow, but does have its own section that we will get too since it has limitations.

      () => {}

    Inside of the parentheses we can include identifiers or in other words parameters, these parameters act as local variables for the body of the function. To get a value out of those variables we can simply invoke our function by including some values or in technical terms arguments. We use these arguments to compute a value and return that value part of the invocation.

    If a function is assigned to a property of an object, that function becomes a method of that object. This is where things start to get a bit more complex since we are now invoking on or through an object, as where the object becomes the context of the this keyword. The this keyword is a while other article to discuss about so we will skip that for now, but it's something good to note down about when creating methods for objects. With that being said we are also allowed to simply assign a function to a variable and pass them to other functions. Since functions are objects like we mentioned before, you can set properties on them and invoke methods on them too.

    従来の機能


    function キーワードは、関数を宣言する唯一の方法です.変数内にほとんど関数が格納されている関数式を宣言することもできます.例えば

    関数宣言

    
function printName(str) {
   return "Hello " + str
}

console.log(printName('oscar')) // output "Hello oscar"


    関数式

    let addUp = function(a,b) {
  return a + b
} 

console.log(addUp(1,2)) // output 3

    function declaration と function expression の主な違いの 1 つは関数名です.これは、関数式で省略して無名関数を作成できます.デフォルトでは、返す値を持つ特定の return ステートメントがない場合、関数は undefined を返します.関数について注意すべきもう 1 つの点は、if/else ステートメント内でも条件付きで宣言できることですが、通常は結果に一貫性がないため、使用するのにあまり適したパターンではありません.

    宣言関数に付属する優れた機能はホイストです.宣言する前に関数を使用できます.

    printHello(); // logs 'Hello'

function printHello() {
   console.log('Hello');
}


    一方、関数式は巻き上げられません.したがって、作成する前に関数式を使用することはできません.

    アロー関数



    ES6 で arrow functions が導入されました.これは、従来の関数式に代わる優れたコンパクトな代替手段ですが、制限があり、すべての状況で使用できるわけではありません. this または super キーワードのようなバインディングはなく、 call 、 apply 、または bind メソッドには適さず、コンストラクターとしても使用できません.
    declared function を arrow function に分解してみましょう

      function(name) {
    return 'Hello ' + name;
  }


    まず、function キーワードを削除して引数を残し、引数と中括弧の間に arrow を追加します.

      (name) => {
  return 'Hello ' + name;
}


    次に、中括弧と return ステートメントを削除します. return ステートメントは自動的に暗示されます.

      (name) => 'Hello ' + name;


    最後のステップでは、パラメーターに渡される引数が 1 つしかないため、括弧を削除できます.

      name => 'Hello ' + name;


    前に述べたように、バグやその他の問題を避けるためにアロー関数を使用しないことを強くお勧めします.アロー関数は非メソッド関数に最適です.

    結論

    I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

    These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!

    アイコンをアップロードし、カメラのアルバムファイルをFileファイルに変換
    アルゴリズムパス(グラフィックDFS)の参照(2つの方法)