総合 ゲーム 画像動画

【ゼロからはじめるプログラミング】JavaScript学習 #30

ゼロからはじめるプログラミング講座の第四十二回です。今回はconstとletそれとfor-ofループについて解説します。どちらも割りと新しい構文で乗り換えると良いです。

 

  1. constとletを使ってみよう。
  2. アロー関数式を使ってみよう。

 

 

constとletを使ってみよう。

constとletは新たな変数宣言用の命令です。

JavaScript学習のはじめはグローバル変数でvarを付けずに変数を作りました。

次にvarを付けてローカル変数と関数スコープを学びました。関数スコープを使うことでブロックの外とのやり取りを制御することができました。

constとletもvarと同じで変数を宣言する時にローカル変数にするものです。

 

先に違いをまとめます。

var 関数スコープのみ 書き換え可能
const ブロックスコープ 書き換え不可
let ブロックスコープ 書き換え可能

 

constとletの大きな違いというか何故var以外にもこれらが必要だったかというと関数スコープを作るのが面倒だったからです。面倒というより機能的に不足があったからというべきでしょうか。スコープでアクセスを制御するには関数を作る必要があったのでそれをなくそうということでconstとletが生まれました。

constとletは両方ともブロックスコープです。ブロックとはif文やらforループやら他にもたくさんありますが{ }波括弧で囲まれてる範囲のことでした。

varは関数以外のブロックではブロックスコープが効きませんでしたがconstとletは全てのブロックでスコープが有効になります。

 

まずはブロックスコープを確認してみましょう。

var a = "a"
const b = "b"
if(true){
  var c = "c"
  const d = "d"
  console.log(a) // a
  console.log(b) // b
}
console.log(c) // c
console.log(d) // error
a
b
c
ReferenceError

 

最後のdだけは参照エラーが出ましたね。このようにif文でもきちんとブロックスコープが働いています。letでも同様にブロックスコープが働きます。

次はconstとletの違い、書き換えを確認してみましょう。

let a = "a"
a = "aa"
console.log(a)

const b = "b"
b = "bb" // error
console.log(b)
aa
TypeError

 

タイプエラーが出ました。constは書き換え不可なのでconstを使ってはいけないよと。

ブロックスコープの機能があって書き換え可能なletだけで良いんじゃない?と思うかもしれませんが、コード量が多くなるほどプログラムが大きくなるほど変数の保護は重要になってきます。そもそものブロックスコープが変数の保護目的ですからね。

 

まずはletから慣れましょう。そしてこれからvarは極力使わないようにしましょう。

 

 

アロー関数式を使ってみよう。

これから自分でJavaScriptについて調べるときにアロー関数式というもの見かけることになると思います。使わなくても良いですがコードをシンプルにできるので徐々に使えるようになっていってください。

 

アロー関数式で実際に書いています。

const sum = function(x,y){
  console.log(x + y)
}
sum(1,2) // 3

const arrow = (x,y) => {
  console.log(x + y)
}
arrow(1,2) // 3
3
3

 

これがアロー関数の基本です。functionを省略して(引数)=>{}の形で関数を作りますvar fnc = function(){} は function fnc(){}と同じです。

 

アロー関数にはまだ省略した書き方があります。

const sum = function(x){
  console.log(x*2)
}
sum(1) // 2

const arrow = x => {
  console.log(x*2)
}
arrow(1) // 2

 

このように引数が1つの場合は()カッコを省略することができます。

さらにreturnを省略することができます。

const sum = function(x){ return x * 2 }
console.log(sum(1))

const arrow = x => x * 2
console.log(arrow(1))
2
2

 

returnを省略するときは{}波括弧も省略します。

このようにアロー関数を使うとfunctionだったり省略してコードをシンプルにすることができます。今はまだあまり使う機会がないかもしれませんが、見かけたときは左辺で引数を指定して=>アローの右辺で処理をしているということを思い出してください。

 

お疲れ様でした。const、letとアロー関数は使わなくてもコードは書けるのですが、便利で多くの人が使っているので見かけることが多いです。是非使えるようになってください。

次回からは実践的なコードを使って腕を磨いていきます。まだ説明していないルールはあるのですが、もうかなり基礎知識はついていると思うのでこれからは練習問題を中心に解説していきます。

次も頑張って記事を作るのでチャレンジしてください!

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。