JavaScriptのelse句で何もしない処理の書く方法12選

JavaScriptにおけるelse句での何もしない処理 JS
この記事は約12分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●if文でelse句を省略する方法

JavaScriptでif文を使って条件分岐をする際、elseを省略して書くことができます。

elseを省略すると、条件に合致しない場合は何も処理を行わずにif文の後の処理に進みます。

ここでは、if文のみを使う方法、三項演算子を使う方法、論理演算子を使う方法の3つを見ていきましょう。

○サンプルコード1：if文のみを使う

if文のみを使ってelse句を省略する方法は、非常にシンプルです。

if文の条件式がtrueの場合のみ処理を実行し、falseの場合は何も処理を行いません。

const num = 10;

if (num > 0) {
  console.log("正の数です");
}
console.log("処理終了");

実行結果

正の数です
処理終了

このコードでは、変数numが正の数である場合のみ、”正の数です”とコンソールに出力されます。

numが0以下の場合は、if文の処理がスキップされ、”処理終了”が出力されます。

if文のみを使う方法は、条件に合致しない場合の処理が不要な場合に適しています。

コードがシンプルになり、可読性が向上します。

○サンプルコード2：三項演算子を使う

三項演算子を使うと、if-else文を1行で表現できます。

条件式 ? trueの場合の処理 : falseの場合の処理 という構文です。

else句を省略する場合は、falseの場合の処理を空にします。

const num = 10;

num > 0 ? console.log("正の数です") : null;
console.log("処理終了");

実行結果

正の数です
処理終了

三項演算子を使うことで、if文よりもコードが短くなります。

条件式がtrueの場合はconsole.logが実行され、falseの場合はnullが返されるだけで何も処理されません。

ただし、三項演算子は複雑な処理には向いていません。

if文で書いた方が読みやすい場合もあるので、使い分けが大切です。

○サンプルコード3：論理演算子を使う

論理演算子の&&（かつ）や||（または）を使って、if文なしでelse句を省略する方法もあります。

コードの実行の流れを理解していれば、論理演算子でスッキリ書けます。

const num = 10;

num > 0 && console.log("正の数です");
console.log("処理終了");

実行結果

正の数です
処理終了

&&は、左辺がtrueの場合のみ右辺を評価します。

num > 0がtrueなので、console.logが実行されます。

falseの場合は右辺が評価されないので、何も処理されずに次の行に進みます。

||を使う場合は、左辺がfalseの場合のみ右辺を評価します。

次のようなコードになります。

const num = -10;

num > 0 || console.log("0以下の数です");
console.log("処理終了");

実行結果

0以下の数です
処理終了

num > 0はfalseなので、console.logが実行されます。

trueの場合は右辺が評価されないので、何も処理されません。

論理演算子を使う方法は、慣れるまでは読みづらいと感じるかもしれません。

しかし、使いこなせるようになると、無駄な処理を削ぎ落とせるので、コードがスッキリします。

●switch文でelse句を省略する方法

JavaScriptのswitch文は、複数の条件分岐を簡潔に書くことができる便利な構文です。

if-else文の代わりにswitch文を使うと、コードの可読性が向上します。

ここでは、switch文でelse句を省略する方法を3つ紹介します。

○サンプルコード4：breakを使う

switch文の各caseブロックでbreakを使うと、条件に合致した場合の処理を実行した後、switch文を抜けることができます。

else句に相当する処理が不要な場合は、defaultブロックを省略できます。

const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("りんごです");
    break;
  case "banana":
    console.log("バナナです");
    break;
}
console.log("switch文終了");

実行結果

りんごです
switch文終了

このコードでは、fruitの値が”apple”なので、最初のcaseブロックの処理が実行されます。

breakがあるので、switch文を抜けて”switch文終了”が出力されます。

もしfruitが”apple”でも”banana”でもない場合は、何も処理されずにswitch文を抜けます。

○サンプルコード5：returnを使う

switch文の中でreturnを使うと、関数の処理を終了させることができます。

