JavaScriptの特殊事項

この章では、これまでに学習したJavaScriptの機能を簡単にまとめ、微妙な点に特に注意を払います。

コード構造

ステートメントはセミコロンで区切られます

alert('Hello'); alert('World');

通常、改行も区切り文字として扱われるため、これも機能します

alert('Hello')
alert('World')

これは「自動セミコロン挿入」と呼ばれます。時にはうまくいかないこともあります。例えば

alert("There will be an error after this message")

[1, 2].forEach(alert)

ほとんどのコーディングスタイルガイドは、各ステートメントの後にセミコロンを付けることに同意しています。

コードブロック{...}やループのような構文構造の後には、セミコロンは必要ありません

          function f() {
  // no semicolon needed after function declaration
}

for(;;) {
  // no semicolon needed after the loop
}
        

…しかし、どこかに「余分な」セミコロンを置くことができても、それはエラーではありません。無視されます。

詳細：コード構造。

厳格モード

最新のJavaScriptのすべての機能を完全に有効にするには、スクリプトを"use strict"で始める必要があります。

          'use strict';

...

このディレクティブは、スクリプトの先頭または関数本体の先頭に配置する必要があります。

"use strict"がなくても、すべては機能しますが、一部の機能は昔ながらの「互換性のある」方法で動作します。一般的には、最新の動作が推奨されます。

言語のいくつかの最新機能（今後学習するクラスなど）は、暗黙的に厳格モードを有効にします。

詳細：最新モード、「use strict」。

変数

を使用して宣言できます

let
const（定数、変更不可）
var（旧式、後述）

変数名には以下を含めることができます

文字と数字。ただし、最初の文字は数字にすることはできません。
文字$と_は正常で、文字と同等です。
ラテンアルファベット以外の文字や象形文字も許可されていますが、一般的には使用されません。

変数は動的に型付けされます。任意の値を格納できます

          let x = 5;
x = "John";
        

8つのデータ型があります

浮動小数点数と整数の両方に使用するnumber、
任意の長さの整数に使用するbigint、
文字列に使用するstring、
論理値に使用するboolean：true/false、
null - 「空」または「存在しない」を意味する単一の値nullを持つ型、
undefined - 「割り当てられていない」を意味する単一の値undefinedを持つ型、
objectとsymbol - 複雑なデータ構造と一意の識別子については、まだ学習していません。

typeof演算子は、値の型を返しますが、2つの例外があります

          typeof null == "object" // error in the language
typeof function(){} == "function" // functions are treated specially
        

詳細：変数とデータ型。

インタラクション

ブラウザを作業環境として使用しているため、基本的なUI関数は次のようになります

prompt(質問, [デフォルト]): 質問をして、訪問者が入力した内容、または「キャンセル」をクリックした場合はnullを返します。
confirm(質問): 質問をして、OKとキャンセルのどちらかを選択するように提案します。選択はtrue/falseとして返されます。
alert(メッセージ): メッセージを出力します。

これらの関数はすべて*モーダル*であり、コードの実行を一時停止し、訪問者が回答するまでページとの対話を防ぎます。

例えば

let userName = prompt("Your name?", "Alice");
let isTeaWanted = confirm("Do you want some tea?");

alert( "Visitor: " + userName ); // Alice
alert( "Tea wanted: " + isTeaWanted ); // true

詳細：インタラクション：alert、prompt、confirm。

演算子

JavaScriptは次の演算子をサポートしています

算術演算子

標準：* + - /、剰余の%、累乗の**も使用します。

二項プラス+は文字列を連結します。また、いずれかのオペランドが文字列の場合、もう一方のオペランドも文字列に変換されます

alert( '1' + 2 ); // '12', string
alert( 1 + '2' ); // '12', string

代入演算子

単純な代入：a = bと、a *= 2のような複合代入があります。

ビット演算子

ビット演算子は、最低レベルのビットレベルで32ビット整数で動作します：必要な場合はドキュメントを参照してください。

条件演算子

3つのパラメータを持つ唯一の演算子：cond ? resultA : resultB。condがtruthyの場合、resultAを返し、そうでない場合はresultBを返します。

論理演算子

論理AND &&とOR ||は短絡評価を実行し、停止した値（必ずしもtrue/falseではありません）を返します。論理NOT !はオペランドをブール型に変換し、逆の値を返します。

Null合体演算子

??演算子は、変数のリストから定義された値を選択する方法を提供します。a ?? bの結果は、aがnull/undefinedでない限りaになり、そうでない場合はbになります。

比較演算子

異なる型の値の等価チェック==は、それらを数値に変換します（nullとundefinedは互いに等しく、他のものとは等しくありません）。そのため、これらは等しくなります

alert( 0 == false ); // true
alert( 0 == '' ); // true

他の比較も同様に数値に変換されます。

厳密等価演算子===は変換を行いません。異なる型は常に異なる値を意味します。

値nullとundefinedは特殊です。互いに==で等しく、他のものとは等しくありません。

より大きい/小さい比較は、文字列を文字ごとに比較します。他の型は数値に変換されます。

その他の演算子

カンマ演算子など、他にもいくつかあります。

詳細：基本演算子、数学、比較、論理演算子、Null合体演算子 '??'。

ループ

3種類のループについて説明しました

          // 1
while (condition) {
  ...
}

// 2
do {
  ...
} while (condition);

// 3
for(let i = 0; i < 10; i++) {
  ...
}
        

for(let...)ループで宣言された変数は、ループ内でのみ表示されます。ただし、letを省略して既存の変数を再利用することもできます。
ディレクティブbreak/continueを使用すると、ループ全体/現在の反復を終了できます。ラベルを使用してネストされたループを中断します。

詳細：ループ：whileとfor。

後で、オブジェクトを処理するためのより多くのタイプのループについて学習します。

「switch」構文

「switch」構文は、複数のifチェックを置き換えることができます。比較には===（厳密等価）を使用します。

例えば

let age = prompt('Your age?', 18);

switch (age) {
  case 18:
    alert("Won't work"); // the result of prompt is a string, not a number
    break;

  case "18":
    alert("This works!");
    break;

  default:
    alert("Any value not equal to one above");
}

詳細：「switch」ステートメント。

関数

JavaScriptで関数を 생성하는 세 가지 방법에 대해 설명했습니다.

関数宣言：メインコードフローの関数

          function sum(a, b) {
  let result = a + b;

  return result;
}
        

関数式：式のコンテキストでの関数

          let sum = function(a, b) {
  let result = a + b;

  return result;
};
        

アロー関数

          // expression on the right side
let sum = (a, b) => a + b;

// or multi-line syntax with { ... }, need return here:
let sum = (a, b) => {
  // ...
  return a + b;
}

// without arguments
let sayHi = () => alert("Hello");

// with a single argument
let double = n => n * 2;
        

関数にはローカル変数がある場合があります。関数本体またはパラメータリスト内で宣言された変数です。このような変数は、関数内でのみ表示されます。
パラメータにはデフォルト値を設定できます：function sum(a = 1, b = 2) {...}。
関数は常に何かを返します。returnステートメントがない場合、結果はundefinedになります。

詳細：関数、アロー関数、基本を参照してください。

今後の予定

これはJavaScriptの機能の簡単なリストでした。今のところ、基本のみを学習しました。チュートリアルの後半では、JavaScriptのより特殊で高度な機能について説明します。

章

レッスンのナビゲーション