ワタタクp5.jsで作品を作っていて、varとletとconstの違いが分からなかったので、調べてまとめておくことにしました。
この記事の目的はそれぞれを理解し、使えるようにすること。
結論は、letかconstを使うということ。
varは使っているサンプルコードがあるので、理解しておいたほうがいいということ。
【p5.js】varとletとconstの違いについて
varについて
最近のJavaScriptでは、let や const が推奨されています。これらは var よりもスコープや再宣言に関する挙動が直感的で安全だから。
使い方: varは、JavaScriptで変数（値を入れる箱）を宣言するために使われる。
一番古い使い方の「変数（箱）」の作り方。
特徴: プログラムのどこでも使える。箱の中身をあとから何回でも変えられる。
var x = 10; // xという名前の箱に10を入れる
x = 20; // 箱の中身を20に変えることができる関数スコープ: var で宣言された変数は、その関数内全体で有効です。ブロック（例えば {}）の中で宣言しても、その外でも使えます。
function example() {
if (true) {
var x = 5; // この変数 x は関数 example 内全体で有効です。
}
console.log(x); // 5 と表示されます
}
example();
再宣言が可能: 同じ名前の変数を何度も宣言できますが、これはコードを複雑にする可能性があります。
var x = 5;
var x = 10; // 同じ名前の変数を再宣言ホイスティング: var で宣言された変数は、宣言される前に使うことができます。これは「ホイスティング」と呼ばれる特性によるものです。
console.log(y); // undefined と表示されます（エラーにはなりません）
var y = 10;letについて
使い方: let は、JavaScriptで変数（値を入れる箱）を宣言するために使われる。
新しい使い方の「変数（箱）」の作り方です。
let y = 30; // yという名前の箱に30を入れる
y = 40; // 箱の中身を40に変えることができるlet name = "Alice"; // 名前が `name` という変数を作り、その中に "Alice" という名前を入れます
let age = 12; // 名前が `age` という変数を作り、その中に `12` という年齢を入れます
console.log(name); // コンソールに `Alice` と表示されます
console.log(age); // コンソールに `12` と表示されますブロックスコープ: let で宣言された変数は、そのブロック（例えば {} の中）内でのみ有効です。ブロックの外では変数は見えません。
// エラーに成る例
function example() {
if (true) {
let x = 5; // この変数 x は if ブロック内でのみ有効です。
}
console.log(x); // エラー: x は定義されていません
}
example();
// Errorにならない例
function example() {
let x; // 変数 x を関数の最初に宣言します。
if (true) {
x = 5; // 変数 x に値を代入します。
}
console.log(x); // x は定義されています。
}
example();
再宣言不可: 同じ名前の変数を再宣言することはできません。一度宣言された変数をもう一度同じ名前で宣言するとエラーになります。
let x = 5;
let x = 10; // エラー: x はすでに宣言されていますホイスティングの違い: let で宣言された変数は、宣言される前に使用するとエラーになります。
console.log(y); // エラー: y は宣言される前に使用できません
let y = 10;constについて
使い方: const は JavaScript で定数（constant）を宣言するためのキーワードです。定数というのは、一度値を設定すると、その後変更することができない変数のこと。
簡単に言うと、変わらない「箱」を作るための方法です。
const pi = 3.14; // 円周率を定数として設定const name = "Alice"; // 名前が `name` という変数を作り、その中に "Alice" という名前を入れます
console.log(name); // コンソールに `Alice` と表示されます
// name = "Bob"; // エラー: name は再代入できません再代入不可: const で宣言された変数には、後で別の値を代入することはできません。
const x = 10;
x = 20; // エラー: x は再代入できませんブロックスコープ: const はブロックスコープを持ちます。これは、変数が宣言されたブロック（例えば {} の中）内でのみ有効であることを意味します。
// エラーになる例
function example() {
if (true) {
const y = 5; // この変数 y は if ブロック内でのみ有効です。
}
console.log(y); // エラー: y は定義されていません
}
example();ホイスティング: const で宣言された変数はホイスティングされますが、初期化される前に使用しようとするとエラーになります。
console.log(z); // エラー: z は宣言される前に使用できません
const z = 10;オブジェクトや配列と const
const を使ってオブジェクトや配列を宣言する場合、その内容（プロパティや要素）は変更できますが、オブジェクトや配列自体を再代入することはできません。
const person = { name: "Alice", age: 12 };
person.age = 13; // これは許可されます
console.log(person.age); // 13 と表示されます
// person = { name: "Bob", age: 14 }; // エラー: person は再代入できませんまとめ
- 再代入する必要がない変数には
constを使う - 再代入が必要な変数には
letを使う varはサンプルコードなどで出てきたときに理解できればいい
const を使うことで、コードの意図が明確になり、バグを防ぐことができます。
僕は今の段階では、letを中心に使うことになりそう。
ワタタクそれでは今日もレッツワクワクコーディング。