💨

【JavaScript】初心者が迷いがちな表現

に公開
JavaScript
tech

JavaScriptの基本的な文法、関数を学ぶ中でのメモ。

「リテラル（文字通り）」による表現

  • 定数/変数による表現に対して、150、1.1などの数値のように直接、値を書く方法

prompt();

  • ユーザーからの入力を受け取る際に使える命令
  • promptでは受け取る値は必ず文字列になる
const n = prompt('Any number?');
console.log(Number(n) + 10); // そのままだと文字列の足し算になるので、Number()という命令で数値に変換している

Number();

  • 文字列を数値に変換する命令
const n = Number(prompt('Any number?')); // 上記とは異なり、直接数値に変換できる

他、動作確認に使える命令

  • console.log();
  • alert();

区切りのセミコロン「;」が不要な文

  • 条件分岐（if、switch）、反復処理（for、while）
  • do...while文の最後には必要
  • 関数宣言（function...）
  • 定数/変数への代入を伴う関数式には必要 
do {
    // 条件に関わらず最初に行う順次処理
} while ( // 繰り返す条件 );

プログラムの設計

  • 順次処理、条件分岐（if、switch）、反復処理（for、while）を組み合わせる。適切な文を選定する
  • 反復処理の使い分けに迷ったら、よく使われるfor、難しければ、while、do...whileの順に試すと良さそう。

反復処理の中の、break、continue

  • breakは、反復処理全体から抜けるための処理
  • continueは、反復処理の途中でそれ以降の処理をスキップして次の反復処理に移るための処理
  • while、do...whileでも使える
for (// 繰り返す条件) {
    if (// 処理をスキップして次の反復処理に移るための条件) {
        continue;
    }
    if (// 反復処理全体から抜ける条件) {
        break;
    }
    console.log();
}

条件（三項）演算子

const result = score > 80 ? 'A' : 'B'; // 条件が成立したらA、成立しなかったらB
  • 最終的に一つの値になるので定数/変数に代入しても使える
  • if文は処理するための命令文であって、最終的に値にはならないので定数/変数に代入はできない

論理演算子

  • A && B　AなおかつB
  • A || B　AまたはB
  • !A　Aではない
  • 論理演算子の本当の意味を表すもっと良い言葉があったはず。出てきたらメモする

関数

  • 基本的には、「入力」を「処理」して「出力」する形をしている
  • 関数では入力を「引数」。出力を「戻り値」と呼んだりする
  • 関数を定義する際に仮で設定する引数を「仮引数」。関数を実行する際に渡す引数を「実引数」

returnの初期値はundefined

  • returnを記述していない関数の場合、returnではundefinedを初期値として返している
  • 関数の戻り値を使って他の演算をしたい場合は、処理結果をreturnで返す必要がある。（returnがundefinedで、* 3 などではNaNになる）

引数のデフォルト値

function calculateTotal(price, amount, rate = 1.1) {
    return price * amount * rate;
};

console.log(calculateTotal(100, 10)); // 3番目に実引数が設定されなくても初期値が反映される

早期リターン

  • 例外的な処理を振るい落とすテクニック
function calculateTotal(price, amount, rate = 1.1) {

    // 早期リターン
    if (amount >= 100) {
        return price * amount;
    }
    return price * amount * rate;
}

console.log(calculateTotal(100, 100));

関数の巻き上げ

  • 関数の定義には、「関数宣言」と「定数/変数への代入を伴う関数式（関数名がないので無名関数とも呼ぶ）」がある
  • 関数宣言は関数の巻き上げが起きるが、関数式では巻き上がらない（定数/変数同様）
console.log(a(10)); // 関数aの巻き上げによって、処理される
console.log(b(10)); // 関数式は巻き上げされないので、エラーになる

// 関数宣言
function a(num) {
    return num * 3;
}

// 関数式
const b = function(num) {
    return num * 3;
};

アロー関数式

// 関数式からfunctionを省略できる
const b = (num) => {
    return num * 3;
};

// 引数が1つの場合は前後の括弧を省略できる
const c = num => {
    return num * 3;
};

// 戻り値が一つの場合はreturnと波括弧を省略できる
const d = num => num * 3;
  • アロー関数式を使えば、関数に名前をつける必要がない場合、直接、関数の引数に定義を書くことができる
console.log(calc(20, (num) => {
    return num * 3;
}));

Discussion