3秒後にブラウザ上で文字を表示させたい。

Question

プログラミング初心者の、ザインと申します。ご回答いただけますと幸いです。

実現したいこと

3秒後にブラウザ上で文字を表示させたい。

前提

JavaScriptで3秒後に文字を表示させたいのですが、うまくできておりません。

発生している問題・エラーメッセージ

コンソールにはmapが定義されていない、というように表示されているのですがmapは標準搭載のメソッドであるように記憶しているので、なぜエラーが怒るかがわからずつまっています。
またHTMLや他JSファイル上では表示させるための準備（リストの準備など）は整っているため、この該当箇所のソースコードが原因であると考えています。

エラーメッセージ
TypeError: Cannot read properties of undefined (reading 'map')

該当のソースコード（JavaScript）

function test(userList) {
return new Promise((resolve) => {
setTimeout(() => {
const result = userList.map((name) => ({
...name,
full_name: ${name.family_name} ${name.first_name},
}));
resolve(result);
}, 3000);
});
}
test();

### 試したこと
Promiseやmapの概念のインプット

どうぞよろしくお願いいたします。

Comments

[ypp]

userListが配列ではありません。

[byamadaro1013]

ご回答いただきありがとうございます。確認いたします。
ご回答いただきありがとうございます。
こちらお伝えいただいた意味としましては、test()の()内にuserListをいれる、つまりtest(userList)ということでしょうか。ブラウザ上ではうまく表示することができませんでした。。
恐らく私の理解がうまくできておりませんので、大変恐縮ですがご教示いただけますと幸いです。
どうぞよろしくお願いいたします。

[ypp]

3秒後に何かをしたいのであればPromiseは必要ありません。
function test(userList) {
setTimeout(() => {
const result = userList.map((name) => ({
...name,
full_name: `${users.family_name} ${users.first_name}`,
}));
resolve(result);
}, 3000);
}

[byamadaro1013]

ご回答いただきありがとうございます。こちらPromiseを使わない方法で解決することができました。ご協力いただき感謝申し上げます。

Answer 1

• .map()は配列用のメソッドです。
• 引数userListに配列を渡さなければなりません。
• なのに実行の記述がtest()と引数が空になっています。

→ 引数に配列を渡してください。

---

（コメント欄より引用）

test()の()内にuserListをいれる、つまりtest(userList)ということでしょうか。

多分こんな感じです↓↓↓

function test(userList) {
  // 省略
}

const users = [
  { family_name: '田中', first_name: '太郎'},
  { family_name: '山田', first_name: '花子'},
  { family_name: '綾小路', first_name: 'きらら'}
];

test(users);

Comments

[byamadaro1013]

ご回答いただきありがとうございます。
こちらお伝えいただいた意味としましては、test()の()内にuserListをいれる、つまりtest(userList)ということでしょうか。ブラウザ上ではうまく表示することができませんでした。。
恐らく私の理解がうまくできておりませんので、大変恐縮ですがご教示いただけますと幸いです。
どうぞよろしくお願いいたします。

[Cocode]

❌　test();
✅　test(['jiro', 'hanako', 'taro']); // 例です

[Cocode]

詳細、回答を更新しますのでおまちを。

[Cocode]

回答を更新しました。ご確認ください。
実行してみて構文エラーがでたら教えてください。
test関数の中身間違ってるっぽいところがあります。

[byamadaro1013]

ご回答いただきありがとうございます。
大変恐縮なのですが、定数宣言の場所や関数の呼び出しパターンなどいくつも組みわせたのですが、質問の冒頭であったmapのエラーは解消できておりません、、、testの引数もいくつかパターンを試しましたが同じエラーでした。こちらに添付させていただきます。お助けいただけますと幸いです。

JSのコード

function test(userList) {
return new Promise((resolve) => {
setTimeout(() => {
const result = userList.map((name) => ({
...name,
full_name: `${users.family_name} ${users.first_name}`,
}));
resolve(result);
}, 3000);
});
}

const users = [
{ family_name: "田中", first_name: "太郎" },
{ family_name: "山田", first_name: "華子" },
{ family_name: "綾工事", first_name: "きらら" },
];

test(["jiro", "hanako", "taro"]);
test(users);
↑このtestは2パターンとも試しました。

エラー文は変わらず以下です。
station15.js:37 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at station15.js:37:31

どうぞよろしくお願いいたします。

[Cocode]

いくつか確認させてください。

・Promiseを使う必要はありますか？単純に3秒後に表示させたいだけでしたらPromise不要です。
・表示させたいとおっしゃっていますが、ご提示のコードには表示させるような記述がありません。どこに何を表示させたいのでしょうか？

よろしくお願いいたします。

[byamadaro1013]

ご回答いただきありがとうございます。こちらPromiseを使わない方法で解決することができました。ご協力いただき感謝申し上げます。