今回のゴール
前回は繰り返し処理（for文・while文）を学びました。
JavaScript for文・while文とは？繰り返し処理を初心者向けにわかりやすく解説【第4講】
今回は関数（function）を学びます。
処理をまとめて再利用できるようになることが今回のゴールです。
関数とは？
同じ処理を何度も書くと、コードが長くなり管理しにくくなります。
たとえば、画面に「こんにちは」と3回表示する場合です。
console.log("こんにちは");
console.log("こんにちは");
console.log("こんにちは");同じコードが何度も出てきています。
このようなときに使うのが関数です。
関数とは、処理をひとまとめにして、必要なときに呼び出せる仕組みです。
関数の基本構文
function greet() {
console.log("こんにちは");
}この時点ではまだ実行されません。
実行するには、関数を呼び出します。
greet();実行結果
こんにちは何回でも呼び出せます。
greet();
greet();
greet();greet のような名前を関数名といいます。
引数とは？
関数には、外から値を渡すことができます。
function greet(name) {
console.log("こんにちは " + name);
}
greet("田中");
greet("佐藤");実行結果
こんにちは 田中
こんにちは 佐藤name の部分を引数といいます。
呼び出すときに渡した値が引数に入ります。
returnとは？
関数は、処理した結果を返すことができます。
この返される値を戻り値といいます。
function add(a, b) {
return a + b;
}
let result = add(3, 5);
console.log(result);実行結果
8return は「結果を返す」という意味です。
関数は、入力して、処理して、結果を返すことができます。
関数を使うメリット
- 同じ処理を何度も使い回せる
- コードが短くなる
- 修正がしやすくなる
- 読みやすいコードになる
演習問題
- 自分の名前を表示する関数を作ってください。
- 2つの数字を足す関数を作ってください。
- 円の面積を求める関数を作ってください。
模範解答① 自分の名前を表示する関数
function showName() {
console.log("田中");
}
showName();模範解答② 数字を足す関数
function add(a, b) {
return a + b;
}
console.log(add(3, 7));模範解答③ 円の面積を求める関数
function circle(r) {
return 3.14 * r * r;
}
console.log(circle(5));宿題
税込価格を計算する関数を作ってみましょう。
例：1000円の商品に10%の税金を加える。
まとめ
- 関数は処理をまとめる仕組み
- 関数は呼び出して使う
- 引数で値を受け取れる
- returnで結果を返せる
コメント