نوشته های Nilz

تجربیات من

Nilz — Mon, 07 Mar 2022 11:28:07 +0330

سلام نه‌ام ماه اسفند، شده 3 ماهی که من استخدام شدم، جایی که ویژگی‌های مثبت‌اش بیشتر از منفی هاشه.بگم که من تقریبا از بهمن 99 وقتی فهمیدم اصلا برای شغل معلمی ساخته نشدم، بنا به دلایلی رفتم به سمت طراحی وب‌سایت. از اون موقع تمرکزم شد روی اون و 9 اذر 1400 هم استخدام شدم. مسیر یادگیری من پر از اشتباه‌هات زیاد بود و هنوز هم هست، مثل انرژی میمونه. چون واقعا چیزهایی که یادگرفتم برای 5دقیقه اول روز اولم به دردم خورد یا حداقل باعث اعتمادبه‌نفسم شد و الان تو این سه ماه، دارم تلاش می‌کنم این حقیقت رو که خیلی چیزهاست که نمیدونم رو بپذیرم. (میدونستم که خیلی چیز‌هاس که نمیدونم ولی نمیدونستم که قراره اینجوری با این سرعت باهاشون روبه‌رو بشم ) و با وجود این حقیقت، اعتمادبه نفسم رو حتی به اندازه کمش رو حفظ کنم که البته چالش اصلی منه و بسیار برای منی که خوی سرزنش‌گری دارم و بدگویی‌های ذهنیم بسیار قوی عمل می‌کنن، بسیار سخته. من خیلی دیر این مسیر رو شروع کردم و دلیل اصلی به عقب انداختنش، ترس از نتونستن بود.. من لیسانس نرم‌افزار از یه دانشگاه ازادی دارم(یکی دیگه برام انتخاب رشته کرد و من فقط رفتم) و اون موقع من متوجه شدم برای خوب بودن تو دنیای برنامه‌نویسی باید توانایی حل مسیله خوبی داشته باشیم و من خوب، توش خوب نبودم (هنوزم نیستم) ولی اون موقع به خودم فرصت تمرین و تلاش ندادم که شاید با تمرین و ممارست بتونم این مهارت رو درون خودم تقویت کنم. دلیل بعدی برای تاخیر این بود که من تو سن 18 سالگی فکر می‌کردم هر کسی که برنامه‌نویس خوبیه حتما وقتی 12-13 سالش بوده، شروع کرد و برای منِ 18 ساله، دیره.دلیل این که من کاری رو که وقتی 18 سالم بود و فکر می‌کردم دیره رو در سن 28/29 سالگی شروع کردم، این بود که همیشه تو ذهنم این مونده بود که من یه کاری رو از ترس نتونستن حتی امتحانشم نکردم، خیلی بهم برخورده بود که چرا من اینقدر گذاشته بودم ترس بهم غلبه کنه! و پیش خودم گفتم تو که چیزی واسه از دست دادن نداری، برو دنبالش! تمرین کن اونقدری که بالاخره توش بهتر شی! (easier said than done).خواستم تجربیاتی که تا الان از مسیر پیدا کردم رو این‌جا بنویسم شاید کسی بخونه و شاید خواد از تجربیات 3 ماه من استفاده کنه:لطفا از منابع و داکیومنت‌های خوب اصلی برای یادگیری استفاده کنید. به جای اینکه وقت بگذارین دنبال منبع خوب فارسی بگردین، روی زبان‌تون کار کنید... چون تو این مسیر، نمیتونین از انگلیسی فرار کنین... ویدیو‌های یوتیوب برای شروع کار، برای اینکه شماء کلی کار دستت بیاد خوبه ولی اصلا جوابگوی کار نیست، اصلا ..پروژه‌ یا چالش‌های کوچیک‌کوچیک بزنین، سعی کنین تو هر چالش یه چیز جدید یاد بگیرین... روی سرعت تایپ‌اتون کار کنید... و shortcut ها رو دربیارین و خودتون رو عادت بدین ازونا استفاده کنید... تا جایی که امکانش رو دارین از ماوس کمتر استفاده کنین.. خیلی برای اعتمادبه‌نفس‌تون خوبه :)تمرین کردن و اعتمادبه‌نفس مثل یه حلقه است. هرچه قدر بیشتر تمرین کنین، تسلط‌‌تون بیشتر میشه و این تسلطِ باعث اعتماد به نفس میشه و اعتمادبه‌نفسِ باعث ایجاد انگیزه برای تمرین بیشتر میشه.این مسیر پر از چیزهاییه که نمیدونیم، اصلا ماهیتشه و در طول زمان کار و یا خروجی بهتر و قشنگ‌تر میشه... (پذیرش این موضوع برای کسایی مثل من که صبر ندارن، perfectionist هستن، خیلی سخته).. پ.ن: انتخاب عنوان سخت‌ترین کار دنیاست.. البته بعد از برنامه نویسی :))خیلی ممنون:)

123 سوال ضروری در مصاحبه جاوااسکریپت- قسمت دوم

Nilz — Thu, 10 Feb 2022 20:50:48 +0330

