ES6 کیا ہے اور جاوا اسکرپٹ پروگرامرز کو کیا جاننے کی ضرورت ہے۔

ES6 سے مراد ECMA اسکرپٹ پروگرامنگ زبان کا ورژن 6 ہے۔ ای سی ایم اے سکرپٹ جاوا اسکرپٹ کا معیاری نام ہے ، اور ورژن 6 ورژن 5 کے بعد اگلا ورژن ہے ، جو 2011 میں جاری کیا گیا تھا۔ یہ جاوا اسکرپٹ زبان میں ایک اہم اضافہ ہے ، اور اس میں بہت سی خصوصیات شامل کی گئی ہیں جس کا مقصد بڑے پیمانے پر سافٹ وئیر ڈویلپمنٹ کو آسان بنانا ہے۔ .

ECMAScript ، یا ES6 ، جون 2015 میں شائع ہوا تھا۔ بعد میں اس کا نام ECMAScript 2015 رکھ دیا گیا۔ مکمل زبان کے لیے ویب براؤزر سپورٹ ابھی مکمل نہیں ہے ، اگرچہ بڑے حصے سپورٹ کیے گئے ہیں۔ بڑے ویب براؤزر ES6 کی کچھ خصوصیات کی حمایت کرتے ہیں۔ تاہم ، یہ ممکن ہے کہ سافٹ وئیر استعمال کیا جائے جسے a کھلاڑی ES6 کوڈ کو ES5 میں تبدیل کرنے کے لیے ، جو زیادہ تر براؤزرز پر بہتر سپورٹ کیا جاتا ہے۔

---

---

آئیے اب کچھ بڑی تبدیلیاں دیکھیں جو ES6 جاوا اسکرپٹ میں لاتا ہے۔

1. مستقل

آخر میں قسطنطنیہ کے تصور نے اسے جاوا اسکرپٹ بنا دیا ہے! مستحکم اقدار ہیں جن کی وضاحت صرف ایک بار کی جا سکتی ہے (فی دائرہ کار ، دائرہ کار ذیل میں بیان کیا گیا ہے)۔ اسی دائرہ کار میں دوبارہ تعریف ایک غلطی کو متحرک کرتی ہے۔

const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.


آپ جہاں کہیں بھی متغیر استعمال کر سکتے ہیں استعمال کر سکتے ہیں کہاں ).

console.log('Value is: ' + joe * 2)
// prints: 8


2. بلاک اسکوپڈ متغیرات اور افعال۔

21 ویں صدی میں خوش آمدید ، جاوا اسکرپٹ! ES6 کے ساتھ ، متغیرات کو استعمال کرنے کا اعلان کیا گیا۔ چلو (اور اوپر بیان کردہ مستحکم) جاوا ، C ++ ، وغیرہ کی طرح بلاک اسکوپنگ قوانین پر عمل کریں (مزید جاننے کے لیے ، جاوا اسکرپٹ میں متغیرات کا اعلان کرنے کا طریقہ دیکھیں۔)

اس اپ ڈیٹ سے پہلے ، جاوا اسکرپٹ میں متغیرات فنکشن اسکوپڈ تھے۔ یعنی ، جب آپ کو کسی متغیر کے لیے ایک نئی گنجائش درکار ہو ، آپ کو اسے کسی فنکشن کے اندر اعلان کرنا پڑتا تھا۔

---

---

متغیرات بلاک کے اختتام تک قیمت کو برقرار رکھتے ہیں۔ بلاک کے بعد ، بیرونی بلاک میں قدر (اگر کوئی ہے) بحال ہو جاتی ہے۔

گیم میکر کو ڈریگ اینڈ ڈراپ کریں۔

