関数について理解を整理しました。
アロー関数ではなく、function構文で説明しています。
##関数
処理をまとめたもの。
たとえるなら自動販売機、ツクールならコモンイベント。
関数を作る=処理内容(商品)を登録しておく。
関数を呼ぶ=ボタンを押して処理(商品)を取り出す。
###関数を作る、実行する
function 関数名(){
実行内容;
}
関数名();
function hello(){
console.log("こんにちは");
}
hello();//関数helloを実行
引数と戻り値を加える場合
引数……関数に与える値、入力値
戻り値……関数に与えて戻る値、出力値
function 関数名(引数){
実行内容;
return 戻り値
}
関数名(引数);
function hello(name){
return "hello" + " " + name;
}
let greet = hello("taro");
console.log(greet);
実行結果
hello taro
引数は,区切りで複数与えることもできる
function hello(firstName,lastName){
return "hello" + " " + firstName + " " + lastName;
}
let greet = hello("taro","yamada");
console.log(greet);
実行結果
hello taro yamada
##ローカルスコープ
関数で定義された変数(var,let)は関数内でしか使用できない。
function hello(){
let name = "you";
console.log(`スコープ内からこんにちは${name}さん`);
}
hello();
console.log(`スコープ外から、こんにちは${name}さん`);
実行結果。
スコープ内からこんにちはyouさん
変数nameの値を使用できる
スコープ外から、こんにちはさん
hello関数の外なので変数nameが使用できない
##グローバルスコープ
・関数の外(function{}の外)で変数、定数を定義した場合、関数の外で扱える
・同名の変数、定数が存在する場合はローカル変数が優先される
let name = "who";
function hello(){
let name = "you";
console.log(`ローカル変数のあなたは${name}さん`);
}
hello();
console.log(`グローバル変数のあなたは${name}さん`);
実行結果
ローカル変数のあなたはyouさん
グローバル変数のあなたはwhoさん
##引数
関数名()の"()"に与える追加情報。
関数を作る時に引数を設定すれば、処理内容と紐づけられる。
function hello(name){
console.log(`引数を使って、こんにちは${name}さん`);
}
関数を使うときは()内に値を指定する。
hello("who");
実行結果
引数を使って、こんにちはwhoさん
複数の引数がある場合は","で区切る。
function hello(lastName,firstName){
console.log(`引数を使って、こんにちは${lastName} ${firstName}さん`);
}
hello("Tailor","Swift");
実行結果
引数を使って、こんにちはTailor Swiftさん
##戻り値
returnを使って値を戻す(returnする)
function add(a,b){
return a + b;//引数aとbの足し算
}
console.log(add(1,2));//戻ることを期待して、引数に1と2を与えて実行
実行結果
3
応用:
①処理内容を関数を作る=呼び出されたときに対応する仕組み。自販機
②関数の外から引数を渡す変数を作る=呼び出す処理。コインを入れてボタンを押す所作
function add(a,b){
return a + b;
}
let sum = add(1,2);
console.log(sum);