[コラム]変数を参照できる範囲を小さくする 変数のスコープとは、その変数が参照できる範囲のことです。 スコープには、大きく分けて以下の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",…

コラム:Object.prototypeを継承しないオブジェクト Objectはすべてのオブジェクトの親になるオブジェクトであるという話でしたが、例外もあるそうです。 以下のコードではObject.prototypeを引数に持たずにnullを渡すと、prototypeは継承しないことが分かり…

ビルトインメソッド JavaScriptにおけるオブジェクトに自動的に実装されるメソッドです。 前の章で紹介されていたtoStringメソッドもそのうちのひとつで、すべてのオブジェクトがtoStringを持っています。 Objectはすべての元 Array、String、Functionなどの…

オブジェクトのマージと複製 Object.assignメソッド Object.assignメソッドを使うと、オブジェクトの複製やオブジェクト同士のマージができます。以下に、Object.assignメソッドの基本構文を記載します。 // 第一引数に、マージさせるtargetオブジェクトを書…

toStringメソッド オブジェクトのtoStringメソッドは、オブジェクト自身を文字列化するメソッドです。 Stringコンストラクタ関数は、引数に渡されたオブジェクトのtoStringメソッドを呼び出しています。 const obj = { key: "value" }; console.log(obj.toSt…

プロパティの値がundefinedかどうか確認しプロパティの存在を確認する if文を使うことで、プロパティの値がundefinedかどうか確認できます。プロパティの値があることが前提ならばundefinedかどうかを確認することでプロパティの存在の有無を確認する事にな…

Computed property names Computed property namesとは、オブジェクトリテラル内でのブラケット記法を使ったプロパティ名です。Computed property namesを使うことで、プロパティ名を動的に作成できます。 const key = "age"; const person = { [key]: "25" …

分割代入 前回オブジェクトのプロパティにアクセスする方法を学習しました。 以下はオブジェクトのプロパティを変数として定義し直しています。 const languages = { ja: "日本語", en: "英語" }; const ja = languages.ja; const en = languages.en; consol…

これまでに学習してきたfor文やforEachメソッドで数値の合計を返すsum関数を学習してきましたが、いずれの方法もletで再代入して反復処理を行う必要がありました。 reduceメソッドを使えば一時的な変数を定義せずに反復処理した結果だけを受け取ることが出来…

Object.keysメソッド 前回はfor...inメソッドを使った際に親オブジェクト自身がプロパティを持っている場合に意図しない結果を生んでしまうこと問題があるという点まで学習しました。 Object.keysメソッドを使うことで安全にオブジェクトのプロパティを列挙…