14- خروجی کد زیر چیست؟var bar = true; console.log(bar + 0); console.log(bar + "xyz"); console.log(bar + true); console.log(bar + false);عملگر + دو تا کار می‌کنه: یا عمل جمع ریاضی یا عمل concatenation (الحاق) جمع ریاضی: // Number + Number -> addition 1 + 2 // 3 // Boolean + Number -> addition true + 1 // 2 / Boolean + Boolean -> addition false + false // 0الحاق رشته‌:// String + String -> concatenation 'foo' + 'bar' // "foobar" // Number + String -> concatenation 5 + 'foo' // "5foo" // String + Boolean -> concatenation 'foo' + false // "foofalse"جواب سوال واضحه دیگ:)پ.ن: البته منظور اینجا عملگر باینری + هست. 15- خروجی کد زیر چیست؟var z = 1, y = z = typeof y; console.log(y);عملگر = یا assignmentاولا = مثل سایر عملگر‌های دیگ، یک عملگر محسوب میشه که تو جدول precedence، اولویت پایینی داره. به خاطر همینه که تو دستور x=2*2+1، اول عملیات محاسباتی انجام میشه بعد عملگر = میاد مقدار نهایی رو میریزه تو متغیر x.مثل سایر عملگرهای دیگ یک مقدار خروجی داره. مثلا اول دستور بالا خروجیش 5 هست که میریزه تو متغیر x. Chain assignmentsیه ویژگی جالبی = داره chain assignments هستش:let a, b, c; a = b = c = 2 + 2; console.log( a ); // 4 console.log( b ); // 4 console.log( c ); // 4این عملیات chain assignment از راست به چپ میره جلو! مثلا این‌جا اول راست‌ترین expression یعنی 2+2 انجام میشه، بعد مقدارش به ترتیب در c بعد در b و در a ریخته میشه! حالا جواب سوال: undefined. گفتیم که ترتیب کار از راست به چپ هست و تو این مثال ترتیب کار به این صورته:var z; z = 1; var y; z = typeof y; y = z;پس اول typeof y انجام میشه و ازونجایی که هنوز مقداردهی نشده، تایپش undefined هستش. پس مقدار undefined اول در z ریخته میشه و مقدار درون z در y ریخته میشه. 16- خروجی کد زیر چیست؟var foo = function bar() { return 12; }; typeof bar();میدونیم که در جاوااسکریپت، تابع یک مقدار محسوب میشه که مثل هر مقدار دیگ‌ای نوع داره و نوع تابع در جی‌اس: object هستش و ما نه‌تنها میتونیم صداشون بزنیم بلکه می‌تونیم به عنوان شی باهاشون رفتار کنیم: بهشون پراپرتی اضافه کنیم یا ازشون حذف کنیم و ...مثلا یکی از پراپرتی‌هایی که تابع داره name هستش://function declaration function sayHi(){ console.log("Hi"); } console.log(sayHi.name); //sayHi //Function expression let sayHello = function() { console.log("Hello"); }; console.log(sayHello.name); //sayHelloNamed Function NFE)این یکی از روش‌های تعریف تابع محسوب میشه: //function expression let sayHello = function() { console.log("Hello"); }; حالا اگر به function expression اسم اضافه کنیم میشه NFE://Name Function Expression let sayHello = function func() { console.log("Hello"); }; حالا تفاوت بین این‌ دو تا چیه؟ یک. توجه داشته باشید که این روش تعریف، همچنان function expression محسوب میشه و اضافه‌شدن یک اسم بعد از function اون رو به یک function declaration تبدیل نمی‌کنه. دو. این تابع همچنان با نام sayHello از بیرون تابع، قابل دسترسه:sayHello() //output: "hello"اما چه چیزی، NFE رو متفاوت می‌کنه؟ به تابع اجازه میده که خودش، به خودش ارجاع بده.و این اسم بیرون از اسکوپ خود تابع، قابل دسترس نیست.به طور مثال:let sayHello = function func(name) { if (name) { return console.log(`hello ${name}`); } func("Guest"); }; sayHello(); //hello Guest console.log(func.name); //ReferenceError: func is not definedهمانطور که بالا دیدین: از بیرون نمیشه به تابع func دسترسی داشته باشیم ولی از داخل خود تابع میشه.جواب سوال: ReferenceError: bar is not defined. 17.1- تفاوت بین تعریف تابع به دو صورت زیر چیست؟//function expression var foo = function(a,b) { // Some code }function declaration function bar () { // Some code }این دو مدل تعریف تابع بسیار سینتکس مشابهی دارند. یکی از بزرگ‌ترین تفاوتی که بین‌شون وجود داره اسم تابع هستش که در روش function expression، میتونه حذف بشه تا بشه یک تابع ناشناس تعریف کنیم. function expression میتونه به عنوان IIFE استفاده بشه، که دقیقا زمانی که تعریف میشه، اجرا میشه. تفاوت دیگری که بین این دو روش وجود داره، در مفهومی به نام hoisting هستش: JavaScript Hoisting refers to the process whereby the interpreter allocates memory for variable and function declarations prior to execution of the code.کلمه hoisting به فارسی به معنی بالا بردن، بلند کردن، به کمک طناب بالا کشیدن هستش. در جاوااسکریپت، hoisting به فرایندی اشاره می‌کنه که درش، مفسر برای variable declarations و function declarations قبل از مرحله اجرا، فضایی رو تخصیص میده. اگر declaration با کلمه کلیدی var انجام بشه، به طور پیش فرض با مقدار undefined مقداردهی اولیه میشه! اما اگر با کلمه کلیدی let و const اعلام بشه، وارد فرایند hoisting نمیشه. معمولا، hoisting رو این‌طوری نشون میدن که انگار مفسر میاد declaration و مقداردهی اولی متغیر و تابع رو بر‌میداره و در بالای کد قرار میده. در صورتی که تا زمانی که اون خط کد اجرا نشده، مقداردهی متغیر انجام نمیشه.//function declaration function catName(name) { console.log("My cat's name is " + name); } catName("Tiger"); /*The result of the code above is: "My cat's name is Tiger"*/کد بالا دقیقا طوری نوشته شده که انتظار میره نوشته بشه، اول تابع رو تعریف میکنیم بعد صداش می‌کنیم. اما چه اتفاقی می‌افته اگر قبل از تعریف تابع، صداش بزنیم؟catName("Tiger"); //function declaration function catName(name) { console.log("My cat's name is " + name); } /*The result of the code above is: "My cat's name is Tiger"*/کد هنوز کار کرده و این به‌خاطر hoisting هستش.Only declarations are hoistedجاواسکریپت، فقط عمل declaration رو hoisting می‌کنه، نه مقدار دهی اولیه رو!console.log(num); // Returns 'undefined' from hoisted var declaration (not 6) var num; // Declaration num = 6; // Initializationدرسته متغیر num با var اعلام شده و وارد مرحله hoisting شده، ولی چون قبل از مقدار دهی اولیه، ازش استفاده، به طور پیش فرض با مقدار undefined، مقداردهی میشه. خوب حالا بریم سراغ ادمه جواب سوال: در جاوااسکریپت، function expression برخلاف function declaration، وارد مرحله hoisting نمیشن. شما نمیتونی از function expression استفاده کنی قبل ازین‌که ایجادشون کنی:console.log(notHoisted) // undefined // even though the variable name is hoisted, the definition isn't. so it's undefined. notHoisted(); // TypeError: notHoisted is not a function var notHoisted = function() { console.log('bar'); };اول notHoiseted به عنوان یک متغیر اعلام میشه و hoisted میشه، و به طور پیش فرض با undefined مقدار‌دهی میشه، ولی هنوز نمیشه به عنوان تابع ازش استفاده کرد چون همانطور که گفتیم عمل مقدار دهی زمانی انجام میشه که تو کد نوشته شده!17.2- خروجی کد زیر چیست؟bar(); (function abc(){console.log('something')})(); function bar(){console.log('bar got called')};جواب: bar got called something ازونجایی که تابع bar اول صدا زده شده و همانطور که از سوال قبل متوجه شدیم که declaration functionها hoisted میشن، پس اول bar اجرا میشه و میره سراغ اجرای تابع IIFE.18. در چه شرایطی، تعریف تابع hoisted نمیشه؟جواب این سوال در سوال 17.1 به بیان دیگری، داده شده. زمانی که به صورت function expression تابعی رو تعریف کنیم، اون تابع hoisted نمیشه. به طور مثال: var foo = function foo() { return 12; }این کد، پشت صحنه این‌جوری تعریف میشه: var foo = undefined; foo(); // Here foo is undefined foo = function foo() { //* // Some code stuff } foo() // Now foo is defined here.ترتیب کار به این صورته foo با var تعریف و به صورت پیش‌فرض با undefined مقداردهی میشه (hoisted) میشه. تو خط * تازه مقدار دهی میشه و بعدش میشه ازش به عنوان تابع ازش استفاده کرد. درواقع foo تا قبل از خط * یک متغیره که با مقدار undefined مقدار دهی شده. 19. خروجی کد زیر چیست؟var salary = "1000$" (function () { console.log("Original salary was " + salary); //1 var salary = "5000$" console.log("My New Salary " + salary); })();جواب: undefined, 5000$شاید در نگاه اول انتظار داشته باشیم که تو خط 1، مقدار salary از اسکوپ بیرونی گرفته بشه و مقدارش 1000$ باشه. اما دوباره بحث hoisting میاد بالا به این صورت که: در داخل خود تابع IIFE، ما یه متغیر salary داریم که با var تعریف شده (hoisted شده)، پس تو خط 1 وقتی داره دنبال متغیر salary میگرده، لازم نیست که بره متغیر رو از اسکوپ بیرونی خودش بگیره، اما چون هنوز مقداردهی نشده، پس مقدار salary به طور پیش فرض با undefinded مقداردهی شده. پس خروجی خط 1 undefined خواهد بود.20. تفاوت بین typeof و instanceof چیست؟console.log(typeof 42); // expected output: "number" console.log(typeof 'blubber'); // expected output: "string" console.log(typeof true); // expected output: "boolean" console.log(typeof undeclaredVariable); // expected output: "undefined"function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } const auto = new Car('Honda', 'Accord', 1998); console.log(auto instanceof Car); // expected output: true console.log(auto instanceof Object); // expected output: trueدو تا مثال ساده از این دو اپریتور که هر دو از ساید developer.mozilla کپی شده. شاید به نظر بیاد هر دو این اپریتورها کار یکسانی انجام میدن ولی اون‌ها کار متفاوتی انجام میدن.اپریتور typeofاین اپریتور برای این استفاده میشه ک ببینی ایا نوع داده مقداری که ب عنوان آپرند بهش می‌دی، یکی از هشت نوع‌داده‌های اصلی هست یا خیر: number, string, boolean, object,function,undefined, symbol, bigInt. خروجی این اپرتور یک رشته است. تو مثال بالا هم میتونین مشاهده بفرمایید:). توجه داشته باشید که نمیتونیم برای بررسی اینکه ایا مقداری null هست یا خیر، ازین اپریتور استفاده کنیم چون به اشتباه object برمی گردونه به خاطر همین بهتره از "===" استفاده کنیم:console.log( typeof null) //object let a=null; console.log(a === null) // falseازین اپریتور حتی میشه برای بررسی یک expression هم استفاده بشه:let foo=1; let bar = "1" console.log(typeof (foo+bar)) //stringاپریتور instanceofاین اپریتور تست می‌کنه که ایا این اپرند، یکی از نمونه‌ها و یا شی‌های کلاس مورد نظر هست یا خیر. خروجی این اپریتور، یک مقدار boolean هست. The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. به بیان دیگر، این اپریتور میاد نگاه می‌کنه ببینه ایا آپرند سمت راستی توی زنجیره پروتوتایپ‌های آپرند سمت چپی قرار داره یا نه! که اگر بود true میفرسته و اگر نبود false. مثلا تو مثال بالا اگر از شی auto یه کنسول.لاگ بگیریم، خروجی شبیه این میشه: همانطور که میبینید، شی auto از طریق پروتوتایپش به تابع کانستراکتور Car وصله و خود Car هم از طریق پورتوتایپش به Object متصله.درنتیجه خروجی هر دو کنسول.لاگ‌ها تو مثال بالا، true هست.https://levelup.gitconnected.com/comparing-the-javascript-typeof-and-instanceof-operators-8844f23633a#:~:text=The%20typeof%20and%20the%20instanceof,that'll%20always%20return%20true%20.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeofhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof21. طول ارایه انجمنی (associative) زیر را محاسبه کنید؟let counterArray={ A:3, B:4 }; counterArray["c"]=1در جاوااسکریپت، ما هم یک ساختار داده ارایه داریم که تشکیل شده از جفت‌‌های ایندکس و داده، یعنی داده‌ها در مکان‌های مشخصی به نام ایندکس ذخیره شده‌اند. در حالی‌که ارایه‌های انجمنی در اصل، همون اشیاء هستند که تشکیل شده از جفت‌های key-value. یعنی تو اینجا داده‌ها (value) با استفاده از keyها قابل دسترس هستند. طول ارایه‌های انجمنی: برخلاف ارایه معمولی، ارایه‌های انجمنی، پراپرتی length یا طول رو ندارند. به خاطر همین نمیشه این طوری نوشت: console.log(counterArray.length) //undefinedبرای بدست اورن طول این ارایه‌ها باید از روش‌های دیگ استفاده کرده که دوتاش اینجا اورده شده:روش اول: استفاده از حلقه for...in و پیمایش ارایه و شمردن keyها.function getLength(object) { var count = 0; for(key in object) { // hasOwnProperty method check own property of object if(object.hasOwnProperty(key)) count++; } return console.log(count); } getLength(counterArray) //3متد hasOwnProperty درواقع یک مقدار boolean برمیگردونه. اگر ابجکت مورد نظر اون پراپرتی رو داشت true و اگر نداشت false برمی‌گردونه. روش دوم: استفاده از متد keys. متد keys ارایه‌ای، تشکیل شده از keyهایِ شیِ داده‌شده بهش رو برمیگردونه.console.log(Object.keys(counterArray)); //[ 'A', 'B', 'c' ] console.log(Object.keys(counterArray).length); //3https://www.geeksforgeeks.org/calculate-the-length-of-an-associative-array-using-javascript/22. تفاوت بین تابع، متد و کانستراکتور چیست؟اگر با شی‌گرایی اشنایی دارین، حتما میدونید که توابع، متدها و کانستراکتورها سه چیز متفاوت هستند امادر جاوااسکریپت، این‌ها درواقع در نوع کاربردی که دارند، متفاوت هستند:توابع: function helloWorld(name) { return "hello world, " + name; } helloWorld("JS Geeks"); // "hello world JS Geeks"متد‌ها: چیزی نیستند جز توابعی که در شی تعریف میشن. یعنی جز پراپرتی‌های اون شی محسوب میشن.var obj = { helloWorld () { return "hello world, " + this.name; }, name: 'John Carter' } obj.helloWorld(); // "hello world John Carter"تو مثال بالا، توجه کنید که this در متد helloWorld به خود obj اشاره می‌کنه. کانستراکتور‌ها:سومین استفاده‌ای که از توابع میشه، کانستراکتورها هستند. function Employee(name, age) { this.name = name; this.age = age; } var emp1 = new Employee('John Doe', 28); emp1.name; // "John Doe" emp1.age; // 28اما اینجا یه تفاوتی وجود داره که کانستراکتورها با اپریتور new صدا زده میشه که میشه باهاش یک شی/نمونه جدید ساخت.https://github.com/ganqqwerty/123-Essential-JavaScript-Interview-Questions#question-22-difference-between-function-method-and-constructor-calls-in-javascript

