Zenn
🌐

JavaScript基礎Ⅰ

2022/10/09に公開
JavaScript
tech

変数の宣言

let(ES6〜)
const(ES6〜)
var(非推奨)

let a = 0;
const b = 1;
var c = 2;

関数

一連の手続き（処理）を実行する文の集まり。
関数を宣言するとなどと言う

・関数に渡す変数が　引数
・関数の呼び出し元に返す値が戻り値

function fn (引数1, 引数2){
return 戻り値:
}

fn(引数１, 引数２)


function fn(x, y) {
  let z = x + y;
  console.log(z);
}

fn(30, 2);

//関数式　無名関数を　a として定義できる　aの初期化がされないので以降で呼び出す
const a = function(){

}

オブジェクト

名前（プロパティー、またはキー）
値（バリュー）をペアで管理する

名前：値
名前：関数 無名関数※関数に名前をつけずに記載することが一般的
名前：オブジェクト

オブジェクトのプロパティに格納されている関数の事をメソッドという

プロパティーへのアクセス方法
ドット記法
obj.name
ブラケット記法
obj['name]

let obj = {
	property1: 'hello',
	property2: function(){
	},
	property3:{
		d:'bye'
	}
}

実行環境

  • JavaScriptエンジンで実行される。
  • 一番シェアがあるのはV8と呼ばれるエンジン
  • JavaScriptからWeb APIsを通してブラウザを操作する。

JavaScriptの実行前にはグローバルオブジェクトとthisが準備される

実行コンテキスト

コードを実行する際の文脈・状況

・グローバルコンテキスト
・関数コンテキスト
・モジュールコンテキスト

グローバルコンテキスト

使えるもの
・グローバルオブジェクト
・this
・実行中のコンテキストないの変数・関数　要は宣言した変数と関数が使える

関数コンテキスト

実行中のコンテキストないの変数・関数
・arguments
・super
・this
・外部変数


let a = 0; //外部変数

function b() {
  // 関数コンテキスト
  console.log(this, arguments, a);
}

b();

コールスタック

コンテキストの積み重ね


function a(){
}

function b(){
 a();
}

function c(){
 b();
}

c();

この場合、実行中のコンテキストはaコンテキストになります。
コールスタックの一番上が実行中のコンテキストなるわけです。

aコンテキスト
ｂコンテキスト
cコンテキスト
グローバル　←まずこれが生成される

処理が終わるとコンテキストが消滅していく！！
コールスタック

後から積み重なった物が一番最初に消滅する。
後入先出

ホイスティング

コンテキスト内で宣言したか変数や関数の定義をコード実行前にメモリーに配置すること
コンテキストが発生するたびに呼ばれる
a();　実行前にメモリーに配置される


//この文法でもエラーは起こらない
a();

function a(){
 console.log('a is called');
}

//---------------------------
console.log(b);
var b = 0;
//結果は、undefined

//イメージ的には、こんな感じ　ちなみにvarは非推奨！！
// var 初期値が入るundefined
var b;
console.log(b); //undefined
b=0;


//Uncaught ReferenceError: Cannot access 'b' before initializationat main.js
// let,const を使用した場合はJavaScriptエンジンによってundefinedの初期化が行われない為
// bというメモリスペースは確保されている

console.log(b);
let b = 0;

Discussion