概要

JavaScriptの基本文法のまとめを、学習のアウトプット用に一覧化した。
各種サイトを参考に、自分なりに理解ができているか文法をアレンジし実行確認している。
セミコロンを忘れがち。

環境

実行環境：VScode
バージョン:ES6

参考サイト：
とほほのJavaScript入門
Progate-JavaScriptスライド(一部引用)

基本文法一覧

文字の出力 & コメントアウト

JavaScript

//コメントアウト
console.log('Hello World!');
console.log("Hello World!!");

Hello World!
Hello World!!

'(シングルクオーテーション)でも"(ダブルクオーテーション)でもいい。

変数定義と更新

JavaScript

// <変数の宣言> <変数名>　= <代入する値>;
let name = "Honda";
console.log(name);

//変数の更新 ※変数の宣言はしない
name = "Kawasaki";
console.log(name);

Honda
Kawasaki

変数定義はlet

定数定義 (更新できない)

JavaScript

//<定数の宣言> <定数名> = <代入する値>;
const name = "Yamaha";
console.log(name);

Yamaha

定数定義はConst

Ex.定数なので更新はできない

const name = "Yamaha";
console.log(name);

name = "Suzuki";
console.log(name);

Error

name = "Suzuki";
     ^
TypeError: Assignment to constant variable.

テンプレートリテラル

JavaScript

const name_1 = "Honda";
const name_2 = "Kawasaki";

//``(バッククォーテーション)で囲み、${}をつける
console.log(`これは${name_1}です。`);
console.log(`あれは${name_2}です。`);

これはHondaです。
あれはKawasakiです。

数値と計算

JavaScript

//四則演算
console.log(1 + 1);
console.log(2 - 1);
console.log(1 / 2);
console.log(2 * 2);

//剰余
console.log(10 % 7);

比較演算子、等価演算子、厳密等価演算子

JavaScript

const age = 16;

//比較演算子
console.log(age < 16);  //定数ageより小さい?　⇒ False
console.log(age <= 16); //定数age以下のため?　⇒ True
console.log(age > 16);  //定数ageより大きいため?　⇒ False
console.log(age >= 16); //定数age以上のため?　⇒ True

//等価演算子
console.log(age == 16);   //定数ageと等価ですか？　⇒ True
console.log(age != 16);   //定数ageと等価ではないですか?　⇒ False
console.log(age == "16"); //暗黙的変換が行われる　⇒ ※True

//厳密等価演算子
console.log(age === 16);   //定数ageと厳密に等価ですか？　⇒ True
console.log(age !== 16);   //定数ageと厳密に等価ではないですか？　⇒False
console.log(age !== "16"); //文字列と数値は別物ですと厳密に判断　⇒ ※False

真偽値(TrueかFalseか)を判断し返す。

論理演算子

// AND , かつ , ∩
True && True ⇒　True
True && False ⇒ False
False && True ⇒ False
False && False ⇒ False

// OR , または , ∪
True || True ⇒　True
True || False ⇒ True
False || True ⇒ True
False || False ⇒ False

条件分岐 if文

JavaScript

if (条件式1){
    条件1がTrueの処理;
}else if(条件式2){
    条件1がFalseで条件2がTrueの処理;
}else{
    上の条件式がどれもFalseの処理;
}//※ここのセミコロンは不要

条件式の真偽値(TrueかFalseか)で判断し処理を返す。

JavaScript

const age = 17;
const license = true;

if (age >= 20 && license) {
    console.log("車に乗れます。");
} else if (age >= 16 && license){
    console.log("車は乗れませんが、バイクに乗れます。");
} else if (age >=20 || license){
    console.log("運転できる可能性を秘めています。");    
}else{
  console.log("運転できません。");
}

車は乗れませんが、バイクに乗れます。

条件分岐switch文

JavaScript

switch (){
    case 値1: //コロン
        「条件の値」が「値1」と等しい処理;
        break;

    case 値2: //コロン
        「条件の値」が「値2」と等しい処理;
        break;
}

caseに置いた値が等しい場合、処理を返す。
case毎にbreakを置かないとすべてのcaseが返される。

JavaScript

const color = "赤"

switch(color){
    case"赤":
        console.log("STOP！");
    break;
    case"黄":
        console.log("WARNING！");
    break;
    default:
        console.log("OK");
    break;
}