123 سوال ضروری در مصاحبه جاوااسکریپت- قسمت اول

Nilz — Wed, 22 Sep 2021 13:59:40 +0330

سلامهمه سوال‌ها و جواباشون رو یه جا میتونی اینجا داشته باشی :)1- فرق بین undefined و not defined و null چیست؟ جاوا‌اسکریپت، سه تا روش داره تا مقادیر رو که وجود ندارند و یا نباید که به طور کلی وجود داشته باشند، رو نشون بده: undefined: ا.تو یه سری شرایط هست که مقدار undefined برمی‌گرده (قبلش باید گفته بشه که undefined خودش یه دیتا تایپ مستقله): 1) زمانی‌که متغیر بدون این‌که مقداری بهش واگذار بشه (assign)، تعریف میشه (declare)، درنتیجه تا زمانی که مقداردهی نشه، js بهش مقدار undefined میده:let name; console.log(name); //undefined2) زمانی که ابجکت یا ارایه مقدار دهی نشده باشن:let numArray = [1,2,,4]; console.log(numArray); //[1, 2, empty, 4] typeof(numArray[2]) //"undefined"3) زمانی که متغیری رو میخوای با تابعی مقدار دهی کنی که اون تابع اصلا مقدار بازگشتی نداره:let add = (a,b) => { let c = a+b; //return c; } let sum = add(2,3); console.log(sum); //Output: undefinedNull:یه کلمه رزرو شده در js محسوب میشه و میشه خیلی راحت با استفاده از خود کلمه، متغیر رو با مقدار null، مقداردهی کرد. درواقع null داره به مفسر جی‌اس میگه این متغیر مقداری نداره! null خودش یه دیتا تایپ یا نوع داده مستقله و زیر مجموعه هیچ کدوم از دیتا‌ تایپ‌های دیگ نیست.let life = null; console.log(life); //nullNot defined:درواقع زمانی ما با ارور not defined مواجه میشیم که بخوایم از متغیری قبل تعریف شدنش استفاده کنیم://(1) console.log(a); //output: ReferenceError: a is not defined //------------------------------------------------------------ اگر از var استفاده کنیم، خروجی این میشه:console.log(b); var b = 5; //Output:- undefinedچرا a اینجا خروجیش not defined زده ولی b ارورundefined نشون داده؟ به خاطر یه مفهمومی به نام hoisting. که بعدا احتمالا بهش میرسیم چون اینم یکی از پرتکراراست:).تفاوت بین null , undefined:نوع null و undefined با هم فرق می‌کنن(این که نوع داده null، ابجکت نشون داده میشه یه اشتباه/ سوتی شاید محسوب میشه)console.log(typeof(undefined)); //"undefined" console.log(typeof(null)); //"object" , must be nullیکی دیگر از تفاوت‌ها اینه که اگر عملیات حسابی (arithmetic) روی هر مقدار عددی و null انجام بشه، خروجی عدد خواهد بود ولی اگر با undefined انجام بشه، خروجی NaN (Not a Number) هستش.console.log(+null) //0 let a = 7 + null; console.log(a); // 7 let b = 7 * null; console.log(b); // 0 console.log(+undefined) //NaN let c = 8 + undefined; console.log(c); //NaN let d = 8 * undefined; console.log(d); //NaNپ.ن: خودم null رو به سوال اضافه کردم.پ.ن2: جواب سوال ترجمه بخشی از این‌جاست.2- برای کدوم مقدار از x، نتیجه استیتمنت زیر متفاوته؟if( x <= 100 ) {...}if( !(x > 100) ) {...}قبلش یه توضیح درباره NaN: جاوااسکریپت نوع داده عددی (Number) داره که برای مقادیر صحیح (integer) و غیرصحیح(float) استفاده میشه. در کنار این اعداد معمولی، یک‌سری مقادیر عددی خاص وجود داره که متعلق به این نوعِ داده‌است، که یکیش همین دوست عزیزمون NaN (Not a Number)هستش. درواقع NaN، نشون دهنده ارور محاسباتی هست. به بیان دیگر، نتیجه درست‌نبودن یا تعریف نشدن عملیات ریاضی هست، به طور مثال (فقط حواست باشه که تو مثال زیر اگر به جای تقسیم عمل جمع بذاری نتیجه NaN نخواهد بود): alert( "not a number" / 2 ); // NaN, such division is erroneousیکی از کاربرداش میتونه مواقعی باشه که میخوای عدد بودن یا نبودن مقدار ورودی رو امتحان کنی.خوب حال بریم سراغ جواب سوال:یکی از چیزهایی که باید بهش توجه کرد، اینه که NaN نمیتونه مساوی یا بزرگتر یا کوچکتر از یه مقدار عددی باشه. NaN نه از 100 بزرگتره و نه مساویه 100 هست و نه از 100 کوچکتر. پس تو شرط اولی نتیجه false هست اما تو دومی به علت وجود ! درنهایت نتیجه شرط true خواهد شد و شرط برقراره. این موضوع برای هر مقداری که به نوعِ‌داده Number تبدیل میشه و خروجیش NaN میشه هم درسته، مثل: undefined, [1,2,3], {a:22}توضیحات کامل‌تر از NaN.3- اشکال تعریف متدها به طور مستقیم داخل ابجکت‌های جاوااسکریپت چیه؟در جاوااسکریپت وقتی ابجکت تعریف می‌کنیم، می‌تونیم از دور روش بهش فانکشن اضافه‌کنیم:1- داخل خود کانستراکتور ابجکت:this.func=function(){...}2- با استفاده از prototype:obj.prototype.func=function(){...}در هر دورش، func() توسط تمام نمونه‌های (instances) ساخته‌شده از ابجکت، قابل دسترسه. اما استفاده از کدومش بهتره یا کاراتره؟در یک کلمه: از prototype استفاده کن. چرا؟ در بیشتر شرایط کاراتره. اگر هدف، به اشتراک گذاشتن یه متد بین تمام نمونه‌ها باشه، از پروتوتایپ استفاده بشه، کاراتره.1 - تغیر متدی که با پروتوتایپ تعریف شده، اسان‌تره.حتی بعد ازین‌که نمونه‌ها ساخته شدن، تغییر متدی که با پروتوتایپ تعریف شده، اسان‌تره. نمونه‌های قبل و بعد از تغییر متد، همه از کد اپدیت‌شده استفاده می‌کنن. درحالی که اگر به روش اول، داخل خود کانستراکتور ، متد رو تعریف کنی، این اتفاق‌ نمی‌افته:مثال:function Parent(gender){ this.gender = gender; // attach the common function to each object instance. this.yellAtChild = function(){ console.log('Somebody gonna get a hurt real bad!'); } } // Let's create dad and mom and start yelling at kids. var dad = new Parent('male'); var mom = new Parent('female'); dad.yellAtChild(); // Somebody gonna get a hurt real bad! mom.yellAtChild(); // Somebody gonna get a hurt real bad! // but, Russell has decide to sue you if you use his catch phrase. // Let's try to tell our already created dad & mon to use different phrase. // ERROR: Not possible to do this way. Parent.yellAtChild = function() { .... } // You need to override the `yellAtChild` method for each object instance. dad.yellAtChild = function(){ console.log('Shut up!'); }; mom.yellAtChild = function(){ console.log('Go to bed!'); } dad.yellAtChild(); // Shut up! mom.yellAtChild(); // Go to bedهمانطور که می‌بینید اگر می‌خواید متد تغییر کنه، متد دونه‌دونه نمونه‌ها رو تغییر بدین که خوب زمانبره!!اما اگر با پروتوتایپ تعریف و بعدش بخوایم تغییر بدیم:function Parent(gender){ this.gender = gender; } // Attach the common function to prototype. Parent.prototype.yellAtChild = function(){ console.log('Somebody gonna get a hurt real bad!'); }; // Let's create dad and mom and start yelling at kids. var dad = new Parent('male'); var mom = new Parent('female'); dad.yellAtChild(); // Somebody gonna get a hurt real bad! mom.yellAtChild(); // Somebody gonna get a hurt real bad! // but, Russell has decide to sue you if you use his catch phrase. // Simple: Just modify the function at Parent.prototype. Parent.prototype.yellAtChild = function(){ console.log('You are grounded.'); }; dad.yellAtChild(); // You are grounded mom.yellAtChild(); // You are groundedالان که متد با پروتوتایپ تعریف شده، بعد از تغییر متد همه نمونه‌ها هم باهاش اپیدت می‌شن. فقط این دوستمون که مثال رو زده خیلی عصبانی بوده:)2- پورتوتایپ سریع‌تره و حافظه کمتری می‌گیره.زمانی که شما متدی رو در کانستراکتور ابجکت تعریف می‌کنی، هر کدوم از نمونه‌ها یک کپی از اون متد رو برای خودشون دارن که باعث میشه هم از نظر زمان و هم حافظه کارآمد نباشه.اما برعکس، متد به پروتوتایپ ابجکت، پیوست بخوره، برای همه نمونه‌ها، یک نسخه از متد وجود داره که باعث میشه بهینه‌تر از نظر زمانی و حافظه عمل کنه.پ.ن1: جواب این سوال ترجمه این صفحه است. 4- تعریف closure همراه با مثالکلا مفهوم کلوژر، یکی از مفاهیم به قول خارجی‌ها under the hood محسوب میشه.A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).به بیان خیلی ساده‌تر، کلوژر فانکشنیه که می‌تونه به متغیر‌هایی که بیرون خودش هم هستن، دسترسی داشته باشه. به بیان دیگر، کلوژر فانکشنیه که داخل یک فانکشن دیگ (تابع پدر)تعریف شده و میتونه به متغیر‌هایی که بیرون از خودش یعنی تابع پدر(ها)، تعریف شده‌ان، نیز دسترسی داشته باشه. کلوژر به متغیر‌ها در سه scop زیر، دسترسی داره:متغیرهای تعریف شده درون خودشمتغیرهای تعریف شده در توابع پدرشمتغیرهای سراسری برای این‌که این مفهوم رو عمیق‌تر متوجه بشیم، کلا باید درباره مفاهیم مربوط به nested functionها، کد‌ بلاک و scope خوند و بعدش عمیق‌تر بشیم و بریم سراغ مفهمومی به نام lexical environment. حقیقتا صحبت درباره‌ این مفاهیم اینجا جاش نیست و حتی اگر بود، من نمی‌تونستم. یه مثال ساده از کلوژر:function makeFunc() { let name = 'Mozilla'; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); myFunc(); //mozillaاینجا ما یک فانکشن اصطلاحا بیرونی (outer) و یا تابع پدر داریم که nested function هم هست. که درون خودش یک متغیر محلی (local)به نام name و یک تابع به نام displayName ( که inner function محسوب میشه)، تعریف کرده. مقدار بازگشتی‌ تابع بیرونی‌مون هم، تابع displayName هست و وظیفه تابع درونیمون، هم نشون‌دادن مقدار ذخیره‌شده در متغیر name هست. وقتی myFunc رو برابر makeFunc() قرار می‌دیم، دv واقع داریم myFunc رو برابر مقدار بازگشتیِ تابعِ makeFunc قرار میدیم که درواقع همون تابع displayName هست.وقتی myFunc() صدا زده میشه، خروجی "mozilla" رو نشون میده! این‌که چه اتفاقی می‌افته که این تابع میتونه به مقدار name که یک متغیر محلی محسوب میشه، دسترسی داشته باشه، نشون دهنده مفهموم کلوژر هست که برای فهم بیشتر باید همون کلمات کلیدی که بالا گفته شد رو خوند تا متوجه شد. من برای یادگیرفتن این موضوع از منابع زیر کمک گرفتم:1- https://amnsingh.medium.com/lexical-environment-the-hidden-part-to-understand-closures-71d60efac0e02- https://javascript.info/closure کلا منبع خیلی خوبیه برای یادگیری جاوااسکریپت.3- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures4- https://dev.to/abdulazizcode/scope-lexical-environment-4pdd5- تابع mulیی بنویسید که بتونه به شکل زیر درست کار کنه:console.log(mul(2)(3)(4)); // output : 24 console.log(mul(4)(3)(4)); // output : 48جواب:function mul (x) { return function (y) { // anonymous function return function (z) { // anonymous function return x * y * z; }; }; }تو این مثال، درواقع ما یک تابعی به نام mul تعریف کردیم که یک ارگیومنت x می‌گیره و خروجیش‌ یه تابع دیگ‌است که اونم یه ارگیومنت دیگ به نام y می‌گیره و اونم خروجیش یک تابع دیگ هست که ارگیومنت دیگ به نام z می‌گیره و درنهایت خروجیش ضرب هر سه ارگیومنت‌هاست. let mul2=mul(2); let mul3=mul(3); console.log(mul2(3)(4)); console.log(mul3(4)(5));می‌تونیم اینجا بگیم که تابع mul درواقع کارخونه تولید تابع‌است طوری که توابعی رو تولید می‌کنه که یک‌ مقدار خاص رو در ارگیومنت‌هاش ضرب می‌کنه. تو مثال بالا کارخونه mul، دو تا تابع جدید تولید کرده که یکیش، 2 رو در ارگیومنت‌هاش ضرب می‌کنه و اون یکی، هم 3 رو در ارگیومنت‌هاش ضرب می‌کنه.درواقع، mul2 و mul3 هر دو کلوژر هستند. هر دو یک بدنه تابع مشابه دارن، اما lexical environmentشان متفاوت هست. در lexical environment اولی، x برابراست با 2 و lexical environment دومی، x برابراست با 3.6- چگونه یک ارایه را خالی کنیم؟فرض کنید یه ارایه داریم:let arr=[1,2,3]چه‌طوری می‌توینم این ارایه رو خالی کنیم؟جواب:به چند روش میشه ارایه رو خالی کرد که باید براساس شرایط تصمیم گرفت از کدومش استفاده کنیم:روش اول: ارایه رو به مقدار [] مقداردهی (assign) کنیم.arr = [];روش سریعیه ولی باید بدانیم که ما با assignکردن ارایه arr یعنی داریم مقدار جدیدی بهش میدیدم و اگر به arr اصلی یه ارایه دیگ بهش اشاره می‌کرد، اون ارایه دیگ، مقدارش خالی نمیشه:let myArr=arr arr=[] console.log(myArr) //[1,2,3]همانطور که می‌بینید ارایه myArr درست‌نخورده می‌مونه!روش دوم: طول ارایه رو برابر صفر قرار بدیم.arr.length=0مقدار طول یا lengthِ هم قابلیت خوندن داره و هم میتونیم تغییرش بدیم. زمانی که طول ارایه رو برابر صفر قرار می‌دیم، تمام المنت‌های درون ارایه رو حذف می‌کنیم. که این روش، برعکس روش قبلی، ریفرنس‌هایی که به ارایه اصلی می‌شد رو هم اپدیت می‌کنه و اون‌ها رو هم خالی می‌کنه.let myArr=arr arr.length=0 console.log(myArr) //[]روش سوم: استفاده از متد ()splice.arr.splice(0,arr.length)متد splice، کلا وظیفه‌اش تغییر دادن محتوای اصلی ارایه‌است و این کار رو با جایگزینی یا حذف محتوای ارایه‌ و یا اضافه‌کردن ایتم جدید انجام می‌ده. پیاده‌کردن این متد رو ارایه، ارایه‌مون تغییر می‌کنه.اینجا داریم به متد splice می‌گیم که از ایندکس 0 شروع کن و به اندازه طول ارایه که در اینجا 3 هست، برو جلو، دونه‌دونه المنت‌ها رو حذف کن.تو این روش هم، ریفرنس‌هایی که به ارایه اصلی‌ میشه، اپدیت میشن:let myArr=arr; arr.splice(0,arr.length) console.log(myArr); //[]روش سوم: استفاد از متد ()popمتد pop کارش حذف المنت از اخر ارایه هست به این صورت که با هر بار پیاده‌کردنش روی یک ارایه، اخرین المنت از ارایه حذف می‌شه.while(arr.length > 0){ arr.pop(); }تو این روش هم، ریفرنس‌هایی که به ارایه اصلی‌ میشه، اپدیت میشن ولی نسبت به روش‌های قبل، کارایی کمتری داره.7- چه طوری چک کنیم که یک ابجکت، ارایه هست یا نه؟برای این کار میتونیم از متد Array.isArray() استفاده کنیم. خروجی این متد true یا false هستش://Creating some variables var v1 = {name: "John", age: 18}; var v2 = ["red", "green", "blue", "yellow"]; var v3 = [1, 2, 3, 4, 5]; var v4 = null; //Testing the variables data type typeof(v1); // Returns: "object" typeof(v2); // Returns: "object" typeof(v3); // Returns: "object" typeof(v3); // Returns: "object" //Testing if the variable is an array Array.isArray(v1); // Returns: false Array.isArray(v2); // Returns: true Array.isArray(v3); // Returns: true Array.isArray(v4); // Returns: falseاین متد تو بیشتر browserهای معروف و رایج ساپورت میشه.یه روش دیگ وجود داره برای این‌کار: toString(). این متد رو همه شی‌ها از طریق پروتوتایپشون ارث‌ می‌برن و بهش دسترسی دارند. Array، Date, Function همه جزء اشیاء توکار(built-in) محسوب میشن. همه‌ این‌ها درنهایت از Object.prototype ارث می برن. به‌خاطر همینم یه عده‌ای میگن "همه‌چی از اشیاء ارث می‌برن".این یه عکسیه از این پیج برداشته شده:حالا این‌ها چه ربطی به سوال داره؟ اینه که همه این‌ها به تابع toString دسترسی دارند. این تابع چی‌کار می‌کنه؟ این تابع به صورت خودکار هروقت که شی باید به صورت رشته نمایش داده بشه و یا زمانی که شی‌ای در شرایطی بهش ارجاع بشه که یک رشته به عنوان خروجی ازش انتظار میره، صدا زده میشه!Every object has a toString() method that is automatically called when the object is to be represented as a text value or when an object is referred to in a manner in which a string is expectedاگر این متد، دست‌کاری نشه، خروجیش به صورت "[object type]" خواهد بود.let obj = {}; console.dir(obj.toString()); //[object object]حالا ما میخوایم بدونیم ایا این شی از نوع ارایه هست یا نه؟const toString = Object.prototype.toString; toString.call(new Date); // [object Date] toString.call(new Array); //[object Array] toString.call(new String); // [object String] toString.call(Math); // [object Math] // Since JavaScript 1.8.5 toString.call(undefined); // [object Undefined] toString.call(null); // [object Null]میتونیم با استفاده از متد Function.prototype.call و یا Function.prototype.apply نوع شی رو پیدا کرد.از سوال 8 تا سوال 13، درباره اپریتور delete هستش. اول سوال‌ها رو به ترتیب مینویسم و بعد به ترتیب جوابش رو میذارم.8- خروجی کد زیر چیست؟var output = (function(x) { delete x; return xک })(0); console.log(output);9- خروجی کد زیر چیست؟var x = 1; var output = (function() { delete x; return x; })(); console.log(output);10- خروجی کد زیر چیست؟var x = { foo : 1}; var output = (function() { delete x.foo; return x.foo; })(); console.log(output);11- خروجی کد زیر چیست؟var Employee = { company: 'xyz' } var emp1 = Object.create(Employee); delete emp1.company console.log(emp1.company);12- در جاوااسکریپت، undefined و یا empty چیست؟var trees = ["redwood", "bay", "cedar", "oak", "maple"]; delete trees[3];13- خروجی کد زیر چیست؟var trees = ["xyz", "xxxx", "test", "ryan", "apple"]; delete trees[3]; console.log(trees.length);اپریتور delete:The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.با استفاده از این اپریتور میشه پراپرتی یک ابجکت رو حذف کرد و بعد از حذفش، اون پراپرتی از دسترس خارج میشه و undefined برمی‌گردونه.مقدار باززگشتی این اپریتور زمانی که بتونه پراپرتی رو حذف کنه، true هست، اگر اون پراپرتی رو پیدا نکنه مقدار بازگشتیش true هست ولی روی ابجکت تاثیری نداره!این اپریتور روی متغیر، توابع هیچ تاثیری نداره و مقدار بازگشتیش false هستش.نباید این اپریتور رو روی اشیاء پیش‌‌فرض مثل window, Math, Date استفاده بشه چون ممکنه باعث اختلال کل برنامه بشه!به طور مثال:let person = { name: "John", age:52 } console.log(delete person.age); //true console.log(person); //{name: 'John'}حالا اگر این اپریتور رو روی تابع و یا متغیر استفاده کنیم:let num=5; let sum=(a,b)=>{ return a+b; } console.log(delete num) //false console.log(delete sum) //false console.log(num) //num is still there, -> 5 console.log(sum(2,2)) //4خروجی false به این علته که اپریتور delete روی متغیر چی محلی و چه گلوبالی و همینطور روی تابع تاثیر نداره و دست‌نخورده باقی می‌مانند.اما، کد زیر خروجیش چیه؟num = 5 console.log(delete num); //true console.log(num); // Uncaught ReferenceError: num is not definedچرا؟ وقتی یه متغیر رو بدون کی‌ورد var تعریف می‌کنیم، اون متغیر به عوان پراپرتی ابجکت window ذخیره میشه. پس وقتی روش delete میزنیم، درواقع داریم یکی از پراپرتی‌های window رو حذف می‌کنیم.جواب سوال 8 و 9: خروجی سوال 8، 0 و خروجی سوال 9، 1 هست.همانطور که گفته شد این اپریتور فقط پراپرتی‌های ابجکت رو حذف میکنه و روی توابع و متغیر‌ها تاثیری نداره! در سوال 8 و 9، x شی نیست. در سوال 8، x یک متغیر محلی و در 9 یک متغیر سراسری محسوب میشه که با کی‌ورد var تعریف شده. در هر دو، x دست‌نخورده باقی می‌مونه.جواب سوال 10: undefinedاینجا، x یک شی و foo هم پراپرتیش هست. کاملا واضحه که عمل حذف پراپرتی با موفقیت انجام میشه و چون حذف شده، از دسترس خارج میشه و درنتیجه زمانی که یخوایم بهش دسترسی داشته باشیم، خروجی undefined هست.جواب سوال 11: "xyz"اینجا emp1 با استفاده از متد create از روی ابجکت Employee ایجاد شده:The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.درواقع با متد create میایم ابجکت جدیدی تولید می‌کنیم طوری که ابجکت موجود، به عنوان پرتوتایپ به ابجکت جدید اضافه میشه.var Employee = { company: "xyz", }; var emp1 = Object.create(Employee); console.log(emp1); /* output: {} [[Prototype]]: Object <-------------- company: "xyz" [[Prototype]]: Object */همانطور که میبینید، ابجکت emp1 پراپرتیِ company را تو پرتوتایپش داره و اپریتور delete روی پراپرتی موجود در پروتوتایپ تاثیری نداره. اما اگر به صورت زیر بنویسیم، عمل حذف انجام خواهد شد:console.log(delete emp1.__proto__.company); //trueجواب سوال 12 و 13:ایا میشه اپریتور delete رو روی المنت‌های ارایه پیاده کرد؟ ازونجایی که ارایه خودش نوعی از ابجکت محسوب میشه، المنت‌های ارایه رو میشه با این اپریتور حذف کنیم. اما باید حواسمون باشه که:اپریتور، المنت رو حذف می‌کنه ولی طول ارایه و نیز ایندکس‌های ارایه اپدیت نمی‌شن و این‌که در پوزیشن المنت‌ حذف‌شده، empty/undefined نشون داده‌میشه.var trees = ["redwood", "bay", "cedar", "oak", "maple"]; delete trees[3]; console.log(trees) /* output: (5) ['redwood', 'bay', 'cedar', empty, 'maple'] 0: "redwood" 1: "bay" 2: "cedar" 4: "maple" length: 5 [[Prototype]]: Array(0) */ console.log(trees[3]===undefined) //trueبه جای ایندکس 3 که حذف شده، empty نشون داده میشه و طول ارایه همچنان 5 باقی مونده.جواب سوال 13: گفتیم که این اپریتور طول ارایه رو بعد از عمل حذف اپدیت نمی‌کنه پس خروجی 5 خواهد بود.منابع استفاده شده:https://levelup.gitconnected.com/5-facts-about-delete-operator-in-javascript-c16fd2588cdhttps://www.geeksforgeeks.org/javascript-delete-operator/

