目次

概要

UdemyでJavaScriptを勉強した時のメモ

JavaScriptの独特な使い方①：クロージャー

クロージャ―の簡単な定義：「自分を囲むスコープにある変数を参照できる関数」
変数をプライベートな変数として扱う事ができる 
function incrementFactory(){
  let num = 0;
  function increment(){
    num = num + 1;
    console.log(num);
  }
  return increment;
}
const increment = incrementFactory();
increment();
// -> 1
increment();
// -> 2

厳格な等価性と抽象的な等価性

厳格な等価性 a === a データ型と値が同じ場合にtrue
抽象的な等価性 a == a データ型が異なっていても値が同じ場合にtrue

falsyとtruthy

false(true)とみなされる値のこと、falthyな値としては以下が該当する
false/0/0n/”(空文字)/null/undefind/NaN

型変換エラー

空文字をNumberに変換すると、NaNとなる（Not a Numberの略）

変数の初期化

関数の引数にデフォルト値を設定する

function test(name = 'Mike'){
// 処理内容
  }

変数の初期化

OR条件を使ってbがflasyだった場合「default」という値がaに代入される 
let a = b || 'default';

オブジェクトの非構造化（分割代入）

let student = {
  name: "Mike",
  age: 12,
};
let {name, age} = student;
console.log(name)
変数名を変更したい場合 
let {name: n, age: a} = student;

スプレッド演算子と残余引数

スプレッド演算子

反復可能、列挙可能オブジェクトの展開を行う
const arry1 = [1, 2, 3];
const arry2 = [...arry1, 4];

残余引数

関数の可変長引数を定義できる
function hello(...args) {
  for (let num of args) {
    console.log(num);
  }
}
    
hello(1, 2, 3);
hello(1, 2, 3, 4);

Strictモード

古い仕様の内、あまり良い記述方法ではないものをエラーとするモード
ファイルの先頭又は関数の先頭に「”use strict”;」と記載する
関数の先頭の場合は、関数の中にだけStrictモードが適用される
細かな内容は割愛
基本的に付けた方が良いらしい

関数

特徴いろいろ


関数は実行可能なオブジェクトである

function a(){
  console.log('hello');
}
a.method = function(){
  console.log('hi');
}
a.method();

引き数は「arguments」でも受け取ることができる

(最近はあまり使われない) 
function fn(){
  console.log(arguments);
}  
fn(1,2);

アロー関数

無名関数の省略記法のこと 
const a = ( name ) => { return name + '!' }
引数が1つの場合、()が省略可能
関数部分が一行の場合、returnと波かっこが省略可能
無名関数と異なり、this、arguments、new、prototypeが使えない(thisは、宣言された時点でのthisで確定される)

bindメソッド

関数を実行せずに、thisの参照先の中身と、引数を渡すことができる 
function greet(name) {
console.log(this.greeting + name);
  }
setTimeout(greet.bind({ greeting: "hello" }, "tom"), 1000);

コンストラクタ関数

クラスを作成可能
継承も記述可能（詳細は割愛）

function Human(name, age) {
  this.name = name;
  this.age = age;
}
const taro = new Human("taro", 23);

即時関数

即座に実行される関数
スコープを区分するために使われる
(function(num){
  console.log(num);
  // 10
})(10);

コールバック関数


関数を引数に渡すことができる 
function hello(cb){
  cb();
}
function hello(){
  console.log('hello');
}
cb(hello);

クラス

基本の特徴

ES6よりクラスを作成可能
実態は、コンストラクタ関数
継承も記述可能（詳細は割愛）
プリミティブ型のラッパーオブジェクトも有る

クラスの作成方法

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  hello() {
    console.log("hello" + this.name);
  }
}
const taro = new Human("taro", 23);

Getter Setter

以下の記述方法はES6から使用可能
JSにはGetter、Setterを使う文化が無かったため、値のセット、ゲットの際に何らかの処理を追加で行いたい場合に使用するらしい。
class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  get name(){
    return this.name;
  }
  set name(val){
    this.name = val;
  }
    }

staticメソッド

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static hello(){
    console.log("hello");
  }
}
Human.hello();

その他

拡張For文

for(let str of arry){
  console.log(str);
}

コレクション

要点のみ記載、具体的な使い方は適宜調べる。
MapやSet等が使用可能
反復処理の定義のため、イテレーターの作成、及びイテレーターを簡単に記述できるジェネレーターを作成できる