関数の引数を用いたオブジェクトの出力方法についてつまづいた箇所をメモしました。
#どんな問題が発生したのか？
apiで情報を取得しようとした際にapiのオブジェクト情報を関数にして取り出そうと考えて以下のような関数を作成しました。非同期関数の説明は今回の内容と外れるので割愛します(asyncの部分）。内容としてはapiの取得した情報はオブジェクトが配列になっており、そのオブジェクトのプロパティ名にquestionやdifficultyなどがあったため、各々の値を関数の引数を用いて取得しようと考えました。まずはquestionの値を取得しようと以下の関数を考えました。
上記の部分です。
'use strict';
{
async function getApi(key) {
const res = await fetch('https://opentdb.com/api.php?amount=10');
const users = await res.json();
const items = users.results;
const array = [];
items.forEach(item => {
array.push(item.key);
})
console.log(array);
console.log(items);
}
getApi(question);
}
重要なのは以下の部分です。
'use strict';
{
items.forEach(item => {
array.push(item.key);
})
}
#関数の使い方
上記の内容を簡単にわかりやすくすると以下の問題になります。（上のコードは後に私がどの箇所で詰まったかを知るために載せています。今回の記事の内容はこの下から見てもらえればわかりやすいと思います）
配列内にオブジェクトがある状態を考えます。
todosの中身をコンソールに出力する関数arrを作成します。
関数にしてnameとageの値を出力したいと考えました。
まずは私の最初にした失敗例を記述します。
'use strict';
{
const todos = [
{name:'ばなな',age: 32},
{name:'はにわ',age: 12},
];
function arr(todos) {
console.log(todos[0].key);
}
arr(name);
}
これでは出力されずエラーになります。
では何故このようにしたのかというと、オブジェクトの出力方法から説明します。
#オブジェクトの出力方法
以下配列内のオブジェクトの出力方法です。
値を取得したい場合は以下のように記述します。
'use strict';
{
const todos1 = [
{name:'ばなな',age: 32},
{name:'はにわ',age: 12},
];
const todos2 = [
{name:'熱海',age: 40},
{name:'伊豆',age: 30},
];
console.log(todos1[0].name);//出力結果「ばなな」
console.log(todos1[0].age);//出力結果「32」
console.log(todos1[1].name);//出力結果「はにわ」
console.log(todos1[1].age);//出力結果「12」
console.log(todos2[0].name);//出力結果「熱海」
console.log(todos2[0].age);//出力結果「40」
console.log(todos2[1].name);//出力結果「伊豆」
console.log(todos2[1].age);//出力結果「30」
}
上記のように配列が二つあってめんどくさいので関数にまとめようと考えました。
#関数の引数の使い方
'use strict';
{
const todos1 = [
{name:'ばなな',age: 32},
{name:'はにわ',age: 12},
];
const todos2 = [
{name:'熱海',age: 40},
{name:'伊豆',age: 30},
];
function todos1() {
console.log(todos1[0].name);//出力結果「ばなな」
console.log(todos1[0].age);//出力結果「32」
console.log(todos1[1].name);//出力結果「はにわ」
console.log(todos1[1].age);//出力結果「12」
}
function todos2() {
console.log(todos2[0].name);//出力結果「熱海」
console.log(todos2[0].age);//出力結果「40」
console.log(todos2[1].name);//出力結果「伊豆」
console.log(todos2[1].age);//出力結果「30」
}
todos1();
todos2();
}
上記のように関数にすることで出力が楽になります。
更にまとめるために関数の引数を使用すると以下になります。
'use strict';
{
const todos1 = [
{name:'ばなな',age: 32},
{name:'はにわ',age: 12},
];
const todos2 = [
{name:'熱海',age: 40},
{name:'伊豆',age: 30},
];
function arr(item) {
console.log(item[0].name);
console.log(item[0].age);
console.log(item[1].name);
console.log(todos1[1].age);
}
arr(todos1);
arr(todos2);
}
これで更に簡単に書くことができます。
長くなりましたが、ここから本題です。
それならnameとageの部分も引数にしたらもっと簡単に書けるよね？って考えました。
説明のためにtodos2はいらないので割愛しました。
'use strict';
{
const todos = [
{name:'ばなな',age: 32},
{name:'はにわ',age: 12},
];
function arr(item) {
console.log(todos[0].item);
console.log(todos[1].item);
}
arr(name);
arr(age);
}
上記のようにオブジェクトの値のプロパティ名を関数の引数にするとエラーになってしまいます。
#結論
関数の引数をオブジェクトのプロパティ名に使用することはできない
長くなってしまいましたが、最後までお読みいただきありがとうございました。