JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
過度な期待はしないでください。
関数
- 関数とは、「いくつかの処理をまとめたもの」
- 関数の定義
「function()」と書き、その後ろの中括弧「{ }」の中にまとめたい処理を
書くことで関数を用意することが出来る。
関数の定義には2種類の方法がある。
関数宣言と呼ばれる方法と、もう1つが無名関数を用いた関数式と呼ばれる方法。
関数宣言と関数式の役割には大きな違いはなし（正確には、読み込まれるタイミングが異なるが。。。）
関数式とすることで、何かに代入したり他の関数に渡しやすくなる。
// 関数宣言
function 関数名(){
//まとめたい処理内容
}
// 関数式（無名関数）
const 定数名 = function(){
//まとめたい処理内容
};
定数名(); → 「定数名()」とする事で関数を呼び出す事が出来る
// 関数の定義
const greet = function() {
console.log("こんにちは！");
console.log("元気ですか？");
};
// 関数を呼び出す
greet();
// 出力結果 → こんにちは！ 元気ですか？
アロー関数
- 「function()」の部分を「( ) =>」としても、これまでと同じように関数を
定義することが出来る。この関数の書き方のことを、特別にアロー関数と呼ぶ。
これはES6から導入された新しい書き方。
// 関数の定義
const greet = () => {
console.log("こんにちは！");
console.log("元気ですか？");
};
// 関数を呼び出す
greet();
// 出力結果 → こんにちは！ 元気ですか？
引数
- 関数に与える追加情報のようなもの、
関数を呼び出すときに一緒に値を渡すことで、関数の中でその値を利用することが出来る。
// どれでも可
function 関数名（引数名）{
//まとめたい処理内容
console.log(`私の名前は${引数名}`です);
};
const 定数名 = function(引数名){
//まとめたい処理内容
console.log(`私の名前は${引数名}`です);
};
const 定数名 = (引数名)=>{
//まとめたい処理内容
console.log(`私の名前は${引数名}`です);
};
// 引数を受け取る関数を呼び出す
定数名(値) → その値は関数の引数に代入されます
// 関数の引数にnameを追加
const greet = (name) => {
// 「こんにちは、〇〇さん」となるように出力
console.log(`こんにちは、${name}さん`);
};
// greetの引数に「Aki」を渡して呼び出す
greet("Aki");
// 出力結果 → こんにちは、Akiさん
- 複数の引数を受け取る関数
引数は、左から順番に「第1引数、第2引数、...」と呼ぶ。
( )の中に受け取る引数をコンマ(,)で区切って並べる。
const 定数名 = (第１引数, 第２引数)=>{
//まとめたい処理内容
};
// 引数を受け取る関数を呼び出す
定数名(第１引数の値, 第２引数の値);
// 関数の引数にnameとageを追加
const information = (name, age) => {
console.log(`彼女の名前は、${name}さん`);
console.log(`彼女の年は、${age}です`);
};
// greetの引数に「Aki」を渡して呼び出す
information("Aki", 25);
// 出力結果 → 彼女の名前は、Akiさん 彼女の年は、25です
戻り値
- 呼び出し元で受け取る処理結果を戻り値（もどりち）と呼ぶ。
「return 値」と書くことで、関数はその値を戻り値として返す。
const half = (number) => {
// numberを2で割った値を戻り値として返す
return number / 2 ;
};
// 定数resultを定義
const result = half(130);
// 「130の半分は〇〇です」となるように出力
console.log(`130の半分は${result}です`);
// 出力結果 → 130の半分は65です
スコープ
- 関数の引数や、関数内で定義した定数や変数は、その関数の中でしか使うことが出来ない。
→ その範囲のことをスコープと呼ぶ。
const introduce = () => {
// 定数nameを定義
const name = "Aki";
// 定数nameが使えるは範囲
};
// 定数nameが使えない範囲
- 関数の外で定義した定数や変数は、関数の中でも外でも使うことが出来る。
// 定数nameを定義
const name = "Aki";
const introduce = () => {
// 定数nameが使える範囲
};
// 定数nameが使える範囲
過去投稿記事
【JavaScript ~変数・定数、if文・switch文~】勉強メモ
【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12