オブジェクトの構成
以下の文章の構成は、buildingという変数の値として、オブジェクトを代入しています。
const building={
shop:物販店舗,
office:事務所,
}
{ }内で囲われた部分がオブジェクトです。
オブジェクトの中には、プロパティとプロパティの値が入ります。
また引数を持った関数が入ることもあります。
オブジェクトの中にあるプロパティの値に関数を入れたものをメソッドといいます。
メソッドは、関数と同じように呼び出すことができます。
例えば、buildingオブジェクトにあるshopメソッドを呼び出すには、
building.shop( )のように記述します。
関数
関数は、ある処理をひとまとまりにして行いたい時に利用するものです。
記述の手順は、まず
処理する内容をひとまとまりの関数として定義する。
処理を実行するために、
処理する内容を定義した関数を呼び出す。
という手順が基本的な流れとなります。
関数を呼び出す方法は、関数名( )だけで済みます。
つまり処理する内容を一度定義してしまえば、簡単に何度でも関数を実行することができます。
また、以下例文に記述していますが、関数に渡す内容を変えるだけで、簡単に異なる処理結果を得ることができます。
関数を定義する部分と関数を呼び出す部分(処理を実行する部分)の構成について見ていきます。
function building(type){
console.log(`駅徒歩5分、${type}!`);
}
building('事務所ビル');
関数を定義する部分は、
function building(type){
console.log(`駅徒歩5分、${type}!`);
}
の{ }で囲われた部分です。
一方関数を呼び出す部分は、
building('事務所ビル');
となりますが、引数(実引数)として事務所ビルが与えられています。
この意味としては、引数として事務所ビルをbuilding関数に渡した上で、関数を呼び出すということになります。
この引数 ' 事務所ビル ' は、前半function building(type)で記した引数(仮引数)typeの値となります。
更に、引数は関数内部{ }で変数として用いることができることから、${変数名}と関数の処理部分で表しています。
結果、${ }には変数の値である事務所ビルが代入され、コンソールには、駅徒歩5分、事務所ビル!と表示されます。
無名関数
関数は、変数の値として代入することができます。
変数の値として代入した関数のことを無名関数といいます。
上記を無名関数で書いてみると以下のようになります。
const building=function(type){
console.log(`駅徒歩5分、${type}!`);
};
building('事務所ビル');
アロー関数
上記例文をアロー関数で書き換えると、以下のようになります。
const building=(type)=>{
console.log(`駅徒歩5分、${type}!`);
};
building('事務所ビル');
アロー関数をbuilding変数に代入しています。
内容を変えたい部分(事務所)を引数として関数を定義することで、コンソールには、駅徒歩5分、事務所ビル!と表示されます。
日常対話で用いる例文や、実例を用いたサイト制作練習に取り組むたい方は講座を利用することが習得の近道です。