Progateに課金

いい加減マジで基礎をなんとかしないとと思ってProgateに課金してJavaScriptのレッスンを受けることに
こういう月々いくら払ってサービス使い放題って形式、いわゆるサブスクリプションってせっかくこれだけお金を払ったんだから元を取らないと！みたいな、時間を人質(時質？)に取られている感覚があって苦手だったんだけど、学習サービスの場合はむしろそれが「やらなくちゃ！」というモチベに繋がるからいいと思う

レッスン内容を言いすぎない程度に備忘録を残しておく
もちろんコードの流用などはしていませんが、問題があれば教えてください

テンプレートリテラル

存在は知っていたしめちゃくちゃ使ってるけど「テンプレートリテラル」という名前を忘れがち　ちゃんと覚えておいたほうがいい

const name = "ネメシスちゃん";

console.log(`私の名前は${name}です`);
//私の名前はネメシスちゃんです

const で宣言した配列の中身は全然変更できるよ

const で宣言した変数(定数)は再宣言しようとしたり、他の値を再代入しようとするとエラーになる。ゆえに値がいつのまにか変になってるとかがなくて安全なのでもう全部constを使え、forとかの中のカウンタとかそういうのはletを使え、varはもう使うな絶対に使うなというのはいろいろなところで言われているからみなさんもご存知ですよね。

const name = "ネメシスちゃん";

name = "小田倉";
//TypeError: Assignment to constant variable.

const name = "小田倉";
//SyntaxError: Identifier 'name' has already been declared

ところがconstで宣言した配列の中身には再代入できてしまう

const names = ["ネメシスちゃん", "小田倉"];

console.log(names[1]); //"小田倉"

names[1] = "おだくら";

console.log(names); //[ 'ネメシスちゃん', 'おだくら' ]　エラーにならない！

const names = ["ねめしす", "odakura"];
//SyntaxError: Identifier 'names' has already been declared
//再宣言はだめ

どうしてかについては既に訊かれてて回答もある

JavaScript - JavaScript: const の配列の値が変えられるのはなぜ？｜teratail

どうしても配列の中身を変えてほしくないときは、Object.freeze()を使う

Object.freeze() - JavaScript | MDN

const names = ["ネメシスちゃん", "小田倉"];
Object.freeze(names);

console.log(names[1]);  //"小田倉"

names[1] = "おだくら"; //実行されない。実行時エラーにはならないのか……見落としそう

console.log(names[1]); //"小田倉"

クラス

JavaでやったことはあるけどJavaScriptでもあるのか(今知るんかい)　いまのところは有効に使える気がしないけど、Node.jsでバックエンド書くなら多用したりするのだろうか？
クラス宣言、インスタンス生成、コンストラクタ、継承、オーバーライドとか。

class Human {
  constructor(name, hp) {
    this.name = name;
    this.hp = hp;
  }
  greet() {
    console.log(`名前は${this.name}で、体力は${this.hp}`);
  }
}

class Hiro extends Human {
  constructor(name, hp, atk) {
    super(name, hp);
    this.atk = atk;
  }
  greet() {
    console.log(`名前は${this.name}で、体力は${this.hp}、攻撃力は${this.atk}`);
  }
}

const human = new Human("小田倉", 45);
const hiro = new Hiro("スーパー小田倉", 500, 2000000000000);
human.greet();
hiro.greet();

//名前は小田倉で、体力は45
//名前はスーパー小田倉で、体力は500、攻撃力は2000000000000

配列操作

forEach

const names = ["ネメシスちゃん", "小田倉", "ネギ"];

//forEach  配列の要素を一つずつ取り出して全部に処理を行う
names.forEach(name => {
  console.log(name);
});

//ネメシスちゃん
//小田倉
//ネギ

どうでもいいけどC#のforeachと違ってforEachとキャメルケースになっていて読みやすいですね！

push

const names = ["ネメシスちゃん", "小田倉"];

//push 配列に要素を追加する
names.push("ネギ");

console.log(names);
//[ 'ネメシスちゃん', '小田倉', 'ネギ' ]

find, filter, map

const members = [
  { id: 1, name: "ネメシスちゃん", age: 12 },
  { id: 2, name: "小田倉", age: 9001 },
  { id: 3, name: "ネギ", age: 103 }
];

//find 最初に条件に合う要素をひとつだけ取り出す
const foundMembers = members.find(member => {
  return member.id === 2;
});

console.log(foundMembers.name); //小田倉

//find 条件に合う要素を全て取り出して新しい配列に格納
const filterdMembers = members.filter(member => {
  return member.age % 2 === 1;
});

console.log(filterdMembers);
//[ { id: 2, name: '小田倉', age: 9001 },
//{ id: 3, name: 'ネギ', age: 103 } ]

//map 配列の全ての要素に同じ処理を行い、新しい配列に格納
const multipliedAges = members.map(member => {
  return member.age * 100;
});

console.log(multipliedAges);
//[ 1200, 900100, 10300 ]

感想

よかった
次はなにをやろうかな

割と優雅

ブログの練習

ProgateのJavaScript全レッスンを倒したので備忘録