【JavaScript】モダンJavascript基礎まとめ

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

##モダンJavaScript基礎まとめ

###変数宣言

変数宣言

// 以前はvarが使用されていた
var val1 = "val1宣言";
console.log(val1);
// "val1宣言"

// var変数は上書き可能
val1 = "val1上書き";
console.log(val1);
// "val1上書き"

// var変数は再宣言可能
var val1 = "val1再宣言";
console.log(val1);
// "val1再宣言"

// var変数は意図しない上書きや再宣言が発生する可能性があるため、以下を使用するようになった


// let変数
let val2 = "val2宣言";
console.log(val2);
// "val2宣言"

// let変数は上書き可能
val2 = "val2上書き";
console.log(val2);
// "val2上書き"

// letは再宣言不可
// src/index.js:25:4: Identifier 'val2' has already been declared. (25:4)のエラー発生
let val2 = "val2再宣言"


// const変数
const val3 = "val3宣言";
console.log(val3);
// "val3宣言"

// const変数は上書き不可
// TypeError: "val3" is read-onlyのエラー発生
val3 = "val3上書き";

// const変数は再宣言不可
// src/index.js:39:6: Identifier 'val3' has already been declared. (39:6)のエラー発生
const val3 = "val3再宣言"

// constで定義したオブジェクトの要素は更新することができる
const val4 = {
  name: "田中",
  age: 30,
};
// 変更
val4.name = "Tanaka";
// 追加
val4.address = "東京都";
console.log(val4);
// { name: 'Tanaka', age: 30, address:　'東京' }

// 変数宣言はconstを使用することがほとんど

// constで定義した配列についても要素を変更することができる
const val5 = [ 'dog', 'cat' ];
// 変更
val5[0] = "犬";
// 追加
val5.push(`bird`);
console.log(val5);

テンプレート文字列

テンプレート文字列

const name = "田中";
const age = 30;

// 「私の名前は田中です。年齢は30歳です。」を出力したい

// 従来の方法
const message1 = "私の名前は" + name + "です。年齢は" + age + "です。";
console.log(message1);
// "私の名前は田中です。年齢は30歳です。"

// テンプレート文字列を用いた方法（``の中の${}の中に変数を記述することができる）
const message2 = `私の名前は${name}です。年齢は${age}です。`;
console.log(message2);
// "私の名前は田中です。年齢は30歳です。"