letとconstの記事を書いてからだいぶ日が経ってしまいましたが、メソッドが使えるようになれば基本的なことは覚えられたような気さえします。
ということで今回はメソッドについて覚えていきたいと思います。
メソッドとは(function)
メソッドとは関数と同じと言われています。Javascriptではfunction(関数)と読んだ方が正しいかもしれません。
メソッドも関数もいまいちよく説明できないのですが、メソッド「足し算」を呼び出すと、いつも「A+B」をしてくれるといったイメージです。
関数の定義方法は3種類ほどあるそうですが、関数宣言と関数式という書き方を紹介したいと思います。
サンプルコード 関数宣言
functionから始まる部分がメソッドになります。関数宣言文という方式の書き方で書いています。
// aに5を代入
let a = 5;
// bに8を代入
let b = 8;
// メソッド tashizanにaとbの値を引数として受け渡し呼び出し
tashizan(a, b);
// メソッド tashizanを定義
function tashizan(num1, num2){
sum = num1+ num2;
console.log(sum);
}
※引数はメソッドに受け渡す値のことです。(例：aとbを引数としてtashizanを呼び出し)
上記コードを実行してみるとa+bの答え13がコンソール上に表示されると思います。
メソッド(function)の書き方 関数宣言
いきなりサンプルコードを紹介しましたが、書き方について説明します。
個人的にはこの書き方が好き。
- functionを宣言します。
- functionに名前をつけます。
- 引数を使いたければ設定、なければ () のみ
- 関数を呼び出したら実施する内容を書きます。
function 名前(引数){
// ここに式など
}
参考サイト：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function
メソッド(function)の書き方 関数式
関数式の書き方はconstやletにfunctionを代入する書き方です。
- constまたはlet を名前をつけて宣言します。
- constしたものにfunctionを代入します。(名前は省略可能 = 無名関数)
- 引数を使いたければ設定、なければ () のみ
- constでつけた名前を呼び出したら実施する内容をfunction内に書きます。
const 名前 = function 名前(引数){
// ここに式など
}
constとletの違いは以下を参照。
サンプルコード 関数式
正直使い分け方がよくわかっていませんが、初心者としては関数宣言は先にメソッドを呼び出しても使えるけど（関数の巻き上げ）、関数式の場合は先にfunctionなど宣言しておかないとダメなようです。
const getRectArea = function(width, height) {
return width * height;
}
//先にgetRectAreaを設定してからgetRectAreaを呼び出す
console.log(getRectArea(3,4));
// expected output: 12
メソッド(function)の呼び出し方
functionの呼び出し方はfunctionを宣言した際につけた名前を呼び出すだけです。呼び出し方法は関数式、関数宣言関係なく同じです。
//引数なし
名前(); // 例 : tashizan();
//引数あり
名前(引数); // 例: tashizan(num);
言葉で説明するのも難しいので、いくつかサンプルコードを作ってみました。実際に書いて実行してみてfunctionに慣れてみましょう。
いろいろなサンプルコード
例 : 引数なしのメソッド
// functionをsayHi()を宣言
function sayHi(){
//コンソールにHi!と表示する
console.log(“Hi!”);
}
// function sayHi()を呼び出し
sayHi();
例 : 引数ありのメソッド
// functionをsayHiToYou(someone)を宣言
function sayHiToYou(sameone){
//コンソールにHi! ○○と表示する
console.log(“Hi!” + someone);
}
//namenにNakamotoを代入
let name = “Nakamoto”;
// function sayHiToYou()に引数nameをつけて呼び出し
sayHiToYou(name);
例 : 関数式でメソッドを引数として使う
tashizan = function(num) {
return num + 10;
};
const five = function(){
return 5;
}
let sum = tashizan(five());
console.log(sum); // 15
実験 : 関数式を2回書くとどうなる
let tashizan = function(num1, num2) {
return num1 + num2;
}
let sum = tashizan(5, 3);
console.log(sum); // 8
tashizan = function(num1, num2) {
return num1 + num2 + 10;
}
sum = tashizan(5, 3);
console.log(sum); // 18
アロー演算子を使った書き方(関数式)
let arrowTest1 = (str) => {
console.log(str);
}
arrowTest1(‘ 1 : アロー演算子を使った書き方’);
let arrowTest2 = (str) => console.log(str);
arrowTest2(‘ 2 : 関数の中身が1文だけなら中括弧も省略可’);
アロー演算子(=>)を使うと省略して書くことができます。
続いてはオブジェクトについて書いています。
