Kay's Techverse

STACK DATA STRUCTURE IN JAVASCRIPT
---------------------------------------------------------------------

Javascript code တွေ နောက်ကွယ်မှာဘယ်လိုအလုပ်လုပ်လဲဆိုတာ သိဖို့ဆိုရင် event loop ကိုအရင်သိဖို့လိုအပ်ပါတယ်

Event loop ကို javascript interview တွေမှာအမေးများပါတယ် javascript developer တစ်ယောက်ဖြစ်ဖို့ကြိုးစားနေတဲ့ သူဆိုရင် event loop အကြောင်းကိုသေချာသိထားသင့်ပါတယ်

Event loop ကို သိဖို့ဆိုရင် အရင်ဆုံး (stack,heap queue ,web apis)တွေကိုသိဖို့လိုပါတယ် အဲ့‌တာကြောင့် ဒီ article မှာ stack အကြောင်းကိုအရင်ပြောသွားမှာပါ

⭐ Data structure မှာ linear data structure နဲ့ non-linear data structure ဆိုပြီး နှစ်မျိုးရှိပါတယ်

⭐
Stack က linear data structure တစ်မျိုးပါ
Linear data structure ဆိုတာ store လုပ်လိုက်တဲ့ data တွေက အစဉ်လိုက်ဖြစ်‌တာမျိုး၊ တစ်ခုနဲ့တစ်ခုနီးနီကပ်ကပ်ရှိတာမျိုးက်ိုပြောချင်တာပါ

⭐ Javascript code တွေကို stack ပေါ်တင် run ပါတယ်

⭐ သူရဲ့ order က LIFO(last in first out)or FILO(first in last out) ပါ
ပြောချင်တာ က နောက်ဆုံးမှ ၀င်လာတဲ့
ကောင်က အရင်အလုပ်လုပ်မယ်
ပထဆုံး၀င်ရင် အောက်ဆုံးရောက်သွားပါတယ်

Javascript မှာ build in stack method ရယ်လို့ မရှိပါဘူး အဲ့တာ‌ကြောင့် stack အကြောင်းပြောရင် array နဲ့ပဲ ဥပမာပြကြရပါတယ်

ဒါ့ပေမယ့် stack မှာ က method နှစ်ခုပဲ ရှိပါတယ် အဲ့တာက stack ထဲကို data ထည့်တာ(push)ရယ် ဖျက်တာ(pop)ရယ်ပါ

⭐ data Insert လုပ်ရင် stack ရဲ့ အပေါ်ဆုံးမှာပဲ ထည့်ရမှာပါ delete လုပ်ရင် လည်းအပေါ်ဆုံးကကောင်ပဲ ဖျက်လို့ပါရတယ်

# အောက်က ပုံနဲ့တွဲကြည့်ပေးပါ

let stack = [ ]

stack.push(1);
stack ထဲ 1 ဆိုတဲ့ element တစ်ခု၀င်သွားပါပြီ

stack.push(2);
console.log(stack); #1,2

stack ထဲ element နှစ်ခုရောက်သွားပါပြီ

3,4,5 ထပ်ထည့်ကြည့်ပါမယ်

⭐ နောက်ဆုံး push တဲ့ကောင်က stack ရဲ့အပေါ် ဆုံးရောက်သွားပါတယ်
5
4
3
2
1
ဆိုပြီးဖြစ်သွားမှာပါ

⭐ ပြန်ဖျက်ချင်ရင် pop နဲ့ အပေါ်ဆုံး element ကိုဖျက်လို့ရပါတယ် အပေါ်ကကောင်ပျက်သွားမှ အောက်က ကောင်ကို ဆက်လုပ်လို့ရပါတယ်

ဒါဆိုရင် ကျွန်တော်တို့ javascript code တွေနဲ့စဉ်းစားကြည့်ရအောင်ပါ javascript function တွေကို stack ပေါ်တင် run တဲ့အခါ

ဥပမာ -

hello( )
world( )

ဆိုပြီး function နှစ်ခုကိုခေါ်ထားရင် ပထမတွေ့တဲ့ကောင်ကို STACK ထဲကို push လုပ်လိုက်တယ် run ပြီးရင် pop ပြန်လုပ်တယ်
‌pop လုပ်ပြီး stack က empty ဖြစ်သွားမှ နောက် world ကို push လုပ်ပြီး world ကို run တာပါ

ဒါ က function တစ်ချင်းစီပါ

⭐ တစ်ကယ်လို့ function hello ထဲမှာ world ကိုထည့် run မယ်ဆိုရင် ရော?

function hello(){
world()
}
hello()

