📌 第21章構築の対象



🧸 21.1 JavaScriptオブジェクトの分類


JavaScriptオブジェクトは大きく3つに分類されます.
オブジェクトECMAScriptで定義されたオブジェクト
  • の標準バージョンを使用して、アプリケーションのグローバルな汎用機能を提供します.標準的に構築されたオブジェクトはECMAScript仕様で定義されているオブジェクトなので、JavaScriptの実行状況にかかわらず常に使用できます.標準的に構築されたオブジェクトは、グローバルオブジェクトのプロパティとして提供されます.したがって、他の宣言がない場合は、グローバル変数のようにいつでも参照できます.
  • ホストオブジェクトホストオブジェクトとは、ECMAScript仕様で定義されていないが、JavaScript実行環境(ブラウザ拡張が遅いNode.js環境)で追加的に提供されるオブジェクトです.
  • カスタムオブジェクトカスタムオブジェクトとは、標準的に構築されたオブジェクトおよびホストオブジェクトではなく、ユーザーがカスタマイズしたオブジェクトを指します.
  • 🧸 21.2標準で構築されたオブジェクト


    JavaScriptは40以上の標準コンストラクションオブジェクトを提供し、Math、Reflect、JSONを除くすべての標準コンストラクションオブジェクトは、コンストラクション関数オブジェクトの標準コンストラクションオブジェクトではなく、プロトタイプメソッドと静的メソッドを提供します.

    🧸 21.3元の値とエンベロープオブジェクト


    文字列、数値、またはブール値の元の値がオブジェクトのように句点記号でアクセスされている場合、JavaScriptエンジンは、Propertyまたは呼び出しメソッドにアクセスして元の値を返す暗黙的に関連付けられたオブジェクトを生成します.このように、オブジェクトのように文字列、数値、ブール値にアクセスすると、生成された一時オブジェクトはRapperオブジェクトと呼ばれます.
    Rapperオブジェクトの処理が終了すると、Rapperオブジェクトに割り当てられたStringDataの内部スロットの元の値が元の状態に戻ります.すなわち、識別子に元の値があり、Rapperオブジェクトは不要なセットのオブジェクトになります.

    🧸 21.4グローバルオブジェクト


    グローバルオブジェクトは、コードが実行される前にJavaScriptエンジンによって任意のオブジェクトより先に作成された特殊なオブジェクトであり、任意のオブジェクトに属さない最上位オブジェクトです.

    21.4.1バージョンのグローバル・プロパティ

  • Infinity:Infinity Propertyは無限大を表す数値Infinityを持つ.
    // 전역 프로퍼티는 window를 생략하고 참조할 수 있다.
    console.log(window.Infinity === Infinity); // true
    
    // 양의 무한대
    console.log(3/0);  // Infinity
    // 음의 무한대
    console.log(-3/0); // -Infinity
    // Infinity는 숫자값이다.
    console.log(typeof Infinity); // number
  • Nan:NaN Propertyは、数値ではないことを示す数値NaNを有する.
    console.log(window.NaN); // NaN
    
    console.log(Number('xyz')); // NaN
    console.log(1 * 'string');  // NaN
    console.log(typeof NaN);    // number
  • 未定義:未定義のプロパティは、元のタイプ未定義の値です.
    console.log(window.undefined); // undefined
    
    var foo;
    console.log(foo); // undefined
    console.log(typeof undefined); // undefined
  • 21.4.2バージョンのグローバル関数

  • evaleval関数は、JavaScriptコードを表す文字列をパラメータとして渡します.渡された文字列コードを実行時に評価して実行します.eval関数は、実行時に既存のスキャンを動的に変更します.ただし,厳格モードはeval関数の既存のスキャンを修正するのではなく,eval関数自体のスキャンを生成する.eval関数によって実行されるコードはJavaScriptエンジンによって最適化されないため、通常のコードよりも処理速度が遅い.したがって、eval関数の使用は禁止されるべきです.
    // 표현식인 문
    eval('1 + 2;'); // -> 3
    // 표현식이 아닌 문
    eval('var x = 5;'); // -> undefined
    
    // eval 함수에 의해 런타임에 변수 선언문이 실행되어 x 변수가 선언되었다.
    console.log(x); // 5
    
    // 객체 리터럴은 반드시 괄호로 둘러싼다.
    const o = eval('({ a: 1 })');
    console.log(o); // {a: 1}
    
    // 함수 리터럴은 반드시 괄호로 둘러싼다.
    const f = eval('(function() { return 1; })');
    console.log(f()); // 1
  • isFinite伝達係数が正常な有限数であるかどうかを確認し、有限数はtrueを返し、無限数はfalseを返す.渡されたパラメータのタイプが数値でない場合は、タイプを数値に変換してチェックを行います.このとき、パラメータがNaNで計算された値であればfalseを返します.
    // 인수가 유한수이면 true를 반환한다.
    isFinite(0);    // -> true
    isFinite(2e64); // -> true
    isFinite('10'); // -> true: '10' → 10
    isFinite(null); // -> true: null → 0
    
    // 인수가 무한수 또는 NaN으로 평가되는 값이라면 false를 반환한다.
    isFinite(Infinity);  // -> false
    isFinite(-Infinity); // -> false
    
    // 인수가 NaN으로 평가되는 값이라면 false를 반환한다.
    isFinite(NaN);     // -> false
    isFinite('Hello'); // -> false
    isFinite('2005/12/12'); // -> false
  • isNaN伝達パラメータがNaNであるかどうかを調べ,その結果を非Lion型に戻した.
    // 숫자
    isNaN(NaN); // -> true
    isNaN(10);  // -> false
    
    // 문자열
    isNaN('blabla'); // -> true: 'blabla' => NaN
    isNaN('10');     // -> false: '10' => 10
    isNaN('10.12');  // -> false: '10.12' => 10.12
    isNaN('');       // -> false: '' => 0
    isNaN(' ');      // -> false: ' ' => 0
    
    // 불리언
    isNaN(true); // -> false: true → 1
    isNaN(null); // -> false: null → 0
    
    // undefined
    isNaN(undefined); // -> true: undefined => NaN
    
    // 객체
    isNaN({}); // -> true: {} => NaN
    
    // date
    isNaN(new Date());            // -> false: new Date() => Number
    isNaN(new Date().toString()); // -> true:  String => NaN
  • parseFloatによって渡された文字列パラメータを浮動小数点数として解析します.すなわち、誤って返されます.
    // 문자열을 실수로 해석하여 반환한다.
    parseFloat('3.14');  // -> 3.14
    parseFloat('10.00'); // -> 10
    
    // 공백으로 구분된 문자열은 첫 번째 문자열만 변환한다.
    parseFloat('34 45 66'); // -> 34
    parseFloat('40 years'); // -> 40
    
    // 첫 번째 문자열을 숫자로 변환할 수 없다면 NaN을 반환한다.
    parseFloat('He was 40'); // -> NaN
    
    // 앞뒤 공백은 무시된다.
    parseFloat(' 60 '); // -> 60
  • parseIntで渡された文字列パラメータを整数に解析して返します.2番目の因数は、アレイ法を表す基数(2~26)を伝達することができる.
    // 문자열을 정수로 해석하여 반환한다.
    parseInt('10');     // -> 10
    parseInt('10.123'); // -> 10
    
    // 10'을 10진수로 해석하고 그 결과를 10진수 정수로 반환한다
    parseInt('10'); // -> 10
    // '10'을 2진수로 해석하고 그 결과를 10진수 정수로 반환한다
    parseInt('10', 2); // -> 2
    // '10'을 8진수로 해석하고 그 결과를 10진수 정수로 반환한다
    parseInt('10', 8); // -> 8
    // '10'을 16진수로 해석하고 그 결과를 10진수 정수로 반환한다
    parseInt('10', 16); // -> 16
    の基数を指定し、10進数をその基数に変換する文字列を指定すると、数値が返されます.prototype.TOStringメソッドを使用します.
    const x = 15;
    
    // 10진수 15를 2진수로 변환하여 그 결과를 문자열로 반환한다.
    x.toString(2); // -> '1111'
    // 문자열 '1111'을 2진수로 해석하고 그 결과를 10진수 정수로 반환한다
    parseInt(x.toString(2), 2); // -> 15
    
    // 10진수 15를 8진수로 변환하여 그 결과를 문자열로 반환한다.
    x.toString(8); // -> '17'
    // 문자열 '17'을 8진수로 해석하고 그 결과를 10진수 정수로 반환한다
    parseInt(x.toString(8), 8); // -> 15
    
    // 10진수 15를 16진수로 변환하여 그 결과를 문자열로 반환한다.
    x.toString(16); // -> 'f'
    // 문자열 'f'를 16진수로 해석하고 그 결과를 10진수 정수로 반환한다
    parseInt(x.toString(8), 8); // -> 15
    
    // 숫자값을 문자열로 변환한다.
    x.toString(); // -> '15'
    // 문자열 '15'를 10진수로 해석하고 그 결과를 10진수 정수로 반환한다
    parseInt(x.toString()); // -> 15
  • encodeURI/decodeURI encodeURI関数は、完全なURIを文字列として渡し、エスケープ処理のために符号化する.
    // 완전한 URI
    const uri = 'http://example.com?name=이웅모&job=programmer&teacher';
    
    // encodeURI 함수는 완전한 URI를 전달받아 이스케이프 처리를 위해 인코딩한다.
    const enc = encodeURI(uri);
    console.log(enc);
    // http://example.com?name=%EC%9D%B4%EC%9B%85%EB%AA%A8&job=programmer&teacher
    
    const uri = 'http://example.com?name=이웅모&job=programmer&teacher';
    
    // encodeURI 함수는 완전한 URI를 전달받아 이스케이프 처리를 위해 인코딩한다.
    const enc = encodeURI(uri);
    console.log(enc);
    // http://example.com?name=%EC%9D%B4%EC%9B%85%EB%AA%A8&job=programmer&teacher
    
    // decodeURI 함수는 인코딩된 완전한 URI를 전달받아 이스케이프 처리 이전으로 디코딩한다.
    const dec = decodeURI(enc);
    console.log(dec);
    // http://example.com?name=이웅모&job=programmer&teacher
  • encodeURICComponent/D e c o deURICComponent encodeURICComponent関数は、URIコンポーネントを引数として符号化することを受け入れる.
    // URI의 쿼리 스트링
    const uriComp = 'name=이웅모&job=programmer&teacher';
    
    // encodeURIComponent 함수는 인수로 전달받은 문자열을 URI의 구성요소인 쿼리 스트링의 일부로 간주한다.
    // 따라서 쿼리 스트링 구분자로 사용되는 =, ?, &까지 인코딩한다.
    let enc = encodeURIComponent(uriComp);
    console.log(enc);
    // name%3D%EC%9D%B4%EC%9B%85%EB%AA%A8%26job%3Dprogrammer%26teacher
    
    let dec = decodeURIComponent(enc);
    console.log(dec);
    // 이웅모&job=programmer&teacher
    
    // encodeURI 함수는 인수로 전달받은 문자열을 완전한 URI로 간주한다.
    // 따라서 쿼리 스트링 구분자로 사용되는 =, ?, &를 인코딩하지 않는다.
    enc = encodeURI(uriComp);
    console.log(enc);
    // name=%EC%9D%B4%EC%9B%85%EB%AA%A8&job=programmer&teacher
    
    dec = decodeURI(enc);
    console.log(dec);
    // name=이웅모&job=programmer&teacher
  • 21.4.3黙示戦闘

    // 전역 변수 x는 호이스팅이 발생한다.
    console.log(x); // undefined
    // 전역 변수가 아니라 단지 전역 객체의 프로퍼티인 y는 호이스팅이 발생하지 않는다.
    console.log(y); // ReferenceError: y is not defined
    
    var x = 10; // 전역 변수
    
    function foo () {
      // 선언하지 않은 식별자에 값을 할당
      y = 20; // window.y = 20;
    }
    foo();
    
    // 선언하지 않은 식별자 y를 전역에서 참조할 수 있다.
    console.log(x + y); // 30
    上記の例では、foo関数が呼び出されると、JavaScriptエンジンは、scopeチェーンで宣言された変数でy変数に値を付与しているかどうかを最初にチェックします.foo関数のscopeとグローバルscopeは、y変数の宣言がどこにも見つからないため、参照エラーが発生します.しかしJavaScriptエンジンはy=20をwindowとする.y=20は、グローバルオブジェクト上でPropertyを動的に作成するように解釈される.最終的に、yはグローバル変数のようにグローバルオブジェクトのpropertyになります.この現象を黙示戦と呼ぶ.yは、変数ではなくグローバルオブジェクトのPropertyとして追加されるだけなので、変数エスケープは発生しません.また、グローバル変数はpropertyですが、delete演算子として削除することはできません.