JavaScriptの基本

概要

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;

駆け出しエンジニアの勉強日記