ECMAScript 6 היא הגרסה הממוספרת האחרונה של ECMAScript – הסכימה שעליה JavaScript בנויה. הגרסאות הבאות ממוספרות לפי שנים כאשר הכוונה היא שבכל שנה יצאו מודולים חדשים שירחיבו את השפה הזו שהפכה להיות אחת מהתשתיות החשובות ביותר של הרשת. כלומר שבשנת 2016 יצא לנו תקן ES2016 ובשנת 2017 יצא תקן ES2017 וכך הלאה.
מי מוציא את התקנים האלו? במאמר על ES6 כתבתי על ECMA – הארגון שמאחורי ECMAScript. אבל האנשים שקובעים את התקן נקראים ועדת TC39 כאשר TC הם ראשי תיבות של Technical committee – כלומר ועדה טכנית 39. מי שחבר בועדה הזו הם בדרך כלל נציגים של גופים גדולים (גוגל, מיקרוסופט, אינטל וכו') שמתדיינים ומגיעים להסכמה על השינויים והפיצ'רים החדשים בתקן. כל רעיון עובר ארבעה שלבים.
שלב 0 – השלב שבו מוצע הרעיון בלי ספסיפקציה מורכבת ובלי גוף שמוכן לעמוד מאחוריו.
שלב 1- לרעיון יש אחד מחברי הועדה שמוכן לעמוד מאחוריו וספסיפקציה טכנית מוגמרת. ייתכן שייכנסו שינויים גדולים בשלבים הבאים.
שלב 2 – טיוטה – הרעיון כבר התקבל ונידון והספסיפקציה התקבלה. כנראה שלא יהיו שינויים גדולים ב-API ובדרך היישום של השינוי/פיצ'ר.
שלב 3 – מועמד לכניסה – הרעיון כבר כמעט בפנים וחברי ועדה נוספים צריכים לחתום ולאשר אוצו. סביר להניח שלא יהיו שינויים כלל אלא אם כן יהיו הערות קריטיות על המימוש.
שלב 4 – נכנס לתקן. הרעיון הוא חלק מהתקן.
ההליך הזה הוא די שקוף, כך שגם אנחנו יכולים להסתכל על היווצרות התקן החדש ואפילו לנסות לכתוב סקריפטים לפיו. איך? הרי יוצרי הדפדפנים לא תמיד ממהרים להטמיע את שינויי התקן החדשים – בטח ובטח שמדובר בתקנים עתידיים. למרות שבניגוד לתקופת אינטרנט אקספלורר הדינוזאור אנחנו לא צריכים לחכות שנים לכניסת התקן – יש מצב שנרצה כבר ב-2017 להשתמש בפיצ'ר מגניב שנכנס לשלב 4 ב-ES2017 (למרות שהתקן אמור להחתם באופן סופי בסוף שנת 2017). בדיוק בשביל זה יש לנו את Babel שכתבתי מדריך מקיף עליו. ל-Babel יש פוליפילים ופלגינים שמסייעים להמיר את הקוד ל-ES5 שכל דפדפן וכל סביבה יכולים להריץ. באופן עקרוני, ה-presets הרשמיים מכילים את הפיצ'רים של שלב 4 בלבד, אך יש גם תוספים לשלבים יותר מוקדמים למי שרוצה. באופן אישי, הייתי מעדיף למות לפני שהייתי מכניס שלב 0 לפרודקשן, אבל כל אחד עם הטעם שלו.
אני יוצא מנקודת הנחה שאתם מכירים את ES6 ומכירים את Babel או לפחות טרחתם לקרוא את המדריכים שכתבתי עליהם אז ככה שכל מה שכתבתי לעיל לא נשמע כמו סינית. אם אתם לא יודעים מה זה preset או מה זה פוליפיל ופלגינים, כמה דקות של קריאה יסגרו לכם את הפינה.
מטבע הדברים, אחרי הגרסה הענקית של ES6, תקן ES2016 הוא רזה מאוד ומכיל רק שני פיצ'רים מרכזיים. נכון לכתיבת שורות אלו, כל הדפדפנים וכל הסביבות תומכות בפיצ'רים החדשים למעט…. Node גרסה 4 ומטה (שזה די ישן) וכמובן הדפדפנים הכוכבים מבית מיקרוסופט – אקספלורר אדג' ותפלץ המוות 11. איך אני יודע? האתר הזה מראה לי את התאימויות השונות. על מנת להיות בטוח שהקוד שלי יעבוד בכל הסביבות, אני יכול לעבוד עם Babel ובמיוחד עם ה-presets 2015 ו-2016. 2015 יכסה לי את כל ES6 ו-2016 יכסה את ES2016. חלק מכם בוודאי ישאל למה אני צריך לכתוב את שניהם? למה 2016 לא כולל את 2015 בתוכו? התשובה היא ש-Babel מגרסה 6 ומעלה הוא מודולרי מאוד וה-presets הם בסך הכל אוסף של תוספים. זה של 2016 כולל את התוספים של 2016 בלבד ולא גורר אחריו את 2015.
התקנת ה-presets עם babel הם פשוטים מאוד:
npm install --save-dev babel-cli babel-preset-es2015 babel-preset-es2016
ההפעלה מתבצעת באמצעות:
node_modules/.bin/babel src -d lib --presets es2016,es2015 -w
כל קוד שנכתוב בספרית src יתורגם מיידית ל-ES5.
אז בואו ונתחיל. הפיצ'ר הראשון הוא….
כתיב מקוצר לחזקה
בגדול זה די פשוט. כשאנחנו רוצים לעשות למשל 2 בחזקת 3, אנחנו צריכים לעשות את הדבר הבא:
Math.pow(2, 3);
התקן מאפשר לנו להשתמש בשתי כוכביות:
2 ** 3
הנה למשל קוד קצר ב-ES2016:
let a = 2;
let b = 3;
let c = a ** b;
console.log(c); //8
הקימפול שלו ל-ES5 יראה לנו ששתי הכוכביו יהפכו לפונקציה המוכרת של power:
"use strict";
var a = 2;
var b = 3;
var c = Math.pow(a, b);
console.log(c); //8
רק שתדעו שהתרגום המילולי של הפיצ'ר הזה הוא 'כפל חזק' אני ממש מתאפק פה כדי לא לעשות איזו בדיחת אבא איומה ונוראה על משקל 'רדיו חזק', השיר המפורסם של להקת תיסלם.
איפה היינו? אה, הפיצ'ר השני הוא…
חיפוש במערך
בגדול משהו שמסייע לנו למצוא איברים במערך ומחזיר לנו true או false. הנה הדוגמה:
let a = ['a', 'b', 'c', 'd', 'last'];
let x = a.includes('d');
let y = a.includes('lo po');
let z = a.includes('b', 2);
console.log(x); //true
console.log(y); //false
console.log(z); //false, because we start from 2
אני מקבל true או false. שימו לב שבניגוד ל-indexOf אני לא מקבל את מיקום המערך. בנוסף, יש לי אופסט שזה הפרמטר השני. בו אני יכול להגדיר מאיפה להתחיל. איזה כיף. כיוון שמדובר בתוספת ל-Array ומתודה חדשה. מי שמטפל בזה הוא לא הקומפיילר של Babel אלא הפוליפילים שלו.
מי שרוצה לשחק עם זה יכול מפה:
See the Pen includes example by Ran Bar-Zik (@barzik) on CodePen.
וזהו, נכון שציפיתם להרבה יותר? במאמרים הבאים במדריך המתגלגל הזה אני אסקור את הפיצ'רים החדשים של ES2017 ואלו שיבואו אחריו. שימו לב שאני סוקר אך ורק פיצ'רים משלב 4 (כלומר אלו שבטוח נכנסים).
