JavaScript入門8

JavaScriptを簡単にわかりやすく、公式に則って勉強していきましょう！

シリーズ一覧はこちら。

カウントダウンを２回したい

では以下のコードを見てください。

// レースを用意します 🏎 🏎 🏎

console.log(5)
console.log(4)
console.log(3)
console.log(2)
console.log(1)

// GO! 🏁
// レーサーが走り出しました 🏎 💨
// レーサーがゴールしました! 🍾

// 次のレースの準備をします 🏎 🏎 🏎

新しくjavascriptのファイルを作りコピペしていただいても構いません。これでコンソールを見てみると「5 4 3 2 1」と表示されるはずですよね。

そして次のレースのためにもう一度カウントダウンをしなければなりません。ただ３行目から７行目をコピペしていただいても正常にカウントダウンすることができます。

しかしコードが長くなってしまい、美しくありません。

繰り返しの処理は関数を使う

コードが長くなってしまうと、どこが間違っているのか探すのが大変になってしまいます。それに繰り返している部分なら見つかったとしても修正するのが大変です。

そこで関数を使います。以下のようにコードを書き換えてください。

function countdown() {
    console.log(5)
    console.log(4)
    console.log(3)
    console.log(2)
    console.log(1)
}

// Setting up the the race 🏎 🏎 🏎

countdown()

// GO! 🏁
// Players are running the race 🏎 💨
// Race is finished! 🍾

// Get ready for a new race 🏎 🏎 🏎

countdown()

これで完結になりました。fuctionを直訳すると関数や機能という風に訳されます。

functionは関数を作成してくれるコンストラクターです。関数には後ろに必ず()をつけるようにしてください。関数であることを証明してくれます。

プログラミングの世界では繰り返し処理はたくさんあります。使いこなせるようにしましょう。

今日はここまでです。お疲れ様でした。