JavaScript基礎概念の勉強ノート

初めに

このノートはJavaScriptを勉強して3ヶ月以来の振り返りであり、まだまだ勉強中の者ですので不適切な表現があればご指摘いただけると幸いです。
また、日本語と英語が混在して読みづらいと思いますが、どちらでも身につけたい能力として習慣化されるまで頑張って書いてみたいと考えています。どうかご了承ください。 #どちらもネイティブではありません

プログラムの執行プロセス（大雑把な説明だけど）

• プログラム ⇒ Compiler（コンパイラ） ⇒ 機械語（0と1）
• 「変数」：値を記憶する場所、またはその名前（ものを置くボックス的な感じ）
• 「=」：「=」が1つの場合は、assign（与える・配属する）です。right-hand side（「=」の右側の値）をleft-hand side（「=」の左側の値）に与える・配属させるという意味です。記憶する場所というボックス（変数）に、値を保存する感じです。

var a = 123
console.log(a) // 123

console.log() ⇒ print（出力）。// ⇒ 注釈の書き方、出力の結果は123。logは数学のlogではなく、記録という意味でconsoleと合わせて「記録を出力」。

var b = 'hellow' // ''（single-quotation）の中はString(文字列)
console.log(b + 'world') // hellow world 

データ型の識別はとても大事です。最初から覚えておけば楽だし、あとでコーディングの時もバグが少なくなるんです！✨

Array（配列）

ある生徒のスコアを保存したいとき、さき学んだ書き方ですぐできる！

var score1 = 65
var score2 = 30
var score3 = 80
console.log(score1 + score2 + score3)

しかし学生が100人いたら、国語、数学、英語のスコアなど、100*3＝300行を書きます？それはないんですよね...なので、Array（配列）を使いましょう！

Array（配列）の書き方

var score = [] // 今は何も入っていない空きの配列
score[0] = 65
score[1] = 30
socre[2] = 80

Arrayは一連のデータ（値）を保存する場所。一連のデータから値を取り出すために座標が必要なので、[]の中で数字で表す。0から始まる世界です！

console.log(score[0] + score[1] + score[2]) // 175

あれ？この書き方だけで値を入れたの？と疑問に思うかもしれないが、まずarrayはボックスの中のもの（値）に座標の付箋（index, インデックス）を付けて、座標によってもの（値）を呼び出す。
↑を書き換えれば、↓のようになる

var score = [65, 30, 80] 
console.log(score[0] + score[1] + score[2]) // 175
console.log(score) // [65, 30, 80]

注意点1：65, 30 , 80のデータ型はNumber、見た目のようにわかりやすく数字ですね！ しかし’65', ‘30’ , ‘80’は数字？それとも…？
答えはString(文字列)です！’’（single-quotation）で包まれた値は、中身の内容に関わらず皆文字列です。
注意点2：arrayをコンソールしてもarrayです！
補足：Object ⇒ 対象または物を指す。これからObject/オブジェクトで書く。

if 条件式

このスコアは合格？不合格？ if条件式で判断してみましょう！

var score = 80
if (score >= 60) {
	console.log('良い夏休みを！')
} else {
  console.log('補講で待ってるぞ')
}

これが「if条件式」基本の書き方です。
人間の言葉で訳すと、

もしも　(この中がtrue・真実ならば) {
		この中の行動を実行してください
		} さもなければ {
		この中の行動を実行してください
		}

上の例は 80 >= 60 がtrueなので、console.log(‘良い夏休みを！’)が実行されて出力する。
if条件式は表計算ソフトの使い方とかなり似ているが、JavaScriptの中、一つケースが満足されたら、ほかのケースは実行しないという特性がある。つまり、

if (true) {
	do this
} or {
	do this
}

↑この書き方はpseudocode(擬似コード)と言います。
ケースが三つ以上の場合は下のように書きます。

var score = 59
if (score >= 60) {
	console.log('良い夏休みを！')
} else if (score = 59) {
	console.log('見逃してあげようか...')
} else {
  console.log('補講で待ってるぞ')
}
// コンソール出力：見逃してあげようか...

また、JavaScriptはsingle thread（シングルスレッド）、処理の開始から終了まで1本の線で書けるような、枝分かれしない処理です。
例のif条件式、複数のケース条件を満たしても、一番上のケースだけ実行する。
（59だと、else ifとelseのケース条件どちらも満たしているが、一番上だけconsole。）

var score = 59
if (score >= 60) {
  console.log('良い夏休みを！') 
} else if (score < 60) {
  console.log('補講で待ってるぞ')
} else { 
  console.log('見逃してあげようか...')
}
// コンソール出力：補講で待ってるぞ...

Loop ループ処理

条件が満たされるまで、私は転生の輪廻から逃げられない…！
（何とか小説のタイトルを真似してみたけど失敗した気がする😅）

While loop

