قصد داریم چند نمونه از اصطلاحاتی که قرار دادن اون‌ها در کنار هم باعث ایجاد سیاه‌چاله‌ای در ذهن ما می شود را با هم لیست کنیم.

• javascript
• ecmascript
• typescript
• babel
• javascript engine
• V8…

تمام این‌ها اصطلاحاتی هستند که در همون قدم‌های اول ورود به دنیای جاوااسکریپت مثل نقطه‌ای تاریک بخشی از ذهن ما را درگیر خودشان نگه میدارند و قسمت بد ماجرا زمانی است که حتی با زیر و رو کردن کل اینترنت هم به نتیجه‌ی درستی نمی‌رسیم و به همان چیزهایی که بلد بودیم شک می‌کنیم.
به احتمال زیاد عبارت‌هایی مثل

• زبان ecmascript
• نسخه‌ی بعدی ecmascript
• پیاده‌سازی ecmascript در javascript
• ….

موقع جستجو زیاد به چشم می خورند. اینکه این عبارت‌ها تا چه اندازه درست هستند را قرار هست با هم بررسی کنیم.

البته به تازگی چند مقاله‌ی خوب راجع‌به این قضیه نوشته شده که ما هم در صفر تا قهرمان بد ندیدیم مقاله‌ای راجع‌به این موضوع منتشر کنیم تا در روشن کردن این نقطه‌ی تاریک نقشی داشته باشیم.

پ.ن: قسمتی از این مقاله الهام گرفته شده از این مقاله‌ی سایت medium هست.

حقیقت اول: Ecma

سازمانی برای تعریف استاندارد.

اول از همه باید بدانیم که سازمانی به نام ecma وجود دارد و در زمینه‌های مختلف استانداردهایی را تعریف می کند.

برای اینکه متوجه بشویم استانداردها چه نقش مهمی در زندگی ما ایفا می کنند نگاهی به اینترنت ۴G می‌اندازیم. اینکه با استفاده از یک تلفن و فقط با تعویض سیم کارت این توانایی را داشته باشیم تا از اینترنت هر اپراتوری در سراسر دنیا استفاده کنیم را مدیون وجود استاندارد برای ۴G هستیم. اگر استاندارد جامعی برای این قابلیت وجود نداشت٬ هر مجموعه از روش‌های خودش برای ایجاد این قابلیت استفاده می‌کرد و شاهد چندین نوع مختلف ۴G می‌بودیم.

مثال واضح‌تر این موضوع مشکلی هست که مرورگر internet explorer برای طراحان وب ایجاد کرد. اکثر مرورگرها در تلاش بودند تا از استاندارد یکسانی پیروی کنند و نتیجه‌ی این موضوع چیزی جز بهتر شدن تجربه‌ی کاربری و راحت‌تر شدن کار توسعه نبود. ولی internet explorer اصرار زیادی داشت تا از روشی که مختص خودش بود استفاده کند. در نتیجه برای اینکه بعضی از کارهایی که در دیگر مرورگرها انجام می‌دادیم در internet explorer هم کار کنند مجبور بودیم بخشی از کد را به دو شکل مختلف بنویسیم.

مثال دیگری از استاندارد را هم می‌توان در نحوه‌ی چینش دکمه‌های کیبورد مشاهده کرد.

حقیقت دوم: ecma-262 و ECMAScript

استانداردی برای زبان‌های اسکریپتی

اگر کاری به تاریخچه نداشته باشیم. میتوان این‌طور گفت که سازمان ecma زبانی به نام ECMAScript را تعریف کرد که به عنوان نقشه‌ی راهی برای زبان‌های اسکریپتی باشد و استاندارد مربوط به آن را تحت عنوان ecma-262 ارائه کرد.

اگر جزئیات و پیچیدگی‌ها را کنار بگذاریم٬ به تعریف نه‌چندان دقیق ولی کاربردی زیر برای ECMAScript می‌رسیم:

• استانداردی برای زبان‌های اسکریپتی که مشخص می‌کند چه قابلیت‌هایی و به چه شکلی باید در زبان‌های اسکریپتی وجود داشته باشد.

ببینیم وقتی می‌گوییم ES6 دقیقا منظورمان چیست :

• منظور از  ES6 نسخه‌ی ششم این قوانین هست و نام دیگر آن ECMAScript 2015 می‌باشد که مشخصا به سال ارائه شدن آن اشاره می‌کند. نسخه‌ی بعدی این استاندارد ES7 یا به عبارت دیگر ECMAScript 2016 نامگذاری شده است و به همین ترتیب قرار است هر سال نسخه‌ی جدیدی از این قوانین ارائه شود و قابلیت‌های جدیدی را تعریف کند.
  پس منظور از ES6 یعنی نسخه‌ی ششم قوانینی که توسط سازمان ecma برای زبان‌های اسکریپتی تعریف شده و در سال ۲۰۱۵ ارائه شده است.

اگر به اطلاعات بیشتری راجع‌به ECMAScript نیاز دارید می‌توانید به این مقاله مراجعه کنید.

حقیقت سوم: Javascript

زبان اسکریپت نویسی مطابق با قوانین ECMAScript

با مطالعه‌ی document مربوط به ECMAScript متوجه می‌شویم چطور یک زبان اسکریپت نویسی درست کنیم. در حالی که مطالعه‌ی document مربوط به javascript به ما می‌گوید که چطور از این زبان اسکریپت نویسی(javascript) استفاده کنیم.