{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello


آپ اس طرح کے بلاکس کے اندر بھی کنسٹینٹس کی نئی وضاحت کر سکتے ہیں۔

---

---

{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world


3. تیر کے افعال۔

ES6 متعارف کرایا۔ تیر کے افعال جاوا اسکرپٹ کو. (یہ روایتی افعال سے ملتے جلتے ہیں ، لیکن ایک آسان نحو ہے۔) مندرجہ ذیل مثال میں ، ایکس ایک فنکشن ہے جو کہ پیرامیٹر کہلاتا ہے۔ کو ، اور اس کا اضافہ واپس کرتا ہے:

var x = a => a + 1;
x(4) // returns 5


اس نحو کا استعمال کرتے ہوئے ، آپ آسانی سے افعال میں دلائل کی وضاحت اور پاس کرسکتے ہیں۔

a کے ساتھ استعمال کرنا۔ ہر ایک کے لئے() :

[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16


ایک سے زیادہ دلائل کو قبول کرنے والے افعال کو قوسین میں بند کرکے بیان کریں:

[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]


4. ڈیفالٹ فنکشن پیرامیٹرز

فنکشن پیرامیٹرز کو اب ڈیفالٹ ویلیوز کے ساتھ ڈیکلئر کیا جا سکتا ہے۔ مندرجہ ذیل میں ، ایکس دو پیرامیٹرز کے ساتھ ایک فنکشن ہے۔ کو اور ب . دوسرا پیرامیٹر۔ ب کی ڈیفالٹ ویلیو دی جاتی ہے۔ 1۔ .

var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4


دوسری زبانوں جیسے C ++ یا ازگر کے برعکس ، پہلے سے طے شدہ اقدار والے پیرامیٹرز بغیر ڈیفالٹ کے سامنے آسکتے ہیں۔ نوٹ کریں کہ یہ فنکشن a کے ساتھ بلاک کے طور پر بیان کیا گیا ہے۔ واپسی مثال کے ذریعے قدر.

var x = (a = 2, b) => { return a * b }


تاہم دلائل بائیں سے دائیں مماثل ہیں۔ نیچے دی گئی پہلی دعوت میں ، ب ایک ہے غیر متعین قدر اگرچہ کو ڈیفالٹ ویلیو کے ساتھ اعلان کیا گیا ہے۔ منظور شدہ دلیل کے ساتھ مماثل ہے۔ کو بجائے اس کے ب . فنکشن واپس آتا ہے۔ NaN .

x(2)
// returns NaN
x(1, 3)
// returns 3


جب آپ واضح طور پر داخل ہوتے ہیں۔ غیر متعین بطور دلیل ، ڈیفالٹ ویلیو استعمال کی جاتی ہے اگر کوئی ہے۔

x(undefined, 3)
// returns 6


5. باقی فنکشن پیرامیٹرز

جب کسی فنکشن کو طلب کرتے ہو تو ، بعض اوقات ضرورت پیدا ہوتی ہے کہ وہ دلائل کی صوابدیدی تعداد میں گزر سکے ، اور فنکشن کے اندر ان دلائل پر کارروائی کرے۔ اس ضرورت کو ہینڈل کیا جاتا ہے۔ باقی فنکشن پیرامیٹرز نحو یہ ذیل میں دکھائے گئے نحو کا استعمال کرتے ہوئے وضاحت شدہ دلائل کے بعد باقی دلائل پر قبضہ کرنے کا ایک طریقہ فراہم کرتا ہے۔ یہ اضافی دلائل ایک صف میں پکڑے گئے ہیں۔

var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left


6. سٹرنگ ٹیمپلیٹنگ۔

سٹرنگ ٹیمپلیٹنگ سے مراد متغیرات اور تاثرات کو پرل یا شیل جیسے نحو کا استعمال کرتے ہوئے ڈور میں بدلنا ہے۔ ایک سٹرنگ ٹیمپلیٹ بیک ٹک حروف میں بند ہے ( ' ). اس کے برعکس واحد اقتباسات ( ' ) یا ڈبل ​​کوٹس ( ' ) عام ڈور کی نشاندہی کریں۔ سانچے کے اندر کے تاثرات کے درمیان نشان لگا دیا گیا ہے۔ $ { اور } . یہاں ایک مثال ہے:

var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'


یقینا ، آپ تشخیص کے لئے صوابدیدی اظہار استعمال کرسکتے ہیں۔

// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'


ڈور کی وضاحت کے لیے یہ نحو ملٹی لائن ڈور کی وضاحت کے لیے بھی استعمال کیا جا سکتا ہے۔

var x = `hello world
next line`
// returns
hello world
next line


7. آبجیکٹ پراپرٹیز

ES6 ایک آسان چیز تخلیق نحو لاتا ہے۔ ذیل کی مثال پر ایک نظر ڈالیں:

var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}


حساب شدہ پراپرٹی کے نام بھی کافی نفٹی ہیں۔ ES5 اور اس سے پہلے کے ساتھ ، ایک شمار شدہ نام کے ساتھ ایک آبجیکٹ پراپرٹی مقرر کرنے کے لیے ، آپ کو یہ کرنا پڑا:

var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}


اب آپ یہ سب ایک ہی تعریف میں کر سکتے ہیں:

var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}


اور یقینا ، طریقوں کی وضاحت کرنے کے لئے ، آپ اسے صرف نام کے ساتھ بیان کرسکتے ہیں:

var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6


8. رسمی کلاس تعریف نحو۔

کلاس کی تعریف

اور آخر میں ، جاوا اسکرپٹ کو باقاعدہ کلاس ڈیفینیشن نحو ملتا ہے۔ اگرچہ یہ پہلے سے دستیاب پروٹائپ ٹائپ پر مبنی کلاسوں میں محض مصنوعی شوگر ہے ، یہ کوڈ کی وضاحت کو بڑھانے کا کام کرتی ہے۔ اس کا مطلب ہے کہ یہ کرتا ہے۔ نہیں ایک نیا آبجیکٹ ماڈل یا اس جیسی کوئی بھی چیز شامل کریں۔

class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}


