Arrow Functionとthis Arrow Functionで定義された関数やメソッドにおけるthisがどの値を参照するかは定義時（静的）に決まります。 一方、Arrow Functionではないfunctionキーワードの関数においては、thisは呼び出し元に依存するため関数の実行時（動的）…

thisが問題となるパターン thisは所属するオブジェクトを直接書く代わりとして利用出来ますが、thisには大きく分けて２つの問題があります。 問題1: thisを含むメソッドを変数に代入した場合 問題2: コールバック関数とthis 本日は、２つ目の問題に触れてい…

thisが問題となるパターン thisは所属するオブジェクトを直接書く代わりとして利用出来ますが、thisには大きく分けて２つの問題があります。 問題１: thisを含むメソッドを変数に代入した場合 問題2: コールバック関数とthis 本日は、１つ目の問題に触れてい…

関数宣言や関数式におけるthis 関数宣言・・・fuction yano () {} 関数式・・・ const yano = function() {} 関数宣言や関数式ではベースオブジェクトがないためthisはundefinedとなります。 関数の中に関数を定義して呼び出す場合も同じです。 strict mode…

基本的にはメソッドの中で利用しますが、thisは読み取り専用のグローバル変数のようなものでどこにでも書けます。 thisの参照先は主に次の条件によって変化します。 実行コンテキストにおけるthis コンストラクタにおけるthis 関数とメソッドにおけるthis Ar…

