JavaScript Coding Tricks (Part-1)

1305 views Nov 21, 2024

Hello guys!

ဒီblog မှာတော့ JavaScript Trick လေးတွေအကြောင်းကို Part-1 အနေနဲ့ ဆွေးနွေးသွားပါမယ်။

အမှန်အတိုင်းပြောရရင် JavaScript Trick တွေက ပြောရရင်မလောက်နိုင်ပါဘူး..
ဒါပေမဲ့ တစ်ချို့အရာတွေကတော့ လက်တွေ့မှာ သုံးစရာမလိုသေးတဲ့နည်းတွေလဲရှိပါတယ်။
ကျွန်တော့် personally အရပြောရရင်တော့ ကိုယ်လိုအပ်မှ ရှာပြီးသုံးလိုက်တာပိုများတယ်..အသုံးများတဲ့ နည်းကတော့ မှတ်မိနေလို့ ချရေးလိုက်တာပိုမြန်တာပေါ့.. 
ဒါပေမဲ့ တချို့ဟာတွေကလဲ သိထားရင်လည်း အကျိုးတော့မယုတ်ပါဘူး..အပျင်းပြေပေါ့။ 

1. Converting To Boolean
Boolean type ဆိုတာနဲ့ true or false လို့သိထားကျပါတယ်။ JavaScript မှာ   negative operator '!' နဲ့ boolean type ကို convert လုပ်ပေးနိုင်ပါတယ်။ အောက်က code ကိုဖတ်ရင် သဘောပေါက်မှာပါ။ 0 သည် false အဖြစ်ယူဆပြီး 1 သည် true လို့‌ယူဆတာ အရင်ထဲကသိထားမှာပါ။ ! နဲ့ အခုလို အလွယ်တကူထပ်ပေါင်းပြီး လိုအပ်တဲ့ result ကိုရယူနိုင်ပါသေးတယ်။ 

const a  = !0;
const b = !1;
const c = !!0;
console.log(a);  
//Output: true
console.log(typeof a); 
//Output: "boolean" 

2. Converting To Number
Boolean type ကနေ number ပြောင်းချင်ရင် addition operator '+' သုံးပြီး အခုလိုအလွယ်တကူပြောင်းနိုင်ပါတယ်။

console.log(+true);  
//Output: 1
console.log(+false); 
//Output: 0

ရိုးရှင်းတယ်မလား? ဒါပေမဲ့ လက်တွေ့ codeရေးတဲ့အချိန်မှာတော့ ကျွန်တော်တို့က အလုပ်ဖြစ်အောင်ပဲ code ရေးတဲ့အတွက် အသေးစိတ်ကို သတိထား‌မနေနိုင်ပါဘူး။

အသုံးမများပေမယ့် bitwise NOT operator သုံးပြီးလဲ ပြောင်းလို့ရပါသေးတယ်။
bitwise NOT operator ကတော့ "~" လေးပေါ့.. သူ့ formula က (-n-1) ပါ။
အဲတော့သူ့ကိုသုံးရင်တော့ ~true = -2 နဲ့ ~false = -1 ဆိုပြီးရပါလိမ့်မယ်။

3. Shorthand Powers
နှစ်သုံးထပ်ရဲ့တန်ဖိုး ကိုလိုချင်ရင် Math.pow(2, 3) နဲ့ ရေးလို့ရတာသိမှာပါ။ (သို့မဟုတ်) 2 * 2 * 2 လို့ရေးလဲရမှာပါ။ အဖြေကတော့ 8 ပဲထွက်မှာပါ။ 

နောက်တစ်မျိုးအနေနဲ့ exponentiation operator ** ကို အတိုကောက်အနေနဲ့ power case တွေမှာသုံးလို့ရပါသေးတယ်။

Math.pow(2, 3) //Output: 8
2 ** 3 // Output: 8

4. Removing Elements From Array
 Array တစ်ခုကနေ elements တွေကို ထုတ်ပစ်တဲ့နည်း အတော်များများရှိပါတယ်။ ကိုယ်လိုချင်တဲ့ ပုံစံရအောင်ပေါ့.. ဥပမာ..
ကိုယ်က အနောက်ဆုံးက element တစ်ခုပဲ remove မယ်ဆို pop() ကိုယူသုံးလိုက်ရုံပါပဲ

var ar = [1, 2, 3, 4, 5, 6];
ar.pop(); // returns 6
console.log( ar ); // [1, 2, 3, 4, 5]

အရှေ့ဆုံးတစ်လုံးကိုပဲ remove ပစ်မယ်ဆို shift() သုံးနိုင်ပါတယ်။ 
ဒါမှမဟုတ် အတိအကျ remove ပစ်ချင်တယ်ဆို splice() ကိုသုံးနိုင်ပါတယ်။

var list = ["bar", "baz", "foo", "qux"];
list.splice(0, 2); // removed "bar" and "baz"

Array ထဲမှာ condition စစ်ပြီး မလိုတဲ့အရာတွေ remove မယ်ဆို filter() လိုမျိုး higher-order function မျိုးတွေသုံးနိုင်တယ်။ အသေအချာ ဘာသုံးရမယ်ဆိုတာမျိုးမဟုတ်ပဲ ကိုယ်လိုအပ်တဲ့အဖြေကို ပေးနိုင်တာတွေကို သုံးရင်တွေ့လာမှာပါ။ 

5. Get Last Element(s) of Array
ဒီတစ်ခုကတော့ အပေါ်ကလို remove တာမျိုးမဟုတ်တော့ပဲ နောက်ဆုံး elements တွေပဲလိုချင်တဲ့အခါမျိုးမှာ အလွယ်တကူသုံးလို့ရပါတယ်။

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

6. Filter Unique Values In Array
array တစ်ခုထဲမှာ တစ်ခါတစ်လေတူညီတဲ့ value တွေစုနေတတ်ပါတယ်။
ဥပမာ.. [1,2,1,'a','a'] ထဲမှာ 1 နဲ့ 'a' တန်ဖိုးကထပ်နေတာတွေ့ရမှာပါ။

အဲ့လိုအခြေအနေမှာ မထပ်တဲ့ unique value တွေပဲလိုချင်တယ်ဆို ဒီtrickကိုသုံးနိုင်ပါတယ်။ JavaScript primitive types တွေအတွက်ပါ အလုပ်လုပ်ပေးနိုင်ပါတယ်။

var a = [1,2,1,'a','a'];
var uniqueArray = a.filter(function (value, index, self) {
  return self.indexOf(value) === index;
});
console.log(uniqueArray);
//Output: [1, 2, "a"]

ဒီအဖြေကိုရရှိဖို့ပဲ နောက်trick တစ်ခုသုံးလို့ရပါသေးတယ်။ ES6 ရဲ့ Set object type ကို အောက်ပါအတိုင်းသုံးလို့ရပါတယ်။ 

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); 
//Output: [1, 2, 3, 5]

Congratulations!
နောက်blogမှာ JavaScript trick (code အရေးအသား) တွေအကြောင်းဆက်လက်ဆွေးနွေးသွားပါမယ်။ ဖတ်ရှုပေးတဲ့အတွက် ကျေးဇူးတင်ပါတယ်။

#DetailProjects
#JavaScript
#ThuHtetTun