目次
概要
UdemyでJavaScriptを勉強した時のメモ
JavaScript概要
ECMAScript |
JavaScriptの基本部分の仕様を定めているもの、バージョンによって「ES5」や「ES6」のような表記をする
|
JavaScript |
Netscapeが開発した言語、後にECMAScriptによって仕様が標準化された。ECMAScriptに準拠している言語の1つ
|
TypeScript |
JavaScriptを静的型付けにした言語、ECMAScriptにも準拠している |
ブラウザで実行されるJavaScriptとサーバー上で実行されるJavaScript
ブラウザ上で実行されるJavaScriptは各ブラウザ毎に提供されているJavaScript実行エンジンで動作している(例:
Chromeは「V8」エンジン)
サーバー上で実行されるJavaScriptはNode.js等のソフトウェア上で動作する
【参考】V8エンジン
Windowオブジェクト
JavaScriptにあらかじめ用意されてるオブジェクトで、グローバルオブジェクトと呼ばれる。
JavaScriptであらかじめ用意されている関数やオブジェクトは、全てWindowsオブジェクトにある。
windowオブジェクトのプロパティにアクセスするときにwindowを省略出来る(例:window.alert(‘a’)
-> alert(‘a’))
【参考】WEB API > Windowオブジェクト
コンテキスト
≒スコープ
コンテキストの種類
グローバルコンテキスト |
関数の外側、Javascriptのファイルの全体 |
関数コンテキスト |
関数の内側 |
ホイスティング
コンテキスト内で宣言した変数や関数の定義をコード実行前にメモリに配置すること
以下のように、関数の宣言が関数の呼び出しより後にある場合でも、その関数を実行することができる。
変数のホイスティングは初期化ができないため、undefinedとなる(varを除く)。
それぞれのコンテキストを作成する際にホイスティングが行われる。
hello();
function hello(){
console.log('HELLO');
}
変数宣言の種類
const |
定数 |
let |
変数 |
var |
非推奨、同じ変数名を宣言できる、スコープが関数全体となる(ブロックスコープは無視できる)
|
データ型の種類
基本データ型
型 |
英名 |
概要 |
文字列型 |
String |
“Hello” |
論理型 |
Boolean |
true |
数値型 |
Number |
12 |
undefined |
Undefined |
undefined |
長整数型 |
BigInt |
大きな数字を扱う時に使用する
|
シンボル型 |
Symbol |
一意の値を作成できる |
その他
型 |
英名 |
概要 |
オブジェクト型 |
Object |
{a: ‘hello’} |
null |
Null |
null |
オブジェクトの書き方
関数、オブジェクトも格納できる
※
オブジェクトのプロパティとして定義されている関数のことをメソッドと呼ぶ
let object ={
name: 'tanaka',
age: 25,
greet: function(){
console.log('Hello');
},
family: {
name: 'jiro'
}
}
オブジェクトへのアクセス方法
ドット記法
object.name
ブラケット記法
object['name']
オブジェクトの省略記法
キーとバリューが同じ変数名の場合、バリューを省略できる
function hello(){
console.log('hello');
}
let object = {
hello
}
functionの省略
const company = {
name: 'google',
getName: function() {
return this.name;
}
}
↓
const company = {
name: 'google',
getName() {
return this.name;
}
}
関数宣言の種類
通常
function a(){ //処理内容 }
関数式
const a = function(){ //処理内容 }
デバッグの方法
Chromeの開発者ツールで直接ブレークポイントを貼る or
コードを一時停止したい場所で以下のコードを記述して、開発者ツールを開いた状態で実行する
debugger;