JavaScriptのconstとletの違い【初心者向け】｜使い分けのコツとコード例　【ITTI】

constとletとは？基本の違い

JavaScriptを学び始めると必ず出てくるのが const と let。

「どっちを使えばいいの？」「違いがよく分からない…」と悩む人は多いです。

この記事では、constとletの違いを初心者向けに分かりやすく解説します。

付箋のイメージやコード例を使って、楽しく理解できるようにまとめました。

constとletの違いをざっくりまとめ

let

再代入はできる。要するに、書き直せる。

再宣言はできない

letは値を変えるときに使う

const

再代入はできない。要するに、書き直せない。

再宣言はできない

constは値を固定したいときに使う

基本は const、必要なときだけletを使う。

letの使い方（再代入できる）

let fruit = "apple";
fruit = "orange";　→ OK
console.log(fruit);


実行結果
orange

let fruit = "apple";
fruit = "orange";　→ OK
console.log(fruit);


実行結果
orange

イメージは「fruit って付箋に apple と書いたけど、あとから orange に書き直した」

constの使い方（再代入できない）

const color = "red";
color = "blue";　→  ❌ エラー


実行結果
エラー

const color = "red";
color = "blue";　→  ❌ エラー


実行結果
エラー

イメージは「color って付箋に red と書いたら、もう書き直せない」

寸劇

ユーザー「fruitって付箋を作って、内容は apple！」

JavaScript「了解！fruit = apple ね！」

ユーザー「すまん！訳があって、orange に変えてクレマンス！」

JavaScript「OK！fruit の内容を orange に書き直したぜ！」

ユーザー「colorって付箋を作って、内容は red！」

JavaScript「了解！color = red ね！」

ユーザー「すまん！訳があって、 blue に変えてクレマンス！」

JavaScript「無理やで、const で作った時点で書き直せないぜ！」

constでも中身は変えられる（配列・オブジェクト）

const で宣言しても、配列やオブジェクトの中身は変更可能です。

const fruits = ["apple", "orange"];

const fruits = ["apple", "orange"];

fruitsっていう名前の付箋をconstとして発行し、内容はappleとorange。再代入は不可。

fruits.push("banana"); 

fruits.push("banana"); 

pushは値を追加するコード。bananaと書いてあるので、pushを使って、bananaを追加。

これで、fruitsの内容はappleとorangeとbananaになった。

console.log(fruits); 　→　fruitsの内容は？


実行結果
["apple", "orange", "banana"]

console.log(fruits); 　→　fruitsの内容は？


実行結果
["apple", "orange", "banana"]

イメージは「付箋自体は書き直せないけど、その付箋の内容を書き足せる」

初心者が迷わない使い分けのコツ

•  基本は const を使う（値を変えないことを明示できる）

•  値を変更する必要があるときだけ let を使う

•  var は使わない（古い書き方で、機能的にやりにくい部分が多いため使わない）

まとめ

•  let は書き直せる

•  const は書き直せない

•  配列やオブジェクトは const でも中身を変更できる

•  基本は const、必要なときだけ let

AIひろゆき

「要するに、letは書き直せるんですよ。でもconstは書き直せないんですよね。で、優秀な人って基本的にconstをよく使うんですよ。なんでかっていうと、変わらないものは変わらないって決めちゃった方が、後からバグが起きにくいからなんですよNE。」

最後まで読んでいただきありがとうございました！