undefined は、JavaScriptにおいて「値が未定義である状態」を表します。
つまり、変数やプロパティが宣言されていても、まだ値が設定されていない場合にこの状態となります。

例：

let name;
console.log(name); // → undefined

上記のように、変数 name を宣言していても、値を代入していなければ undefined と表示されます。

値を代入していない変数を使用している

let name;
console.log(name); // → undefined

変数は宣言されているものの、値が未代入であるため undefined が返されます。
JavaScriptでは、未代入の変数は自動的に undefined になります。

対処法

変数を使う前に、必ず初期値を代入するようにしましょう。

let name = 'Yamada';
console.log(name); // → 'Yamada'

関数が値を返していない（returnがない）

function getName() {
  let name = 'Hanako';
}

console.log(getName()); // → undefined

関数 getName の中で name は定義されていますが、return文がないため関数の戻り値は undefined になります。

対処法

値を使いたい場合は、関数内で明示的に return しましょう。

function getName() {
  let name = 'Hanako';
  return name;
}

存在しない配列・オブジェクトの要素を参照している

const fruits = ["apple", "banana"];
console.log(fruits[3]); // → undefined

存在しないインデックスを指定すると、配列は undefined を返します。

オブジェクトでも同様です：

const user = { name: "Yamada" };
console.log(user.age); // → undefined

対処法

インデックスが範囲内かどうか、または、プロパティが存在するかどうかを事前にチェックすると、予期せぬエラーを防げます。

配列の例：

if (fruits.length > 3) {
  console.log(fruits[3]);
} else {
  console.log('そのインデックスには値がありません');
}

オブジェクトの例：

if ('age' in user) {
  console.log(user.age);
} else {
  console.log('年齢情報は登録されていません');
}

または、Optional chaining（オプショナルチェーン）を活用する方法もあります。
下記の例では、userが存在する場合だけageを取得し、存在しなければ’年齢情報なし’を表示します。
左の値が null か undefined だった場合に、右の値を使用します。

console.log(user.age ?? '年齢情報なし');

jQueryで対象要素が取得できていない

console.log($('.non-existent')[0]); // → undefined

このコードは、存在しないクラス名を指定しているので、jQueryは空のオブジェクトを返します。
そのため、[0] で最初のDOM要素を取り出そうとしても、要素が存在しないので undefined になります。

対処法

取得した要素が存在するかどうかを .length で確認しましょう。

let $el = $('.target');
if ($el.length > 0) {
  console.log($el.text());
}

非同期処理で値が取得できる前にアクセスしている

let data;
setTimeout(() => {
  data = "loaded!";
}, 1000);

console.log(data); // → undefined（まだ値が入っていない）

非同期処理では、処理の完了を待たずに次の行が実行されるため、値が代入される前にアクセスすると undefined になります。

対処法

非同期処理の完了を待つには、setTimeoutではコールバック関数を使う、またはPromiseやasync/awaitを使うとよいです。必要に応じて、状況に合った方法を選んで使いましょう。

コールバックを使う例：

function loadData(callback) {
  setTimeout(() => {
    const data = "loaded!";
    callback(data);
  }, 1000);
}

loadData(function(result) {
  console.log(result); // → "loaded!"
});

.then() を使った Promiseの例：

function loadData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("loaded!");
    }, 1000);
  });
}

loadData().then((result) => {
  console.log(result); // → "loaded!"
});

async/awaitを使う例：

function loadData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("loaded!");
    }, 1000);
  });
}

async function main() {
  const result = await loadData();
  console.log(result); // → "loaded!"
}

main();

1. console.log() で中身を確認する

まずは、変数や関数、取得した要素の中身を console.log() で確認する習慣をつけましょう。
「そもそも中に何が入っているか」を把握することが、最も確実な一歩です。

2. 初期値を設定する

let count = 0;
let text = "";

未定義状態を防ぐために、可能であれば初期値を明示的に設定しておきましょう。

3. 関数には明確な戻り値を

function getUserName() {
  return "Yamada";
}

return を忘れずいれることで、呼び出し側で正しく値を受け取ることができます。

4. 要素取得後は .length チェックを忘れずに

const $item = $('.item');
if ($item.length > 0) {
  $item.addClass('active');
}

要素が取得できていない場合の誤動作を防ぐことができます。

5. 非同期処理には適切な“待機”を

非同期処理には以下のような対処法が有効です。

• 処理完了後にコールバック関数を呼び出す
• .then() を使ったPromiseの活用
• async/await の導入

undefined はエラーではなく、JavaScriptからの「まだ値が設定されていませんよ」というメッセージです。

出会うたびに焦ってしまう方も多いかもしれませんが、冷静に原因を確認し、一つずつ対処していけば必ず理解できます。

この記事が、JavaScriptの理解を一歩深めるきっかけになれば幸いです。