JavaScriptの基礎文法まとめ
JavaScriptの基礎文法を理解しましょう。
ここではJavaScriptの基礎中の基礎の部分が書かれているので、
しっかりと確認しておきましょう。
varを使うとブロックスコープは無視されるため、関数スコープのみです。
またホイスティングでもvarのみundefinedが初期値になります。
また、再宣言はvarのみ可能ですが、エラーの元なので使わない方がいいでしょう。
varは非推奨なので、使わないようにしましょう。
0nはBigIntです。
NaNはNot a Numberの略で、数値と期待されている場合で数値でなかったときにNaNが返されます。preseInt(“")など空を整数化しようとするとNaNが返されます。
true,falseの確認の仕方は、Booleanを使うといいです。
目次から読む
JavaScriptを書く場所について
- HTML内で記述する
- 別のJavaScriptフォルダから参照する
<script src="ファイルの階層/ファイル名.js></script>'use strict’;
JavaScriptを書くときは’use strict’;を宣言します。 'use strict’;は、厳密なエラーチェックをするための宣言です。 書かなくてもJavaScriptは認識されるのですが、書いておくとエラーが発見しやすくなるので便利です。console.log
console.logはブラウザのコンソール部分に表示するための文言です。 JavaScriptでは大文字と小文字を厳密に区別するので、注意が必要です。 JavaScriptでは、 シングルクオテーション（’）かダブルクオテーション（"）で囲うことができます。 下のどちらでもOKです。console.log('hi!');
console.log("hi!");
console.log('hi! It's me');バックスラッシュ+何か
バックスラッシュ+何かでいろいろできます。 バックスラッシュ+n→改行 バックスラッシュ+t→タブ文字列の連結
+をいれることで文字列の連結ができる。console.log('hi!' + "It's me");四則演算
JavaScriptでは、次の四則演算が可能です。- +足し算
- -引き算
- *掛け算
- / 割り算
- % 余り
- ** べき乗
定数
がずお君がマンガを月に3冊500円で買っているとすると、いくらになるかを計算したい場合、次のように書きます。console.log(500 * 3);console.log(500 * 5);const price = 500;const price = 500;
console.log(price * 3);
price = 600;
console.log(price * 3);変数
変数は、letで宣言します。let price = 500;
console.log(price * 3);宣言による機能の違い
| タイプ | 再代入 | スコープ | 初期化 | 再宣言 |
|---|---|---|---|---|
| let | ○ | ブロック | ✗ | ✗ |
| const | ✗ | ブロック | ✗ | ✗ |
| var | ○ | 関数 | undefined | ○ |
定数と変数の命名規則について
定数と変数の名前の付け方には、いくつかルールがあるのでみていきましょう。- 英数字、＄、_のみ使用可能
- 数値からは始められない
- 大文字小文字は区別される
- 予約語は使えない
変数の計算
変数に変数を足したいということはよく起こります。let price = 100;
price = price + 10;price += 10;price *= 10;price = price + 1;
price += 1;
price ++;price--;JavaScriptのデータ型
JavaScriptのデータ型には、プリミティブ型とオブジェクトがあります。 オブジェクトはプリミティブ型以外を指します。 JavaScriptでは以下のデータを扱うことができます。| データ型 | 例 | |
|---|---|---|
| プリミティブ型 | 文字列(String) | 'おはよう。’ “Good" |
| 数値（Number） | 1 2 3 -20 5.5 | |
| undefined | undefined | |
| Null | null | |
| 真偽値(Boolean) | true false | |
| シンボル(Symbol) | 一意の値 | |
| BigInt | 15n | |
| オブジェクト(プリミティブ型以外) | オブジェクト(Object) | {s:100, m: 200} |
データ型の確認方法
これらのデータ型は、typeofという演算子を使うとデータ型を調べることができます。console.log(typeof 'こんにちは');
console.log(typeof 100);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);プリミティブ型
プリミティブ型の変数には値が格納されます。 その値は一度作成すると変更することができません。 このプリミティブ型の性質をimmutable(不変)といいます。 letで宣言すると再代入できますが、メモリ空間でのアドレスの参照場所が変更されるだけで、メモリ空間上に一度設定した値を変更しているのではないため、immutableとなります。 また、プリミティブ型でメソッドがいろいろ使える仕組みとしてラッパーオブジェクトの存在があります。 こちらの記事を参考にしてみてください。undefined
undefinedは定義されていないという意味です。 宣言していない、値を代入していないときに現れます。null
nullはナルとかヌルと呼ばれています。値がなにも入っていない空の意味です。シンボル(Symbol)とは
シンボル(Symbol)とは、プロパティの重複を避けるために、必ず一意の値を返す関数のことです。 シンボルはプリミティブ型です。const symbol = Symbol();
console.log(symbol); //Symbol()const hi1 = Symbol('hi');
const hi2 = Symbol('hi');
console.log(hi1, hi2); //Symbol(hi) Symbol(hi)
console.log(hi1 === hi2);//falseconst str = new String('yamada');
console.log(str);
//Symbol(Symbol.iterator)データ型であるオブジェクト
オブジェクトは、名前がついた参照を管理する入れ物です。 データ型であるオブジェクトには、オブジェクトの他にも、配列や関数など、プリミティブ型以外のすべてが含まれます。 データ型であるオブジェクトは、変数の参照が格納されます。 オブジェクトの値を変更するとき、参照先を変更するのではなく参照先にある値を変更することになるので、値の変更をすることができます。 このオブジェクトの性質をmutable(可変)といいます。 オブジェクトの場合、変数が{}への参照を格納します。その{}の中の変数が値を格納しています。その値というのはメモリ空間のどこかに存在していますが、オブジェクトはそれへの参照を保持しているだけということです。プリミティブ型と違い、変数と値の間に1段階入っているので、オブジェクトは{}を参照しているだけのため、値の変更にも対応できます。 オブジェクトの基本操作については、JavaScriptのオブジェクトの基本操作方法を参考にしてみてください。プリミティブ型とオブジェクトのコピーの違い
プリミティブ型の値のコピーは、参照先の値自体がコピーされます。オブジェクトのコピーでは、オブジェクトの参照がコピーされます。プリミティブ型のコピーの例
例えば、プリミティブ型の数値を使った例を紹介してみます。{
let num1 = 1;
let num2 = num1;
num1 = 3;
console.log(num1); //3
console.log(num2); //1
}データ型がオブジェクトのコピーの例
次に、同じようなことを、データ型がオブジェクトである配列でやってみます。{
let num1 = [1, 2];
let num2 = num1;
num1[0] = 3;
console.log(num1); //[3, 2]
console.log(num2); //[1, 2]ではなく[3, 2]
}データ型がオブジェクトでプリミティブ型と同じ結果を得る方法
データ型がオブジェクトをプリミティブ型の結果のように、コピーするにはどうしたらいいのでしょうか？ そのためには、num2にnum1を代入するときに、スプレッド構文にして値を格納します。 つまり、下の通りです。{
let num1 = [1, 2];
let num2 = [...num1];//スプレッド構文
num1[0] = 3;
console.log(num1); //[3, 2]
console.log(num2); //[1, 2]
}プリミティブ型とオブジェクトの比較の違い
プリミティブ型は、値が比較されます。 オブジェクト参照が比較されます。const a = {
p: 3
}
const b = {
p: 3
}
console.log(a === b);//false
console.log(a.p === b.p);//trueJavaScriptの計算での注意点
"で囲めば文字列として認識されるというルールなのですが、console.log('9' * 2);
console.log('3' - '1');console.log('4' + 2);console.log(parseInt('4', 10) + 2);console.log(parseInt('hi', 10);比較演算子
比較演算子には、次の種類があります。- >
- <
- >=
- <=
- ==(データ型を変換してから一致するかを確認する)
- ===(データ型も含めて一致)
- !==(イコールではない)
厳格な等価性(===)と抽象的な等価性(==)の違い
- 厳格な等価性(===)：型の比較あり
- 抽象的な等価性(==)：型の比較なし
falsyとtruthy
falsyな値とは、Booleanで真偽値に変換したときにfalseになる値のことです。 truthyな値とは、falsyな値以外のことです。falsyな値 | truthyな値 |
|---|---|
false, null, 0, undefined, 0n, NaN, “" | falsyな値以外の値 |
console.log(Boolean(0));console.log(Boolean('こんにちは'));テンプレートリテラル
テンプレートリテラルを使うと、バッククオート(`)で囲むことコンテンツの指定方法で、変数や定数を文字列に組み込むことができます。 変数や定数は、${}の中にいれます。 たとえば、次のような文をつくることができます。const score = 80;
let test = '算数';
const name = 'がずお';
cosole.log(`${name}君の${test}の点数は${score}点です。`);
//がずお君の算数のテストは80点です。const score = 80;
let test = '算数';
const name = 'がずお';
cosole.log(name + '君の' + test + 'の点数は' + score + '点です。');
//がずお君の算数のテストは80点です。