دوره آموزش ECMAScript6 قسمت اول: شروع و آشنایی با اکما اسکریپت 6

همانطور که در دوره جاوا اسکریپت گفتیم، نسخه استاندارد JavaScript در واقع ECMAScript نام دارد و مهم ترین بروز رسانی آن ES6 نام دارد.

از نسخه 5 اکما اسکریپت تا کنون، بدلیل ورود جاوا اسکریپت به فضاهای کاری جدید، توجه زیادی به قابلیت‌های پیشرفته این زبان شده است. که بیشترین تغییرات را در سال 2015 با بدنیا آمدن ES6 شاهد هستیم.

چرا باید ECMA Script6 را بیاموزیم؟

مرورگرها به سرعت در حال پیشرفت هستند و تمام کتابخانه‌های پیشرفته در حال بازنویسی بوسیله ECMA Script6 می‌باشند. حتی Jquery نیز در جدید ترین بروز رسانی هایش با این استاندارد جدید نوشته شده است.

در ضمن ابزارهای دیگری مانند NodeJs و AngularJs نیز همگی به ES6 کوچ نموده اند.

نکته: امکاناتی هم وجود دارد که بتوانید کدهای نوشته شده در ECMAScript6 را به نسخه‌های قبلی تبدیل کنید تا با مرورگرهای قدیمی مشکلی نداشته باشید.

چه تغییراتی در اکما اسکریپت 6 بوجود آمده است؟

این تغییرات نسبت به دیگر بروز رسانی‌های JavaScript زیاد بوده اند. در اکما اسکریپت 6 متغیرها و تعریف آن ها، کار با رشته ها، شی گرایی، استفاده از آرایه‌ها و آبجکت‌ها متفاوت شده اند.

البته Syntax کدهای قدیمی را می‌توان همیشه استفاده کرد ولی برای بهره مندی از قابلیت‌های جدید باید دستورات و کدنویسی جدید را بیاموزید.

تعریف متغیر به شیوه جدید

اولین تفاوت مهم در ES6 بوجود آمدن شیوه جدید تعریف متغیر است. تا پیش از این از کلمه کلیدی var استفاده می‌کردیم ولی برای تعریف متغیر به شیوه جدید باید از کلمه کلیدی let استفاده کرد.

برای فهم تفاوت این دو مثال زیر را در مرورگر اجرا کنید:

var A = 50;
let B = 50;
if(true){
	var A = 70;
	let B = 70;
}
console.log("A: " + A);
console.log("B: " + B);

متغیر A از نوع var و متغیر B از نوع B تعریف شده اند. درون بلوک if دوباره این متغیرها را تعریف کردیم.

حالتی که در اکثر زبان‌های دیگر موجود است این است که متغیری که درون بلوک تعریف شود نباید بتواند متغیر خارج بلوک را تغییر دهد، ولی این خاصیت تا پیش از این در javascript وجود نداشت که با معرفی let این مشکل حل شد.

نتیجه خروجی مانند زیر خواهد بود:

A: 70
B: 50

یک تفاوت دیگر استفاده از var و let را در پایین می‌بینید:

for(var A = 0; A < 5; A++){
}
console.log(A);


for(let B = 0; B < 5; B++){
}
console.log(B);

متغیر A‌ای که در بالا می‌بینید با var تعریف شده است، که در console.log اول مقدار 5 را چاپ می‌کند.

ولی متغیر B دوم که با let تعریف شده است، در console.log فراخوانی نمی‌شود و با آن مانند یک متغیر نا شناس عمل می‌شود.

استفاده‌های Back Tick در ES6

در نسخه‌های قدیم javascript برای رفتن به یک سطر جدید در رشته‌ها از روش زیر استفاده می‌کردیم:

console.log('line one \n linetwo');

در مثال فوق با \n به سطر دوم می‌رویم.

اما در نسخه جدید اکما اسکریپت می‌توانید از back tick استفاده کنید. برای درج بک تیک از کلیدهای ترکیبی Alt + 96 استفاده کنید:

console.log(`line one
line two`);

برای رفتن به سطر دوم کافی است Enter بزنید و نیازی نیست از کاراکتر خاصی استفاده کنید.

یکی از دیگر کاربردهای back tick را در پایین ببینید:

var one= 1;
var two= 2;
console.log(`the sum is: ${one+two}`);

در صورتی که از back tick استفاده شود می‌توان با دستوری مانند ${one+two} می توان از متغیرها در کنار رشته‌ها استفاده کرد. خروجی دستور فوق مانند زیر خواهد بود:

the sum is: 3

بررسی دقیق تر برابر بودن

تصور کنید که بخواهید برابر بودن دو عدد را بررسی کنید. مثال زیر را بررسی کنید:

console.log(1 == "1");
console.log(1 === "1");

خروجی دستور اول true ولی خروجی دستور دوم false است، چون در === علاوه بر مقدار نوع داده هم مورد بررسی قرار می‌گیرد که چون 1 یک عدد و  "1" یک رشته است نتیجه false خواهد بود.

اما همیشه این بررسی نتیجه صحیحی در بر ندارد، مانند:

console.log(0 === -0);

نتیجه بررسی فوق برابر false خواهد بود، در صورتی که باید true باشد.

یا اینکه:

console.log(NaN === NaN);

NaN به معنای تعریف نشده است، که نتیجه بررسی فوق نیز false خواهد بود.

برای حل مشکل فوق از دستور خاصی به نام Object.is استفاده می‌کنیم:

console.log(Object.is(NaN, NaN));
console.log(Object.is(0, -0));
console.log(Object.is(1, "1"));
console.log(Object.is(1, 1));

نتیجه خروجی‌ها به شرح زیر خواهد بود:

true
false
false
true

در ادامه با ما همراه باشید.