条件に合致しない場合は、何も返さずに関数を抜けるので、else句を省略できます。

function getFruitMessage(fruit) {
  switch (fruit) {
    case "apple":
      return "りんごです";
    case "banana":
      return "バナナです";
  }
}

console.log(getFruitMessage("apple"));
console.log(getFruitMessage("grape"));

実行結果

りんごです
undefined

getFruitMessage関数の中でswitch文を使っています。

fruitが”apple”の場合は”りんごです”を返し、”banana”の場合は”バナナです”を返します。

それ以外の場合は、returnがないのでundefinedが返ります。

○サンプルコード6：throwを使う

switch文の中でthrowを使うと、例外をスローしてswitch文を抜けることができます。

ただし、例外処理を適切に行う必要があります。

function getFruitMessage(fruit) {
  switch (fruit) {
    case "apple":
      return "りんごです";
    case "banana":
      return "バナナです";
    default:
      throw new Error("対応していないフルーツです");
  }
}

try {
  console.log(getFruitMessage("apple"));
  console.log(getFruitMessage("grape"));
} catch (error) {
  console.error(error.message);
}

実行結果

りんごです
対応していないフルーツです

getFruitMessage関数の中でswitch文を使っていますが、defaultブロックでthrowを使って例外をスローしています。

fruitが”apple”でも”banana”でもない場合は、”対応していないフルーツです”という例外が発生します。

try-catch文を使って例外処理を行っているので、例外が発生してもプログラムが強制終了することはありません。

例外が発生した場合は、catch文の中でエラーメッセージを出力しています。

throwを使う方法は、想定外の値が渡された場合にエラーを明示的に通知できるメリットがあります。

ただし、例外処理を適切に行わないと、プログラムが予期せず終了してしまう可能性があるので注意が必要です。

●関数からの早期リターンを使う方法

JavaScriptの関数の中で、条件に合致しない場合に処理を中断して関数を抜ける方法があります。

それが「早期リターン」です。

早期リターンを使うと、else句を省略して、関数内のネストを浅くすることができます。

コードの可読性と保守性が向上するでしょう。

○サンプルコード7：if文とreturnの組み合わせ

if文の条件式がfalseの場合にreturnを使って関数を抜ける方法です。

これにより、else句が不要になります。

function greet(name) {
  if (!name) {
    return; // 名前が空の場合は関数を抜ける
  }

  console.log(`こんにちは、${name}さん！`);
}

greet("太郎"); 
greet("");

実行結果

こんにちは、太郎さん！

greet関数では、引数のnameが空文字列の場合に、早期リターンを使って関数を抜けています。

これにより、else句を書かなくても、nameが空の場合の処理を省略できています。

早期リターンは、ガード節（ガード条件）とも呼ばれます。

関数の先頭で条件をチェックして、それ以降の処理を実行するかどうかを決定するためです。

○サンプルコード8：ガード節を使う

ガード節を使うと、関数の本質的な処理とエラーチェックを分離できます。

これにより、コードの読みやすさが向上します。

function divide(a, b) {
  if (b === 0) {
    return "ゼロ除算エラー"; // ゼロ除算の場合は早期リターン
  }

  return a / b;
}

console.log(divide(10, 2)); 
console.log(divide(10, 0));

実行結果

5
ゼロ除算エラー

divide関数では、ガード節を使って、ゼロ除算のチェックを行っています。

もし、bが0の場合は、”ゼロ除算エラー”を返して関数を抜けます。

これにより、ゼロ除算が発生する前に関数を終了させることができます。

ガード節を使うことで、エラーチェックと通常の処理を分離でき、コードがスッキリします。

関数の本質的な処理に集中でき、エラーハンドリングのための else 句が不要になります。

早期リターンは、関数内の処理を早めに終了させるための強力なテクニックです。

if文とreturnを組み合わせたり、ガード節を使ったりすることで、else句を省略でき、可読性の高いコードを書くことができます。

●空の関数を使う方法

