Javascriptも他の言語もそうだろうが、
とにかく何を引数としているのか、または中身なにこれ。が非常に多い。
特に苦戦した（今もしているけど）のが配列と値の取得＝指定。
初学者ゆえに捉え方が間違っていたりするところも多々あるだろうが、
現時点での理解度として記述していきます！
const Animal = [
{id : 1, name : "cat", color : "black"},
{id : 2, name : "dog", color : "brown"},
{id : 3, name : "bird", color : "blue"}
]
上記の配列Animalに含まれているオブジェクトは3つ。Animal.lengthでいうと = 3。
「id」「name」「color」のキーと、
それぞれの値プロパティが、「：」の後ろで設定されている。
単純にAnimalの中のnameキーを叩けば、値を見ることができるのか。
console.log(Animal.name)
=>undefined
結果は見えない。
Animalは配列なので、各要素のプロパティにアクセスするには、まず配列のindexを指定する必要がある。
console.log(Animal[0])
=>{id: 1, name: 'cat', color: 'black'}
これでAnimal配列のindex[0]=1番目の中身を見ることができる。
nameだけを取得、見たい場合とかは。
Animal[0].nameにすることで、ようやく"cat"が取得できる。
ちなみに、
const animal = Animal[0]
と別の変数にindexを指定して代入すると。
このanimalの中身は。
animal= {id: 1, name: 'cat', color: 'black'}
になるので。
animal.name = "cat"で取得できるようになる。
以下は配列の関数について、少し。
find
配列の中から指定したものを探して返すメソッド。
const cat_info = Animal.find(animal => animal.id === 1);
=>cat_info = {id: 1, name: 'cat', color: 'black'}
例に挙げた配列Animalの中から、catの配列＝index[0]の情報を見つけて、
変数「cat_info」に入れているが。
返す値が何となくわかっても、挙動が理解できない。なぜ、そうなる？
分解しよう。
Animal.find(animal //ここまでの部分。
これは配列Animalの中にある要素｛id:○○,name:○○,color:○○}を順番にanimalに渡している。
animal => animal.id === 1); //残りはここの部分
急に出てきた「animal」と「=>」は何だ？
「animal」はパラメーターとしての名前。(名前自体は極論何でも良い)
animalに入っているものを「=>」アロー関数に引数として渡しているという流れ。
これを、アロー関数無しで書くと。
Animal.find(animal = function(animal){
return animal.id === 1})
となってくる。function(animal)になるのは、
animalの中には配列Animalの要素が順番に渡されるから。
もっと細かく書くと。
find発動。1回目だったらAnimal[0]の要素がanimalに入る。
animal = function({id:1,name:"cat",color:"black"}){
return animal.id(=1) === 1}
最終的にreturnの後ろ、で比較をして、
trueを返す値が見つかればfindはその値を戻すことになる。
変な書き方だし、解釈として間違っている可能性大なのだが。
イメージを掴むためとしての分解をしてみた。
これで理解したつもりでいる(・ω・)
map
配列を加工したり、配列を展開して新しい配列作ったりするメソッド。
色々できる。というイメージしかない。
const Animal = [
{id : 1, name : "cat", color : "black"},
{id : 2, name : "dog", color : "brown"},
{id : 3, name : "bird", color : "blue"}
]
これに新しいキー「address」とプロパティ「"Tokyo"」を加えたい。
const new_list = Animal.map(animal => {
return {...animal, address: "Tokyo"};
});
=>console.log(new_list[0])
これをコンソールログで見ると。
「=>{id: 1, name: 'cat', color: 'black', address: 'Tokyo'}」になっている。
(・ω・)
分解しましょう。
const new_list = Animal.map(animal =>
ここまではさっきのfindと同じなのでは！
ということは、Animalの要素がanimalに順番に渡されていき、それを引数としてアロー関数で更に処理させていく流れ。
では、残りの部分。
animal => {
return {...animal, address: "Tokyo"};
});
これを分解すると。
animal = function(animal){
return {...animal, address: "Tokyo"}
になる。
何でreturnが入ってくるんだ？というと。
アロー関数の後ろを{}中括弧でくくると｛｝の中身のブロックの処理を完了するときに、返す必要が発生するので。．．．
(・ω・)
分からなくなるので、仮にreturn無しで書いてみると。
animal = function(animal){
...animal,address:"Tokyo"}
「...animal」自体はanimalの配列の展開であり、
addressのキーとプロパティ"Tokyo"があるが、これをどうする？という処理が無い。
以上の理由でreturnが必要となってくる。
尚「…animal,address:"Tokyo"」とせずに「animal,address:"Tokyo"」だけですると。
const new_list = Animal.map(animal => {
return {animal, address: "Tokyo"};
});
=>console.log(new_list[0])
コンソールログで見ると。
=>{animal: {…}, address: 'Tokyo'}
さっきと違い、形が変わっている。
ということで、先ほどの元のAnimal配列の中身がanimalに格納されて、それの後ろにaddressが追加された。
より階層が深くなり。アクセスするには。
new_list[0].animal.nameが必要になる。
このような使い方をするときがあるのかは分からないが、少なくとも、配列の展開はmapには重要なことになるようだ。
ここからは雑談。
長々と分解して関数の動作で取得されている値の中身とかを確認していたが、
本当はここまで深く考える必要はないんだろうな。が実は正解だと思う。
しかし、自分自身が何で？何が？どうなっている？となってしまうと、
思考がストップしてしまう悪癖が発動する状態。
理解したい、ここは何が入っていて、と細かく把握することに気が取られて、諸々が全く進まない( ;∀;)
もう少し柔軟な頭の動かし方をしたいが、凝り固まっているんだなぁと日々実感しているところ。