طریقوں کا اعلان۔

طریقہ کار کی وضاحت کرنا بھی بہت آسان ہے۔ وہاں کوئی تعجب نہیں۔

class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669


گیٹرز اور سیٹرز۔

نحو میں سادہ اپ ڈیٹ کے ساتھ اب ہمارے پاس گیٹر اور سیٹرز بھی ہیں۔ آئیے اس کی نئی وضاحت کرتے ہیں۔ دائرہ ایک کے ساتھ کلاس رقبہ جائیداد

class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669


آئیے اب ایک سیٹر شامل کریں۔ وضاحت کرنے کے قابل ہونا۔ رداس ایک قابل سیٹ پراپرٹی کے طور پر ، ہمیں حقیقی فیلڈ کی نئی وضاحت کرنی چاہیے۔ _ ریڈیو یا کوئی ایسی چیز جو سیٹٹر سے ٹکراؤ نہ کرے۔ بصورت دیگر ہمیں اسٹیک اوور فلو کی خرابی کا سامنا کرنا پڑتا ہے۔

یہاں نئی ​​وضاحت شدہ کلاس ہے:

class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255


سب کچھ ، یہ آبجیکٹ پر مبنی جاوا اسکرپٹ میں ایک اچھا اضافہ ہے۔

وراثت

کلاسز کی وضاحت کرنے کے علاوہ کلاس مطلوبہ الفاظ ، آپ بھی استعمال کر سکتے ہیں توسیع سپر کلاسز سے وراثت کے لیے مطلوبہ الفاظ۔ آئیے دیکھتے ہیں کہ یہ ایک مثال کے ساتھ کیسے کام کرتا ہے۔

class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483


اور یہ جاوا اسکرپٹ ES6 کی کچھ خصوصیات کا مختصر تعارف تھا۔

اگلا: واقف ہونا۔ چند اہم جاوا اسکرپٹ سرنی طریقے۔ اور صوتی حساس روبوٹ حرکت پذیری لکھنا! نیز ، Vue نامی ایک عظیم فرنٹ اینڈ فریم ورک کے بارے میں جانیں۔

تصویری کریڈٹ: micrologia/ ڈپازٹ فوٹو۔

بانٹیں بانٹیں ٹویٹ ای میل۔ کینن بمقابلہ نیکن: کون سا کیمرا برانڈ بہتر ہے؟

کینن اور نیکن کیمرہ انڈسٹری کے دو بڑے نام ہیں۔ لیکن کون سا برانڈ کیمروں اور عینکوں کی بہتر لائن اپ پیش کرتا ہے؟

سم کارڈ کا بندوبست نہیں ملی میٹر#2۔

اگلا پڑھیں۔ متعلقہ موضوعات۔

• پروگرامنگ۔
• جاوا اسکرپٹ۔

مصنف کے بارے میں جے سریدھر۔(17 مضامین شائع ہوئے) جے سریدھر سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