JavaScript undefinedの使い方

  • JavaScript
  • データ型
最終更新日:

この記事のポイント

JavaScriptプログラミングにおいて避けて通れない概念の一つがundefinedです。この記事では基礎から実践まで段階的に学習できます。

  • 変数が初期化されていない状態を表す特殊な値の理解
  • 関数の戻り値や存在しないプロパティへのアクセス時の動作
  • 実際の開発現場で頻繁に遭遇する具体的な使用場面の習得

以下の内容を通じて、undefinedを適切に扱えるスキルを身につけることができます。

目次

undefinedとは？

undefinedは、変数が宣言されているものの値が代入されていない状態、または存在しないプロパティにアクセスした際に返される特殊な値です。これはJavaScriptの基本的なデータ型のひとつであり、nullとは異なる概念として扱われます。

undefinedは「値が定義されていない」ことを明示的に表現するために用意された仕組みで、プログラムの実行中に予期しない動作を防ぐ重要な役割を果たします。開発者はこの概念を理解することで、より安全で予測可能なコードを記述できるようになります。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

undefinedの基本的な発生パターンを理解するために、最も一般的なケースを確認しましょう。変数の宣言と関数の動作において、undefinedがどのように現れるかを実際のコードで見ていきます。

let animal; console.log(animal); console.log(typeof animal);







出力結果
undefined
undefined

  
function getAnimalName() {
  // return文がない関数
}

let result = getAnimalName();
console.log(result);

  


  







出力結果
undefined

  
let zoo = {
  cat: "ネコ",
  dog: "イヌ"
};

console.log(zoo.rabbit);

  


  







出力結果
undefined
実用例
undefinedは実際の開発現場においてさまざまな場面で遭遇します。以下では具体的なシチュエーションを想定した実践的なコード例を通じて、undefinedの適切な扱い方を学習していきます。変数の初期化チェック、オブジェクトのプロパティ存在確認、配列の要素アクセス、関数の引数処理など、日常的な開発業務で必要となる知識を段階的に習得できます。これらの例を通じて、undefinedによるエラーを回避し、堅牢なプログラムを作成する技術を身につけることができます。
変数の初期化チェック
変数が初期化されているかどうかを確認する例です。プログラムの安全性を保つために重要です。undefined判定を行うことで、予期しないエラーを防ぐことができます。

  
let petName;

if (petName === undefined) {
  petName = "ハムスター";
}

console.log("ペットの名前: " + petName);

  


  







出力結果
ペットの名前: ハムスター
オブジェクトプロパティの存在確認
オブジェクトの特定のプロパティが存在するかどうかを確認する際に、undefinedを活用する例です。存在しないプロパティにアクセスした場合の適切な処理方法を示します。

  
let animalInfo = { name: "ライオン" };

if (animalInfo.age === undefined) {
  console.log("年齢情報がありません");
  animalInfo.age = "不明";
}

console.log(animalInfo);

  


  







出力結果
年齢情報がありません
{ name: "ライオン", age: "不明" }
配列の範囲外アクセス
配列の存在しないインデックスにアクセスした場合の動作を理解し、適切なエラーハンドリングの実装例を学習します。

  
let animals = ["ウサギ", "キツネ"];

console.log(animals[5]);

if (animals[5] === undefined) {
  console.log("指定されたインデックスに動物はいません");
}

  


  







出力結果
undefined
指定されたインデックスに動物はいません
関数引数のデフォルト値設定
関数の引数が渡されなかった場合にundefinedとなる性質を利用して、デフォルト値を設定する実装例を紹介します。

  
function introduceAnimal(name, species) {
  if (species === undefined) {
      species = "不明な動物";
  }
  console.log(name + "は" + species + "です");
}

introduceAnimal("ポチ");

  


  







出力結果
ポチは不明な動物です
undefinedとnullの比較
undefinedとnullの違いを明確に理解するために、両者を比較検証するコード例を示します。適切な使い分けができるようになります。

  
let animal1;
let animal2 = null;

console.log("animal1:", animal1);
console.log("animal2:", animal2);
console.log("厳密等価:", animal1 === animal2);

  


  







出力結果
animal1: undefined
animal2: null
厳密等価: false
try-catch文でのundefined処理
エラーハンドリングの文脈でundefinedを適切に処理する例を学習します。プログラムの安定性向上に役立つテクニックです。

  
function getAnimalSound(animal) {
  try {
      return animal.sound.toUpperCase();
  } catch (error) {
      return "音声情報が未定義です";
  }
}

console.log(getAnimalSound({}));

  


  







出力結果
音声情報が未定義です
三項演算子を使ったundefined判定
より簡潔にundefined判定を行う方法として、三項演算子を活用したパターンを紹介します。コードの可読性向上に寄与します。

  
let animalType;
let displayType = animalType !== undefined ? animalType : "ペンギン";

console.log("表示する動物: " + displayType);

  


  







出力結果
表示する動物: ペンギン
論理OR演算子による短縮記法
undefinedのデフォルト値設定において論理演算子を使用した、より短い記述方法を学習します。効率的なコーディングテクニックです。

  
function createAnimal(name, type) {
  name = name || "名無しのパンダ";
  type = type || "哺乳類";

  return { name: name, type: type };
}

console.log(createAnimal());

  


  







出力結果
{ name: ‘名無しのパンダ’, type: ‘哺乳類’ }
まとめ
undefinedは、プログラミング学習において必ず理解すべき基本概念です。変数の初期化状態や存在しないプロパティへのアクセス結果として現れるこの特殊な値を適切に扱うことで、より安全で信頼性の高いコードを記述できるようになります。
undefinedの活躍する場面
    

  • 変数宣言時の初期値として自動的に設定される
    • 

  • 関数でreturn文が省略された場合の戻り値
    • 

  • オブジェクトの存在しないプロパティアクセス時
    • 

重要なポイント
    

  • nullとの違いを正確に理解して使い分ける
    • 

  • 条件分岐でundefined判定を行いエラー回避
    • 

  • デフォルト値設定によるプログラム安定性向上
    • 

undefinedを恐れる必要はありません。この概念を味方につけることで、JavaScriptプログラミングのスキルは確実に向上します。実際の開発現場では頻繁に遭遇する状況であるため、今回学習した内容を繰り返し練習し、自然に扱えるレベルまで習熟することをお勧めします。適切な理解と実践により、undefinedは開発者にとって強力なツールとなるでしょう。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript undefinedの使い方