JavaScriptで何もしない処理を表現する方法の1つに、空の関数を使うというテクニックがあります。

空の関数とは、文字通り何も処理を行わない関数のことです。

これを条件分岐の片方の処理に代入することで、else句を省略することができるのです。

○サンプルコード9：空の関数を代入

空の関数を変数に代入して、条件分岐の処理に使ってみましょう。

function noop() {} // 空の関数

const isAdmin = false;
const logger = isAdmin ? console.log : noop;

logger("管理者ログ"); // isAdminがfalseなので何も出力されない

ここでは、noop関数を定義しています。

この関数は、中身が空なので、呼び出しても何も処理を行いません。

そして、isAdminという変数に応じて、loggerに console.log か noop を代入しています。

三項演算子を使って、isAdminがtrueならconsole.logを、falseならnoopを代入しています。

これにより、isAdminがfalseの場合、logger(“管理者ログ”)を実行しても、noop関数が呼び出されるだけで、何もログ出力されません。

○サンプルコード10：アロー関数を使う

アロー関数を使えば、空の関数をその場で定義することもできます。

const isAdmin = false;
const logger = isAdmin ? console.log : () => {};

logger("管理者ログ"); // isAdminがfalseなので何も出力されない

ここでは、三項演算子の中で、アロー関数 () => {} を使って空の関数を定義しています。

アロー関数を使うことで、関数を定義する手間が省けます。

また、コードがよりコンパクトになります。

空の関数を使う方法は、条件分岐の処理を関数に抽象化できるメリットがあります。

条件に応じて、実行する関数を切り替えることができるので、コードの可読性が向上します。

ただし、空の関数を使いすぎると、かえってコードが読みづらくなる場合もあります。

条件分岐の目的を考えて、適切に使い分けることが大切です。

●undefinedを返す方法

JavaScriptの関数で、何も明示的に返さない場合、undefinedが返されます。これを利用して、else句を省略する方法があります。

undefinedを返すことで、「何もしない」ことを表現できるのです。

○サンプルコード11：undefinedを明示的に返す

関数の中で、条件に合致しない場合にundefinedを明示的に返してみましょう。

function getUser(userId) {
  if (userId === 1) {
    return { id: 1, name: '山田' };
  }

  return undefined;
}

console.log(getUser(1)); // { id: 1, name: '山田' }
console.log(getUser(2)); // undefined

getUser関数は、引数のuserIdが1の場合はユーザーオブジェクトを返します。

それ以外の場合は、undefinedを返しています。

if文の中でreturnが実行されると、関数の処理がそこで終了します。

elseを書かなくても、条件に合致しない場合は自動的にundefinedが返されるのです。

○サンプルコード12：何も返さない

undefinedを明示的に返さなくても、関数で何も返さなければundefinedが返されます。

function getUser(userId) {
  if (userId === 1) {
    return { id: 1, name: '山田' };
  }
}

console.log(getUser(1)); // { id: 1, name: '山田' }
console.log(getUser(2)); // undefined

このように、関数の最後でreturnを書かない場合、自動的にundefinedが返されます。

明示的にundefinedを返すか、何も返さないかは、コードの意図が明確になる方を選ぶと良いでしょう。

undefinedを返すことを明示することで、「何も返さない」ことが意図したものだと分かりやすくなります。

ただし、undefinedを返すことが関数の目的であれば、むしろ明示的にundefinedを返した方が良い場合もあります。

関数の意図を考えて、適切な方法を選びましょう。

まとめ

JavaScriptのelse句を省略する12の方法を紹介しました。

if文、switch文、関数からの早期リターン、空の関数、undefinedを返す方法など、様々なテクニックがあります。

状況に応じて適切な方法を選択することで、コードの可読性と保守性が向上します。

else句を適切に省略することは、シンプルで美しいコードを書くためのコツです。

ぜひ、日々のコーディングの中で実践してみてください。

JavaScriptのコーディングスキルが確実に向上するでしょう。