hello ကိုခေါ်ထားတာဖြစ်တဲ့အတွက် stack ပေါ်မှာ hello ရောက်သွားပါတယ် hello ကို run တဲ့ အခါ world ကို ခေါ်ထားတာကိုသွားတွေ့ပါတယ် အဲ့တာကြောင့် stack ပေါ်မှာ world ကို push လိုက်ပါတယ်

STACK က ခုလိုဖြစ်သွားမှာပါ

world ( )
hello( )

နောက်ဆုံးမှ push တဲ့ကောင်က အပေါ်ဆုံးရောက်သွားမှာပါ
Array အနေနဲ့ မြင်ကြည့်ရင်
stack = [hello,world]

⭐ Stack က world ကို အရင်run ပါတယ်
သူ့ရဲ့order က LIFO နောက်ဆုံး၀င်တဲ့ကောင်ကို အရင်အလုပ်လုပ်တဲ့အတွက်ကြောင့်ပါ

world ကို run ပြီးရင် ပြန်ဖျက်တယ် ပြီးမှသူ့ရဲ့အောက်က hello ကိုလုပ်ပါတယ်

⭐ Javascript က single thread ဖြစ်တဲ့အတွက်ကြောင့် တစ်ခုပြီးမှ တစ်ခု လုပ်တာပါ ကျော်ပြီးမလုပ်ပါဘူး။အဲ့‌တာကြောင့် ကြားဖြတ်အလုပ်လုပ်စေချင်တဲ့ event handler က callback function တွေ ဘယ်လို run လဲဆိုရင် Web apis တွေ queue နဲ့ တွဲဖက်အလုပ်လုပ်ပုံကိုသိဖို့လိုအပ်ပါတယ်

နောက် article မှာ queue အကြောင်းကို ဆက်လက်ပြောပြသွားပါမယ်ခင်ဗျာ......

ရုပ်ချောပြီး web design ဆွဲရင် မလှတဲ့သူတွေရှိလားဗျ 🤕 code တော့ရေးတတ်တယ် designဆွဲရင် idea မရလို့ developer တစ်ချို့အတွက်အခက်အခဲ ဖြစ်ကြပါတယ် ကျွန်တော်ကဒီနေ့မှာတော့ website design ideaရမယ်​့ website လေးတွေကိုပြောပြလိုက်ပါတယ်ဗျာ

( Design ideaရဖို့ရည်ရွယ်တာဖြစ်တဲ့အတွက် website အားလုံးက Template ရမှာမဟုတ်ပါ)

1️⃣ 𝐄𝐧𝐯𝐚𝐭𝐨 𝐞𝐥𝐞𝐦𝐞𝐧𝐭

https://elements.envato.com/

ဒီ website မှာ admin template,email template,site template, landing page template ​တွေကိုရှာလို့ရမှာဖြစ်ပါတယ်
Live preview ကြည့်လို့ရပါတယ် template ကို download လုပ်ချင်ရင်တော့ဝယ်ရပါမယ်ဗျ 🤗
template တွေအများကြီးရှိတာမို့ ကျွန်တော်တို့ website အတွက် ကြိုက်တာတစ်ခုတော့တွေ့မှာပါဗျာ🤗

2️⃣ 𝐀𝐰𝐰𝐰𝐚𝐫𝐝𝐬

https://www.awwwards.com/

ဒီwebsite ကတော့ design လှတဲ့ websiteတွေအများကြီးပါပဲ တစ်ခုခုကိုရှာလိုက်ရင် website ပေါင်း ​လေးထောင်ကျော် ငါးထောင်ကျော်ရလာတာမို့ ကျွန်တော်တို့တွက် စိတ်တိုင်းကျတာတစ်ခုတော့တွေ့ရမှာပါ 🤗

3️⃣ 𝐁𝐞𝐬𝐭 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 𝐆𝐚𝐥𝐥𝐞𝐫𝐲

https://bestwebsite.gallery/

ဒီ website ကလဲ deisgn idea ရဖို့အတွက် သိထားသင့်တဲ့ website တစ်ခုပါဗျာ
Live preview ကြည့်လို့ရပါတယ်🤗

( စာရိုက်ပြီး ရှာရတာထက် သူပေးထားတဲ့ Hash tag နဲ့ရှာတာပိုအဆင်ပြေပါတယ်)

4️⃣ 𝐓𝐞𝐦𝐩𝐥𝐚𝐭𝐞 𝐌𝐨𝐧𝐬𝐭𝐞𝐫

https://www.templatemonster.com/free-templates.php

