Skip to content

Instantly share code, notes, and snippets.

@NayHtwe24

NayHtwe24/gist:d8a256f29b0b76d9b8f761c26aaf73ac

Created December 11, 2018 01:24
Show Gist options
  • Save NayHtwe24/d8a256f29b0b76d9b8f761c26aaf73ac to your computer and use it in GitHub Desktop.
Save NayHtwe24/d8a256f29b0b76d9b8f761c26aaf73ac to your computer and use it in GitHub Desktop.
Download ZIP
Es6 Syntax Review
Raw
gistfile1.txt
# ES6 - Modern JavaScript
ေျခာက္ႀကိမ္ေျမာက္ တည္းျဖတ္မႈျဖစ္သည့္အတြက္ ES6 ဟု အတိုေကာက္ေခၚ၍ 2015 ခုႏွစ္တြင္ ဖန္တီးခဲ့သည့္ အတြက္ ECMAScript2015 ဟု ရံဖန္ရံခါ ေခၚသည့္ နည္းပညာသည္ လက္ရွိ JavaScript (ES5) ကို အဆင့္ျမႇင့္တင္ထားသည့္ နည္းပညာျဖစ္သည္။ ES6 တြင္ ပါဝင္လာသည့္ လုပ္ေဆာင္ခ်က္မ်ားမွ အခ်ိဳ႕ကို ေ႐ြးထုတ္ ေဖာ္ျပလိုက္ပါသည္။
## Block-scope Variable
မူလ JavaScript တြင္ `var` Keyword ကို အသုံးျပဳ၍ Variable မ်ား ေၾကျငာႏိုင္သည္။ ထို Variable မ်ားသည္ Function-scope သေဘာသဘာဝ ရွိၾကသည္။ ES6 တြင္ `let` Keyword ကို အသုံးျပဳ၍ Block-scope Variable မ်ား ေၾကျငာအသုံးျပဳႏိုင္သည္။
```JavaScript
let i = 10
if(true) {
let i = 5
}
console.log( i ) // => 10
```
နမူနာအရ `if` Block အတြင္းတြင္ `i` Variable ကို ထပ္ဆင့္ေၾကျငာ အသုံးျပဳထားေသာ္လည္ ထို Variable သည့္ `if` Block ႏွင့္သာ သက္ဆိုင္သည့္အတြက္ Block ျပင္ပရွိ `i` Variable ၏ မူလတန္ဖိုး မေျပာင္းလဲျခင္း ျဖစ္သည္။
## Arrow Function
မူလ JavaScript တြင္ Array `filter()` ၏ Callback အျဖစ္ Nameless Function တစ္ခုကို ယခုကဲ့သို႔ သတ္မွတ္ထားသည္ ဆိုၾကပါစို႔။
```JavaScript
[1, 2, 3, 4].filter(function(v) {
return v % 2
})
```
အလားတူလုပ္ေဆာင္ခ်က္ကို ES6 ေရးထုံးတြင္ ေအာက္ပါကဲ့သို႔ ေျပာင္းလဲ ေရးသားႏိုင္သည္။
```JavaScript
[1, 2, 3, 4].filter( v => v % 2 )
```
ဤလုပ္ေဆာင္ခ်က္ကို Arrow Function ဟုေခၚသည္။ အေျခခံအားျဖင့္ `function` Keyword ကို `=>` သေကၤတျဖင့္ အစားထိုးလိုက္ျခင္း ျဖစ္၍ `return` Keyword ကို ဖယ္ထုတ္လိုက္ျခင္း ျဖစ္သည္။ ဝိုက္ကြင္းမ်ား တြန္႔ကြင္းမ်ားကို လိုအပ္သလို အသုံးျပဳ၍ ေအာက္ပါအတိုင္းလည္း ေရးႏိုင္သည္။
```JavaScript
[1, 2, 3, 4].reduce( (c, v) => {
return c + v
})
```
## Rest Parameter
Function Parameter မ်ားကို သတ္မွတ္ပမာဏထက္ပို၍ အလြယ္တစ္ကူ လက္ခံႏိုင္ေစသည့္ ေရထုံးျဖစ္သည္။
```JavaScript
function test(a, b, ...c) {
console.log( c )
}
test( 1, 2, 3, 4, 5 ) // => [3, 4, 5]
```
နမူနာအရ `test()` Function သည္ သတ္မွတ္ပမာဏထက္ ပိုေပးလိုက္သည့္ Parameter မ်ားကို Array တစ္ခုအေနႏွင့္ `c` Parameter ၏ တန္ဖိုးအျဖစ္ သတ္မွတ္ေပးသြားျခင္း ျဖစ္သည္။
## Spread Operator
Array, String စသည့္ Iteratable Value မ်ားကို ခြဲျဖန႔္ေပးႏိုင္သည့္ လုပ္ေဆာင္ခ်က္ျဖစ္သည္။
```JavaScript
var alpha = [ 'a', 'b', 'c' ]
var num = [1, 2, 3]
console.log([ ...alpha, ...num ]) // => ['a', 'b', 'c', 1, 2, 3]
```
နမူနာအရ ခြဲျဖန႔္လိုက္သည့္ တန္ဖိုးမ်ားကို Array တစ္ခုထဲတြင္ စုစည္းလိုက္သည့္အတြက္ Array ႏွစ္ခုကို တြဲဆက္လိုက္သကဲ့သို႔ တူညီေသာ ရလဒ္ကို ရရွိျခင္းျဖစ္သည္။
## String Interpolation
String မ်ားတြင္ Variable မ်ား Property မ်ားကို Concat လုပ္၍ တြဲဆက္ေနရန္ မလိုအပ္ေတာ့ပဲ တိုက္႐ိုက္ ထည့္သြင္းအသုံးျပဳႏိုင္ေစသည့္ လုပ္ေဆာင္ခ်က္ ျဖစ္သည္။
```JavaScript
var user = { name: 'Bob', age: 22 }
console.log( `My name is ${user.name}, I'm ${user.age} years old.` )
// => My name is Bob, I'm 22 years old.
```
String ကို Single Quote / Double Quote မ်ားႏွင့္ မေရးသားပဲ Backtick အဖြင့္အပိတ္ျဖင့္ ေရးသားသည္ကို သတိျပဳပါ။
## Property Shorthand
မူလ JavaScript တြင္ ဤကဲ့သို႔ေသာ အေျခအေနမ်ား မၾကာခဏ ႀကဳံရတတ္သည္။
```JavaScript
var name = 'Bob'
var age = 22
var user = {
name: name,
age: age,
say: function() {
return 'Hello'
}
}
```
Property Name ႏွင့္ Value အျဖစ္အသုံးျပဳလိုသည့္ Variable အမည္တို႔ တူညီေနျခင္းျဖစ္သည္။ ဤကဲ့သို႔ အေျခအေနမ်ိဳးအတြက္ ES6 တြင္ ေအာက္ပါအတိုင္း အတိုေကာက္ ေရးႏိုင္သည္။
```JavaScript
var name = 'Bob'
var age = 22
var user = {
name,
age,
say() {
return 'Hello'
}
}
```
Method ကိုလည္း function Keyword မပါဝင္ေတာ့ပဲ အတိုေကာက္ ေရးသားထားသည္ကို သတိျပဳပါ။
## Class
မူလ JavaScript တြင္ Object မ်ားတည္ေဆာက္ရန္ Object Constructor (Function) သို႔မဟုတ္ JSON ကို အသုံးျပဳရသည္၊ Class ေရးထုံး မပါဝင္ပါ။ ES6 တြင္ Class ေရးထုံး ပါဝင္လာသည္။
```JavaScript
class Animal {
constructor(legs, wings) {
this.legs = legs
this.wings = wings
}
say() {
return 'Hello, World'
}
}
class Dog extends Animal {
constructor(legs) {
super(legs, 0)
}
say() {
return "I'm a good boi"
}
}
```
Inheritance အတြက္ OOP Language အမ်ားစုကဲ့သို႔ `extends` Keyword ကို ဆက္လက္အသုံးျပဳ၍ Method မ်ား ေၾကျငာရန္ `function` Keyword အသုံးျပဳျခင္း မရွိသည္ကို သတိျပဳရေပမည္။
## Module
မူလ JavaScript တြင္ Module Loader လုပ္ေဆာင္ခ်က္ ပါဝင္ျခင္းမရွိပါ။ ထို႔ေၾကာင့္ သီးျခား ခြဲျခားထားသည့္ JavaScript Code မ်ားကို တြဲဖက္ အလုပ္လုပ္ႏိုင္ေစရန္ `<script src="">` HTML Element ၏ အကူအညီကို ရယူရသည္။ ES6 တြင္ Module လုပ္ေဆာင္ခ်က္ ပါဝင္လာခဲ့ၿပီျဖစ္သည္။
```JavaScript
// A Module (math.js)
exports var PI = 3.1416
exports function area(r) {
return PI * r * r
}
```
```JavaScript
// Another Module (app.js)
import { PI, area } from './math.js'
console.log( area(8) ) // => 201.0624
```
`math.js` Module ၏ လုပ္ေဆာင္ခ်က္မ်ားကို `app.js` က Import လုပ္ယူ အသုံးျပဳထားျခင္းျဖစ္သည္။
______
Promise, Proxy, Generator စသည့္ အျခား စိတ္ဝင္စားဖြယ္ လုပ္ေဆာင္ခ်က္မ်ားလည္း က်န္ရွိေပေသးသည္။ ေအာက္ပါလိပ္စာတြင္ ဆက္လက္ေလ့လာႏိုင္သည္။
http://es6-features.org
ယေန႔အခ်ိန္တြင္ Internet Explorer မွလြဲ၍ Chrome, Firefox, Edge စသည့္ Modern Browser အမ်ားစုတြင္ ES6 လုပ္ေဆာင္ခ်က္ အမ်ားအျပားကို ပံ့ပိုးေပးေနၿပီျဖစ္သည္။ အေသးစိတ္ကို ေအာက္ပါဇယားတြင္ စီစစ္ ေလ့လာႏိုင္ပါသည္။
https://kangax.github.io/compat-table/es6/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment