見出し画像

JS学習記録第6回 ループ文による条件分岐

こんにちは。
大阪のweb制作会社に勤務しているゆーたです。
学習がてら、noteに学習記録を残しております!
今回は、前回まとめたループ文の応用として、条件分岐を交えてnoteに書きたいと思います!


今回は、配列の中にオブジェクトを設けて条件分岐を書いてみたいと思います。

const work = [
   {
       id:1,
       day:'Sunday',
       holiday:true,
   },
   {
       id:2,
       day:'Monday',
       holiday:false,
   },
   {
       id:3,
       day:'Tuesday',
       holiday:false,
   },
]


for(let i = 0; i < work.length; i++ ){
   console.log(work[i]);

};

1つの配列にそれぞれオブジェクトの内容が入っている感じです!
分かりやすく、変数をworkとして曜日、休みの情報を入れてみました。
for文で前回学習した内容、初期化処理、lengthで配列の数を取得して、配列の数より小さければ1を足すような処理をしてループしています。
詳しくは前回の記事から確認できます。

上記の内容を出力すると、
それぞれの配列情報を取得できたことが分かります。

スクリーンショット 2021-12-28 18.36.00


中の取得したい情報を選んで出力することも可能です。

for(let i = 0; i < work.length; i++ ){
   console.log(work[i].day);

};

スクリーンショット 2021-12-28 18.37.40

いつものように、work内のdayなので間を「.」で区切って記述します。




ループ文による条件分岐

ここから本題です。
上記のソースをもとに、
holidayがtrueならdayを出力するという条件分岐をい書いてみたいと思います!
holiday(休日)が正なら曜日を出力するといった感じです!

for(let i = 0; i < work.length; i++ ){
   let val = work[i];
   if(val.holiday === true){
       console.log(val.day);
   }

};

スクリーンショット 2021-12-28 19.06.07

無事出力されました!

プログラムの内容を見ていきます。
for(let i = 0; i < work.length; i++ )
・こちらは今まで通り配列の数より大きくなるまでループする文です。

let val = work[i];
if(val.holiday === true){
console.log(val.day);

}
・こちらは、変数valにwork[i]を代入しております。work[i]は3つの配列内のオブジェクトです。
if文を使って、
もしval(3つの配列の内、holidayで)trueなものがあれば、
console.log(val.day)←配列内のdayを出力する。
という内容になっております。
まとまっているのかいないのか。。。

因みに変数valのvalは任意の文字で大丈夫です!(aでもbでも何でも良いです)
もしくはvalといった変数を使用しなくても大丈夫です!

for(let i = 0; i < work.length; i++ ){
   if(work[i].holiday === true){
       console.log(work[i].day);
   }
   
};

上記でも同じような返答が返ってきます。
===はプログラムで等しいという意味です。
=は代入、==は===と似ているのですが、詳しくは調べてみてください!
簡単にいうと==は1と'1'を同じとみなしますが、===では同じとみなしません。===の方が厳密に比較します。


こうやって自分でまとめると頭の中が整理されますね!
お疲れ様でした!


いいなと思ったら応援しよう!

ゆーた 台湾移住🇯🇵🇹🇼
大阪在住の29歳。web制作会社勤務。noteを通してたくさんの出会いを作っていきたいです。台湾が大好きで中国語勉強中。日台夫婦。日々の挑戦の記録や、社会の生きづらさ、台湾のことなどを書いていこうと思います。2023年台湾に移住予定です。