🎉

ITスクールのWEB開発まとめ～JS、その２：JS(JavaScript)の関数文法まとめ

2023/09/05に公開

JavaScript

初心者

関数

tech

前書き

JSでの関数もJavaの場合とほぼ同じく作れて呼び出せることができる。ただし、関数を宣言するとき、もともとの宣言方法と違った方式があることがある。また、関数を呼び出すときにパラメータの値を入力しなくても、基本的に代入されるように処理する方法をまとめる。

関数を作るときに気を付けばいいことはJAVAと、さらにオブジェクト指向とも同じである。

宣言した後、関数を呼び出すことはJAVAと同じである。「関数名(パラメータ);」の方式で呼び出すことができる。もし関数にパラメータを入れないと、パラメータの部分は「undefined」という値になって入る。その値は、「入っている値が正義されていない」という意味であって、パラメータが入らなかったので、その値も正義されていないのは当然である。

では、関数の宣言方法に続ける。

関数の宣言方法3つ、調べてみよう。

関数を宣言する方法は3つある。もともとJAVAで使う方式の宣言も可能であるが、書き方が違い他の宣言方法もある。宣言方法についての詳しいことは下でまた書く。

関数宣言と関数式には違いがある。それはコードを作成した後、関数が宣言される時期（つまり、関数を使用可能な時期）の差である。

各宣言方法ごとに例文を書いておいた。続けてコードを見よう。

FunctionDeclarationExample.js

sayHello(); // 関数宣言のコードより上で呼び出しても実行ができる。
	　　// その理由は上記した「ホイスティング」のおかげである。

function sayHello(){ //Javaで関数を宣言する方法と同じ。
	console.log('Hello');
}

FunctionExpressionExample.js

let add = function(num1, num2){ //関数を演算子「＝」と一緒に宣言して、式のように見える。
//宣言した後は、同じく関数を呼び出せる。ただし、コード上で宣言の前には呼び出せない。
	return num1 + num2;
}

let result = add(2,3);

次のアロー関数式は、関数式からどんどん短くなる過程を重視して書いてみた。^[1]

ArrowFunctionExpressionExample.js


//最初の関数式の宣言をとりあえず書いてみよう。
let add = function(num1, num2){
	return num1 + num2;
}

//上の宣言をアロー関数式に変えると、「function」を「=>」に変えて、少しコーどが短くなる。
let add = (num1, num2) =>{
	return num1 + num2;
}

//もっとコードを減らそうとすれば、「return」キーワードも無くせる。
let add = (num1, num2) =>{
	num1 + num2;
}

//もっともっとコードを減らそうとすれば？「{}」ブロックも無くせる。
//ただし、この方法は値を戻すコードが1行である場合だけに使える。
let add = (num1, num2) => num1 + num2;

//もしパラメータが1つだけであると、パラメータを入力する括弧「()」も無くせる。
let sayHello2 = name => `Hello, ${name}`;

//もしもパラメータがない場合なら？？括弧は無くせない。ほっといておこう。
let asdf = () => console.log("asdf");

関数のパラメータに、基本的に値を入れておく方法

関数のパラメータに何も入れないと、上記した通りに「undefined」という、「確認不能」という意味の値が入ってしまう。そういう現象を防ぐために、関数のパラメータを入れなくても基本的に値を入れておくことができる。下のメッセージはその方法である。

各例文は下のコードを見よう。


function sayHello2(name){
	let newName = name || "Friend"; //関数で変数を宣言するとき、「OR」演算子(||)を使う。
//「パラメータであるnameにするか、もしくはnameがない場合は"Friend"にする」というふうに理解すれば分かりやしいかも。
	let msg = `Hello, ${newName}`;
	console.log(msg);
}

sayHello2("Ainchel"); // パラメータを入れたので、'Hello, Ainchel' が出力。
sayHello2(); // バラメータを入れなかったので、 'Hello, Friend' が出力

function sayHello3(name = "Friend"){ // パラメータを宣言するとき、値を初期化
	let msg = `Hello, ${name}`;
	console.log(msg);
}

sayHello3('Ainchel'); //パラメータを入れたので、 'Hello, Ainchel' が出力。
sayHello3(); //パラメータを入れなかったので、初期化された値を持って 'Hello, Friend' が出力。

以上に、JSで関数を宣言する方法とJAVAと違いがある文法について簡単にまとめてみた。JSはJAVAと似ている文法が多くて、とりあえずは使うことにひどい問題はまだなさそうである。

そのせいでITスクールでの授業も最近すごく早く進んでいるので、次はすぐ例文に入っていこうと思う。

脚注

もともとは1番下以外は全部注釈にするべきであるが、可読性のために注釈を外しておいた。実行させようとするとまた注釈にしなければならない。 ↩︎

前書き

関数の宣言方法3つ、調べてみよう。

関数のパラメータに、基本的に値を入れておく方法

Discussion