モダンJavaScriptを0歳のところから学習していく【初心者】

こんにちは！
テックキャンプでJavaScriptのカリキュラムはありましたが、習ったと言ってもサラッとした内容だったので２、３日前からUdemyでモダンJSを学習中です。そのアウトプットとして記事を書いていきたいと思います。超絶初心者なので間違ってたら言ってください。
何も知らない赤ちゃん状態です。

var let const

マジ初歩の初歩の変数宣言からやっていきます。

var

従来のJavaScriptでは変数宣言が行えるのはvarのみでした。
var変数は上書きも再宣言も可能です。

var name = '裏梅';
name = '羂索';
var name = '漏瑚さん';

var変数は上書きも変数宣言も可能なのでプロジェクトが肥大化する中で、意図しない上書きや変数宣言を発生させてしまうというエラーも起こってしまっていたようです。

let

ES2015で追加された変数です。
letは上書きが可能ですが、再宣言は不可能です。

let name = 'パンダ';
name = '猪巻棘';

const

こちらもES2015で追加された変数です。
constは上書きも再宣言も不可能な変数です。

const name = '乙骨憂太';

constは一度設定された文字列や数値が変わらないことが保証されるのですが、オブジェクトや配列は値を変えることができます。

const yuji = {
	magic: '黒閃',
	age: 16
};
yuji.magic = '逕庭拳';
yuji.runk = '２級呪術師';

このようにオブジェクトのプロパティの上書き、追加はconstで行うことができます。

変数定義の際にvarを使用するのではなくlet,constを利用することができるので実際の現場では情報が増えてかなり楽ですよね。letを利用しているときは「再代入する予定のある変数なんだな」とかconstなら「今後この値は再代入も再変数定義も行わないんだな」と。constかletで情報整理ができるので楽ですね。
Rubyはこのような変数の定義をしないので、paizaのスキルチェックなんかやってると「あれ？なんで急に再代入されてんの？」みたいな時もあります。Rubyは短くかけて自由度の高い言語ではありますがそんなデメリットもありますね。

テンプレート文字列

これもES2015で追加された機能のようです。
簡単にいうと文字列の中にJavaScriptを放り込めるようにできる機能です。

従来の書き方

const name = '七海建人';
const magic = '十劃呪法';

message = '私の名前は' + name + 'です。術式は' + magic + 'です。'
console.log(message);

テンプレート文字列

const name = '七海建人';
const magic = '十劃呪法';

message = `私の名前は${name}です。術式は${magic}です。`
console.log(message);

テンプレート文字列を利用した方が記述量も少なくてスッキリしてますね！！
テンプレート文字列はバッククオーテーションで囲んで変数の利用には${}を使います。
Rubyだとシングルやダブルクオーテーションで囲んで#{}でしたね。

アロー関数

従来の書き方だと、

function gojo (str) {
  return str;
}
console(gojo('ボク最強だから'));

アロー関数でかくと

const gojo = (str) =>{
 return str;
}
console(gojo('ボク最強だから'));

もしくは
const gojo = (str) => str;
console(gojo('ボク最強だから'));

アロー関数は1行の単一処理の場合、記述を省略することができます。

今日の内容は流石にJSの初歩の初歩の内容だったのでテックキャンプのカリキュラムでも記載あることばかりでした。しかし、忘れていた内容も多かったのでおさらいという意味でも取り組めて楽しかったです。
今日の学習で四足歩行から二足歩行になるまで成長したと思いたいバブ。