【JavaScript】関数・メソッド
関数定義
関数宣言
function sum(x, y) {
return x + y
}
sum(1, 2) //3関数はfunctionを使用して定義します。
関数の呼び出しは関数名と定義した引数を指定します。
関数式
const sum = function (x, y) {
return x + y
}
sum(1, 2) //3関数式は、変数に関数宣言で定義した関数を代入するイメージです。 その際、関数名を省略することができます（無名関数）。
実行には変数名を使用します。 仮に関数名を指定したとしても、変数名で実行します。
const sum = function sum1(x, y) {
return x + y
}
sum(1, 2) //変数名で実行
sum1(1, 2) //これは実行できず、エラーになる関数はnameプロパティを持っており、関数名を参照することができます。
以下の実行結果からわかるように、無名関数の場合は変数名 = 関数名となります。
関数名を指定した場合は、変数名 = 関数名とはなりません。
const func1 = function () {
//
}
func1.name //func1
const func2 = function func3() {
//
}
func2.name //func3引数
引数は、関数で使用するデータを外部から受け取るための変数のことです。
カンマ区切りで複数宣言することができ、指定順によりどの引数に紐づくかが決まります。
引数を設定しない関数を宣言することもできます。
function func(x, y, z) {
//
}
func(1, 2, 3) //x = 1, y = 2, z = 3 に紐づくarguments
あまり使用することはないかもしれませんが、引数の値はargumentsオブジェクトに格納されます。
function func(x, y, z) {
console.log(arguments[0]) //x の値
console.los(arguments[1]) //y の値
}残余引数
残余引数は、不定数の値をArrayの変数として宣言することができます。
複数宣言することはできず、必ず引数の最後に宣言する必要があります。
function func(x, ...y) {
//
}
func(1, 2, 3, 4) //x = 1, y = [2, 3, 4] に紐づくデフォルト引数
引数を指定しなかった場合の値を設定することができます。
function func(x, y = 1) {
//
}
func(1, 2) //x = 1, y = 2
func(1) // x = 1, y = 1引数はデフォルト値が設定されていたとしても、左から順に設定されます。
そのためどの引数にデフォルト値を設定するかは注意が必要です。
function func(x = 1, y) {
//
}
func() //x = 1, y = undefined
func(2) //x = 2, y = undefinedスプレッド構文
スプレッド構文とは、...を使用してオブジェクトを展開します。
イメージしにくいと思いますが、例えばArrayの要素をスプレッド構文を用いて引数に割り当てることができます。
function func(x, y, z) {
//
}
const ary = [1, 2, 3]
func(...ary) //x = 1, y = 2, z = 3戻り値
関数の結果を戻り値としてreturnを使って定義します。
戻り値がない場合は省略することができます。
他の言語と違い型の指定は必要ありません。
複数値を返したい場合は、分割代入という方法があります。
function func() {
return [1, 'a', true]
}
const [x, y, z] = func() //x = 1, y = "a", z = trueスコープ
スコープとは、変数の参照範囲のことです。
引数や関数内で宣言した変数は、関数の外から参照することはできません。 これらはあくまで関数内でのみ参照可能な変数となります。
function func(arg) {
const x = 1
}
func(1)
console.log(arg) //エラー
console.log(x) //エラーグローバルスコープで宣言された変数については、関数内で参照することができます。 また関数内ではグローバルスコープの変数と同一名の変数を宣言することができますが、別物として判断されます。
const x = 1 //グローバルスコープ変数
function func1() {
console.log(x)
}
func1() //1
function func2() {
const x = 2
console.log(x)
}
func2() //2
console.log(x) //1アロー関数
const sum = (x, y) => x + y
sum(1, 2) //3アロー関数はfunctionを使用しない関数の定義方法になります。
functionの定義とは異なり、argumentsがないことや、thisの扱いが違ったりします。
thisに関することは少し複雑なためここでは割愛します。
処理が 1 行の場合は{}を省略できます。
さらに戻り値だけの場合は、returnも省略することができます。
省略形でオブジェクトを返す場合は()で囲む必要があります。
const func = () => ({
x: 1,
y: 2,
})関数とメソッドの違い
最後に関数とメソッドの違いについて簡単に説明しておきます。
関数とはこれまで説明した通り、特定の処理を定義して実行します。 メソッドも基本的に同じですが、オブジェクトに紐づくかどうかが違います。
例えばStringには英字を小文字から大文字に変換するtoUpperCase()というものがあります。
const str = 'abcde'
str.toUpperCase() //"ABCDE"例を見てわかるようにstrのプロパティとして関数が実行され、strのもつ値に対して処理が行われています。
このようなものをメソッドといいます。