ဒီ website ကတော့ template တွေ download လုပ်လို့ရမှာပါ အကုန်လုံးတော့ free မရပါဘူး free ရတဲ့ template တွေလဲရှိပါတယ် freeလိုချင်ရင် တစ်ခုတော့လုပ်ပေးရပါတယ် Social media တစ်ခု မှာ share ပေးရမှာပါ share ပြီးသွားရင်တော့ download လုပ်လို့ရပါပြီ 🤗

5️⃣ 𝐃𝐫𝐢𝐛𝐛𝐛𝐥𝐞

https://dribbble.com/

ဒီ website မှာလဲ website design တွေအများကြီးရှိပါတယ် live preview ကြည့်မရပါဘူး template လဲမဟုတ်ပါဘူး ပုံပါပဲ

6️⃣ 𝐏𝐢𝐧𝐭𝐞𝐫𝐞𝐬𝐭️

https://www.pinterest.com/

Pinterest ကိုတော့အားလုံးသိကြမှာပါ web design,mobile design တွေအပြင်အခြားနယ်ပယ်စုံက ပုံတွေရှာလို့ရနိုင်မှာပါ
(mobile app လဲရှိပါတယ်)

ဒီ websites ကျွန်တော် အမြဲတမ်းသုံးကြည့်ဖြစ်တဲ့ website တွေပါ အခြားအသုံးဝင်တဲ့ website တွေလဲရှိပါတယ်ဗျာ ရှာကြည့်ပါဗျ

ကျွန်တော်တို့ website တွေမှာ illustrations, vector,icon တွေနဲ့ဆိုရင် ပိုကြည့်ကောင်းပြီးတော့ user ကိုဆွဲဆောင်နိုင်စေမှာပါ အဲ့တာတွေကို free ရနိုင်တဲ့ website တွေကိုပြောပြလိုက်ပါတယ်ဗျာ

1️⃣ Pixabay

https://pixabay.com/

ဒီ website ကတော်တော်လေးစုံပါတယ် quality ကောင်းတဲ့ပုံတွေ illustrations,vectors, videos, music နဲ့ sound effect တွေရှိပါတယ် လိုချင်တာ
Free Download လုပ်ပြီးသုံးရုံပါပဲ 🤗

2️⃣ unDraw

https://undraw.co/illustrations

undraw မှာ illustrations တွေရှာလို့ရပါတယ် ပုံလေးတွေက လှတယ် animation တွေပါတယ် color ​တွေလည်း စိတ်ကြိုက် ပြောင်းလို့ရတယ် download လုပ်ရင်လည်း SVG နဲ့ PNG နှစ်မျိုး ရွေးလို့ရတယ် free download လို့လဲရတာမို့ ပုံလှတာလေးတွေလိုချင်ရင် အဲ့site ကိုသာ သွားလိုက်ပါ🤗

3️⃣ Flaticon

https://www.flaticon.com/

ဒီ website ကတော့ devloper တော်တော်များများသိကြပါတယ်။ flaticon မှာ icon တွေနဲ့ sticker တွေအများကြီးရှိပါတယ် ပုံတွေကလှပြီး color တွေလဲ စိတ်ကြိုက် edit ပြီး free download လုပ်လို့ရပါတယ်🤗

4️⃣Openclipart

https://openclipart.org/

ကျွန်တော်တို့ website အတွက် clipart ပုံလေးတွေ လိုချင်တယ်ဆို ဒီwebsite ကိုသာသွားလိုက်တာ အများကြီးရှိပါတယ် free download လုပ်လို့ရပါတယ်🤗

5️⃣ Freepik

https://www.freepik.com/

Freepik မှာတော့ photo,vector,psd တွေရှာလို့ရပါတယ် တစ်ချို့ပုံတွေက premium တွေပါ တော်တော်များများတော့ free download လို့ရပါတယ် searchလုပ်လိုက်ရင် ပုံကောင်းတွေအများကြီးတွေ့ရပါတယ်🤗

6️⃣Pngmart

https://www.pngmart.com/

ဒီ website မှာပါ transparent image background တွေရှာလို့ရပါတယ် categories ကလဲတော်တော်စုံပါတယ် 🤗

အထက်က websites တွေကလူသုံးများပြီး ကျွန်တော် အမြဲတမ်းသုံးဖြစ်တဲ့ website တွေပါ အခြားအသုံးဝင်တဲ့ website တွေလဲရှိပါသေးတယ်

https://www.vectorstock.com/
https://www.vector4free.com/
https://thenounproject.com/
https://www.vecteezy.com/browse
https://www.shutterstock.com/vectors -download