Javascriptの基礎 Vol.5 ファンクションー関数
Javascriptの関数 ファンクションとは？ 書き方１
関数とは繰り返し使える１セットのコードの纏りです。
function myFunction(){
console.log('my first function')
//この中にコードを書くが、書いただけでは呼ばれない（使われない）。
}
myFunction()
//このようにブラケットをつけて呼び出す。Javascriptの関数 ファンクション書き方２ Expression
functionには複数の書き方が有りますが、一番上がオリジナルです。しかし、この関数を変数の中に入れることが出来ます。データタイプの章でも話ましたが、変数のタイプがファンクション、ということです。
const myFunction = function (){
console.log('my second function')
//この中にコードを書くが、書いただけでは呼ばれない（使われない）。
}
myFunction()
//この場合もこのようにブラケットをつけて呼び出すが、関数が先に書かれてないと動かない。この二つが全く同じか、というと文法の違いではないので注意が必要です。最初に紹介したfunctionはページ内のどこに書いてあっても、つまり関数が呼び出されるのが先で、実際の関数が後に書かれていても問題は有りません。しかし、後に紹介した方法では関数は呼び出される前に書かれていないと動きません。
ちなみに、エクスプレッションの場合にも名前をつけることができますが、あまり意味がありません。
const myFunction = function myFunc(){
console.log('my second function')
//この中にコードを書くが、書いただけでは呼ばれない（使われない）。
}
myFunction()
myFunc()
//どちらも動くJavascriptの関数 ファンクション書き方３ ーES6
コードを沢山書かないといけないのに、一々functionと書くのが嫌になったのか（筆者も嫌だと思っていた）、新しいシンタックスが誕生、多くの人がこのES6という新しいシンタックスで書いてます。モダンな書き方です。知っているとイケてる、というイメージですが、実際に長いコードをチェックする時に何度も何度もfunctionという文字をみるのは苦痛なので、長いコードを書くようになれば、自然に面倒になってこちらのシンタックスで書くようになると思います。
const myFunction = () => {
console.log('my third function')
//この中にコードを書くが、書いただけでは呼ばれない（使われない）。
}
myFunction()
//この場合もこのようにブラケットをつけて呼び出すが、関数が先に書かれてないと動かない。見て貰えばわかりますが、単純にfunctionという文字がなくなって、このシンボル=>（英語ではFat Arrowー太い矢印と呼ばれる）に置き換わり、ちょっと場所がずれた、だけです。
リアクトを使う場合でも沢山出てきますので、きっちり抑えておきましょう。
Javascriptの関数 ファンクション書き方４ 計算結果をリターンする
上記の書き方に付け加えて、ファンクションでは値をリターンすることが出来ます。現実にプログラミングをしていくと、ファンクションをログをするために書くことはほとんどないので、計算結果を変数に入れて何かする、という場合には、計算結果をリターンすることを覚えておきましょう。
//ここでは円の面積計算をする関数を作ります。
const calcCircleArea = (hankei) => {
return 3.14 * hankei **2;
}
const result = calcCircleArea(6)
//計算結果がresult変数の中に格納されるこの書き方は基本的には
//ここでは円の面積計算をする関数を作ります。
let result;
const calcCircleArea = (hankei) => {
result = 3.14 * hankei **2;
}
calcCircleArea(6)と変わらないのですが、２個目のやり方にすると変数は一つしか設定出来ないので、基本は１番目の書き方を使います。最初のやり方なら変数を複数設定しても、一つの関数で計算可能なので。
Javascriptの関数 ファンクションを使う利点
- 値だけ変えて、同じ計算を何度もやらせたい
- 呼び出す場所をコントロールしたい
- コードをまとめて整理したい
例えば順番を変える式なんかを作る際。点数を格納する配列が有り、スコアが高い順に順番を変えたい、というような時。
const scores = [200, 30, 5, 300, 90, 4, 33]
const ages = [13, 33, 47, 76, 5, 30]
const mySort = (array) => {
//array.sort()では数字の最初しか順序変えをしてくれないので注意。
//sortメソッドは他の章で紹介します。
array.sort((a, b)=>{
if(a > b){
return -1;
}else if(b > a){
return 1;
}else{
return 0;
}
})
//sortメソッドのショートハンドは下記
// array.sort((a, b)=> b - a)
}
const orderedScores = mySort(scores)
const orderedAges = mySort(ages)
//この場合スコアであろうが年齢であろうが、数字の大きい順番に並び替えられます。Javascriptの関数 ファンクションの特殊な書き方 即時実行関数式 ー “Immediately Invoked Function Expressions" or "Self Executing Functions
日本語では即時実行関数式と呼ばれているそうですが、名前のファンクションをブラケットの中に入れると、即呼び出されるファンクションとして使えます。シンタックスがなんか変に見えるんですが、これもジャバスクリプトです。あまり沢山は見かけませんが、知っておくと見かけた際に悩まなくてすみます。
(function() {
//通常通りのファンクションを書く
})()
//もしくは
(function() {
//通常通りのファンクションを書く
}())関数は呼び出さないと計算されないのですが、この場合は呼び出さない、というか呼び出す方法も有りませんが、、、。
このシンタックスの新しい書き方は二つあり、どちらも同じ機能を持ちます。
!function() {
//通常通りのファンクションを書く
}()
//もしくは
void function(){
//通常通りのファンクションを書く
}()!シンボルの後にファンクションが来た場合Javascriptでは、expressionとみなされます。
このブラケット内に入れたファンクションに名前をつけると、特殊な意味を持ち、この中で使われる変数は外ではvarを使っても絶対に使われることは有りません。こちらはJqueryなどのライブラリを使う時に、変数に与える値が被らないようによく使われます。
(function myFunction() {
var myValue = "varだけどこの関数の中でしか使えない";
alert(myValue)
})()この関数の最後にくっついてる空のブラケットが気になるかと思いますが、こう説明すればおわかりいただけると思います。
(function myFunction(total, numberOfPeople) {
var perPerson = numberOfPeople / total;
alert(`お会計は一人当たり${perPerson}円になります。`)
//アラートに８００円と表示される。
})(2400, 3)カッコの中に関数が丸々入っていて、アーギュメントにいれる値は２個目のブラケットペアに入れルと言うことです。知らないと誰かが間違えた書き方している、みたいに見えますが、実際には結構使われてます。