【JavaScript】関数とオブジェクト⑱ ビルトインオブジェクトとラッパーオブジェクト

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

• 関数とオブジェクトについての理解を深める

#本題
###1.ビルトインオブジェクト

ビルトインオブジェクトとは、コード実行前にJSエンジン側で自動的に生成されるオブジェクト

具体例.

String, Object, Number, Function, 
Math, Boolean, Date, Symbol, etc....

####例1

windowオブジェクトにビルトインオブジェクトが格納されているか

Console.

window
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
alert: ƒ alert()
    :
    :
AbortController: ƒ AbortController()
AbortSignal: ƒ AbortSignal()
AbsoluteOrientationSensor: ƒ AbsoluteOrientationSensor()
AbstractRange: ƒ AbstractRange()
Accelerometer: ƒ Accelerometer()
AggregateError: ƒ AggregateError()
AnalyserNode: ƒ AnalyserNode()
Animation: ƒ Animation()
AnimationEffect: ƒ AnimationEffect()
AnimationEvent: ƒ AnimationEvent()
AnimationPlaybackEvent: ƒ AnimationPlaybackEvent()
AnimationTimeline: ƒ AnimationTimeline()
Array: ƒ Array()
     :
     :

大文字から始まるものはすべてビルトインオブジェクト
殆どがインスタンス化をするためのコンストラクター関数になる

Console.

window.Array
ƒ Array() { [native code] }

例えば、配列を定義するArrayを実行するとnative codeと出力される。JSエンジン側で用意されたものなので、中身を確認できない。

配列を使ってビルトインオブジェクトを定義する

// コンストラクター関数を定義
// new演算子で初期化 window.Array(windowは省略できる)
const array = new Array(1,2,3,4);
// (4) [1, 2, 3, 4]配列として出力される
console.log(array);

###2.ラッパーオブジェクト

ラッパーオブジェクトとはプリミティブ値を内包するオブジェクト

####例1

文字列を定義するラッパーオブジェクト

// コンストラクター関数を定義
// new演算子でStringを初期化
const a = new String("Hello");
console.log(a);

この実行結果を見てみると下記の通りとなっている

Console.

String {'Hello'}
0: "H"
1: "e"
2: "l"
3: "l"
4: "o"
length: 5
[[Prototype]]: String
anchor: ƒ anchor()
at: ƒ at()
big: ƒ big()
blink: ƒ blink()
   :
   :
toLocaleLowerCase: ƒ toLocaleLowerCase()
toLocaleUpperCase: ƒ toLocaleUpperCase()
   :
   :

Helloが一文字ずつ入っている
また、使用できるメソッドが並んでいる

試しにメソッドの１つを使用する

const a = new String("Hello");
// HELLOと大文字で出力される（大文字にするメソッド）
console.log(a.toLocaleUpperCase());

####例2

試しに数値を入れて、やってみる

// 数値を引数に設定
const b = new Number(100);
// Number {100}という数値をもったオブジェクトが出力される
console.log(b);
// 試しにtoExponentialというメソッドを使用すると
console.log(b.toExponential());
// 1e+2と出力される（10の二乗を意味する）

####例3

上記のように、明示的にインスタンス化は基本的に行わず、
下記のように表現する

// new Stringを省略
const a2 = "hello";
// この場合でもString型であると認識し、toLocaleUpperCaseを使用できる
console.log(a2.toLocaleUpperCase());
// 下記のように書くことも可能
const a3 = "hello".toLocaleUpperCase();
// 同様にHELLOとシュル力される
console.log(a3);
// 数値も同様

今日はここまで！

#参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム