とまとの成長日記

ぴよぴよエンジニアの日々学んだとこを投稿。時々、ゆるーくすきなもの・趣味について語ってます。

Javascript 超超超基礎 後編

はい、やっと後編です!
超超超基礎いよいよ完結でございます!!
最後気合い入れてまとめていきます💪

function(関数)

処理をまとめることができる。
→利点は、同じ処理を何箇所もあると修正するときに何箇所も修正する手間が省ける。
 書き方が何種類かあるのでみていきましょう!

1.関数宣言
 これが一番一般的な書き方だそうです。

function  関数名(){
  //処理内容
}

2.関数式
 関数を宣言しないでもいい書き方。

var 名前 = function(){
  //処理内容
}


例題:文章の間に広告をはさみたい時に広告を関数で書く
1.関数宣言で書いた場合

function showAd(){
    console.log('------------------')
    console.log('とまとはおいしい')
    console.log('------------------')
}

showAd();
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
showAd();
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
showAd();

2.関数式で書いた場合

var ad = function(){
    console.log('------------------')
    console.log('とまとはおいしい')
    console.log('------------------')
}

ad();
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
ad();
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
ad();
引数

今回は先程学んだfunctionに引数を渡す場合どういう使い方をしていくかみていきます!
いま、全部の場所で’とまとはおいしい’と表示するようにしていますが、場所によってワードを変えたい場合引数を渡すことで変えることができます!早速例題!

function showAd(message = 'とまと'){
    console.log('------------------')
    console.log(`${message}はおいしい`)
    console.log('------------------')
}

showAd('きゅうり');
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
showAd();
console.log('Javascriptは難しい')
console.log('Javascriptは難しい')
showAd('なす');

function showAd(message = 'とまと') →仮引数と呼ばれるものを渡しています。
showAd('きゅうり');showAd('なす'); → これで実引数と呼ばれるものを渡しています。

アロー関数

アロー関数はES2015から導入された書き方です。
「function」を書かずに 「=>」 という記号を使った書き方になります。
例題:引数nameに渡したものを表示するだけの関数

var name = function(name) {
  console.log(name);
}

//書き換えると
var name = (name) => {
  console.log(name);
}


ざっくりですが終わります!
ほかにも何か気づいたことがあれば追記していきます!
もしくはまた、まとめて行きたいと思いまーす!

感想

絶賛体調不良ですが、なんとか書ききれた💪💪
今日は横浜からお届けしているのですが、きっとどっかでお祭りが開催されるのか、浴衣女子がたくさん 🥺🥺
本当にかわいい。。。。
今年こそは浴衣着て花火大会なるものに行ってみたいのである👘💗