var i = 1
while (i < 10) {
	console.log(i)
	i++ // i = i + 1 or i += 1
}

補足：「i++」は、 i = i + 1 、または i += 1 と表している。
ループ処理は、終了条件が満たされるまで繰り返して反復処理してくれることです。

while (終了条件がfalseになる) {
	i を出力
	iを、自分の値に+1という値をassign（与える）
}

これを全部実行するのがワンセットです！つまりこうなるよね。
i：私、1から頑張る！
while：じゃ終了(false)までよろしくな～

i = 1
while (1 < 10) // true ⇒ 続行
{ 
  console.log(1)
	i++ // i = 1 + 1 → i = 2　// iという記憶する場所に、数字2を与える
}
(次のループから、 iが2になった。)
i = 2
while (2 < 10) // true ⇒ 続行
{
	console.log(2)
	i++ // i = 2 + 1 → i = 3
}
...
...
i = 10
while (10 < 10) // false ⇒ 終わる！
{
	...
}

この繰り返し処理のプロセスを実行することは、iteration（反復）と言います。
そして、反復処理したあとiを出力してみたら、

var i = 1
while (i < 10) {
  console.log(i)
  i++
}
console.log(i) // 10

iという変数は所詮、値を記憶する場所として、目に見えない反復処理の中すでに何度も値が上書きされて変化している。
最後はi = 10、whileの終了条件(false)に満たしたら、脱出みたいな感じでループの輪廻からやっと逃げられて、そしてiの値が変わったままでプリントアウトされる。

For loop（for ループ）

for (var i = 1; i <= 10; i++) {
	console.log(i)
}
console.log('i:', i) // この書き方は 'i: ' + i　と同じ

forループもwhileと同じ、ただ書き方が少し違って、開始条件と終了条件、そしてiterationの変数と計算の仕方も全部()に書きます。
補足：iはただの変数名、別の名前で宣言しても構わない。

// 処理のプロセス
var i = 1; 
i <= 10; // true ⇒ 続行
console.log(i); // 1
i++ // 2 一番上の行に書かれても、プロセスの段階は一番最後です

var i = 2;
i <= 10; // true ⇒ 続行
console.log(i); // 2
i++ // 3
...
...

var i = 11;
i <= 10; // false ⇒ loopから脱出、最後のconsoleに入る
console.log('i:', i) // i: 11

ArrayとLoop

var score = [35, 40, 70, 50, 85]
var sum = 0 
for (var i = 0; i < score.length; i++) { // .lengthは長さ
  console.log(score[i]) // i位置の値を出力
  sum = sum + score[i] // 毎回sumの値に、scoreの中でi位置の値を足す 
}
console.log(sum) // 280

Arrayは0からインデックスを付けるが、長さは物理的？に計算されるので、score[]は5つの値が入ってることから、長さは5です。iは0からカウントして、0, 1, 2, 3, 4、これも5回反復処理して、計算結果を出力した。

Function 関数式

関数式は、ある機械ボックスの中に指示されることをやる、呼び出されるまではじっとしていると自分が解釈している。他の数式と協同して作業すると壊れやすいから、できるだけ単純作業をやらせる。

// ↓こいつがaddという関数式ですよってJavaScriptに宣言する
function add(a, b) { // aとbは引数（argument）、入れる値の代名詞で1つのとき省略可
	console.log('a:', a, 'b:', b)
	console.log(a + b)
	return a + b // a+bの結果を返す
}

// 関数式add()を呼び出し、引数を入れる
console.log(add(10, 20)) // 30

//引数は入れる位置に対応しながら関数式のプロセスに入る
console.log(add(20, 10, 5)) // 30 // 引数は二つだけが必要なわけ

return

returnを書かないと一番下のconsoleはundefinedを出力する。なぜかというと、関数式はただ指示通りやっていて、returnを書かなかったらやることを済まして終わるだけ。
値がもらえない状態でconsoleはundefinedしか出力しない。（undefinedは存在するけど代入されてない、見つからない、または定義されてないという。関数式の場合は前者に当たって、変数名が定義されてないのが後者。）なので結果の値を返してほしいとき必ず書く。
補足：関数式のundefinedが存在するけど代入されてない、見つからないと言っているのは、この関数を確かに呼び出されて動作したけど、値が返されてないから見つからないんだよ！って感じているのでこの書き方をしました。😅

関数式はループとほかの数式などと違い、プログラムの世界の空（上層）にいるので、地上（中層）に走ってるsingle thread（シングルスレッド）とは離れていて、どこに書かれても影響されません。シングルスレッドで呼び出される時だけ現れる。不思議な存在です。😄
（ちなみに深層部にはプロトタイプチェーン、コンパイラなどがいると、これらは自分が勝手に解釈している。）

ノートを整理しながらこれを投稿して自分の振り返りにもためになるだなあと思って、とりあえずアウトプットしてみました！