hasOwnPropertyとin どちらもオブジェクトにプロパティーがあるかの真偽値を返してくれるメソッド hasOwnPropertyはオブジェクト自身のプロパティーのみあるか調べてプロトタイプは調べない。 inはオブジェクト自身のプロパティーとプロトタイプを調べる。

プロトタイプチェーンとは? プロトタイプの多重形成のこと プロトタイプチェーンの優先順位 プロトタイプの浅い順に優先される。見つからない場合は、次のプロトタイプに探しにいく。

prototype オブジェクトに存在する特別なプロパティー コンストラクター関数と合わせて使用 インスタンス化した時に、prototypeの参照がprotoにコピーされる 余分なメモリを使わないための仕組み developer.mozilla.org

アロー関数とthis アロー関数の中のthisは無視されて、関数スコープではなくグローバルスコープに探しにいく。 window.area = 'World'; const person = { area: 'Japan', sayArea: () => { console.log(this.area); } } person.sayArea(); #=>'World'

bind call applyとthis bind thisや引数の参照先を変更。使用時点で実行はしない。 call apply thisや引数の参照先を変更。同時に関数を実行する。 callは第二引数が仮引数の定義ができる。 applyは第二引数に仮引数の配列を展開しての定義ができる。

const オブジェクトのプロパティー const オブジェクトのプロパティーは変更可能。再代入や再定義はエラー。 const a = { prop: 'World' } a.prop = 'Japan'; console.log(a); #=> {prop: 'Japan'}

参照とコピー プリミティブ値の場合は、値がコピーされて参照元は各宣言された変数 let a = 'World'; let b = a; b = 'Japan'; console.log (a); #=> 'World'; console.log(b); #=> 'Japan' オブジェクトの場合は、参照がコピーされてコピー元の変数も変わっ…

データ型 真偽値 Boolean 例 true/false 数値 Number 例 1 文字列 String 例 '1' undefined Undefined 例 undefined null Null 例 null シンボル Symbol 例 一意の値 BigInt BigInt 例 12n オブジェクト Object 例 {key: 'value'}

const let varの違い タイプ 再宣言 再代入 スコープ 初期化 const ✖️ ✖️ ブロック ✖️ let ✖️ ● ブロック ✖️ var ● ● 関数 undefined 再宣言 varのみ● varが非推奨のため使わない方がいい var a = 1; var a = 2; 再代入 let varが● let a = 1; a = 2; var b …

即時関数とは? 関数定義と同時に一度だけ実行される関数 let result = (function(仮引数) { return 戻り値; })(実引数);

クロージャーとは? レキシカルスコープの変数(外部変数)を関数が使用している状態 クロージャー プライベート変数 初期化専用関数でプライベート変数を準備して関数を返すことで初期化が他のところからおきなくすることができる function 初期化専用関数名()…

スコープチェーンとは? スコープが複数階層で、連なっている状態 実行のコードの一番内側のスコープから探し、なければ外側のスコープに探しにいく スクリプトスコープとグローバルスコープに定義されている場合は、スクリプトスコープが優先

レキシカルスコープとは? 実行中のコードからみた外部スコープ どのようにしてスコープを決定するかの仕様

スコープとは? 実行中のコードから値と式が参照できる範囲 スコープの種類 グローバルスコープ スクリプトスコープ 関数スコープ ブロックスコープ モジュールスコープ グローバルスコープ varや関数で定義したスコープ Windowオブジェクト var a = 0; funct…

ホイスティングとは? コンテキスト内で宣言した変数、関数の定義をコード実行前にメモリーに配置。宣言の巻き上げ 関数を実行よりも後に、宣言が書いてあっても先に関数の定義がメモリーに配置されているため実行可能。 varの宣言より、先に呼び出した場合は…

コールスタックとは? 実行中のコードがたどってきたコンテキストの積み重ね グローバルコンテキストが一番先に積まれて、呼ばれた順に積み重なる 積み上がった上から実行される。後入れ先出し LIFO(Last In, First Out) ブラウザの開発ツールのCall Stackで…

実行コンテキストとは？ コードを実行するときの状況 グローバルコンテキスト、関数コンテキスト、evalコンテキストがある(evalは非推奨) グローバルコンテキストで使用可能なもの グローバルコンテキスト内の変数と関数 グローバルオブジェクト this 関数コ…

JSエンジンによる挙動の違いがあるので注意 ChromeはV8のJSエンジン SafariはJavaScriptCoreのJSエンジン FirefoxはSpiderMonkeyのJSエンジン EdgeはChakra V８のJSエンジン OperaはV８のJSエンジン

Intersection Observer ある基準対象に対して監視対象が見えている割合に応じてコールバック関数を実行 構文 const observer = new IntersectionObserver(callback, options); const target = document.querySelector('監視したい要素'); observeメソッドを…

クラス継承 class 継承元クラス名{ costructor(){ } メソッド(){ } } 継承するクラス 継承元のクラスのメソッドを使用することができる class 継承先クラス名 extends 継承元クラス名{ costructor(){ } }

this 呼ばれた時に取れる値が変わってくる。 クラスの外だとwindowオブジェクトが参照。 クラス内だとクラスを参照するが関数の呼び出しをsetTimeoutなどのwindowオブジェクトを使うとwindowオブジェクトを参照。 動きとしては直近で呼ばれているオブジェク…

class 構文 class クラス名 { constructor(){ 初期化するときに実行する処理 } 関数名(){ 関数呼び出し時に実行する処理 } } const 定数名 = new クラス名(); 定数名.関数名();

非同期通信 fetch 構文 const url = 'https://〜'; const options = {オプション内容}; fetch(url, options); 例 urlとoptionsを設定したある状態で戻り値をjsonでコンソール確認 const fetchTest = fetch(url, options) .then( response => response.json()…

非同期関数 async 戻り値がPromise 状態と値 構文 async function 関数名(){ 実行する処理; } await async関数の中でのみ使える その処理を待ってから実行 構文 async function 関数名(){ 実行する処理１; await waiting(2); 実行する処理２; }

例外処理 try catch 構文 例外処理のみ try{例外処理が起きる可能性がある処理}catch(e){例外が発生した時に行う処理} eはErrorオブジェクト 例外処理してもしなくても処理したいことがある場合 try{例外処理が起きる可能性がある処理}catch(e){例外が発生し…

ES6 連想配列 Map キー あるいは値として任意の値を使う 構文 new Map(); 例 const myMap = new Map(); 値を設定 myMap.set('文字列', '文字列の値'); 値を取得 コンソールで出力 console.log(my.Map.get('文字列')); #=> "文字列の値"

置き換え replace 構文 文字列.replace(正規表現または置き換えたい文字, 置き換える文字); 例 const color = 'REDです'; console.log(color.replace('RED', 'BLUE')); #=> "BLUEです"

文字列の両端の空白の削除 trim 構文 文字列.trim(); 例 const greeting = ' Hello World ' console.log(greeting.trim()); #=> "Hello World"

連結 concat 構文 文字列.concat(文字列2); 例 const hello = 'Hello '; const world = 'World'; console.log(hello.concat(world)); #=> "Hello World"

DOMContentLoadedとは? DOMツリーの読み込み時に実行(まだCSSや画像等が読み込まれていない状態) 構文 document.addEventListener('DOMContentLoaded', function() { 実行する処理 }