تفاوت بین ECMA International, ECMA Script, JavaScript

Nilz — Sat, 31 Jul 2021 19:14:37 +0430

این کلمه‌ها، کلمات کلیدی هستن که وقتی شروع کردم جاوااسکریپت یاد بگیرم (اولین زبان برنامه‌نویسیه که دارم یاد می‌گیرم)، خیلی به چشمم خورد. اولش خیلی بهش توجه نمی‌کردم ولی الان دیگ گفتم برم ببینم اینا چی‌ان چون دیگ داشتن میرفتن تو اعصابم....قبلش بگم که من فقط طوری می‌نویسم که خودم متوجه شدم و مطمئنا تعاریف کامل نیستند. از وب‌سایت زیر هم بیشتریاش رو برداشتم https://www.freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript-cba48c73a2b5/ ECMA International یه سازمانیه که در حوزه تکنولوژی، استاندارد تعریف می‌کنه. از سال 1961 شروع به کار کردند و تا الان طیف گسترده‌ای از استانداردها رو به طور سراسری ایجاد کردند.ECMA-262 اکما-262 نام یکی از استانداردهاییه که توسط اکما منتشر شده که شامل مشخصات کلی و همه منظوره زبان اسکریپتی است. ECMAScriptاکمااسکریپت درواقع قوانین، جزئیات و دستورالعمل‌هایی رو تعریف میکنه که زبان‌های اسکریپتی باید از اونا پیروی کنن تا با اکمااسکریپت سازگار باشند. پ.ن: راستش نتونستم بفهمم فرق اکما-262 و اکمااسکریپت دقیقا چیه!A Scripting LanguageA programming language designed specifically for acting on an existing entity or systemبرای داشتن ایده کلی از زبان‌های اسکریپتی، دستورهایی مثل "راه رفتن"، "دویدن" و یا "پریدن" رو در نظر بگیرید. این افعال اگر کسی نباشه که انجامشون بده، معنی خاصی نمیدن یعنی باید یه نفر یا یه حیوانی یا یک شخصیت کارتونی وجود داشته باشه تا این افعال رو انجام بده. زبان اسکریپتی هم در واقع شبیه همین افعال هستن که با وجود یه موجودیت یا سیستم خارجی دیگر معنی پیدا میکنه.زبان‌های اسکریپتی، نوعی از زبان‌های برنامه‌نویسی هستند که حاوی دستو ارالعمل / command های پشت سر هم‌اند که هنگام اجرا پشت سر هم به ترتیب(خط‌به‌خط)، تفسیر (interpret) می‌شوند. JavaScriptجاوا اسکریپت، یک زبان برنامه‌نویسی از نوع اسکریپتی هست که مطابق استاندارد‌های اکمااسکریپت عمل می‌کنه. اگر شما ECMAScript بخونی، یاد میگیری چه طوری یه زبان اسکریپتی تولید کنی، و با خوندن داکیومنت‌ جاوااسکریپت، یاد می‌گیری چه طوری از زبان اسکریپتی،استفاده کنی. a JavaScript EnginePhoto credit: translatemedia.comفایرفاکس، کروم و یا بیشتر browser های معروف میتونن کدهای جاوااسکریپت رو اجرا کنن چون موتورهای جاوااسکریپت دارن. درواقع این موتور، یه برنامه است که کدهای جاوااسکریپت رو می‌فهمه و اجراشون می‌کنه. چندتا موتورهای متفاوت وجود داره که مختص به یک یا چند browser هست. به طور مثال v8 موتور کروم، spiderMonkey برای فایرفاکس و chakra برای اینترنت اکسپلورر. رابطه موتورهای جاوااسکریپت نسبت به browser دقیقا شبیه فهم یک زبان توسط یک فرد هست. تو مثال " راه رفتن" هم، browser دقیقا همون کسی هست که قراره بفهمه که راه رفتن و یا پریدن چه معنی میدن که مطابقش یه جرکتی بزنه. Difference in browser performancePhoto credit: vcsolutions.com هرکسی میتونه متوجه بشه معنی "پریدن" رو ولی سرعت واکنششون بهش میتونه متفاوت بشه چونکه سرعت فهم و پردازش اون دستور متفاوته. دقیقا همین تفاوت در فهم و پردازش کدهای جاوااسکریپت بین موتورها وجود داره. Differences in browser supportهمانطور که بین ما فارسی زبان‌ها در فهم زبان فارسی، تفاوت‌هایی هست، بین browserها هم همین تفاوت وجود داره. با این که همه موتورها، جاوااسکریپت رو می‌فهمن اما یک سری از موتورها قابلیت فهم , پردازش بیشتری نسبت به بقیه دارند. همانطور که گفته شد، اکمااسکریپت درواقع حاوی یه سری قوانین و دستورالعمل‌هاییه که تعریف می‌کنه یه زبان اسکریپتی میتونه چه شکلی باشه. انتشار ورژن جدید از اکمااسکریپت معنیش این نیست که الان همه موتورهای جاواسکریپتی الزاما همه ویژگی جدید رو دارند. اپدیت‌شدن موتور‌های جاوااسکریپت بر طبق اخرین نسخه منتشر شده از اکمااسکریپت، کاملا وابسته به تیم یا سازمان توسعه‌دهنده اون موتور جی‌اس هست. به خاطر همین هم هست که معمولا توسعه دهنده‌ها بیشتر این مدلی سوال می‌پرسن: "این browser کدوم ورژن از اکما اسکریپت رو پشتیبانی می‌کنه؟" یا " کدوم از ویژگی‌های اکمااسکریپت رو این browser پشتیبانی می‌کنه؟"این جدول میتونه جواب خوبی برای این سوال‌ها باشه. A JavaScript runtimeدرواقع، محیطیه که کدهای جی‌اس توش اجرا میشه و توسط موتورهای جی‌اس تفسیر میشه. این محیط همون موجودیتی هست که تو تعریف زبان اسکرپتی ازش صحبت شد. کد اول به موتور جی‌اس داده میشه، دقیقا لحظه‌ای که فهمید باید چه حرکتی بزنه، تو این محیط خروجی کدها رو نشون میده . اپلیکیشن ها خودشون رو در دسترس میذارن تا توسط جی‌اس دستکاری بشن. از سمت کلاینت، این محیط browser هست که میاد نقش host object رو بازی می‌کنه. درواقع window و html document دقیقا همون host objectیی هستند که دقیقا جی‌اس اومده که اونا رو دست‌کاری کنه.تا حالا با window و یا document که host objects هستند کار کردین؟ این‌ها در واقع بخشی از هسته جی‌اس مسحوب نمیشن(به خاطر همینم بهش میگن host object وگرنه بهش میگفتن native object). این‌ها در واقع web API هستند، ابجکت‌هایی که توسط browser ایجاد شده‌اند (ابجکت‌هایی که تو ECMAScript تعریف نشده اند)، که قراره بستری برای میزبانی جی‌اس محسوب بشن.در سمت سرور، محیط runtime جی‌اس node.js هست. ابجکت‌های میزبان سمت سرور مثل فایل سیستم، پردازشگرها و درخواست‌ها، همه توسط node.js فراهم میشوند.نکته جالب: محیط runtime متفاوت، میتونن موتور جی‌اس مشابه داشته باشند. مثلا v8 موتور جی‌اس یی هست که هم در سمت کلاینت یعنی توسط browser کروم استفاده میشه و هم سمت سرور توسط node.js.ECMAScript 66مین ورژن از ECMA-262 هست و تغییرات گسترده‌ای در این نسخه ایجاد شده و باعث توسعه و تحولات زیادی شده.تو این نسخه، اکمااسکریپت اسمش رو از ES6 به ES2015 تغییر داده تا به سال انتشار این استاندارد، اشاره کنه. یکی از دلایل عوض کردن این اسم اینه که کاربر قبلش میتونست اشتباه بگیره و فکر کنه چون ES6 اسمشه پس سال 2016 هم منتشر شده.BabelPhoto credit: HTML5Hive.orgیه مبدله که کدهای ES6 رو به ES5 تبدیل میکنه.توسعه دندگان میتونن از ویژگی‌هایی جدید که با ES6 منتشر شده، استفاده کنند، ولی باید در نظر بگیرند که کد‌هاشون باید با browser سازگار باشند. درنتیجه از Babel استفاده میشه تا هماهنگی‌های لازم رو در جهت معادل سازی ES6 به ES5 انجام بده.Chicken or the eggنکته گیج‌کننده ماجرا تو این داستان اینه که اول جاوااسکرپیت سال 1996 ایجاد شد و بعدش سال 1997 طبق استانداردهای ECMA بین‌المللی درآمد و نتیجه‌اش ایجاد استاندارد ECMAScript شد. و همین‌ که، ازونجایی که جاوااسکریپت مطابق به مشخصات ECMAScript هست، جاوااسکریپت یه مثال پیاده‌سازی‌شده از ECMAScript محسوب شده.به خاطر همین هم هست که می‌افتیم تو این لوپ که: اکمااسکریپت برمبنای جاوااسکریپته و جاوااسکریپت هم بر مبنای اکمااسکریپته.دقیقا شبیه این داستانه که می‌گن ادم‌ها به مرور زمان، تبدیل میشن به والد خودشون.پ.ن 1: تو یه سری جاها من به جای نوشتن جاوااسکریپت، نوشتم "جی‌اس". و این که خیلی سعی کردم خودمونی بنویسم، شرمنده!پ.ن 2: میدونم پر ایراده، چه نگارشی چه فنی. به مرور زمان سعی می‌کنم دقیق‌ترش کنم. صرفا جهت توجیه ایرادات، این اولین بارمه که من دارم ترجمه فارسی می‌کنم و اگر یه جاهایی گنگ نوشتم، دلیلش میتونه همین باشه.پ.ن 3: این مطلب رو من تاجایی صحبت کردم که فهمیدم و یا فکر کردم که فهمیدم. خیلی ممنون