STOP!

繰り返し処理 While文

JavaScript

While (条件式){
 処理;
}

条件式に繰り返す条件を入れ、処理を繰り返す。

JavaScript

let number = 1;

while (number <= 10){
  console.log(number);
  number += 1;
}

繰り返し処理 for文

JavaScript

for (変数定義; 条件式; 変数の更新){
    処理;
}

JavaScript

for(let number = 1; number <= 10; number += 1){
    console.log(number);
}

配列定義・取得・更新・繰り返し処理

JavaScript

//定義
const model =["SuperCub50", "CBR250", "CB125"];

//取得
console.log(model);
console.log(model[0]);
console.log(model[2]);

//更新
model[2] = "NC750";
console.log(model);
console.log(model[2]);

//繰り返し処理 : 変数iがリストのインデックスの数まで(lengthで数える)繰り返す
for (let i = 0; i < model.length; i++){
    console.log(model[i]);
}

//要素の取得
['SuperCub50', 'CBR250', 'CB125']
SuperCub50
CB125

//更新後
['SuperCub50', 'CBR250', 'NC750']
NC750

//繰り返し処理
SuperCub50
CBR250
NC750

オブジェクト　プロパティの定義・取得・更新

1つのオブジェクトの場合

JavaScript

//定義
const model = "SuperCub50";
const superCub50 = {maker: "Honda", cc: 50, price: 200000};

//取得
console.log(superCub50);
console.log(`${model}のメーカーは${superCub50.maker}です。`);

//更新
superCub50.price = 250000
console.log(superCub50);

//

//取得
{maker: "Honda", cc: 50, price: 200000}
SuperCub50のメーカーはHondaです。

//更新
{maker: "Honda", cc: 50, price: 250000}

オブジェクトを要素に持つ場合

JavaScript

//リストの中にオブジェクトを入れる
const honda_items = [
    {name: "SuperCub50", cc: 50, price: 250000},
    {name: "CBR250", cc: 250, price: 850000},
    {name: "NC750", cc: 750, price: 1000000}
]

//(1)リストの取り出し方で要素(オブジェクト)を取得
console.log(honda_items[1]);

//(2)要素の中のオブジェクトのプロパティを取得
console.log(honda_items[1].name);

//(3)繰り返し処理 + 条件分岐
for (let i= 0; i < honda_items.length; i++){
    const honda = honda_item[i];
    if (honda.cc >= 400){
        console.log(`${honda.name}の値段は${honda.price}です。大型二輪免許が必要です。`);
    }else if (honda.cc >= 51) {
        console.log(`${honda.name}の値段は${honda.price}です。普通自動二輪免許以上が必要です。`);
    }else{
        console.log(`${honda.name}の値段は${honda.price}です。自動車免許か、原動機付き自転車免許が必要です。`);
    }
}

//(1)
{name: "CBR250", cc: 250, price: 850000}

//(2)
CBR250

//(3)
SuperCub50の値段は250000です。自動車免許か、原動機付き自転車免許が必要です。
CBR250の値段は850000です。普通自動二輪免許以上が必要です。
NC750の値段は1000000です。大型二輪免許が必要です。

関数定義

function宣言

JavaScript

function 関数名 (引数1, 引数2) {
 処理;
}

//呼び出し
関数名(引数1, 引数2);

最も基本的な関数定義

関数式

JavaScript

const 定数名 = function(引数1, 引数2){
    処理;
}

//呼び出し
定数名(引数1, 引数2);

function宣言と関数式の違い

function宣言は、JavaScriptがスクリプトやコードブロックを実行するまでに、関数オブジェクトを生成
⇒定義された関数名を先に呼び出せる。

関数式は、その式が実行されるときに関数オブジェクトを生成
⇒定義された関数を先に呼び出すとエラーが起きる。

アロー構文

JavaScript

const 定数名 = (引数1, 引数2) =>{
    処理;
}

//呼び出し
定数名(引数1, 引数2);

出力は関数式と同じ。=>は⇒(矢印)と思えばいい。

return

JavaScrip

const add = (a, b) =>{
    return a + b;
}

add(1, 2);

returnで戻り値を返し、関数の処理を終了させる。
以降の処理は実行されない。