クロージャーについての理解が曖昧だったのでJS primer以外の記事も読んでみました。 function User(){ // private member let name = "Jason"; // public member this.getName = function(){ return name; }; } let user01 = new User(); // 直接プライベー…

静的スコープ: ある変数がどの値を参照するかは静的に決まる メモリ管理の仕組み: 参照されなくなったデータはガベージコレクションにより解放されます。 クロージャーとはこの２つの仕組みを利用して、関数内から特定の変数を参照し続けることで関数が状態…

クロージャー クロージャーとは「外側のスコープにある変数への参照を保持できる」という関数が持つ性質を指します。 ほぼ全ての関数はクロージャーとも言えます。厳密にいうと、特定の変数を参照することで関数が状態を持っていることをそう呼びます。 ガベ…

const, let , var再復習 const 値の再代入も同じ変数名での再定義もできません。 let 値の再代入はできるが、同じ変数名での再定義はできません。 var 値の再代入も、同じ変数名での再定義もできます。 しかし、値が簡単に書き換え可能なので、ほとんど使用…

[コラム]変数を参照できる範囲を小さくする 変数のスコープとは、その変数が参照できる範囲のことです。 スコープには、大きく分けて以下の2種類があります。 グローバルスコープ → ページ全体でどこからでも参照できます。 ローカルスコープ → ページ内の部…

この章では関数とスコープの関係を中心に、スコープとはどのような働きをしていて、スコープ内では変数の名前から取得する値がどのように決まるかを見ていきます。 スコープとは スコープとは変数や関数の引数などを参照できる範囲を決めるものです。 functi…

JavaScriptでは、プリミティブ型の値に対してプロパティアクセスするとき、自動で対応するラッパーオブジェクトに変換されます。 const str = "string"; // プリミティブ型の値に対してメソッド呼び出しを行う str.toUpperCase(); // `str`へアクセスする際…

undefined と null を除いたものに対してはそれぞれラッパーオブジェクトが用意されています。 ラッパーオブジェクト プリミティブ型 例 Boolean 真偽値 trueやfalse Number 数値 1や2 String 文字列 "文字列" Symbol シンボル Symbol("説明") プリミティブ…

CodePointごとに扱うもの CodePointを名前に含むメソッド u（Unicode）フラグが有効化されている正規表現 文字列のIteratorを扱うもの（Destructuring、for...of、Array.fromメソッドなど） 正規表現の.とUnicode uフラグをつけた正規表現は、文字列をCode P…

Code PointとCode Unitの違い インデックス 0 1 2 3 4 文字列 リ ン ゴ UnicodeのCode Point(16進数) 0x30ea 0x30f3 0x30b4 0x1134e UTF-16のCode Unit(16進数) 0x30ea 0x30f3 0x30b4 0xd83c 0xdf4e Code Unitは絵文字を表すのに１つのIDでは表現しきれない…

UnicodeとCode Unit Unicodeはすべての文字に対してID（Code Point）を振ることを目的に作成されている仕様です。 Unicodeでは1文字を表すのに使う最小限のビットの組み合わせをCode Unit（符号単位）と呼ぶ。 Unicode は仕様 Code Unitは一文字を表している…

String.rawメソッド String.raw()は、テンプレートリテラル構文から、文字列を取得するメソッドです。 この関数は、テンプレート文字列の生の文字列形式を取得するために使用されます。つまり、置換 (例えば ${foo}) は行われますが、エスケープ (例えば \n)…

タグ関数 関数の引数に()で囲ってテンプレートリテラルを渡すとただの文字列として出力されます。 書き方 関数 `テンプレートリテラル` ←このように()はつけずに呼び出します。 タグ関数を利用することで呼び出し時に渡される引数が特殊な形になります。 第…

文字列の組み立て URLのような構造的な文字列の組み立てを行う場合は 文字列結合演算子（+）で単純に結合するよりも専用の関数を用意するほうが安全です。 問題の例は以下です。 function getResource(baseURL, pathname) { const url = baseURL + pathname;…

文字列の置き換えと削除 delete演算子は文字列に対して利用できません。文字列はプリミティブ型であるからです。 "use strict"; const str = "文字列"; // 文字列の0番目の削除を試みるがStrict modeでは例外が発生します。 delete str[0]; // => TypeError:…

[コラム]RegExp#execメソッド String#matchAllメソッドは、ES2020で導入されたメソッドです。 それまでは、RegExp#execメソッドというString#matchメソッドによく似た挙動をするメソッドを利用して、String#matchAllメソッド相当の表現を実装していました。 …

マッチした文字列の一部を取得 キャプチャリング キャプチャリングとは、正規表現中で/パターン1(パターン2)/のようにカッコで囲んだ部分を取り出すことです。 String#matchメソッドとString#matchAllメソッドはどちらもキャプチャリングに対応しています。 …

正規表現による検索 (続き) 正規表現によるマッチした文字列の取得 文字列による検索では、検索した文字列そのものがマッチした文字列になります。 しかし、searchメソッドの正規表現による検索は、正規表現パターンによる検索であるため、検索してマッチし…

正規表現は英語で「Regular Expression」です。 正規表現で使用する特殊文字 正規表現とは、「いくつかの文字列を一つの形式で表現するための表現方法」です。その「一つの形式で表現するため」に、いくつかのある文字に対して特別な意味を与えています。 - …

文字列の比較 文字列の比較には===（厳密比較演算子）を利用します。 次の条件を満たしていれば同じ文字列となります。 文字列の要素であるCode Unitが同じ順番で並んでいるか 文字列の長さ（length）は同じか // "A"と"B"のCode Unitは65と66 console.log("…

ダブルクォートとシングルクォート "（ダブルクォート）と'（シングルクォート）に意味的な違いはありません。 const double = "文字列"; console.log(double); // => "文字列" const single = '文字列'; console.log(single); // => '文字列' // どちらも同…

reduceメソッド 前回のコールバック関数の結果を元に、コールバック関数を実行するメソッドです。reduceの最終的な返り値は、配列以外の任意の値になります。 const array = [1, 2, 3]; // すべての要素を加算した値を返す // accumulatorの初期値は`0` cons…

配列から要素を削除(つづき) lengthプロパティへの代入 配列のlengthプロパティへ要素数を代入すると、その要素数に配列が切り詰められます。 つまり、lengthプロパティへ0を代入すると、インデックスが0以降の要素がすべて削除されます。 配列の長さが0とい…

[ES2019] 配列をフラット化 Array#flatメソッド 多次元配列をフラットな配列に変換できます。 引数を指定しなかった場合は1段階のみのフラット化ですが、引数に渡す数値でフラット化する深さを指定できます。 配列をすべてフラット化する場合には、無限を意…

指定範囲の要素を取得 Array#sliceメソッド slice は end 自体は含めず、その直前まで取り出します。例えば、slice(1,4) は 2 番目から 4 番目までの要素 (インデックスがそれぞれ 1, 2, 3 番目の要素) を取り出します。 const array = ["A", "B", "C", "D",…