Shopifyアプリ開発#006【実践】JavaScript　初心者研究(関数を定義〜コールバック関数)

JavaScript を勉強していて、説明が出来ないのは理解がしきれてない証拠！！という事で、理解を深めるために初心者が説明してみた！

※個人的な解釈が多く含まれます。
※間違ってたら教えて下さい！

■関数を定義とは

JavaScriptで関数が使用できるように決まりを定める事です。

定義のパターンは以下になります。

1. 関数宣言（function文）

2. 関数リテラルを使う

3. アロー関数を使う

１．関数宣言（function文）

functionの後に関数名を指定して関数の宣言をする方法です。

functionの作成方法

function 関数名(引数名){
 具体的な処理内容
}

実際の内容

function kudamono(){
  console.log("りんご");
  console.log("みかん");
}
setTimeout(kudamono, 3000);　//３秒後に表示


【結果】３秒後に
りんご
みかん

2.関数リテラルを使う

変数に関数を代入します。
関数リテラルは、下記のように、名前のない関数をを定義した上で、変数に代入して使用します。

const 変数名 = function(引数名) {
    まとめたい処理
}

const kudamono = function() {
  console.log("りんご");
  console.log("みかん");
}

kudamono();

【結果】
りんご
みかん

3. アロー関数を使う

function() を () =>で記述できます。

const 変数名 = (引数名) => {
    まとめたい処理
}

const kudamono = () => {
  console.log("りんご");
  console.log("みかん");
}

kudamono();

【結果】
りんご
みかん

■戻り値（return）

関数から呼び出し元に返される値のことを指します。関数は処理を実行し、その結果として値を生成する場合、その値を戻り値として返すことができます。

関数が値を返すためには、returnキーワードを使用して返したい値を指定します。return文が実行されると、それ以降の関数内のコードは実行されず、指定した値が呼び出し元に返されます。

const 変数名 = () => {
    return 戻り値;
}
//ここで処理を実行

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

const syurui = kudamono("りんご", "みかん");
console.log(syurui);

【結果】
りんごみかん

↓この並びにしてみる事で何処に紐づくか自分がわかりやすかったです。

　

■関数の引数に渡すことが出来る種類

【プリミティブデータ型】

1. 数値 (Number): 数字。 例: 10, 3.14, -7
   

2. 文字列 (String): テキストデータ。シングルクオート ('') またはダブルクオート ("") で囲まれた文字列。 例: 'Hello', "World", "123"
   

3. 真偽値 (Boolean): true (真) または false (偽) の値。
   

4. null および undefined: nullは値が存在しないことを表し、undefinedは値が代入されていないことを表します。
   

5. シンボル (symbol):ユニークで不変な値。
   

【複合データ型】

1. 配列 (Array): [1, 2, 3], ['apple', 'banana', 'orange'] 等、[]内に , で区切って順序をつけて 格納するためのオブジェクト。
   

2. オブジェクト (Object): キーと値のペアを持つデータ構造。キーと値はコロン (:) で区切り、複数のキーと値はコンマで区切って指定します。 例: {name: 'John', age: 25, city: 'Tokyo'}
   

3. 関数 (Function): JavaScriptでは関数もオブジェクトの一種であり、引数として渡すことができます。 例: function add(a, b) { return a + b; }

■関数内で定義された変数はどのようなスコープを持つか。

1.グローバルスコープ (Global Scope):

プログラムのどこからでもアクセス可能。

const globalVariable = 'I am in the global scope';

function globalFunction() {
  console.log('I am a global function');
}

2.ローカルスコープ(Local Scope):

グローバル変数以外のすべての変数は、ローカルスコープを持つローカル変数です。「関数スコープ」と「ブロックスコープ」に分けることができます。

関数スコープ

function関数ごとに作られるスコープのことを、関数スコープといいます。

var、let、constのいずれかで変数宣言をすると、関数の外部からはアクセスできず、関数の内側からのみ利用可能なローカル変数になります。

function fn(arg) {
  // fn関数の関数スコープを持つローカル変数を定義
  var scope = 'local';
  // fn関数のスコープ内のためアクセス可能
  console.log(scope); //　-> local
  console.log(arg); //　-> argument
}
fn('argument');

// 関数スコープの外側からはローカル変数や仮引数にアクセスできない
console.log(scope); // -> ReferenceError
console.log(arg); // -> ReferenceError

ブロックスコープ (Block Scope):

ブロック（{}）ごとに作られるスコープのことを、ブロックスコープといいます。

ブロックスコープ内でletまたはconstを用いて宣言した変数は、ブロックの外側からはアクセスできず、ブロックの内側からのみアクセス可能なローカル変数になります。

function fn() {
  // for文のブロックスコープを持つローカル変数 i を定義
  for (let i = 0; i < 3; i++) {
    console.log(i); // -> 0, 1, 2
  }
  // for文のブロックスコープの外側からはアクセスできない
  console.log(i); // -> ReferenceError
}
fn();

■コールバック関数とは

一般的な関数の引数に別の関数を指定して実行します。

function 関数( 別の関数（callbck） ) {
 
    //何らかの処理を記述する
 
    //引数に指定した関数を実行する
    callback();
 
}

function kudamono() {
  console.log("りんごとみかん");
}

function syurui(callback) {
  callback();
}

あとがき

何かの説明を見ながら手を動かしてる時は判った！！！！
って思うけれども、1日経つと記憶が半減するので、繰り返し手を動かしていきたいと思います！