باید به این نکته توجه داشته باشیم که javascript به طور کامل قوانین ECMAScript را پیاده سازی نمی‌کند. برای روشن شدن این موضوع می‌توان ECMAScript را مثل زبان فارسی فرض کرد و javascript را مثل گفتار روزمره. در عین حال که از قوانین پیروی می‌کند ولی ممکن است تفاوت‌های کوچکی هم داشته باشد.

حقیقت چهارم: javascript engine

ابزاری که کدهای javascript را می‌فهمد

در مرورگرهای مختلف ابزارهای مختلفی برای فهمیدن و اجرا کردن کدهای جاوااسکریپت به کار می‌رود که به آن‌ها javascript engine هم می‌گویند.
برای مثال engine توسعه یافته توسط گوگل به اسم V8 ٬ هم در مرورگر chrome به کار رفته است و هم nodejs برای اجرای کدهای خود از آن استفاده کرده است.

به دلیل تفاوت‌هایی که در طراحی engineهای مختلف وجود دارد شاهد این هستیم که بعضی از کدها روی بعضی از engineها سریعتر یا بهینه‌تر عمل می‌کنند. مثلا می بینیم فلان قطعه کد روی chrome عملکرد بهتری از firefox دارد و یا بالعکس.

اصلی‌ترین مطلبی که باید از javascript engine بدانیم این است که نقطه‌ی پیوند دهنده‌ی ECMAScript و javascript همین engineها هستند. گروه‌های توسعه‌دهنده براساس استانداردهایی که در ECMAScript وجود دارد engineهای خود را طراحی می‌کنند.
چون معمولا مدتی زمان لازم هست تا قابلیت‌های تعریف شده در ECMAScript در engineها پیاده‌سازی شوند٬ ممکن است کدی را بر اساس قواعد ECMAScript بنویسیم و مرورگری که از آن استفاده می‌کنیم هنوز از این کد پشتیبانی نکند.
معمولا برای engineها جدولی درست می‌کنند و مشخص است که چه قابلیت‌هایی از چه نسخه‌ای به بعد پشتیبانی می‌شوند.

حقیقت پنجم: Babel

تبدیل کدهای جدید به کدهای قدیمی‌تر

به طور معمول نمی‌توانیم از تمام قابلیت‌های جدیدی که در ECMAScript تعریف شده‌اند استفاده کنیم. به دلیل تغییرات سریع در ECMAScript اگر از جدیدترین نسخه‌ی مرورگر خود هم استفاده کنیم باز هم قابلیت‌هایی هستند که هنوز در engineهای آن‌ها پشتیبانی نمی‌شوند.
مشکل بعدی این است که اگر engine مربوط به نسخه‌ی جدید مرورگر از قابلیتی پشتیبانی کند و بتواند کد مربوط به آن را اجرا کند٬ تضمینی وجود ندارد که در نسخه‌های قدیمی‌تر این پشتیبانی وجود داشته باشد.
مسئله این است که تمام کاربران از مرورگرهای جدید استفاده نمی‌کنند ولی ما نیاز داریم تا کد ما برای آن‌ها هم به درستی اجرا شود پس ۲ راه داریم:

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

طبیعتا روش دوم کاربردی‌تر به نظر می‌رسد. کاری که babel انجام می‌دهد همین کار است یعنی کدی را که به شکل ES6 یا … نوشتیم را تبدیل می‌کند به کد ES5 که قابل اجرا روی مرورگر اکثر کاربران است.

برای مثال تا قبل از ES6 نمی‌توانستیم از class استفاده کنیم٬ و برای اینکه مفهومی شبیه مفهوم کلاس را پیاده سازی کنیم مجبور بودیم کلی کد پیچیده بنویسیم. مشکل اینجاست که اگر از class استفاده کنیم٬ مرورگرهایی که از قابلیت class پشتیبانی نمی‌کنند قادر به اجرای کد ما نیستند. در این زمان از babel استفاده می‌کنیم.

کد زیر با دستور زبان ES6 نوشته شده است:

class Test {

};

babel این کد را به شکل زیر تبدیل می‌کند:

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Test = function Test() {
  _classCallCheck(this, Test);
};

ما می‌توانیم به جای کد اول٬ این کد تبدیل شده را در صفحه‌ی خود بگذاریم و خیالمان از بابت اجرا شدن کد در اکثر مرورگرها راحت باشد.

با این‌کار مرورگرهای جدید هم این کد تبدیل شده را اجرا می کنند و عملا کد اولی که نوشتیم فقط برای قسمت توسعه و راحتی کار ما به کار می‌رود.

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

حقیقت ششم: Typescript

javascript با قابلیت‌های اضافه

Typescript توسط مایکروسافت توسعه داده شده و هدف آن اضافه کردن قابلیت‌هایی به javascript است. کدهای Typescript در نهایت به javascript تبدیل می‌شوند تا بتوانند اجرا شوند.

برای روشن‌تر شدن موضوع یک‌بار رابطه‌ی این سه مفهوم را بررسی کنیم:

• engineهای javascript با توجه به ECMAScript توسعه داده می‌شوند.
• Typescript از روی javascript ساخته شده و کدهای خود را برای اجرا به javascript تبدیل می‌کند.

یعنی javascript برای توسعه هیچ کاری به Typescript ندارد و فقط با توجه به ECMAScript پیش ‌می‌رود. در عوض Typescript برای توسعه وابسته به javascript است.

امیدوارم در این مقاله مفهوم این عبارت‌ها به درستی جا افتاده باشد.
اگر نظری دارید یا نکته‌ای به ذهنتان رسید خوشحال می شویم با ما در قسمت نظرات در میان بگذارید.