diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index abd2b158d..9cb420285 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -1,10 +1,10 @@ -# জাভাস্ক্রিপ্ট পরিচিতি +# জাভাস্ক্রিপ্ট পরিচিতি -চলুন দেখে নেওয়া যাক জাভাস্ক্রিপ্ট এর বিশেষ বিশেষ দিকগুলো, আমরা এটি দিয়ে কী করতে পারি, এবং অন্যান্য প্রযুক্তিগুলি যা এর সাথে ভালো কাজ করে। +চলুন দেখে নেওয়া যাক জাভাস্ক্রিপ্ট এর বিশেষ বিশেষ দিকগুলো, আমরা এটি দিয়ে কী করতে পারি, এবং অন্যান্য প্রযুক্তিগুলি যা এর সাথে ভালো কাজ করে। ## জাভাস্ক্রিপ্ট কী? -শুরুতে *জাভাস্ক্রিপ্ট* তৈরি করা হয়েছিল *"ওয়েব পেইজগুলি প্রাণবন্ত করতে"* । +শুরুতে *জাভাস্ক্রিপ্ট* তৈরি করা হয়েছিল "ওয়েব পেইজগুলি প্রাণবন্ত করতে"। এই ভাষায় প্রোগ্রামগুলিকে বলা হয় স্ক্রিপ্ট। এগুলি সরাসরি কোনও ওয়েব পেজের HTML এর ভিতরে লেখা হয় এবং পেজটি লোড হওয়ার সাথে সাথে স্বয়ংক্রিয়ভাবে চালু হয়ে যায়। @@ -26,7 +26,7 @@ - [V8](https://bn.wikipedia.org/wiki/V8_(JavaScript_engine) -- ক্রোম এবং অপেরা - [স্পাইডার মাংকি](https://bn.wikipedia.org/wiki/SpiderMonkey) -- ফায়ারফক্স. -- ...আরও অনেক কোডনাম রয়েছে যেমন ইন্টারনেট এক্সপ্লোরার এর বিভিন্ন ভার্সন এর জন্য "Trident" এবং "Chakra", মাইক্রোসফ্ট এজের জন্য "ChakraCore", সাফারির জন্য "Nitro" এবং "SquirrelFish" ইত্যাদি। +- ...আরও অনেক কোডনাম রয়েছে যেমন ইন্টারনেট এক্সপ্লোরার এর বিভিন্ন ভার্সন এর জন্য "Trident" এবং "Chakra", মাইক্রোসফ্ট এজের জন্য "ChakraCore", সাফারির জন্য "Nitro" এবং "SquirrelFish" ইত্যাদি। উপরের টার্ম গুলি মনে রাখা ভাল, কারণ সেগুলি ইন্টারনেটে ডেভেলপার আর্টিকেলে ব্যবহৃত হয়। আমরাও সেগুলো ব্যবহার করব। উদাহরণস্বরূপ, যদি "একটি X ফিচার V8 এ সাপোর্ট করে", তবে সম্ভবত এটি ক্রোম এবং অপেরাতেও কাজ করে। @@ -36,12 +36,12 @@ ১. ইঞ্জিন (ব্রাউজারের সাথে সংযুক্ত থাকে) স্ক্রিপ্টটি পড়ে ("পার্স করে")। ২. তারপরে এটি স্ক্রিপ্টটিকে মেশিনের ভাষায় রূপান্তর ("কম্পাইল") করে। -৩. এবং তারপরে মেশিন খুব দ্রুত কোডটি চালায় +৩. এবং তারপরে মেশিন খুব দ্রুত কোডটি চালায় ইঞ্জিনটি এই প্রক্রিয়ার প্রতিটি ধাপে অপ্টিমাইজেশন করে। এমনকি এটি স্ক্রিপ্ট চলার সময়ও পর্যবেক্ষন করতে থাকে, এর মধ্য দিয়ে প্রবাহিত ডেটা বিশ্লেষণ করে এবং সেই ধারনার উপর ভিত্তি করে মেশিন কোড অপ্টিমাইজ করে। ``` -## জাভাস্ক্রিপ্ট ব্রাউজারে কী করতে পারে ? +## জাভাস্ক্রিপ্ট ব্রাউজারে কী করতে পারে ? আধুনিক জাভাস্ক্রিপ্ট একটি "নিরাপদ" প্রোগ্রামিং ভাষা। এটি মেমরি বা সিপিইউতে নিম্ন-স্তরের এক্সেস দেয় না, কারণ এটি প্রাথমিকভাবে ব্রাউজারগুলির জন্য তৈরি করা হয়েছিল যার এসব এক্সেস এর প্রয়োজন হত না। @@ -53,7 +53,7 @@ - ওয়েবপেজে নতুন HTML যুক্ত করা, পেইজ এর কন্টেন্ট পরিবর্তন করা, ডিজাইনে সংশোধন করা । - ব্যবহারকারীর একশন, মাউসের ক্লিক, মাউস পয়েন্টার এর নড়াচড়া এবং কীবোর্ড এ কি চাপলে প্রতিক্রিয়া জানানো। -- রিমোট সার্ভার এ রিকুয়েস্ট পাঠানো, ফাইল ডাউনলোড এবং আপলোড করা (উল্লেখযোগ্য [AJAX](https://bn.wikipedia.org/wiki/Ajax_(programming) এবং [COMET](https://bn.wikipedia.org/wiki/Comet_(programming)) technologies). +- রিমোট সার্ভার এ রিকুয়েস্ট পাঠানো, ফাইল ডাউনলোড এবং আপলোড করা (উল্লেখযোগ্য [AJAX](https://bn.wikipedia.org/wiki/Ajax_(programming) এবং [COMET]() technologies). - কুকিজ আনা এবং সেট করা, ব্যবহারকারীদের কাছে প্রশ্ন জিজ্ঞাসা করা, ম্যাসেজ দেখানো। - ক্লায়েন্ট-সাইড ("লোকাল স্টোরেজ") এ ডেটা সংরক্ষণ করা। @@ -63,16 +63,18 @@ এই জাতীয় বিধিনিষেধের উদাহরণগুলির মধ্যে রয়েছে: -- একটি ওয়েবপেজে জাভাস্ক্রিপ্ট হার্ড ডিস্কে যেকোনো ফাইল পড়তে / লিখতে, সেগুলি কপি করতে বা প্রোগ্রামগুলি চালাতে পারে না। এটির ওএস এর সিস্টেম ফাংশন গুলির সরাসরি এক্সেস নেই। +একটি ওয়েবপেজে জাভাস্ক্রিপ্ট হার্ড ডিস্কে যেকোনো ফাইল পড়তে / লিখতে, সেগুলি কপি করতে বা প্রোগ্রামগুলি চালাতে পারে না। এটির ওএস এর সিস্টেম ফাংশন গুলির সরাসরি এক্সেস নেই। + + আধুনিক ব্রাউজারগুলি এটিকে ফাইল নিয়ে কাজ করার অনুমতি দেয়, তবে এর এক্সেস সীমাবদ্ধ এবং কেবলমাত্র যদি ব্যবহারকারী নির্দিষ্ট কিছু কাজ করেন যেমন ব্রাউজার উইন্ডোতে একটি ফাইল "ড্রপ" করা বা একটি "" `ট্যাগের মাধ্যমে ফাইল সিলেক্ট করা। - আধুনিক ব্রাউজারগুলি এটিকে ফাইল নিয়ে কাজ করার অনুমতি দেয়, তবে এর এক্সেস সীমাবদ্ধ এবং কেবলমাত্র যদি ব্যবহারকারী নির্দিষ্ট কিছু কাজ করেন যেমন ব্রাউজার উইন্ডোতে একটি ফাইল "ড্রপ" করা বা একটি "" `ট্যাগের মাধ্যমে ফাইল সিলেক্ট করা। + ক্যামেরা / মাইক্রোফোন এবং অন্যান্য যন্ত্রগুলির সাথে ইন্টারঅ্যাক্ট করার উপায় রয়েছে তবে তাদের ব্যবহারকারীর সুস্পষ্ট অনুমতি প্রয়োজন। সুতরাং একটি জাভাস্ক্রিপ্ট-সক্ষম ওয়েবপেজ চাইলেই কোনও ওয়েব-ক্যামেরা চালু করতে পারে না, আশেপাশের কোন কিছু দেখতে পারে না এবং [NSA](https://bn.wikedia.org/wiki/National_Security_Agency) এর কাছে সেগুলি পাঠাতে পারে না। - ক্যামেরা / মাইক্রোফোন এবং অন্যান্য যন্ত্রগুলির সাথে ইন্টারঅ্যাক্ট করার উপায় রয়েছে তবে তাদের ব্যবহারকারীর সুস্পষ্ট অনুমতি প্রয়োজন। সুতরাং একটি জাভাস্ক্রিপ্ট-সক্ষম ওয়েবপেজ চাইলেই কোনও ওয়েব-ক্যামেরা চালু করতে পারে না, আশেপাশের কোন কিছু দেখতে পারে না এবং [NSA](https://bn.wikedia.org/wiki/National_Security_Agency) এর কাছে সেগুলি পাঠাতে পারে না। - ভিন্ন ভিন্ন ট্যাব / উইন্ডো সাধারণত একে অপরের সম্পর্কে জানে না। কখনও কখনও তারা জানে, যেমন, যখন একটি উইন্ডো জাভাস্ক্রিপ্ট ব্যবহার করে আরেকটি উইন্ডো খুলে। তবে এই ক্ষেত্রেও, যদি ভিন্ন কোন সাইট থেকে (অন্য কোনও ডোমেন, প্রোটোকল বা পোর্ট থেকে) আসে তবে এক পেইজের জাভাস্ক্রিপ্ট অন্য পেইজের এক্সেস পায় না। - একে "same source policy" বলা হয়। এই কাজটি করার জন্য, * উভয় পেজে * অবশ্যই ডেটা আদান-প্রদান এর সাথে সম্মতি থাকতে হবে এবং একটি বিশেষ জাভাস্ক্রিপ্ট কোড থাকতে পারে যা এটি পরিচালনা করে। আমরা এগুলো টিউটোরিয়ালে আলোচনা করব। + একে "same source policy" বলা হয়। এই কাজটি করার জন্য, _ উভয় পেজে _ অবশ্যই ডেটা আদান-প্রদান এর সাথে সম্মতি থাকতে হবে এবং একটি বিশেষ জাভাস্ক্রিপ্ট কোড থাকতে পারে যা এটি পরিচালনা করে। আমরা এগুলো টিউটোরিয়ালে আলোচনা করব। + + এই সীমাবদ্ধতাটিও ব্যবহারকারীর সুরক্ষার জন্য। এই সাইটটির `http: // anysite.com` একটি পেজে যা ব্যাবহারকারী খুলে রেখেছে অবশ্যই তা অন্য কোনো ট্যাবে খুলে রাখা সাইটে URL- `http: // gmail.com` প্রবেশ করতে এবং সেখান থেকে তথ্য চুরি করতে সক্ষম হবে না। - এই সীমাবদ্ধতাটিও ব্যবহারকারীর সুরক্ষার জন্য। এই সাইটটির `http: // anysite.com` একটি পেজে যা ব্যাবহারকারী খুলে রেখেছে অবশ্যই তা অন্য কোনো ট্যাবে খুলে রাখা সাইটে URL- `http: // gmail.com` প্রবেশ করতে এবং সেখান থেকে তথ্য চুরি করতে সক্ষম হবে না। - জাভাস্ক্রিপ্ট সহজেই ইন্টারনেট এর মাধ্যমে সার্ভারে যোগাযোগ করতে পারে যেখান থেকে বর্তমান পেজটি এসেছে। তবে অন্যান্য সাইট / ডোমেন থেকে ডেটা গ্রহণের ক্ষমতা এর নেই। যদিও এটি সম্ভব, তবে এর জন্যে রিমোট সার্ভার এর সাথে আলাদা চুক্তি (HTTP headers এ বর্ণনা করা হয়েছে) থাকতে হবে। এটিও একটি সুরক্ষা সীমাবদ্ধতা। ![](limitations.svg) @@ -81,26 +83,27 @@ ## কী জাভাস্ক্রিপ্টকে অতুলনীয় করে তোলে? -জাভাস্ক্রিপ্ট সম্পর্কে কমপক্ষে * তিনটি * দুর্দান্ত জিনিস রয়েছে: +জাভাস্ক্রিপ্ট সম্পর্কে কমপক্ষে _ তিনটি _ দুর্দান্ত জিনিস রয়েছে: ```তুলনা + HTML/CSS এর সাথে সম্পূর্ণ ইন্টিগ্রেশন। + সহজ জিনিস সহজভাবে করা হয়। + প্রত্যেকটা প্রধান ব্রাউজারেই স্বাভাবিক ভাবে চলে। ``` + জাভাস্ক্রিপ্ট একমাত্র ব্রাউজার প্রযুক্তি যা এই তিনটি জিনিসকে একত্রিত করে। এটিই জাভাস্ক্রিপ্টকে অনন্য করে তোলে। এ কারণেই এটি ব্রাউজার ইন্টারফেস তৈরির জন্য সবচেয়ে জনপ্রিয় টুল। -বলা হয়ে থাকে, জাভাস্ক্রিপ্ট দিয়ে সার্ভার, মোবাইল অ্যাপ্লিকেশন ইত্যাদি তৈরি করা যায়। +বলা হয়ে থাকে, জাভাস্ক্রিপ্ট দিয়ে সার্ভার, মোবাইল অ্যাপ্লিকেশন ইত্যাদি তৈরি করা যায়। -## জাভাস্ক্রিপ্ট এর "উপর" প্রোগ্রামিং ভাষাগুলো +## জাভাস্ক্রিপ্ট এর "উপর" প্রোগ্রামিং ভাষাগুলো জাভাস্ক্রিপ্টের সিনট্যাক্স সবার প্রয়োজনের সাথে খাপ খায় না। বিভিন্ন লোক বিভিন্ন বৈশিষ্ট্য চায়। এটাই অবশ্য স্বাভাবিক, কারণ প্রজেক্ট এবং প্রয়োজনীয়তা সবার জন্য আলাদা। -সুতরাং সম্প্রতি নতুন ভাষাগুলির আধিক্য উপস্থিত হয়েছে, যা ব্রাউজারে চালানোর আগে জাভাস্ক্রিপ্টে *ট্রান্সপাইল* (রূপান্তরিত) হয়। +সুতরাং সম্প্রতি নতুন ভাষাগুলির আধিক্য উপস্থিত হয়েছে, যা ব্রাউজারে চালানোর আগে জাভাস্ক্রিপ্টে _ট্রান্সপাইল_ (রূপান্তরিত) হয়। আধুনিক টুলগুলি এই ট্রান্সপাইলেশনকে খুব দ্রুত এবং স্বচ্ছ করে তোলে, যা আসলে ডেভেলপার দের অন্য প্রোগ্রামিং ভাষায় কোড করার সুযোগ দেয় এবং এটিকে অভ্যন্তরে ("Under the hood") স্বয়ংক্রিয়ভাবে রূপান্তরিত করে। @@ -109,7 +112,7 @@ - [কফিস্ক্রিপ্ট](http://coffeescript.org/) জাভাস্ক্রিপ্টের জন্য একটি "সিনট্যাকটিক সুগার"। এটি সংক্ষিপ্ত সিনট্যাক্স নিয়ে আসে, আমাদের আরও পরিষ্কার এবং আরও সুনির্দিষ্ট কোড লেখার সুযোগ দেয়। সাধারণত, রুবি (একটি প্রোগ্রামিং ভাষা) ডেভেলপার রা এটি পছন্দ করে। - [টাইপস্ক্রিপ্ট](http://www.typescriptlang.org/) "স্ট্রিক্ট ডাটা টাইপিং" এ জোর দিয়েছিলো ডেভেলপমেন্ট ও জটিল সমস্যা গুলোকে সহজ করার জন্য। এটি মাইক্রোসফ্ট তৈরি করেছে। - [ফ্লো](http://flow.org/) ডাটা টাইপিং যুক্ত করে, তবে একটু অন্যভাবে। ফেইসবুক এটি তৈরি করেছে। -- [ডার্ট](https://www.dartlang.org/) একটি স্বতন্ত্র প্রোগ্রামিং ভাষা যার নিজস্ব ইঞ্জিন রয়েছে যা ব্রাউজার ছাড়াও (মোবাইল অ্যাপ্লিকেশন হিসাবে) চালানো হয়, তবে এটি জাভাস্ক্রিপ্টে স্থানান্তরিত করা যায়। এটি গুগল তৈরী করছে। +- [ডার্ট](https://www.dartlang.org/) একটি স্বতন্ত্র প্রোগ্রামিং ভাষা যার নিজস্ব ইঞ্জিন রয়েছে যা ব্রাউজার ছাড়াও (মোবাইল অ্যাপ্লিকেশন হিসাবে) চালানো হয়, তবে এটি জাভাস্ক্রিপ্টে স্থানান্তরিত করা যায়। এটি গুগল তৈরী করছে। আরো অনেক আছে। যদিও আমরা যদি ট্রান্সপাইলড ল্যাঙ্গুয়েজ গুলির মধ্যে যেকোনো একটি ব্যবহার করি তবে আমরা কী করছি তা বুঝতে আমাদের জাভাস্ক্রিপ্ট জানা উচিত। diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html new file mode 100644 index 000000000..ff1d871b0 --- /dev/null +++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md index e69de29bb..81552913b 100644 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md +++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md @@ -0,0 +1,2 @@ + +[html src="index.html"] diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 33889eb50..99f1284d3 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -94,7 +94,7 @@ alert("একটি এরর তৈরি হবে")[1, 2].forEach(alert) আমরা স্টেটমেন্টের শেষে সেমিকোলন দিতে পরামর্শ দেই, এমনকি যদি স্টেটমেন্টগুলো আলাদা লাইনেও হয়ে থাকে। এই রুলটি কমিউনিটিতে ব্যাপকভাবে গ্রহণ করা হয়েছে। আরও একবার এভাবে বলা যায় -- অধিকাংশ সময় সেমিকোলন ঊহ্য রাখা **সম্ভব**। কিন্তু এটি ব্যবহার করা নিরাপদ -- বিশেষ করে শিক্ষানবিশ/অনভিজ্ঞদের জন্য। -## কমেন্ট/মন্তব্য +## কমেন্ট/মন্তব্য [#code-comments] সময়ের সাথে সাথে প্রোগ্রামগুলো অধিক থেকে অধিকতর জটিল হতে থাকে। *কমেন্ট/মন্তব্য* লিখার মাধ্যমে কোড কি কাজ করে এবং কেন করে তা প্রয়োজনীয় হয়ে দাঁড়ায়। @@ -135,7 +135,7 @@ alert('হ্যালো'); alert('ওয়ার্ল্ড'); ``` -```smart header="হট-কী ব্যবহার করুন" +```smart header="Use hotkeys!" অধিকাংশ এডিটরে, কোডের কোন অংশ কমেন্ট করতে, এক লাইনের কমেন্টের জন্য `key:Ctrl+/` হট-কী এবং একাধিক লাইনের কমেন্টের জন্য `key:Ctrl+Shift+/` হট-কী ব্যবহার করা হয় (কোডের অংশটি সিলেক্ট করে হট-কী প্রেস করা হয়)। ম্যাকের জন্য `key:Ctrl` এর পরিবর্তে `key:Cmd` ব্যবহার করে চেষ্টা করে দেখুন। ``` diff --git a/1-js/02-first-steps/06-type-conversions/article.md b/1-js/02-first-steps/06-type-conversions/article.md index 229dadb17..20ea191ed 100644 --- a/1-js/02-first-steps/06-type-conversions/article.md +++ b/1-js/02-first-steps/06-type-conversions/article.md @@ -63,12 +63,12 @@ alert(age); // NaN, রূপান্তর হয়নি সংখ্যা রুপান্তরের নিয়ম: -| ভ্যালু | পরিবর্তিত রুপ... | -|-------|-------------| -|`undefined`|`NaN`| -|`null`|`0`| -|true ও false | `1` ও `0` | -| `string` | স্ট্রিংয়ের শুরু ও শেষের স্পেস থেকে তা মুছে ফেলা হয়। বাকিটা ফাঁকা স্ট্রিং হলে, তা `0` হবে। নাহয় নাম্বারগুলি স্ট্রিং থেকে নেয়া হয়। এরর হলে `NaN` আসে। | +| ভ্যালু | পরিবর্তিত রুপ... | +| ----------------------------------- | ---------------------------------------------------------------------------------------------------- | +| `undefined` | `NaN` | +| `null` | `0` | +| true ও false | `1` ও `0` | +| `string` | স্ট্রিংয়ের শুরু ও শেষের স্পেস থেকে তা মুছে ফেলা হয়। বাকিটা ফাঁকা স্ট্রিং হলে, তা `0` হবে। নাহয় নাম্বারগুলি স্ট্রিং থেকে নেয়া হয়। এরর হলে `NaN` আসে। | Examples: @@ -81,18 +81,7 @@ alert( Number(false) ); // 0 এখানে জেনে রাখি `null` ও `undefined` এক্ষেত্রে ভিন্ন আচরণ করে: `null` হয়ে যাবে শূন্য আর `undefined` হবে `NaN`. -````smart header="যোগ '+' স্ট্রিংসমূহকে একীভুত করে" -প্রায় সব গানিতিক অপারেটর ভ্যালুকে সংখ্যায় রূপান্তর করে নেয়। তবে উল্লেখযোগ্য একটি ব্যতিক্রম হলো যোগ `+`, যদি এর দুপাশের একটি ভ্যালুও স্ট্রিং হয় তবে অপরটিও স্ট্রিং হয়ে যাবে - -তখন এটি স্ট্রিংগুলাকে যুক্ত করে ফেলে: - -```js run -alert( 1 + '2' ); // '12' (ডানপাশে স্ট্রিং) -alert( '1' + 2 ); // '12' (বামপাশে স্ট্রিং) -``` - -এটা তখনই হয় যদি অন্তত একটি আর্গুমেন্ট স্ট্রিং থাকে, নাহয় তা সংখ্যায় রুপান্তরিত হয়ে যাবে। -```` +বেশিরভাগ গাণিতিক অপারেটর এমন পরিবর্তন করে থাকে, আমরা পরবর্তি চ্যাপ্টার এ তা দেখবো। ## বুলিয়ান রূপান্তর @@ -134,21 +123,21 @@ alert( Boolean(" ") ); // স্পেস, এটাও true (স্ট্রি রূপান্তর নীতি: -| ভ্যালু | বদলে যায়... | -|-------|-------------| -|`undefined`|`NaN`| -|`null`|`0`| -|true / false | `1 / 0` | -| `string` | স্ট্রিংয়ে যা তাই আসে, স্ট্রিংয়ের শুরু ও শেষের স্পেস থেকে তা মুছে ফেলা হয়। বাকিটা ফাঁকা স্ট্রিং হলে, তা `0` হবে। নাহয় নাম্বারগুলি স্ট্রিং থেকে নেয়া হয়। এরর হলে `NaN` আসে। | +| ভ্যালু | বদলে যায়... | +| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------ | +| `undefined` | `NaN` | +| `null` | `0` | +| true / false | `1 / 0` | +| `string` | স্ট্রিংয়ে যা তাই আসে, স্ট্রিংয়ের শুরু ও শেষের স্পেস থেকে তা মুছে ফেলা হয়। বাকিটা ফাঁকা স্ট্রিং হলে, তা `0` হবে। নাহয় নাম্বারগুলি স্ট্রিং থেকে নেয়া হয়। এরর হলে `NaN` আসে। | **`বুলিয়ানে রূপান্তর`** -- লজিকাল অপারেশনে হয়। আবার `Boolean(value)` দিয়েও করা যায। Follows the rules: -| ভ্যালু | বদলে যায়... | -|-------|-------------| -|`0`, `null`, `undefined`, `NaN`, `""` |`false`| -|অন্য যেকোন ভ্যালু| `true` | +| ভ্যালু | বদলে যায়... | +| ------------------------------------- | --------- | +| `0`, `null`, `undefined`, `NaN`, `""` | `false` | +| অন্য যেকোন ভ্যালু | `true` | প্রায় সব নীতিই বুঝা অ মনে রাখা সোজা। তবে কিছু কমন ভুল হলো: diff --git a/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md b/1-js/02-first-steps/07-operators/3-primitive-conversions-questions/solution.md similarity index 100% rename from 1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md rename to 1-js/02-first-steps/07-operators/3-primitive-conversions-questions/solution.md diff --git a/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/task.md b/1-js/02-first-steps/07-operators/3-primitive-conversions-questions/task.md similarity index 100% rename from 1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/task.md rename to 1-js/02-first-steps/07-operators/3-primitive-conversions-questions/task.md diff --git a/1-js/02-first-steps/07-operators/article.md b/1-js/02-first-steps/07-operators/article.md index a1373eade..fe22adc30 100644 --- a/1-js/02-first-steps/07-operators/article.md +++ b/1-js/02-first-steps/07-operators/article.md @@ -138,17 +138,17 @@ Here's an extract from the [precedence table](https://developer.mozilla.org/en/J | Precedence | Name | Sign | |------------|------|------| | ... | ... | ... | -| 16 | unary plus | `+` | -| 16 | unary negation | `-` | -| 14 | multiplication | `*` | -| 14 | division | `/` | +| 17 | unary plus | `+` | +| 17 | unary negation | `-` | +| 15 | multiplication | `*` | +| 15 | division | `/` | | 13 | addition | `+` | | 13 | subtraction | `-` | | ... | ... | ... | | 3 | assignment | `=` | | ... | ... | ... | -As we can see, the "unary plus" has a priority of `16` which is higher than the `13` of "addition" (binary plus). That's why, in the expression `"+apples + +oranges"`, unary pluses work before the addition. +As we can see, the "unary plus" has a priority of `17` which is higher than the `13` of "addition" (binary plus). That's why, in the expression `"+apples + +oranges"`, unary pluses work before the addition. ## Assignment diff --git a/1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md b/1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md index 3db372d76..4a429c571 100644 --- a/1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md +++ b/1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md @@ -12,10 +12,10 @@ null === +"\n0\n" → false কিছু কারণ: -1. অবশ্যই true বা ঠিক হবে। -2. আভিধানিকভাবে তুলনা তাই false বা ভুল। +1. অবশ্যই true হবে। +2. আভিধানিকভাবে তুলনা তাই false। `"a"` `"p"` থেকে ছোট। 3. আবারও, আভিধানিকভাবে তুলনা, প্রথম স্ট্রিংয়ের `"2"` দ্বিতীয় স্ট্রিংয়ের `"1"` এর থেকে বড়। 4. `null` এবং `undefined` একমাত্র একে অপরের সমান। -5. যথাযথ সমতায় `===` দুটি ভ্যালু একই টাইপের হতে হয়। কিন্তু তারা ভিন্ন টাইপের। +5. যথাযথ সমতায় `===` দুটি ভ্যালু একই টাইপের হতে হয়। উভয় পাশের টাইপ ভিন্ন হলে false হবে। 6. এটি `(4)` নং এর মতো। `null` একমাত্র `undefined` এর সমান। 7. দুটি ভিন্ন টাইপের ভ্যালু বা মান। diff --git a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md index 54a9432c8..3083c8e86 100644 --- a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md +++ b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md @@ -6,8 +6,8 @@ alert( alert(1) || 2 || alert(3) ); alert কল করলে কোন মান রিটার্ন করে না. অথবা, এক কথায় undefined দেখায়। -১। OR || অপারেশনে প্রথমে বাম দিক থেকে মূল্যায়ন করা হয়। সেজন্য এখানে প্রথম ফলাফল দেখায় 1। -২। `alert` দেখায় `undefined`, অথবা সত্য মানটির সন্ধানে দ্বিতীয় প্রতীকে যায়। -৩। দ্বিতীয় প্রতীক `2` সত্য হয়, সুতরাং এক্সিকিউশন স্থগিত, `2` ফিরে আসে এবং তারপরে বাইরের সতর্কতা দ্বারা দেখানো হয়। +১। OR || অপারেশনে প্রথমে বাম দিক `alert(1)` মূল্যায়ন করে। সেজন্য এখানে প্রথম ফলাফল দেখায় `1`। +২। `alert` `undefined` রিটার্ন করে, সুতরাং OR সত্য মানের খোঁজে দ্বিতীয় অপারেন্ড এ যায়। +৩। দ্বিতীয় অপারেন্ড `2` সত্য হয়, সুতরাং এক্সিকিউশন স্থগিত, `2` ফিরে আসে এবং তারপরে বাইরের alert দ্বারা দেখানো হয়। কোনও `3` থাকবে না, কারণ মূল্যায়ন `alert(3)` তে পৌঁছায় না। diff --git a/1-js/02-first-steps/12-while-for/article.md b/1-js/02-first-steps/12-while-for/article.md index 382adadac..b3e3953b8 100644 --- a/1-js/02-first-steps/12-while-for/article.md +++ b/1-js/02-first-steps/12-while-for/article.md @@ -256,7 +256,7 @@ For even values of `i`, the `continue` directive stops executing the body and pa ````smart header="The `continue` directive helps decrease nesting" A loop that shows odd values could look like this: -```js +```js run for (let i = 0; i < 10; i++) { if (i % 2) { @@ -268,7 +268,7 @@ for (let i = 0; i < 10; i++) { From a technical point of view, this is identical to the example above. Surely, we can just wrap the code in an `if` block instead of using `continue`. -But as a side-effect, this created one more level of nesting (the `alert` call inside the curly braces). If the code inside of`if` is longer than a few lines, that may decrease the overall readability. +But as a side-effect, this created one more level of nesting (the `alert` call inside the curly braces). If the code inside of `if` is longer than a few lines, that may decrease the overall readability. ```` ````warn header="No `break/continue` to the right side of '?'" diff --git a/1-js/02-first-steps/13-switch/article.md b/1-js/02-first-steps/13-switch/article.md index dec40a537..314c6cef8 100644 --- a/1-js/02-first-steps/13-switch/article.md +++ b/1-js/02-first-steps/13-switch/article.md @@ -117,7 +117,7 @@ Several variants of `case` which share the same code can be grouped. For example, if we want the same code to run for `case 3` and `case 5`: ```js run no-beautify -let a = 2 + 2; +let a = 3; switch (a) { case 4: diff --git a/1-js/02-first-steps/14-function-basics/article.md b/1-js/02-first-steps/14-function-basics/article.md index bd4bff8de..eb9294821 100644 --- a/1-js/02-first-steps/14-function-basics/article.md +++ b/1-js/02-first-steps/14-function-basics/article.md @@ -266,7 +266,7 @@ alert( result ); // 3 ```js run function checkAge(age) { - if (age > 18) { + if (age >= 18) { *!* return true; */!* diff --git a/1-js/02-first-steps/16-arrow-functions-basics/article.md b/1-js/02-first-steps/16-arrow-functions-basics/article.md index 02090f3c1..e0fb5bda5 100644 --- a/1-js/02-first-steps/16-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/16-arrow-functions-basics/article.md @@ -67,7 +67,7 @@ let welcome = (age < 18) ? () => alert('Hello') : () => alert("Greetings!"); -welcome(); // ok now +welcome(); ``` Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure. diff --git a/1-js/02-first-steps/17-javascript-specials/article.md b/1-js/02-first-steps/17-javascript-specials/article.md index cfc043d7d..4df0a407c 100644 --- a/1-js/02-first-steps/17-javascript-specials/article.md +++ b/1-js/02-first-steps/17-javascript-specials/article.md @@ -81,9 +81,10 @@ let x = 5; x = "John"; ``` -There are 7 data types: +There are 8 data types: - `number` for both floating-point and integer numbers, +- `bigint` for integer numbers of arbitrary length, - `string` for strings, - `boolean` for logical values: `true/false`, - `null` -- a type with a single value `null`, meaning "empty" or "does not exist", diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 1b0f4e377..ee7dea4c4 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -4,7 +4,7 @@ Before writing more complex code, let's talk about debugging. [Debugging](https://en.wikipedia.org/wiki/Debugging) is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools -- a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on. -We'll be using Chrome here, because it has enough features, most other browsers have a similar process`. +We'll be using Chrome here, because it has enough features, most other browsers have a similar process. ## The "Sources" panel @@ -24,11 +24,11 @@ Let's click it and select `hello.js` in the tree view. Here's what should show u ![](chrome-tabs.svg) -Here we can see three zones: +The Sources panel has 3 parts: -1. The **Resources zone** lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too. -2. The **Source zone** shows the source code. -3. The **Information and control zone** is for debugging, we'll explore it soon. +1. The **File Navigator** pane lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too. +2. The **Code Editor** pane shows the source code. +3. The **JavaScript Debugging** pane is for debugging, we'll explore it soon. Now you could click the same toggler again to hide the resources list and give the code some space. diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md index a812bdcd0..2de36b930 100644 --- a/1-js/03-code-quality/02-coding-style/article.md +++ b/1-js/03-code-quality/02-coding-style/article.md @@ -87,7 +87,7 @@ if (condition) { ```js // ব্যাকটিক কোট ` এর সাহায্যে একটা স্ট্রিংকে ভাগ করা যায় let str = ` - Ecma International's TC39 is a group of JavaScript developers, + ECMA International's TC39 is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain and evolve the definition of JavaScript. `; diff --git a/1-js/03-code-quality/03-comments/article.md b/1-js/03-code-quality/03-comments/article.md index 29ba701f8..0d11c6c52 100644 --- a/1-js/03-code-quality/03-comments/article.md +++ b/1-js/03-code-quality/03-comments/article.md @@ -125,25 +125,25 @@ Describe the architecture Document function parameters and usage : There's a special syntax [JSDoc](http://en.wikipedia.org/wiki/JSDoc) to document a function: usage, parameters, returned value. - For instance: - ```js - /** - * Returns x raised to the n-th power. - * - * @param {number} x The number to raise. - * @param {number} n The power, must be a natural number. - * @return {number} x raised to the n-th power. - */ - function pow(x, n) { - ... - } - ``` +For instance: +```js +/** + * Returns x raised to the n-th power. + * + * @param {number} x The number to raise. + * @param {number} n The power, must be a natural number. + * @return {number} x raised to the n-th power. + */ +function pow(x, n) { + ... +} +``` - Such comments allow us to understand the purpose of the function and use it the right way without looking in its code. +Such comments allow us to understand the purpose of the function and use it the right way without looking in its code. - By the way, many editors like [WebStorm](https://www.jetbrains.com/webstorm/) can understand them as well and use them to provide autocomplete and some automatic code-checking. +By the way, many editors like [WebStorm](https://www.jetbrains.com/webstorm/) can understand them as well and use them to provide autocomplete and some automatic code-checking. - Also, there are tools like [JSDoc 3](https://github.com/jsdoc3/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at . +Also, there are tools like [JSDoc 3](https://github.com/jsdoc3/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at . Why is the task solved this way? : What's written is important. But what's *not* written may be even more important to understand what's going on. Why is the task solved exactly this way? The code gives no answer. diff --git a/1-js/03-code-quality/05-testing-mocha/article.md b/1-js/03-code-quality/05-testing-mocha/article.md index e9b5e96c1..68ffcae4d 100644 --- a/1-js/03-code-quality/05-testing-mocha/article.md +++ b/1-js/03-code-quality/05-testing-mocha/article.md @@ -159,8 +159,8 @@ We can select one of two ways to organize the test here: assert.equal(pow(2, 3), 8); }); - it("3 raised to power 3 is 27", function() { - assert.equal(pow(3, 3), 27); + it("3 raised to power 4 is 81", function() { + assert.equal(pow(3, 4), 81); }); }); @@ -182,7 +182,7 @@ The result: [iframe height=250 src="pow-2" edit border="1"] -As we could expect, the second test failed. Sure, our function always returns `8`, while the `assert` expects `27`. +As we could expect, the second test failed. Sure, our function always returns `8`, while the `assert` expects `81`. ## Improving the implementation diff --git a/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js index 9a2f8fde7..c803f0e61 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js +++ b/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js @@ -4,8 +4,8 @@ describe("pow", function() { assert.equal(pow(2, 3), 8); }); - it("3 raised to power 3 is 27", function() { - assert.equal(pow(3, 3), 27); + it("3 raised to power 4 is 81", function() { + assert.equal(pow(3, 4), 81); }); }); diff --git a/1-js/04-object-basics/01-object/article.md b/1-js/04-object-basics/01-object/article.md index 6600031b6..cad0a06a7 100644 --- a/1-js/04-object-basics/01-object/article.md +++ b/1-js/04-object-basics/01-object/article.md @@ -1,7 +1,7 @@ # অবজেক্ট - অধ্যায়ে আমরা জেনেছি, জাভাস্ক্রিপ্টে সাতটি ডাটা টাইপ রয়েছে। তাদের মধ্যে ছয়টিকে বলা হয় "প্রিমিটিভ", কারণ তাদের ভ্যালুতে শুধু একটি জিনিসই (হোক তা স্ট্রিং, নাম্বার বা অন্য যেকোনো কিছু) থেকে থাকে। + অধ্যায়ে আমরা জেনেছি, জাভাস্ক্রিপ্টে আটটি ডাটা টাইপ রয়েছে। তাদের মধ্যে সাতটিকে বলা হয় "প্রিমিটিভ", কারণ তাদের ভ্যালুতে শুধু একটি জিনিসই (হোক তা স্ট্রিং, নাম্বার বা অন্য যেকোনো কিছু) থেকে থাকে। অন্যদিকে, বিভিন্ন ধরনের ডাটার কালেকশন ও একটু জটিল ধরনের জিনিস রাখার জন্য অবজেক্ট ব্যবহৃত হয়। জাভাস্ক্রিপ্টের প্রতিটি বিষয়ে অবজেক্টের আধিক্য এবং প্রভাব বিদ্যমান। সুতরাং অন্য কিছু নিয়ে গভীরে জানার আগে আমাদের অবশ্যই অবজেক্ট সম্পর্কে জানতে হবে। @@ -101,8 +101,9 @@ let user = { user.likes birds = true ``` -এটার কারণ, ডট নোটেশন ব্যবহার করার জন্য key - কে একটি ভেরিয়েবল আইডেন্টিফায়ার হতে হবে। যার জন্য এতে কোন স্পেস থাকতে পারবে না এবং আরও অন্যান্য নিয়ম রয়েছে। +জাভাস্ক্রিপ্ট এটি বুঝে না। এটি মনে করে আমরা `user.likes` কে এড্রেস করেছি, এবং সিনট্যাক্স এরর দেয় যখন অসঙ্গত `birds` দেখতে পায়। +এটার কারণ, ডট নোটেশন ব্যবহার করার জন্য key - কে একটি ভেরিয়েবল আইডেন্টিফায়ার হতে হবে। যার জন্য এতে কোন স্পেস থাকতে পারবে না, কোন সংখ্যা দিয়ে শুরু হতে পারবে না এবং স্পেশাল ক্যারেক্টার থাকবে না (`$` এবং `_` দেয়া যাবে) তৃতীয় বন্ধনী ব্যবহার করে আরেকটি পদ্ধতি রয়েছে, যা যেকোনো স্ট্রিং এ কাজ করেঃ ```js run @@ -250,7 +251,7 @@ alert(obj.__proto__); // [object Object], didn't work as intended function makeUser(name, age) { return { name: name, - age: age + age: age, // ...অন্যান্য প্রোপার্টি }; } @@ -268,7 +269,7 @@ function makeUser(name, age) { *!* return { name, // same as name: name - age // same as age: age + age, // same as age: age // ... }; */!* @@ -284,7 +285,63 @@ let user = { }; ``` -## প্রোপার্টি আছে কিনা পরীক্ষা করা +## Property names limitations + +Property names (keys) must be either strings or symbols (a special type for identifiers, to be covered later). + +Other types are automatically converted to strings. + +For instance, a number `0` becomes a string `"0"` when used as a property key: + +```js run +let obj = { + 0: "test" // same as "0": "test" +}; + +// both alerts access the same property (the number 0 is converted to string "0") +alert( obj["0"] ); // test +alert( obj[0] ); // test (same property) +``` + +**Reserved words are allowed as property names.** + +As we already know, a variable cannot have a name equal to one of language-reserved words like "for", "let", "return" etc. + +But for an object property, there's no such restriction. Any name is fine: + +```js run +let obj = { + for: 1, + let: 2, + return: 3 +}; + +alert( obj.for + obj.let + obj.return ); // 6 +``` + +We can use any string as a key, but there's a special property named `__proto__` that gets special treatment for historical reasons. + +For instance, we can't set it to a non-object value: + +```js run +let obj = {}; +obj.__proto__ = 5; // assign a number +alert(obj.__proto__); // [object Object] - the value is an object, didn't work as intended +``` + +As we see from the code, the assignment to a primitive `5` is ignored. + +The nature of `__proto__` will be revealed in detail later in the chapter [](info:prototype-inheritance). + +As for now, it's important to know that such behavior of `__proto__` can become a source of bugs and even vulnerabilities if we intend to store user-provided keys in an object. + +The problem is that a visitor may choose `__proto__` as the key, and the assignment logic will be ruined (as shown above). + +There are two workarounds for the problem: +1. Modify the object's behavior to treat `__proto__` as a regular property. We'll learn how to do it in the chapter [](info:prototype-methods). +2. Using [Map](info:map-set) data structure which supports arbitrary keys. We'll learn it in the chapter . + +## প্রোপার্টি আছে কিনা পরীক্ষা করা। "in" অপারেটর। অবজেক্টের একটি উল্লেখযোগ্য ফিচার হল এর যেকোনো প্রোপার্টিকে এক্সেস করা যায়। যদি প্রোপার্টি না থাকে তাহলে কোন এরর হয় না। বরং অবজেক্টে নেই এমন প্রোপার্টিকে এক্সেস করলে `undefined` রিটার্ন করে। প্রোপার্টি আছে কি নেই পরীক্ষার জন্য সাধারনত - আনডিফাইন্ড এর সাথে তুলনা করা হয়ে থাকেঃ @@ -321,7 +378,7 @@ let key = "age"; alert( *!*key*/!* in user ); // true, key থেকে নামটি নিয়ে, ওই নামে প্রোপার্টি আছে কিনা দেখা হচ্ছে ``` -````smart header="`undefined` প্রোপার্টির ক্ষেত্রে \"in\" এর ব্যবহার" +````smart header="Using \"in\" for properties that store `undefined`" সাধারণত, `"=== undefined"` এভাবে প্রোপার্টি আছে কিনা পরীক্ষা করা ঠিকঠাক কাজ করে, কিছু বিশেষ ক্ষেত্রে এটি ভুল ফলাফল দেয়, কিন্তু `"in"` অপারেটর ঠিকমত কাজ করে। এটি ঘটে যখন অবজেক্টের প্রোপার্টি আছে কিন্তু তা অলরেডি `undefined` হয়ে আছেঃ diff --git a/1-js/04-object-basics/03-symbol/article.md b/1-js/04-object-basics/03-symbol/article.md index a17f85fe2..1ed73ed4b 100644 --- a/1-js/04-object-basics/03-symbol/article.md +++ b/1-js/04-object-basics/03-symbol/article.md @@ -18,7 +18,7 @@ let id = Symbol(); Upon creation, we can give symbol a description (also called a symbol name), mostly useful for debugging purposes: -```js run +```js // id is a symbol with the description "id" let id = Symbol("id"); ``` @@ -178,22 +178,6 @@ alert( clone[id] ); // 123 There's no paradox here. That's by design. The idea is that when we clone an object or merge objects, we usually want *all* properties to be copied (including symbols like `id`). -````smart header="Property keys of other types are coerced to strings" -We can only use strings or symbols as keys in objects. Other types are converted to strings. - -For instance, a number `0` becomes a string `"0"` when used as a property key: - -```js run -let obj = { - 0: "test" // same as "0": "test" -}; - -// both alerts access the same property (the number 0 is converted to string "0") -alert( obj["0"] ); // test -alert( obj[0] ); // test (same property) -``` -```` - ## Global symbols As we've seen, usually all symbols are different, even if they have the same name. But sometimes we want same-named symbols to be same entities. For instance, different parts of our application want to access symbol `"id"` meaning exactly the same property. @@ -241,7 +225,7 @@ alert( Symbol.keyFor(sym) ); // name alert( Symbol.keyFor(sym2) ); // id ``` -The `Symbol.keyFor` internally uses the global symbol registry to look up the key for the symbol. So it doesn't work for non-global symbols. If the symbol is not global, it won't be able to find it and return `undefined`. +The `Symbol.keyFor` internally uses the global symbol registry to look up the key for the symbol. So it doesn't work for non-global symbols. If the symbol is not global, it won't be able to find it and returns `undefined`. That said, any symbols have `description` property. diff --git a/1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md b/1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md index 0534202a8..ba5d3bf04 100644 --- a/1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md +++ b/1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md @@ -34,4 +34,4 @@ let user = { (user.go)() // John ``` -Please note that brackets around `(user.go)` do nothing here. Usually they setup the order of operations, but here the dot `.` works first anyway, so there's no effect. Only the semicolon thing matters. +Please note that parentheses around `(user.go)` do nothing here. Usually they setup the order of operations, but here the dot `.` works first anyway, so there's no effect. Only the semicolon thing matters. diff --git a/1-js/04-object-basics/04-object-methods/3-why-this/solution.md b/1-js/04-object-basics/04-object-methods/3-why-this/solution.md index 89bc0d722..31ea4ff88 100644 --- a/1-js/04-object-basics/04-object-methods/3-why-this/solution.md +++ b/1-js/04-object-basics/04-object-methods/3-why-this/solution.md @@ -3,7 +3,7 @@ Here's the explanations. 1. That's a regular object method call. -2. The same, brackets do not change the order of operations here, the dot is first anyway. +2. The same, parentheses do not change the order of operations here, the dot is first anyway. 3. Here we have a more complex call `(expression).method()`. The call works as if it were split into two lines: diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index 2dda938d7..c9bc8d318 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -63,7 +63,7 @@ user.sayHi(); // Hello! ```smart header="Object-oriented programming" When we write our code using objects to represent entities, that's called [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), in short: "OOP". -OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture, and there are great books on that topic, like "Design Patterns: Elements of Reusable Object-Oriented Software" by E.Gamma, R.Helm, R.Johnson, J.Vissides or "Object-Oriented Analysis and Design with Applications" by G.Booch, and more. +OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture, and there are great books on that topic, like "Design Patterns: Elements of Reusable Object-Oriented Software" by E. Gamma, R. Helm, R. Johnson, J. Vissides or "Object-Oriented Analysis and Design with Applications" by G. Booch, and more. ``` ### Method shorthand diff --git a/1-js/05-data-types/01-primitives-methods/article.md b/1-js/05-data-types/01-primitives-methods/article.md index 06138a004..6c13acda6 100644 --- a/1-js/05-data-types/01-primitives-methods/article.md +++ b/1-js/05-data-types/01-primitives-methods/article.md @@ -7,7 +7,7 @@ Let's look at the key distinctions between primitives and objects. A primitive - Is a value of a primitive type. -- There are 6 primitive types: `string`, `number`, `boolean`, `symbol`, `null` and `undefined`. +- There are 7 primitive types: `string`, `number`, `bigint`, `boolean`, `symbol`, `null` and `undefined`. An object diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md index ad333c5ab..f54a0c147 100644 --- a/1-js/05-data-types/02-number/article.md +++ b/1-js/05-data-types/02-number/article.md @@ -324,7 +324,7 @@ Please note that an empty or a space-only string is treated as `0` in all numeri ```smart header="Compare with `Object.is`" -There is a special built-in method [Object.is](mdn:js/Object/is) that compares values like `===`, but is more reliable for two edge cases: +There is a special built-in method [`Object.is`](mdn:js/Object/is) that compares values like `===`, but is more reliable for two edge cases: 1. It works with `NaN`: `Object.is(NaN, NaN) === true`, that's a good thing. 2. Values `0` and `-0` are different: `Object.is(0, -0) === false`, technically that's true, because internally the number has a sign bit that may be different even if all other bits are zeroes. @@ -413,11 +413,11 @@ There are more functions and constants in `Math` object, including trigonometry, To write numbers with many zeroes: - Append `"e"` with the zeroes count to the number. Like: `123e6` is the same as `123` with 6 zeroes `123000000`. -- A negative number after `"e"` causes the number to be divided by 1 with given zeroes. E.g. `123e-6` means `0.000123` (`123` millionth). +- A negative number after `"e"` causes the number to be divided by 1 with given zeroes. E.g. `123e-6` means `0.000123` (`123` millionths). For different numeral systems: -- Can write numbers directly in hex (`0x`), octal (`0o`) and binary (`0b`) systems +- Can write numbers directly in hex (`0x`), octal (`0o`) and binary (`0b`) systems. - `parseInt(str, base)` parses the string `str` into an integer in numeral system with given `base`, `2 ≤ base ≤ 36`. - `num.toString(base)` converts a number to a string in the numeral system with the given `base`. diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md index 8a2fe14f7..765823d7c 100644 --- a/1-js/05-data-types/03-string/article.md +++ b/1-js/05-data-types/03-string/article.md @@ -534,7 +534,7 @@ The "right" algorithm to do string comparisons is more complex than it may seem, So, the browser needs to know the language to compare. -Luckily, all modern browsers (IE10- requires the additional library [Intl.JS](https://github.com/andyearnshaw/Intl.js/)) support the internationalization standard [ECMA 402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf). +Luckily, all modern browsers (IE10- requires the additional library [Intl.js](https://github.com/andyearnshaw/Intl.js/)) support the internationalization standard [ECMA-402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf). It provides a special method to compare strings in different languages, following their rules. diff --git a/1-js/05-data-types/04-array/10-maximal-subarray/task.md b/1-js/05-data-types/04-array/10-maximal-subarray/task.md index e63c4e625..f1a1d9f95 100644 --- a/1-js/05-data-types/04-array/10-maximal-subarray/task.md +++ b/1-js/05-data-types/04-array/10-maximal-subarray/task.md @@ -10,15 +10,15 @@ The task is: find the contiguous subarray of `arr` with the maximal sum of items Write the function `getMaxSubSum(arr)` that will return that sum. -For instance: +For instance: ```js -getMaxSubSum([-1, *!*2, 3*/!*, -9]) = 5 (the sum of highlighted items) -getMaxSubSum([*!*2, -1, 2, 3*/!*, -9]) = 6 -getMaxSubSum([-1, 2, 3, -9, *!*11*/!*]) = 11 -getMaxSubSum([-2, -1, *!*1, 2*/!*]) = 3 -getMaxSubSum([*!*100*/!*, -9, 2, -3, 5]) = 100 -getMaxSubSum([*!*1, 2, 3*/!*]) = 6 (take all) +getMaxSubSum([-1, *!*2, 3*/!*, -9]) == 5 (the sum of highlighted items) +getMaxSubSum([*!*2, -1, 2, 3*/!*, -9]) == 6 +getMaxSubSum([-1, 2, 3, -9, *!*11*/!*]) == 11 +getMaxSubSum([-2, -1, *!*1, 2*/!*]) == 3 +getMaxSubSum([*!*100*/!*, -9, 2, -3, 5]) == 100 +getMaxSubSum([*!*1, 2, 3*/!*]) == 6 (take all) ``` If all items are negative, it means that we take none (the subarray is empty), so the sum is zero: diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index 7dc54bd4b..bb2fd8eb6 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -123,7 +123,7 @@ For stacks, the latest pushed item is received first, that's also called LIFO (L Arrays in JavaScript can work both as a queue and as a stack. They allow you to add/remove elements both to/from the beginning or the end. -In computer science the data structure that allows it is called [deque](https://en.wikipedia.org/wiki/Double-ended_queue). +In computer science the data structure that allows this, is called [deque](https://en.wikipedia.org/wiki/Double-ended_queue). **Methods that work with the end of the array:** diff --git a/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/solution.js b/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/solution.js new file mode 100644 index 000000000..8dea23a06 --- /dev/null +++ b/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/solution.js @@ -0,0 +1,6 @@ +function groupById(array) { + return array.reduce((obj, value) => { + obj[value.id] = value; + return obj; + }, {}) +} diff --git a/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/test.js b/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/test.js new file mode 100644 index 000000000..02299e307 --- /dev/null +++ b/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/test.js @@ -0,0 +1,20 @@ +describe("groupById", function() { + + it("creates an object grouped by id", function() { + let users = [ + {id: 'john', name: "John Smith", age: 20}, + {id: 'ann', name: "Ann Smith", age: 24}, + {id: 'pete', name: "Pete Peterson", age: 31}, + ]; + + assert.deepEqual(groupById(users), { + john: {id: 'john', name: "John Smith", age: 20} + ann: {id: 'ann', name: "Ann Smith", age: 24}, + pete: {id: 'pete', name: "Pete Peterson", age: 31}, + }); + }); + + it("works with an empty array", function() { + assert.deepEqual(groupById(users), {}); + }); +}); diff --git a/1-js/05-data-types/05-array-methods/12-reduce-object/solution.md b/1-js/05-data-types/05-array-methods/12-reduce-object/solution.md new file mode 100644 index 000000000..e69de29bb diff --git a/1-js/05-data-types/05-array-methods/12-reduce-object/task.md b/1-js/05-data-types/05-array-methods/12-reduce-object/task.md new file mode 100644 index 000000000..1e402ec05 --- /dev/null +++ b/1-js/05-data-types/05-array-methods/12-reduce-object/task.md @@ -0,0 +1,37 @@ +importance: 4 + +--- + +# Create keyed object from array + +Let's say we received an array of users in the form `{id:..., name:..., age... }`. + +Create a function `groupById(arr)` that creates an object from it, with `id` as the key, and array items as values. + +For example: + +```js +let users = [ + {id: 'john', name: "John Smith", age: 20}, + {id: 'ann', name: "Ann Smith", age: 24}, + {id: 'pete', name: "Pete Peterson", age: 31}, +]; + +let usersById = groupById(users); + +/* +// after the call we should have: + +usersById = { + john: {id: 'john', name: "John Smith", age: 20} + ann: {id: 'ann', name: "Ann Smith", age: 24}, + pete: {id: 'pete', name: "Pete Peterson", age: 31}, +} +*/ +``` + +Such function is really handy when working with server data. + +In this task we assume that `id` is unique. There may be no two array items with the same `id`. + +Please use array `.reduce` method in the solution. diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index 5a1a7762a..301696440 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -384,7 +384,7 @@ The order became `1, 15, 2`. Incorrect. But why? **The items are sorted as strings by default.** -Literally, all elements are converted to strings for comparisons. For strings, lexicographic ordering is applied and indeed `"2" > "15"`. +Literally, all elements are converted to strings for comparisons. For strings, lexicographic ordering is applied and indeed `"2" > "15"`. To use our own sorting order, we need to supply a function as the argument of `arr.sort()`. @@ -431,7 +431,6 @@ By the way, if we ever want to know which elements are compared -- nothing preve The algorithm may compare an element with multiple others in the process, but it tries to make as few comparisons as possible. - ````smart header="A comparison function may return any number" Actually, a comparison function is only required to return a positive number to say "greater" and a negative number to say "less". @@ -456,6 +455,22 @@ arr.sort( (a, b) => a - b ); This works exactly the same as the longer version above. ```` +````smart header="Use `localeCompare` for strings" +Remember [strings](info:string#correct-comparisons) comparison algorithm? It compares letters by their codes by default. + +For many alphabets, it's better to use `str.localeCompare` method to correctly sort letters, such as `Ö`. + +For example, let's sort a few countries in German: + +```js run +let countries = ['Österreich', 'Andorra', 'Vietnam']; + +alert( countries.sort( (a, b) => a > b ? 1 : -1) ); // Andorra, Vietnam, Österreich (wrong) + +alert( countries.sort( (a, b) => a.localeCompare(b) ) ); // Andorra,Österreich,Vietnam (correct!) +``` +```` + ### reverse The method [arr.reverse](mdn:js/Array/reverse) reverses the order of elements in `arr`. @@ -530,7 +545,7 @@ The methods [arr.reduce](mdn:js/Array/reduce) and [arr.reduceRight](mdn:js/Array The syntax is: ```js -let value = arr.reduce(function(previousValue, item, index, array) { +let value = arr.reduce(function(accumulator, item, index, array) { // ... }, [initial]); ``` @@ -539,14 +554,16 @@ The function is applied to all array elements one after another and "carries on" Arguments: -- `previousValue` -- is the result of the previous function call, equals `initial` the first time (if `initial` is provided). +- `accumulator` -- is the result of the previous function call, equals `initial` the first time (if `initial` is provided). - `item` -- is the current array item. - `index` -- is its position. - `array` -- is the array. As function is applied, the result of the previous function call is passed to the next one as the first argument. -Sounds complicated, but it's not if you think about the first argument as the "accumulator" that stores the combined result of all previous execution. And at the end it becomes the result of `reduce`. +So, the first argument is essentially the accumulator that stores the combined result of all previous executions. And at the end it becomes the result of `reduce`. + +Sounds complicated? The easiest way to grasp that is by example. @@ -611,7 +628,6 @@ let arr = []; arr.reduce((sum, current) => sum + current); ``` - So it's advised to always specify the initial value. The method [arr.reduceRight](mdn:js/Array/reduceRight) does the same, but goes from right to left. diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md index b55f8f018..8a38516e1 100644 --- a/1-js/05-data-types/06-iterable/article.md +++ b/1-js/05-data-types/06-iterable/article.md @@ -1,7 +1,7 @@ # Iterables -*Iterable* objects is a generalization of arrays. That's a concept that allows to make any object useable in a `for..of` loop. +*Iterable* objects is a generalization of arrays. That's a concept that allows us to make any object useable in a `for..of` loop. Of course, Arrays are iterable. But there are many other built-in objects, that are iterable as well. For instance, strings are also iterable. @@ -12,7 +12,7 @@ If an object isn't technically an array, but represents a collection (list, set) We can easily grasp the concept of iterables by making one of our own. -For instance, we have an object, that is not an array, but looks suitable for `for..of`. +For instance, we have an object that is not an array, but looks suitable for `for..of`. Like a `range` object that represents an interval of numbers: @@ -224,12 +224,12 @@ let arr = Array.from(range); alert(arr); // 1,2,3,4,5 (array toString conversion works) ``` -The full syntax for `Array.from` allows to provide an optional "mapping" function: +The full syntax for `Array.from` also allows us to provide an optional "mapping" function: ```js Array.from(obj[, mapFn, thisArg]) ``` -The optional second argument `mapFn` can be a function that will be applied to each element before adding to the array, and `thisArg` allows to set `this` for it. +The optional second argument `mapFn` can be a function that will be applied to each element before adding it to the array, and `thisArg` allows us to set `this` for it. For instance: @@ -294,7 +294,7 @@ Objects that can be used in `for..of` are called *iterable*. - Technically, iterables must implement the method named `Symbol.iterator`. - The result of `obj[Symbol.iterator]` is called an *iterator*. It handles the further iteration process. - - An iterator must have the method named `next()` that returns an object `{done: Boolean, value: any}`, here `done:true` denotes the iteration end, otherwise the `value` is the next value. + - An iterator must have the method named `next()` that returns an object `{done: Boolean, value: any}`, here `done:true` denotes the end of the iteration process, otherwise the `value` is the next value. - The `Symbol.iterator` method is called automatically by `for..of`, but we also can do it directly. - Built-in iterables like strings or arrays, also implement `Symbol.iterator`. - String iterator knows about surrogate pairs. diff --git a/1-js/05-data-types/07-map-set/article.md b/1-js/05-data-types/07-map-set/article.md index c4d7c21a4..aaed5b454 100644 --- a/1-js/05-data-types/07-map-set/article.md +++ b/1-js/05-data-types/07-map-set/article.md @@ -41,6 +41,12 @@ alert( map.size ); // 3 As we can see, unlike objects, keys are not converted to strings. Any type of key is possible. +```smart header="`map[key]` isn't the right way to use a `Map`" +Although `map[key]` also works, e.g. we can set `map[key] = 2`, this is treating `map` as a plain JavaScript object, so it implies all corresponding limitations (no object keys and so on). + +So we should use `map` methods: `set`, `get` and so on. +``` + **Map can also use objects as keys.** For instance: diff --git a/1-js/05-data-types/08-weakmap-weakset/article.md b/1-js/05-data-types/08-weakmap-weakset/article.md index 11ff9d5eb..bcc5e5e6f 100644 --- a/1-js/05-data-types/08-weakmap-weakset/article.md +++ b/1-js/05-data-types/08-weakmap-weakset/article.md @@ -141,7 +141,6 @@ And here's another part of the code, maybe another file using it: let john = { name: "John" }; countUser(john); // count his visits -countUser(john); // later john leaves us john = null; diff --git a/1-js/05-data-types/11-date/8-format-date-relative/solution.md b/1-js/05-data-types/11-date/8-format-date-relative/solution.md index 718618528..372485685 100644 --- a/1-js/05-data-types/11-date/8-format-date-relative/solution.md +++ b/1-js/05-data-types/11-date/8-format-date-relative/solution.md @@ -40,7 +40,7 @@ alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30 sec. ago" alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5 min. ago" -// yesterday's date like 31.12.2016, 20:00 +// yesterday's date like 31.12.2016 20:00 alert( formatDate(new Date(new Date - 86400 * 1000)) ); ``` diff --git a/1-js/05-data-types/11-date/8-format-date-relative/task.md b/1-js/05-data-types/11-date/8-format-date-relative/task.md index 4dc067375..9651b305f 100644 --- a/1-js/05-data-types/11-date/8-format-date-relative/task.md +++ b/1-js/05-data-types/11-date/8-format-date-relative/task.md @@ -20,6 +20,6 @@ alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30 sec. ago" alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5 min. ago" -// yesterday's date like 31.12.16, 20:00 +// yesterday's date like 31.12.16 20:00 alert( formatDate(new Date(new Date - 86400 * 1000)) ); ``` diff --git a/1-js/05-data-types/11-date/article.md b/1-js/05-data-types/11-date/article.md index 6f52a0d7c..a2de63ae4 100644 --- a/1-js/05-data-types/11-date/article.md +++ b/1-js/05-data-types/11-date/article.md @@ -124,7 +124,7 @@ Besides the given methods, there are two special ones that do not have a UTC-var : Returns the timestamp for the date -- a number of milliseconds passed from the January 1st of 1970 UTC+0. [getTimezoneOffset()](mdn:js/Date/getTimezoneOffset) -: Returns the difference between the local time zone and UTC, in minutes: +: Returns the difference between UTC and the local time zone, in minutes: ```js run // if you are in timezone UTC-1, outputs 60 diff --git a/1-js/06-advanced-functions/01-recursion/article.md b/1-js/06-advanced-functions/01-recursion/article.md index 688badb02..320de62f0 100644 --- a/1-js/06-advanced-functions/01-recursion/article.md +++ b/1-js/06-advanced-functions/01-recursion/article.md @@ -302,7 +302,7 @@ let company = { salary: 1000 }, { name: 'Alice', - salary: 600 + salary: 1600 }], development: { @@ -350,7 +350,7 @@ The algorithm is probably even easier to read from the code: ```js run let company = { // the same object, compressed for brevity - sales: [{name: 'John', salary: 1000}, {name: 'Alice', salary: 600 }], + sales: [{name: 'John', salary: 1000}, {name: 'Alice', salary: 1600 }], development: { sites: [{name: 'Peter', salary: 2000}, {name: 'Alex', salary: 1800 }], internals: [{name: 'Jack', salary: 1300}] @@ -372,7 +372,7 @@ function sumSalaries(department) { } */!* -alert(sumSalaries(company)); // 6700 +alert(sumSalaries(company)); // 7700 ``` The code is short and easy to understand (hopefully?). That's the power of recursion. It also works for any level of subdepartment nesting. @@ -462,7 +462,7 @@ list.next.next.next = { value: 4 }; list.next.next.next.next = null; ``` -Here we can even more clearer see that there are multiple objects, each one has the `value` and `next` pointing to the neighbour. The `list` variable is the first object in the chain, so following `next` pointers from it we can reach any element. +Here we can even more clearly see that there are multiple objects, each one has the `value` and `next` pointing to the neighbour. The `list` variable is the first object in the chain, so following `next` pointers from it we can reach any element. The list can be easily split into multiple parts and later joined back: diff --git a/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md b/1-js/06-advanced-functions/02-rest-parameters-spread/article.md similarity index 73% rename from 1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md rename to 1-js/06-advanced-functions/02-rest-parameters-spread/article.md index a14f0fb73..7089a6750 100644 --- a/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md +++ b/1-js/06-advanced-functions/02-rest-parameters-spread/article.md @@ -1,4 +1,4 @@ -# Rest parameters and spread operator +# Rest parameters and spread syntax Many JavaScript built-in functions support an arbitrary number of arguments. @@ -122,7 +122,7 @@ As we remember, arrow functions don't have their own `this`. Now we know they do ```` -## Spread operator [#spread-operator] +## Spread syntax [#spread-syntax] We've just seen how to get an array from the list of parameters. @@ -148,7 +148,7 @@ alert( Math.max(arr) ); // NaN And surely we can't manually list items in the code `Math.max(arr[0], arr[1], arr[2])`, because we may be unsure how many there are. As our script executes, there could be a lot, or there could be none. And that would get ugly. -*Spread operator* to the rescue! It looks similar to rest parameters, also using `...`, but does quite the opposite. +*Spread syntax* to the rescue! It looks similar to rest parameters, also using `...`, but does quite the opposite. When `...arr` is used in the function call, it "expands" an iterable object `arr` into the list of arguments. @@ -169,7 +169,7 @@ let arr2 = [8, 3, -8, 1]; alert( Math.max(...arr1, ...arr2) ); // 8 ``` -We can even combine the spread operator with normal values: +We can even combine the spread syntax with normal values: ```js run @@ -179,7 +179,7 @@ let arr2 = [8, 3, -8, 1]; alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25 ``` -Also, the spread operator can be used to merge arrays: +Also, the spread syntax can be used to merge arrays: ```js run let arr = [3, 5, 1]; @@ -192,9 +192,9 @@ let merged = [0, ...arr, 2, ...arr2]; alert(merged); // 0,3,5,1,2,8,9,15 (0, then arr, then 2, then arr2) ``` -In the examples above we used an array to demonstrate the spread operator, but any iterable will do. +In the examples above we used an array to demonstrate the spread syntax, but any iterable will do. -For instance, here we use the spread operator to turn the string into array of characters: +For instance, here we use the spread syntax to turn the string into array of characters: ```js run let str = "Hello"; @@ -202,7 +202,7 @@ let str = "Hello"; alert( [...str] ); // H,e,l,l,o ``` -The spread operator internally uses iterators to gather elements, the same way as `for..of` does. +The spread syntax internally uses iterators to gather elements, the same way as `for..of` does. So, for a string, `for..of` returns characters and `...str` becomes `"H","e","l","l","o"`. The list of characters is passed to array initializer `[...str]`. @@ -220,24 +220,69 @@ The result is the same as `[...str]`. But there's a subtle difference between `Array.from(obj)` and `[...obj]`: - `Array.from` operates on both array-likes and iterables. -- The spread operator operates only on iterables. +- The spread syntax works only with iterables. So, for the task of turning something into an array, `Array.from` tends to be more universal. +## Get a new copy of an object/array + +Remember when we talked about `Object.assign()` [in the past](https://javascript.info/object#cloning-and-merging-object-assign)? + +It is possible to do the same thing with the spread operator! + +```js run +let arr = [1, 2, 3]; +let arrCopy = [...arr]; // spread the array into a list of parameters + // then put the result into a new array + +// do the arrays have the same contents? +alert(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true + +// are the arrays equal? +alert(arr === arrCopy); // false (not same reference) + +// modifying our initial array does not modify the copy: +arr.push(4); +alert(arr); // 1, 2, 3, 4 +alert(arrCopy); // 1, 2, 3 +``` + +Note that it is possible to do the same thing to make a copy of an object: + +```js run +let obj = { a: 1, b: 2, c: 3 }; +let objCopy = { ...obj }; // spread the object into a list of parameters + // then return the result in a new object + +// do the objects have the same contents? +alert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true + +// are the objects equal? +alert(obj === objCopy); // false (not same reference) + +// modifying our initial object does not modify the copy: +obj.d = 4; +alert(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4} +alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3} +``` + +This way of copying an object is much shorter than `let objCopy = Object.assign({}, obj);` or for an array `let arrCopy = Object.assign([], arr);` so we prefer to use it whenever we can. + + ## Summary -When we see `"..."` in the code, it is either rest parameters or the spread operator. +When we see `"..."` in the code, it is either rest parameters or the spread syntax. There's an easy way to distinguish between them: - When `...` is at the end of function parameters, it's "rest parameters" and gathers the rest of the list of arguments into an array. -- When `...` occurs in a function call or alike, it's called a "spread operator" and expands an array into a list. +- When `...` occurs in a function call or alike, it's called a "spread syntax" and expands an array into a list. Use patterns: - Rest parameters are used to create functions that accept any number of arguments. -- The spread operator is used to pass an array to functions that normally require a list of many arguments. +- The spread syntax is used to pass an array to functions that normally require a list of many arguments. Together they help to travel between a list and an array of parameters with ease. diff --git a/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md b/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md new file mode 100644 index 000000000..7cbd85ab7 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md @@ -0,0 +1,5 @@ +The answer is: **Pete**. + +A function gets outer variables as they are now, it uses the most recent values. + +Old variable values are not saved anywhere. When a function wants a variable, it takes the current value from its own Lexical Environment or the outer one. diff --git a/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md b/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md new file mode 100644 index 000000000..819189773 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md @@ -0,0 +1,23 @@ +importance: 5 + +--- + +# Does a function pickup latest changes? + +The function sayHi uses an external variable name. When the function runs, which value is it going to use? + +```js +let name = "John"; + +function sayHi() { + alert("Hi, " + name); +} + +name = "Pete"; + +sayHi(); // what will it show: "John" or "Pete"? +``` + +Such situations are common both in browser and server-side development. A function may be scheduled to execute later than it is created, for instance after a user action or a network request. + +So, the question is: does it pick up the latest changes? diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/solution.js b/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/solution.js similarity index 100% rename from 1-js/06-advanced-functions/03-closure/8-make-army/_js.view/solution.js rename to 1-js/06-advanced-functions/03-closure/10-make-army/_js.view/solution.js diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/source.js b/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/source.js similarity index 100% rename from 1-js/06-advanced-functions/03-closure/8-make-army/_js.view/source.js rename to 1-js/06-advanced-functions/03-closure/10-make-army/_js.view/source.js diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/_js.view/test.js b/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/test.js similarity index 100% rename from 1-js/06-advanced-functions/03-closure/8-make-army/_js.view/test.js rename to 1-js/06-advanced-functions/03-closure/10-make-army/_js.view/test.js diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.svg b/1-js/06-advanced-functions/03-closure/10-make-army/lexenv-makearmy.svg similarity index 100% rename from 1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.svg rename to 1-js/06-advanced-functions/03-closure/10-make-army/lexenv-makearmy.svg diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/solution.md b/1-js/06-advanced-functions/03-closure/10-make-army/solution.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/8-make-army/solution.md rename to 1-js/06-advanced-functions/03-closure/10-make-army/solution.md diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/task.md b/1-js/06-advanced-functions/03-closure/10-make-army/task.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/8-make-army/task.md rename to 1-js/06-advanced-functions/03-closure/10-make-army/task.md diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-work.svg b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/lexenv-nested-work.svg similarity index 99% rename from 1-js/06-advanced-functions/03-closure/lexenv-nested-work.svg rename to 1-js/06-advanced-functions/03-closure/2-closure-variable-access/lexenv-nested-work.svg index e5b7f83e7..5cdf7f1a4 100644 --- a/1-js/06-advanced-functions/03-closure/lexenv-nested-work.svg +++ b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/lexenv-nested-work.svg @@ -1 +1 @@ -makeWorker: function name: "John"<empty>outerouterouternullname: "Pete" \ No newline at end of file +makeWorker: function name: "John"<empty>outerouterouternullname: "Pete" \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/solution.md b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/solution.md new file mode 100644 index 000000000..0a522132f --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/solution.md @@ -0,0 +1,9 @@ +The answer is: **Pete**. + +The `work()` function in the code below gets `name` from the place of its origin through the outer lexical environment reference: + +![](lexenv-nested-work.svg) + +So, the result is `"Pete"` here. + +But if there were no `let name` in `makeWorker()`, then the search would go outside and take the global variable as we can see from the chain above. In that case the result would be `"John"`. diff --git a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/task.md b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/task.md new file mode 100644 index 000000000..d12a385c8 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/task.md @@ -0,0 +1,29 @@ +importance: 5 + +--- + +# Which variables are available? + +The function `makeWorker` below makes another function and returns it. That new function can be called from somewhere else. + +Will it have access to the outer variables from its creation place, or the invocation place, or both? + +```js +function makeWorker() { + let name = "Pete"; + + return function() { + alert(name); + }; +} + +let name = "John"; + +// create a function +let work = makeWorker(); + +// call it +work(); // what will it show? +``` + +Which value it will show? "Pete" or "John"? diff --git a/1-js/06-advanced-functions/03-closure/1-counter-independent/solution.md b/1-js/06-advanced-functions/03-closure/3-counter-independent/solution.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/1-counter-independent/solution.md rename to 1-js/06-advanced-functions/03-closure/3-counter-independent/solution.md diff --git a/1-js/06-advanced-functions/03-closure/1-counter-independent/task.md b/1-js/06-advanced-functions/03-closure/3-counter-independent/task.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/1-counter-independent/task.md rename to 1-js/06-advanced-functions/03-closure/3-counter-independent/task.md diff --git a/1-js/06-advanced-functions/03-closure/2-counter-object-independent/solution.md b/1-js/06-advanced-functions/03-closure/4-counter-object-independent/solution.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/2-counter-object-independent/solution.md rename to 1-js/06-advanced-functions/03-closure/4-counter-object-independent/solution.md diff --git a/1-js/06-advanced-functions/03-closure/2-counter-object-independent/task.md b/1-js/06-advanced-functions/03-closure/4-counter-object-independent/task.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/2-counter-object-independent/task.md rename to 1-js/06-advanced-functions/03-closure/4-counter-object-independent/task.md diff --git a/1-js/06-advanced-functions/03-closure/3-function-in-if/solution.md b/1-js/06-advanced-functions/03-closure/5-function-in-if/solution.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/3-function-in-if/solution.md rename to 1-js/06-advanced-functions/03-closure/5-function-in-if/solution.md diff --git a/1-js/06-advanced-functions/03-closure/3-function-in-if/task.md b/1-js/06-advanced-functions/03-closure/5-function-in-if/task.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/3-function-in-if/task.md rename to 1-js/06-advanced-functions/03-closure/5-function-in-if/task.md diff --git a/1-js/06-advanced-functions/03-closure/4-closure-sum/solution.md b/1-js/06-advanced-functions/03-closure/6-closure-sum/solution.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/4-closure-sum/solution.md rename to 1-js/06-advanced-functions/03-closure/6-closure-sum/solution.md diff --git a/1-js/06-advanced-functions/03-closure/4-closure-sum/task.md b/1-js/06-advanced-functions/03-closure/6-closure-sum/task.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/4-closure-sum/task.md rename to 1-js/06-advanced-functions/03-closure/6-closure-sum/task.md diff --git a/1-js/06-advanced-functions/03-closure/7-let-scope/solution.md b/1-js/06-advanced-functions/03-closure/7-let-scope/solution.md new file mode 100644 index 000000000..404bae80b --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/7-let-scope/solution.md @@ -0,0 +1,40 @@ +The result is: **error**. + +Try running it: + +```js run +let x = 1; + +function func() { +*!* + console.log(x); // ReferenceError: Cannot access 'x' before initialization +*/!* + let x = 2; +} + +func(); +``` + +In this example we can observe the peculiar difference between a "non-existing" and "unitialized" variable. + +As you may have read in the article [](info:closure), a variable starts in the "uninitialized" state from the moment when the execution enters a code block (or a function). And it stays uninitalized until the corresponding `let` statement. + +In other words, a variable technically exists, but can't be used before `let`. + +The code above demonstrates it. + +```js +function func() { +*!* + // the local variable x is known to the engine from the beginning of the function, + // but "unitialized" (unusable) until let ("dead zone") + // hence the error +*/!* + + console.log(x); // ReferenceError: Cannot access 'x' before initialization + + let x = 2; +} +``` + +This zone of temporary unusability of a variable (from the beginning of the code block till `let`) is sometimes called the "dead zone". diff --git a/1-js/06-advanced-functions/03-closure/7-let-scope/task.md b/1-js/06-advanced-functions/03-closure/7-let-scope/task.md new file mode 100644 index 000000000..fb7445e66 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/7-let-scope/task.md @@ -0,0 +1,21 @@ +importance: 4 + +--- + +# Is variable visible? + +What will be the result of this code? + +```js +let x = 1; + +function func() { + console.log(x); // ? + + let x = 2; +} + +func(); +``` + +P.S. There's a pitfall in this task. The solution is not obvious. diff --git a/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/solution.js b/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/solution.js similarity index 100% rename from 1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/solution.js rename to 1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/solution.js diff --git a/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/source.js b/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/source.js similarity index 100% rename from 1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/source.js rename to 1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/source.js diff --git a/1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/test.js b/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/test.js similarity index 100% rename from 1-js/06-advanced-functions/03-closure/6-filter-through-function/_js.view/test.js rename to 1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/test.js diff --git a/1-js/06-advanced-functions/03-closure/6-filter-through-function/solution.md b/1-js/06-advanced-functions/03-closure/8-filter-through-function/solution.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/6-filter-through-function/solution.md rename to 1-js/06-advanced-functions/03-closure/8-filter-through-function/solution.md diff --git a/1-js/06-advanced-functions/03-closure/6-filter-through-function/task.md b/1-js/06-advanced-functions/03-closure/8-filter-through-function/task.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/6-filter-through-function/task.md rename to 1-js/06-advanced-functions/03-closure/8-filter-through-function/task.md diff --git a/1-js/06-advanced-functions/03-closure/7-sort-by-field/solution.md b/1-js/06-advanced-functions/03-closure/9-sort-by-field/solution.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/7-sort-by-field/solution.md rename to 1-js/06-advanced-functions/03-closure/9-sort-by-field/solution.md diff --git a/1-js/06-advanced-functions/03-closure/7-sort-by-field/task.md b/1-js/06-advanced-functions/03-closure/9-sort-by-field/task.md similarity index 100% rename from 1-js/06-advanced-functions/03-closure/7-sort-by-field/task.md rename to 1-js/06-advanced-functions/03-closure/9-sort-by-field/task.md diff --git a/1-js/06-advanced-functions/03-closure/article.md b/1-js/06-advanced-functions/03-closure/article.md index 64104541c..1845482e5 100644 --- a/1-js/06-advanced-functions/03-closure/article.md +++ b/1-js/06-advanced-functions/03-closure/article.md @@ -1,203 +1,98 @@ -# Closure +# Variable scope -JavaScript is a very function-oriented language. It gives us a lot of freedom. A function can be created dynamically, copied to another variable or passed as an argument to another function and called from a totally different place later. +JavaScript is a very function-oriented language. It gives us a lot of freedom. A function can be created dynamically, passed as an argument to another function and called from a totally different place of code later. -We know that a function can access variables outside of it, this feature is used quite often. +We already know that a function can access variables outside of it. -But what happens when an outer variable changes? Does a function get the most recent value or the one that existed when the function was created? +Now let's expand our knowledge to include more complex scenarios. -Also, what happens when a function travels to another place in the code and is called from there -- does it get access to the outer variables of the new place? +```smart header="We'll talk about `let/const` variables here" +In JavaScript, there are 3 ways to declare a variable: `let`, `const` (the modern ones), and `var` (the remnant of the past). -Different languages behave differently here, and in this chapter we cover the behaviour of JavaScript. - -## A couple of questions - -Let's consider two situations to begin with, and then study the internal mechanics piece-by-piece, so that you'll be able to answer the following questions and more complex ones in the future. - -1. The function `sayHi` uses an external variable `name`. When the function runs, which value is it going to use? - - ```js - let name = "John"; - - function sayHi() { - alert("Hi, " + name); - } - - name = "Pete"; - - *!* - sayHi(); // what will it show: "John" or "Pete"? - */!* - ``` - - Such situations are common both in browser and server-side development. A function may be scheduled to execute later than it is created, for instance after a user action or a network request. - - So, the question is: does it pick up the latest changes? - - -2. The function `makeWorker` makes another function and returns it. That new function can be called from somewhere else. Will it have access to the outer variables from its creation place, or the invocation place, or both? - - ```js - function makeWorker() { - let name = "Pete"; - - return function() { - alert(name); - }; - } - - let name = "John"; - - // create a function - let work = makeWorker(); - - // call it - *!* - work(); // what will it show? "Pete" (name where created) or "John" (name where called)? - */!* - ``` - - -## Lexical Environment - -To understand what's going on, let's first discuss what a "variable" actually is. - -In JavaScript, every running function, code block `{...}`, and the script as a whole have an internal (hidden) associated object known as the *Lexical Environment*. - -The Lexical Environment object consists of two parts: - -1. *Environment Record* -- an object that stores all local variables as its properties (and some other information like the value of `this`). -2. A reference to the *outer lexical environment*, the one associated with the outer code. - -**A "variable" is just a property of the special internal object, `Environment Record`. "To get or change a variable" means "to get or change a property of that object".** - -For instance, in this simple code, there is only one Lexical Environment: - -![lexical environment](lexical-environment-global.svg) - -This is a so-called global Lexical Environment, associated with the whole script. - -On the picture above, the rectangle means Environment Record (variable store) and the arrow means the outer reference. The global Lexical Environment has no outer reference, so it points to `null`. - -And that's how it changes when a variable is defined and assigned: - -![lexical environment](lexical-environment-global-2.svg) - -Rectangles on the right-hand side demonstrate how the global Lexical Environment changes during the execution: - -1. When the script starts, the Lexical Environment is empty. -2. The `let phrase` definition appears. It has been assigned no value, so `undefined` is stored. -3. `phrase` is assigned a value. -4. `phrase` changes value. - -Everything looks simple for now, right? - -To summarize: - -- A variable is a property of a special internal object, associated with the currently executing block/function/script. -- Working with variables is actually working with the properties of that object. - -### Function Declaration - -Until now, we only observed variables. Now enter Function Declarations. - -**Unlike `let` variables, they are fully initialized not when the execution reaches them, but earlier, when a Lexical Environment is created.** - -For top-level functions, it means the moment when the script is started. - -That is why we can call a function declaration before it is defined. - -The code below demonstrates that the Lexical Environment is non-empty from the beginning. It has `say`, because that's a Function Declaration. And later it gets `phrase`, declared with `let`: - -![lexical environment](lexical-environment-global-3.svg) - - -### Inner and outer Lexical Environment - -Now let's go on and explore what happens when a function accesses an outer variable. - -During the call, `say()` uses the outer variable `phrase`. Let's look at the details of what's going on. - -When a function runs, a new Lexical Environment is created automatically to store local variables and parameters of the call. - -For instance, for `say("John")`, it looks like this (the execution is at the line, labelled with an arrow): - - - -![lexical environment](lexical-environment-simple.svg) +- In this article we'll use `let` variables in examples. +- Variables, declared with `const`, behave the same, so this article is about `const` too. +- The old `var` has some notable differences, they will be covered in the article . +``` -So, during the function call we have two Lexical Environments: the inner one (for the function call) and the outer one (global): +## Code blocks -- The inner Lexical Environment corresponds to the current execution of `say`. +If a variable is declared inside a code block `{...}`, it's only visible inside that block. - It has a single property: `name`, the function argument. We called `say("John")`, so the value of `name` is `"John"`. -- The outer Lexical Environment is the global Lexical Environment. +For example: - It has `phrase` variable and the function itself. +```js run +{ + // do some job with local variables that should not be seen outside -The inner Lexical Environment has a reference to the `outer` one. + let message = "Hello"; // only visible in this block -**When the code wants to access a variable -- the inner Lexical Environment is searched first, then the outer one, then the more outer one and so on until the global one.** + alert(message); // Hello +} -If a variable is not found anywhere, that's an error in strict mode. Without `use strict`, an assignment to a non-existing variable like `user = "John"` creates a new global variable `user`. That's for backwards compatibility. +alert(message); // Error: message is not defined +``` -Let's see how the search proceeds in our example: +We can use this to isolate a piece of code that does its own task, with variables that only belong to it: -- When the `alert` inside `say` wants to access `name`, it finds it immediately in the function Lexical Environment. -- When it wants to access `phrase`, then there is no `phrase` locally, so it follows the reference to the enclosing Lexical Environment and finds it there. +```js run +{ + // show message + let message = "Hello"; + alert(message); +} -![lexical environment lookup](lexical-environment-simple-lookup.svg) +{ + // show another message + let message = "Goodbye"; + alert(message); +} +``` -Now we can give the answer to the first question from the beginning of the chapter. +````smart header="There'd be an error without blocks" +Please note, without separate blocks there would be an error, if we use `let` with the existing variable name: -**A function gets outer variables as they are now, it uses the most recent values.** +```js run +// show message +let message = "Hello"; +alert(message); -Old variable values are not saved anywhere. When a function wants a variable, it takes the current value from its own Lexical Environment or the outer one. +// show another message +*!* +let message = "Goodbye"; // Error: variable already declared +*/!* +alert(message); +``` +```` -So the answer to the first question is `Pete`: +For `if`, `for`, `while` and so on, variables declared in `{...}` are also only visible inside: ```js run -let name = "John"; +if (true) { + let phrase = "Hello!"; -function sayHi() { - alert("Hi, " + name); + alert(phrase); // Hello! } -name = "Pete"; // (*) - -*!* -sayHi(); // Pete -*/!* +alert(phrase); // Error, no such variable! ``` +Here, after `if` finishes, the `alert` below won't see the `phrase`, hence the error. -The execution flow of the code above: - -1. The global Lexical Environment has `name: "John"`. -2. At the line `(*)` the global variable is changed. Now it has `name: "Pete"`. -3. When the function `sayHi()` is executed it takes `name` from outside, the global Lexical Environment, where its value is already `"Pete"`. +That's great, as it allows us to create block-local variables, specific to an `if` branch. +The similar thing holds true for `for` and `while` loops: -```smart header="One call -- one Lexical Environment" -Please note that a new function Lexical Environment is created each time a function runs. - -And if a function is called multiple times, then each invocation will have its own Lexical Environment, with local variables and parameters specific for that very run. -``` +```js run +for (let i = 0; i < 3; i++) { + // the variable i is only visible inside this for + alert(i); // 0, then 1, then 2 +} -```smart header="Lexical Environment is a specification object" -"Lexical Environment" is a specification object: it only exists "theoretically" in the [language specification](https://tc39.es/ecma262/#sec-lexical-environments) to describe how things work. We can't get this object in our code and manipulate it directly. JavaScript engines also may optimize it, discard variables that are unused to save memory and perform other internal tricks, as long as the visible behavior remains as described. +alert(i); // Error, no such variable ``` +Visually, `let i` is outside of `{...}`. But the `for` construct is special here: the variable, declared inside it, is considered a part of the block. ## Nested functions @@ -223,32 +118,16 @@ function sayHiBye(firstName, lastName) { Here the *nested* function `getFullName()` is made for convenience. It can access the outer variables and so can return the full name. Nested functions are quite common in JavaScript. -What's much more interesting, a nested function can be returned: either as a property of a new object (if the outer function creates an object with methods) or as a result by itself. It can then be used somewhere else. No matter where, it still has access to the same outer variables. - -For instance, here the nested function is assigned to the new object by the [constructor function](info:constructor-new): - -```js run -// constructor function returns a new object -function User(name) { - - // the object method is created as a nested function - this.sayHi = function() { - alert(name); - }; -} - -let user = new User("John"); -user.sayHi(); // the method "sayHi" code has access to the outer "name" -``` +What's much more interesting, a nested function can be returned: either as a property of a new object or as a result by itself. It can then be used somewhere else. No matter where, it still has access to the same outer variables. -And here we just create and return a "counting" function: +Below, `makeCounter` creates the "counter" function that returns the next number on each invocation: ```js run function makeCounter() { let count = 0; return function() { - return count++; // has access to the outer "count" + return count++; }; } @@ -259,314 +138,195 @@ alert( counter() ); // 1 alert( counter() ); // 2 ``` -Let's go on with the `makeCounter` example. It creates the "counter" function that returns the next number on each invocation. Despite being simple, slightly modified variants of that code have practical uses, for instance, as a [pseudorandom number generator](https://en.wikipedia.org/wiki/Pseudorandom_number_generator), and more. - -How does the counter work internally? - -When the inner function runs, the variable in `count++` is searched from inside out. For the example above, the order will be: +Despite being simple, slightly modified variants of that code have practical uses, for instance, as a [random number generator](https://en.wikipedia.org/wiki/Pseudorandom_number_generator) to generate random values for automated tests. -![](lexical-search-order.svg) +How does this work? If we create multiple counters, will they be independent? What's going on with the variables here? -1. The locals of the nested function... -2. The variables of the outer function... -3. And so on until it reaches global variables. +Undestanding such things is great for the overall knowledge of JavaScript and beneficial for more complex scenarios. So let's go a bit in-depth. -In this example `count` is found on step `2`. When an outer variable is modified, it's changed where it's found. So `count++` finds the outer variable and increases it in the Lexical Environment where it belongs. Like if we had `let count = 1`. - -Here are two questions to consider: - -1. Can we somehow reset the counter `count` from the code that doesn't belong to `makeCounter`? E.g. after `alert` calls in the example above. -2. If we call `makeCounter()` multiple times -- it returns many `counter` functions. Are they independent or do they share the same `count`? - -Try to answer them before you continue reading. - -... - -All done? - -Okay, let's go over the answers. - -1. There is no way: `count` is a local function variable, we can't access it from the outside. -2. For every call to `makeCounter()` a new function Lexical Environment is created, with its own `count`. So the resulting `counter` functions are independent. - -Here's the demo: - -```js run -function makeCounter() { - let count = 0; - return function() { - return count++; - }; -} - -let counter1 = makeCounter(); -let counter2 = makeCounter(); +## Lexical Environment -alert( counter1() ); // 0 -alert( counter1() ); // 1 +```warn header="Here be dragons!" +The in-depth technical explanation lies ahead. -alert( counter2() ); // 0 (independent) +As far as I'd like to avoid low-level language details, any understanding without them would be lacking and incomplete, so get ready. ``` +For clarity, the explanation is split into multiple steps. -Hopefully, the situation with outer variables is clear now. For most situations such understanding is enough. There are few details in the specification that we omitted for brevity. So in the next section we cover even more details. - -## Environments in detail - -Here's what's going on in the `makeCounter` example step-by-step. Follow it to make sure that you understand how it works in detail. - -Please note the additional `[[Environment]]` property is covered here. We didn't mention it before for simplicity. - -1. When the script has just started, there is only the global Lexical Environment: - - ![](lexenv-nested-makecounter-1.svg) - - At that starting moment there is only the `makeCounter` function, because it's a Function Declaration. It did not run yet. - - **All functions "on birth" receive a hidden property `[[Environment]]` with a reference to the Lexical Environment of their creation.** - - We didn't talk about it before. That's how the function knows where it was made. - - Here, `makeCounter` is created in the global Lexical Environment, so `[[Environment]]` keeps a reference to it. - - In other words, a function is "imprinted" with a reference to the Lexical Environment where it was born. And `[[Environment]]` is the hidden function property that has that reference. - -2. The code runs on, the new global variable `counter` is declared and gets the result of the `makeCounter()` call. Here's a snapshot of the moment when the execution is on the first line inside `makeCounter()`: - - ![](lexenv-nested-makecounter-2.svg) +### Step 1. Variables - At the moment of the call of `makeCounter()`, the Lexical Environment is created, to hold its variables and arguments. - - As all Lexical Environments, it stores two things: - 1. An Environment Record with local variables. In our case `count` is the only local variable (appearing when the line with `let count` is executed). - 2. The outer lexical reference, which is set to the value of `[[Environment]]` of the function. Here `[[Environment]]` of `makeCounter` references the global Lexical Environment. - - So, now we have two Lexical Environments: the first one is global, the second one is for the current `makeCounter` call, with the outer reference to global. - -3. During the execution of `makeCounter()`, a tiny nested function is created. - - It doesn't matter whether the function is created using Function Declaration or Function Expression. All functions get the `[[Environment]]` property that references the Lexical Environment in which they were made. So our new tiny nested function gets it as well. - - For our new nested function the value of `[[Environment]]` is the current Lexical Environment of `makeCounter()` (where it was born): +In JavaScript, every running function, code block `{...}`, and the script as a whole have an internal (hidden) associated object known as the *Lexical Environment*. - ![](lexenv-nested-makecounter-3.svg) +The Lexical Environment object consists of two parts: - Please note that on this step the inner function was created, but not yet called. The code inside `return count++;` is not running. +1. *Environment Record* -- an object that stores all local variables as its properties (and some other information like the value of `this`). +2. A reference to the *outer lexical environment*, the one associated with the outer code. -4. As the execution goes on, the call to `makeCounter()` finishes, and the result (the tiny nested function) is assigned to the global variable `counter`: +**A "variable" is just a property of the special internal object, `Environment Record`. "To get or change a variable" means "to get or change a property of that object".** - ![](lexenv-nested-makecounter-4.svg) +In this simple code without functions, there is only one Lexical Environment: - That function has only one line: `return count++`, that will be executed when we run it. +![lexical environment](lexical-environment-global.svg) -5. When `counter()` is called, a new Lexical Environment is created for the call. It's empty, as `counter` has no local variables by itself. But the `[[Environment]]` of `counter` is used as the `outer` reference for it, that provides access to the variables of the former `makeCounter()` call where it was created: +This is the so-called *global* Lexical Environment, associated with the whole script. - ![](lexenv-nested-makecounter-5.svg) +On the picture above, the rectangle means Environment Record (variable store) and the arrow means the outer reference. The global Lexical Environment has no outer reference, that's why the arrow points to `null`. - Now when the call looks for `count` variable, it first searches its own Lexical Environment (empty), then the Lexical Environment of the outer `makeCounter()` call, where it finds it. +As the code starts executing and goes on, the Lexical Environment changes. - Please note how memory management works here. Although `makeCounter()` call finished some time ago, its Lexical Environment was retained in memory, because there's a nested function with `[[Environment]]` referencing it. +Here's a little bit longer code: - Generally, a Lexical Environment object lives as long as there is a function which may use it. And only when there are none remaining, it is cleared. +![lexical environment](closure-variable-phrase.svg) -6. The call to `counter()` not only returns the value of `count`, but also increases it. Note that the modification is done "in place". The value of `count` is modified exactly in the environment where it was found. +Rectangles on the right-hand side demonstrate how the global Lexical Environment changes during the execution: - ![](lexenv-nested-makecounter-6.svg) +1. When the script starts, the Lexical Environment is pre-populated with all declared variables. + - Initially, they are in the "Uninitialized" state. That's a special internal state, it means that the engine knows about the variable, but it cannot be referenced until it has been declared with `let`. It's almost the same as if the variable didn't exist. +2. Then `let phrase` definition appears. There's no assignment yet, so its value is `undefined`. We can use the variable since this moment. +3. `phrase` is assigned a value. +4. `phrase` changes the value. -7. Next `counter()` invocations do the same. +Everything looks simple for now, right? -The answer to the second question from the beginning of the chapter should now be obvious. +- A variable is a property of a special internal object, associated with the currently executing block/function/script. +- Working with variables is actually working with the properties of that object. -The `work()` function in the code below gets `name` from the place of its origin through the outer lexical environment reference: +```smart header="Lexical Environment is a specification object" +"Lexical Environment" is a specification object: it only exists "theoretically" in the [language specification](https://tc39.es/ecma262/#sec-lexical-environments) to describe how things work. We can't get this object in our code and manipulate it directly. -![](lexenv-nested-work.svg) +JavaScript engines also may optimize it, discard variables that are unused to save memory and perform other internal tricks, as long as the visible behavior remains as described. +``` -So, the result is `"Pete"` here. +### Step 2. Function Declarations -But if there were no `let name` in `makeWorker()`, then the search would go outside and take the global variable as we can see from the chain above. In that case it would be `"John"`. +A function is also a value, like a variable. -```smart header="Closures" -There is a general programming term "closure", that developers generally should know. +**The difference is that a Function Declaration is instantly fully initialized.** -A [closure](https://en.wikipedia.org/wiki/Closure_(computer_programming)) is a function that remembers its outer variables and can access them. In some languages, that's not possible, or a function should be written in a special way to make it happen. But as explained above, in JavaScript, all functions are naturally closures (there is only one exclusion, to be covered in ). +When a Lexical Environment is created, a Function Declaration immediately becomes a ready-to-use function (unlike `let`, that is unusable till the declaration). -That is: they automatically remember where they were created using a hidden `[[Environment]]` property, and all of them can access outer variables. +That's why we can use a function, declared as Function Declaration, even before the declaration itself. -When on an interview, a frontend developer gets a question about "what's a closure?", a valid answer would be a definition of the closure and an explanation that all functions in JavaScript are closures, and maybe a few more words about technical details: the `[[Environment]]` property and how Lexical Environments work. -``` +For example, here's the initial state of the global Lexical Environment when we add a function: -## Code blocks and loops, IIFE +![](closure-function-declaration.svg) -The examples above concentrated on functions. But a Lexical Environment exists for any code block `{...}`. +Naturally, this behavior only applies to Function Declarations, not Function Expressions where we assign a function to a variable, such as `let say = function(name)...`. -A Lexical Environment is created when a code block runs and contains block-local variables. Here are a couple of examples. +### Step 3. Inner and outer Lexical Environment -### If +When a function runs, at the beginning of the call, a new Lexical Environment is created automatically to store local variables and parameters of the call. -In the example below, the `user` variable exists only in the `if` block: +For instance, for `say("John")`, it looks like this (the execution is at the line, labelled with an arrow): -![](lexenv-if.svg) - -When the execution gets into the `if` block, the new "if-only" Lexical Environment is created for it. - -It has the reference to the outer one, so `phrase` can be found. But all variables and Function Expressions, declared inside `if`, reside in that Lexical Environment and can't be seen from the outside. - -For instance, after `if` finishes, the `alert` below won't see the `user`, hence the error. +![](lexical-environment-simple.svg) -### For, while +During the function call we have two Lexical Environments: the inner one (for the function call) and the outer one (global): -For a loop, every iteration has a separate Lexical Environment. If a variable is declared in `for(let ...)`, then it's also in there: +- The inner Lexical Environment corresponds to the current execution of `say`. It has a single property: `name`, the function argument. We called `say("John")`, so the value of the `name` is `"John"`. +- The outer Lexical Environment is the global Lexical Environment. It has the `phrase` variable and the function itself. -```js run -for (let i = 0; i < 10; i++) { - // Each loop has its own Lexical Environment - // {i: value} -} +The inner Lexical Environment has a reference to the `outer` one. -alert(i); // Error, no such variable -``` +**When the code wants to access a variable -- the inner Lexical Environment is searched first, then the outer one, then the more outer one and so on until the global one.** -Please note: `let i` is visually outside of `{...}`. The `for` construct is special here: each iteration of the loop has its own Lexical Environment with the current `i` in it. +If a variable is not found anywhere, that's an error in strict mode (without `use strict`, an assignment to a non-existing variable creates a new global variable, for compatibility with old code). -Again, similarly to `if`, after the loop `i` is not visible. +In this example the search proceeds as follows: -### Code blocks +- For the `name` variable, the `alert` inside `say` finds it immediately in the inner Lexical Environment. +- When it wants to access `phrase`, then there is no `phrase` locally, so it follows the reference to the outer Lexical Environment and finds it there. -We also can use a "bare" code block `{…}` to isolate variables into a "local scope". +![lexical environment lookup](lexical-environment-simple-lookup.svg) -For instance, in a web browser all scripts (except with `type="module"`) share the same global area. So if we create a global variable in one script, it becomes available to others. But that becomes a source of conflicts if two scripts use the same variable name and overwrite each other. -That may happen if the variable name is a widespread word, and script authors are unaware of each other. +### Step 4. Returning a function -If we'd like to avoid that, we can use a code block to isolate the whole script or a part of it: +Let's return to the `makeCounter` example. -```js run -{ - // do some job with local variables that should not be seen outside - - let message = "Hello"; +```js +function makeCounter() { + let count = 0; - alert(message); // Hello + return function() { + return count++; + }; } -alert(message); // Error: message is not defined +let counter = makeCounter(); ``` -The code outside of the block (or inside another script) doesn't see variables inside the block, because the block has its own Lexical Environment. +At the beginning of each `makeCounter()` call, a new Lexical Environment object is created, to store variables for this `makeCounter` run. -### IIFE +So we have two nested Lexical Environments, just like in the example above: -In the past, there were no block-level lexical environments in JavaScript. +![](closure-makecounter.svg) -So programmers had to invent something. And what they did was called "immediately-invoked function expressions" (abbreviated as IIFE). +What's different is that, during the execution of `makeCounter()`, a tiny nested function is created of only one line: `return count++`. We don't run it yet, only create. -That's not a thing we should use nowadays, but you can find them in old scripts, so it's better to understand them. +All functions remember the Lexical Environment in which they were made. Technically, there's no magic here: all functions have the hidden property named `[[Environment]]`, that keeps the reference to the Lexical Environment where the function was created: -An IIFE looks like this: +![](closure-makecounter-environment.svg) -```js run -(function() { +So, `counter.[[Environment]]` has the reference to `{count: 0}` Lexical Environment. That's how the function remembers where it was created, no matter where it's called. The `[[Environment]]` reference is set once and forever at function creation time. - let message = "Hello"; +Later, when `counter()` is called, a new Lexical Environment is created for the call, and its outer Lexical Environment reference is taken from `counter.[[Environment]]`: - alert(message); // Hello +![](closure-makecounter-nested-call.svg) -})(); -``` +Now when the code inside `counter()` looks for `count` variable, it first searches its own Lexical Environment (empty, as there are no local variables there), then the Lexical Environment of the outer `makeCounter()` call, where finds it and changes. -Here a Function Expression is created and immediately called. So the code executes right away and has its own private variables. +**A variable is updated in the Lexical Environment where it lives.** -The Function Expression is wrapped with parenthesis `(function {...})`, because when JavaScript meets `"function"` in the main code flow, it understands it as the start of a Function Declaration. But a Function Declaration must have a name, so this kind of code will give an error: +Here's the state after the execution: -```js run -// Try to declare and immediately call a function -function() { // <-- Error: Unexpected token ( +![](closure-makecounter-nested-call-2.svg) - let message = "Hello"; +If we call `counter()` multiple times, the `count` variable will be increased to `2`, `3` and so on, at the same place. - alert(message); // Hello - -}(); -``` - -Even if we say: "okay, let's add a name", that won't work, as JavaScript does not allow Function Declarations to be called immediately: - -```js run -// syntax error because of parentheses below -function go() { - -}(); // <-- can't call Function Declaration immediately -``` - -So, the parentheses around the function is a trick to show JavaScript that the function is created in the context of another expression, and hence it's a Function Expression: it needs no name and can be called immediately. - -There exist other ways besides parentheses to tell JavaScript that we mean a Function Expression: - -```js run -// Ways to create IIFE - -(function() { - alert("Parentheses around the function"); -}*!*)*/!*(); +```smart header="Closure" +There is a general programming term "closure", that developers generally should know. -(function() { - alert("Parentheses around the whole thing"); -}()*!*)*/!*; +A [closure](https://en.wikipedia.org/wiki/Closure_(computer_programming)) is a function that remembers its outer variables and can access them. In some languages, that's not possible, or a function should be written in a special way to make it happen. But as explained above, in JavaScript, all functions are naturally closures (there is only one exception, to be covered in ). -*!*!*/!*function() { - alert("Bitwise NOT operator starts the expression"); -}(); +That is: they automatically remember where they were created using a hidden `[[Environment]]` property, and then their code can access outer variables. -*!*+*/!*function() { - alert("Unary plus starts the expression"); -}(); +When on an interview, a frontend developer gets a question about "what's a closure?", a valid answer would be a definition of the closure and an explanation that all functions in JavaScript are closures, and maybe a few more words about technical details: the `[[Environment]]` property and how Lexical Environments work. ``` -In all the above cases we declare a Function Expression and run it immediately. Let's note again: nowadays there's no reason to write such code. - ## Garbage collection -Usually, a Lexical Environment is cleaned up and deleted after the function runs. For instance: +Usually, a Lexical Environment is removed from memory with all the variables after the function call finishes. That's because there are no references to it. As any JavaScript object, it's only kept in memory while it's reachable. -```js -function f() { - let value1 = 123; - let value2 = 456; -} - -f(); -``` +...But if there's a nested function that is still reachable after the end of a function, then it has `[[Environment]]` property that references the lexical environment. -Here, two values are technically the properties of the Lexical Environment. But after `f()` finishes, that Lexical Environment becomes unreachable, so it's deleted from the memory. +In that case the Lexical Environment is still reachable even after the completion of the function, so it stays alive. -...But if there's a nested function that is still reachable after the end of `f`, then it has `[[Environment]]` property that references the outer lexical environment, so it's also reachable and alive: +For example: ```js function f() { let value = 123; - function g() { alert(value); } - -*!* - return g; -*/!* + return function() { + alert(value); + } } -let func = f(); // func gets a reference to g -// so it stays and memory and its outer lexical environment stays as well +let g = f(); // g.[[Environment]] stores a reference to the Lexical Environment +// of the corresponding f() call ``` Please note that if `f()` is called many times, and resulting functions are saved, then all corresponding Lexical Environment objects will also be retained in memory. All 3 of them in the code below: @@ -585,20 +345,20 @@ let arr = [f(), f(), f()]; A Lexical Environment object dies when it becomes unreachable (just like any other object). In other words, it exists only while there's at least one nested function referencing it. -In the code below, after `g` becomes unreachable, its enclosing Lexical Environment (and hence the `value`) is cleaned from memory; +In the code below, after the nested function is removed, its enclosing Lexical Environment (and hence the `value`) is cleaned from memory: ```js function f() { let value = 123; - function g() { alert(value); } - - return g; + return function() { + alert(value); + } } -let func = f(); // while func has a reference to g, it stays in memory +let g = f(); // while g function exists, the value stays in memory -func = null; // ...and now the memory is cleaned up +g = null; // ...and now the memory is cleaned up ``` ### Real-life optimizations @@ -649,9 +409,6 @@ let g = f(); g(); ``` -```warn header="See ya!" This feature of V8 is good to know. If you are debugging with Chrome/Opera, sooner or later you will meet it. -That is not a bug in the debugger, but rather a special feature of V8. Perhaps it will be changed sometime. -You always can check for it by running the examples on this page. -``` +That is not a bug in the debugger, but rather a special feature of V8. Perhaps it will be changed sometime. You always can check for it by running the examples on this page. diff --git a/1-js/06-advanced-functions/03-closure/closure-function-declaration.svg b/1-js/06-advanced-functions/03-closure/closure-function-declaration.svg new file mode 100644 index 000000000..97f76e569 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-function-declaration.svg @@ -0,0 +1 @@ +outernullexecution startphrase: <uninitialized> say: function... \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/closure-makecounter-environment.svg b/1-js/06-advanced-functions/03-closure/closure-makecounter-environment.svg new file mode 100644 index 000000000..b9060bc8a --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-makecounter-environment.svg @@ -0,0 +1 @@ +null[[Environment]]makeCounter: function counter: undefinedcount: 0outerouter \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call-2.svg b/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call-2.svg new file mode 100644 index 000000000..3e4206ca6 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call-2.svg @@ -0,0 +1 @@ +count: 1<empty>nullouterouteroutermakeCounter: function counter: functionmodified here \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call.svg b/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call.svg new file mode 100644 index 000000000..e1bb8cc8f --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call.svg @@ -0,0 +1 @@ +count: 0<empty>nullouterouteroutermakeCounter: function counter: function \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/closure-makecounter.svg b/1-js/06-advanced-functions/03-closure/closure-makecounter.svg new file mode 100644 index 000000000..2a1c4a729 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-makecounter.svg @@ -0,0 +1 @@ +makeCounter: function counter: undefinedcount: 0nullglobal LexicalEnvironmentLexicalEnvironment of makeCounter() callouterouter \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/closure-variable-phrase.svg b/1-js/06-advanced-functions/03-closure/closure-variable-phrase.svg new file mode 100644 index 000000000..741c05448 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-variable-phrase.svg @@ -0,0 +1 @@ +phrase: "Bye"phrase: "Hello"phrase: undefinedphrase: <uninitialized>outernullexecution start \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-global.svg index aac8c5927..9620f0485 100644 --- a/1-js/06-advanced-functions/03-closure/lexical-environment-global.svg +++ b/1-js/06-advanced-functions/03-closure/lexical-environment-global.svg @@ -1 +1 @@ -phrase: "Hello"outernullLexicalEnvironment \ No newline at end of file +phrase: "Hello"outernullLexical Environment \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg index 1ad0ab6c3..ff0486ede 100644 --- a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg +++ b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg @@ -1 +1 @@ -say: function phrase: "Hello"name: "John"outerouternull \ No newline at end of file +say: function phrase: "Hello"name: "John"outerouternull \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg index 179ce75d2..abd77fff9 100644 --- a/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg +++ b/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg @@ -1 +1 @@ -say: function phrase: "Hello"name: "John"outerouternullLexicalEnvironment for the call \ No newline at end of file +say: function phrase: "Hello"name: "John"outerouternullLexical Environment of the call \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/variable-scope-lookup.svg b/1-js/06-advanced-functions/03-closure/variable-scope-lookup.svg new file mode 100644 index 000000000..674437196 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/variable-scope-lookup.svg @@ -0,0 +1 @@ +functionUser(name){this.sayHi=function(){alert(name);};}letuser=newUser("John");user.sayHi(); \ No newline at end of file diff --git a/1-js/06-advanced-functions/04-var/article.md b/1-js/06-advanced-functions/04-var/article.md index ec8dc60f9..405e60cbc 100644 --- a/1-js/06-advanced-functions/04-var/article.md +++ b/1-js/06-advanced-functions/04-var/article.md @@ -1,6 +1,12 @@ # পুরাতন "var" +```smart header="This article is for understanding old scripts" +এই আর্টিকেল এর তথ্য গুলি পুরাতন স্ক্রিপ্ট বোঝার জন্য সাহায্য করবে। + +এভাবে আমরা নতুন কোড লিখি না। +``` + অধ্যায়ের প্রথম দিকে আমরা উল্লেখ করেছিলাম [variables](info:variables) কে তিন ভাবে ঘোষণা করা যায়। ১। `let` @@ -188,6 +194,74 @@ sayHi(); উপরের দুটি উদাহরণে `alert` কোন এরর ছাড়াই চলে, কারন ভেরিয়েবল `phrase` বিদ্যমান রয়েছে। তবে এর মান এখনও নির্ধারিত হয়নি, সুতরাং এটি আনডিফাইন দেখায়। +### IIFE + +As in the past there was only `var`, and it has no block-level visibility, programmers invented a way to emulate it. What they did was called "immediately-invoked function expressions" (abbreviated as IIFE). + +That's not something we should use nowadays, but you can find them in old scripts. + +An IIFE looks like this: + +```js run +(function() { + + let message = "Hello"; + + alert(message); // Hello + +})(); +``` + +Here a Function Expression is created and immediately called. So the code executes right away and has its own private variables. + +The Function Expression is wrapped with parenthesis `(function {...})`, because when JavaScript meets `"function"` in the main code flow, it understands it as the start of a Function Declaration. But a Function Declaration must have a name, so this kind of code will give an error: + +```js run +// Try to declare and immediately call a function +function() { // <-- Error: Function statements require a function name + + let message = "Hello"; + + alert(message); // Hello + +}(); +``` + +Even if we say: "okay, let's add a name", that won't work, as JavaScript does not allow Function Declarations to be called immediately: + +```js run +// syntax error because of parentheses below +function go() { + +}(); // <-- can't call Function Declaration immediately +``` + +So, the parentheses around the function is a trick to show JavaScript that the function is created in the context of another expression, and hence it's a Function Expression: it needs no name and can be called immediately. + +There exist other ways besides parentheses to tell JavaScript that we mean a Function Expression: + +```js run +// Ways to create IIFE + +(function() { + alert("Parentheses around the function"); +}*!*)*/!*(); + +(function() { + alert("Parentheses around the whole thing"); +}()*!*)*/!*; + +*!*!*/!*function() { + alert("Bitwise NOT operator starts the expression"); +}(); + +*!*+*/!*function() { + alert("Unary plus starts the expression"); +}(); +``` + +In all the above cases we declare a Function Expression and run it immediately. Let's note again: nowadays there's no reason to write such code. + ## সারাংশ এখানে দুটি প্রধান পার্থক্য রয়েছে `var` এবং `let/const` এর মধ্যেঃ diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 7d43c0be3..c0f34850c 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -299,13 +299,13 @@ The only syntax difference between `call` and `apply` is that `call` expects a l So these two calls are almost equivalent: ```js -func.call(context, ...args); // pass an array as list with spread operator -func.apply(context, args); // is same as using apply +func.call(context, ...args); // pass an array as list with spread syntax +func.apply(context, args); // is same as using call ``` There's only a minor difference: -- The spread operator `...` allows to pass *iterable* `args` as the list to `call`. +- The spread syntax `...` allows to pass *iterable* `args` as the list to `call`. - The `apply` accepts only *array-like* `args`. So, these calls complement each other. Where we expect an iterable, `call` works, where we expect an array-like, `apply` works. diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md index ff60e559f..787c7d68e 100644 --- a/1-js/06-advanced-functions/10-bind/article.md +++ b/1-js/06-advanced-functions/10-bind/article.md @@ -313,7 +313,7 @@ The result of `partial(func[, arg1, arg2...])` call is a wrapper `(*)` that call - Then gives it `...argsBound` -- arguments from the `partial` call (`"10:00"`) - Then gives it `...args` -- arguments given to the wrapper (`"Hello"`) -So easy to do it with the spread operator, right? +So easy to do it with the spread syntax, right? Also there's a ready [_.partial](https://lodash.com/docs#partial) implementation from lodash library. diff --git a/1-js/07-object-properties/01-property-descriptors/article.md b/1-js/07-object-properties/01-property-descriptors/article.md index e894f0662..3593bffae 100644 --- a/1-js/07-object-properties/01-property-descriptors/article.md +++ b/1-js/07-object-properties/01-property-descriptors/article.md @@ -66,7 +66,7 @@ Object.defineProperty(obj, propertyName, descriptor) : The object and its property to apply the descriptor. `descriptor` -: Property descriptor to apply. +: Property descriptor object to apply. If the property exists, `defineProperty` updates its flags. Otherwise, it creates the property with the given value and flags; in that case, if a flag is not supplied, it is assumed `false`. diff --git a/1-js/07-object-properties/02-property-accessors/article.md b/1-js/07-object-properties/02-property-accessors/article.md index 52c152811..889994cf3 100644 --- a/1-js/07-object-properties/02-property-accessors/article.md +++ b/1-js/07-object-properties/02-property-accessors/article.md @@ -134,7 +134,7 @@ alert(user.fullName); // John Smith for(let key in user) alert(key); // name, surname ``` -Please note once again that a property can be either an accessor (has `get/set` methods) or a data property (has a `value`), not both. +Please note that a property can be either an accessor (has `get/set` methods) or a data property (has a `value`), not both. If we try to supply both `get` and `value` in the same descriptor, there will be an error: diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md index 69e7c5f5c..e04e09434 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/article.md +++ b/1-js/08-prototypes/01-prototype-inheritance/article.md @@ -16,7 +16,7 @@ The prototype is a little bit "magical". When we want to read a property from `o The property `[[Prototype]]` is internal and hidden, but there are many ways to set it. -One of them is to use `__proto__`, like this: +One of them is to use the special name `__proto__`, like this: ```js run let animal = { diff --git a/1-js/08-prototypes/02-function-prototype/article.md b/1-js/08-prototypes/02-function-prototype/article.md index c106d1d90..b1ef51826 100644 --- a/1-js/08-prototypes/02-function-prototype/article.md +++ b/1-js/08-prototypes/02-function-prototype/article.md @@ -41,7 +41,7 @@ That's the resulting picture: On the picture, `"prototype"` is a horizontal arrow, meaning a regular property, and `[[Prototype]]` is vertical, meaning the inheritance of `rabbit` from `animal`. ```smart header="`F.prototype` only used at `new F` time" -`F.prototype` property is only used when `new F` is called, it assigns `[[Prototype]]` of the new object. After that, there's no connection between `F.prototype` and the new object. Think of it as a "one-time gift". +`F.prototype` property is only used when `new F` is called, it assigns `[[Prototype]]` of the new object. If, after the creation, `F.prototype` property changes (`F.prototype = `), then new objects created by `new F` will have another object as `[[Prototype]]`, but already existing objects keep the old one. ``` diff --git a/1-js/08-prototypes/04-prototype-methods/article.md b/1-js/08-prototypes/04-prototype-methods/article.md index 80f5a956a..dea718b08 100644 --- a/1-js/08-prototypes/04-prototype-methods/article.md +++ b/1-js/08-prototypes/04-prototype-methods/article.md @@ -65,7 +65,7 @@ This call makes a truly exact copy of `obj`, including all properties: enumerabl ## Brief history -If we count all the ways to manage `[[Prototype]]`, there are a lot! Many ways to do the same! +If we count all the ways to manage `[[Prototype]]`, there are a lot! Many ways to do the same thing! Why? diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md index 83ee2c4fe..b495d45f3 100644 --- a/1-js/09-classes/01-class/article.md +++ b/1-js/09-classes/01-class/article.md @@ -264,7 +264,7 @@ class User { let user = new User("John"); alert(user.name); // John -user = new User(""); // Name too short. +user = new User(""); // Name is too short. ``` The class declaration creates getters and setters in `User.prototype`, like this: @@ -298,13 +298,17 @@ class User { new User().sayHi(); ``` -## Class properties +## Class fields ```warn header="Old browsers may need a polyfill" -Class-level properties are a recent addition to the language. +Class fields are a recent addition to the language. ``` -In the example above, `User` only had methods. Let's add a property: +Previously, classes only had methods. + +"Class fields" is a syntax that allows to add any properties. + +For instance, let's add `name` property to `class User`: ```js run class User { @@ -323,7 +327,86 @@ alert(User.prototype.sayHi); // placed in User.prototype alert(User.prototype.name); // undefined, not placed in User.prototype ``` -The property `name` is not placed into `User.prototype`. Instead, it is created by `new` before calling the constructor, it's a property of the object itself. +The important thing about class fields is that they are set on individual objects, not `User.prototype`. + +Technically, they are processed after the constructor has done it's job. + +### Making bound methods with class fields + +As demonstrated in the chapter functions in JavaScript have a dynamic `this`. It depends on the context of the call. + +So if an object method is passed around and called in another context, `this` won't be a reference to its object any more. + +For instance, this code will show `undefined`: + +```js run +class Button { + constructor(value) { + this.value = value; + } + + click() { + alert(this.value); + } +} + +let button = new Button("hello"); + +*!* +setTimeout(button.click, 1000); // undefined +*/!* +``` + +The problem is called "losing `this`". + +There are two approaches to fixing it, as discussed in the chapter : + +1. Pass a wrapper-function, such as `setTimeout(() => button.click(), 1000)`. +2. Bind the method to object, e.g. in the constructor: + +```js run +class Button { + constructor(value) { + this.value = value; +*!* + this.click = this.click.bind(this); +*/!* + } + + click() { + alert(this.value); + } +} + +let button = new Button("hello"); + +*!* +setTimeout(button.click, 1000); // hello +*/!* +``` + +Class fields provide a more elegant syntax for the latter solution: + +```js run +class Button { + constructor(value) { + this.value = value; + } +*!* + click = () => { + alert(this.value); + } +*/!* +} + +let button = new Button("hello"); + +setTimeout(button.click, 1000); // hello +``` + +The class field `click = () => {...}` creates an independent function on each `Button` object, with `this` bound to the object. Then we can pass `button.click` around anywhere, and it will be called with the right `this`. + +That's especially useful in browser environment, when we need to setup a method as an event listener. ## Summary diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js index ca613ca5e..be2053cfc 100644 --- a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js +++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js @@ -1,7 +1,7 @@ class ExtendedClock extends Clock { constructor(options) { super(options); - let { precision=1000 } = options; + let { precision = 1000 } = options; this.precision = precision; } diff --git a/1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md b/1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md index b82a4255e..1d0f98a74 100644 --- a/1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md +++ b/1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md @@ -1,4 +1,4 @@ -importance: 5 +importance: 3 --- @@ -38,5 +38,5 @@ class Rabbit extends Object { let rabbit = new Rabbit("Rab"); -alert( rabbit.hasOwnProperty('name') ); // true +alert( rabbit.hasOwnProperty('name') ); // Error ``` diff --git a/1-js/09-classes/02-class-inheritance/article.md b/1-js/09-classes/02-class-inheritance/article.md index 1000fdd84..3d3c145eb 100644 --- a/1-js/09-classes/02-class-inheritance/article.md +++ b/1-js/09-classes/02-class-inheritance/article.md @@ -16,7 +16,7 @@ class Animal { this.name = name; } run(speed) { - this.speed += speed; + this.speed = speed; alert(`${this.name} runs with speed ${this.speed}.`); } stop() { @@ -124,7 +124,7 @@ class Animal { } run(speed) { - this.speed += speed; + this.speed = speed; alert(`${this.name} runs with speed ${this.speed}.`); } @@ -438,7 +438,7 @@ It works as intended, due to `[[HomeObject]]` mechanics. A method, such as `long As we've known before, generally functions are "free", not bound to objects in JavaScript. So they can be copied between objects and called with another `this`. -The very existance of `[[HomeObject]]` violates that principle, because methods remember their objects. `[[HomeObject]]` can't be changed, so this bond is forever. +The very existence of `[[HomeObject]]` violates that principle, because methods remember their objects. `[[HomeObject]]` can't be changed, so this bond is forever. The only place in the language where `[[HomeObject]]` is used -- is `super`. So, if a method does not use `super`, then we can still consider it free and copy between objects. But with `super` things may go wrong. @@ -478,7 +478,7 @@ tree.sayHi(); // I'm an animal (?!?) */!* ``` -A call to `tree.sayHi()` shows "I'm an animal". Definitevely wrong. +A call to `tree.sayHi()` shows "I'm an animal". Definitely wrong. The reason is simple: - In the line `(*)`, the method `tree.sayHi` was copied from `rabbit`. Maybe we just wanted to avoid code duplication? @@ -499,7 +499,7 @@ In the example below a non-method syntax is used for comparison. `[[HomeObject]] ```js run let animal = { - eat: function() { // intentially writing like this instead of eat() {... + eat: function() { // intentionally writing like this instead of eat() {... // ... } }; diff --git a/1-js/09-classes/04-private-protected-properties-methods/article.md b/1-js/09-classes/04-private-protected-properties-methods/article.md index 6d77e8ed7..60ed0ef1b 100644 --- a/1-js/09-classes/04-private-protected-properties-methods/article.md +++ b/1-js/09-classes/04-private-protected-properties-methods/article.md @@ -279,7 +279,7 @@ With private fields that's impossible: `this['#name']` doesn't work. That's a sy ## Summary -In terms of OOP, delimiting of the internal interface from the external one is called [encapsulation]("https://en.wikipedia.org/wiki/Encapsulation_(computer_programming)"). +In terms of OOP, delimiting of the internal interface from the external one is called [encapsulation](https://en.wikipedia.org/wiki/Encapsulation_(computer_programming)). It gives the following benefits: diff --git a/1-js/10-error-handling/1-try-catch/article.md b/1-js/10-error-handling/1-try-catch/article.md index 149a95f1f..162fc33a0 100644 --- a/1-js/10-error-handling/1-try-catch/article.md +++ b/1-js/10-error-handling/1-try-catch/article.md @@ -4,7 +4,7 @@ No matter how great we are at programming, sometimes our scripts have errors. Th Usually, a script "dies" (immediately stops) in case of an error, printing it to console. -But there's a syntax construct `try..catch` that allows to "catch" errors and, instead of dying, do something more reasonable. +But there's a syntax construct `try..catch` that allows us to "catch" errors so the script can, instead of dying, do something more reasonable. ## The "try..catch" syntax @@ -26,13 +26,13 @@ It works like this: 1. First, the code in `try {...}` is executed. 2. If there were no errors, then `catch(err)` is ignored: the execution reaches the end of `try` and goes on, skipping `catch`. -3. If an error occurs, then `try` execution is stopped, and the control flows to the beginning of `catch(err)`. The `err` variable (can use any name for it) will contain an error object with details about what happened. +3. If an error occurs, then the `try` execution is stopped, and control flows to the beginning of `catch(err)`. The `err` variable (we can use any name for it) will contain an error object with details about what happened. ![](try-catch-flow.svg) -So, an error inside the `try {…}` block does not kill the script: we have a chance to handle it in `catch`. +So, an error inside the `try {…}` block does not kill the script -- we have a chance to handle it in `catch`. -Let's see examples. +Let's look at some examples. - An errorless example: shows `alert` `(1)` and `(2)`: @@ -87,7 +87,7 @@ try { The JavaScript engine first reads the code, and then runs it. The errors that occur on the reading phase are called "parse-time" errors and are unrecoverable (from inside that code). That's because the engine can't understand the code. -So, `try..catch` can only handle errors that occur in the valid code. Such errors are called "runtime errors" or, sometimes, "exceptions". +So, `try..catch` can only handle errors that occur in valid code. Such errors are called "runtime errors" or, sometimes, "exceptions". ```` diff --git a/1-js/10-error-handling/2-custom-errors/article.md b/1-js/10-error-handling/2-custom-errors/article.md index b48313322..ff2e4c529 100644 --- a/1-js/10-error-handling/2-custom-errors/article.md +++ b/1-js/10-error-handling/2-custom-errors/article.md @@ -215,11 +215,39 @@ Now custom errors are much shorter, especially `ValidationError`, as we got rid The purpose of the function `readUser` in the code above is "to read the user data". There may occur different kinds of errors in the process. Right now we have `SyntaxError` and `ValidationError`, but in the future `readUser` function may grow and probably generate other kinds of errors. -The code which calls `readUser` should handle these errors. Right now it uses multiple `if`s in the `catch` block, that check the class and handle known errors and rethrow the unknown ones. But if the `readUser` function generates several kinds of errors, then we should ask ourselves: do we really want to check for all error types one-by-one in every code that calls `readUser`? +The code which calls `readUser` should handle these errors. Right now it uses multiple `if`s in the `catch` block, that check the class and handle known errors and rethrow the unknown ones. -Often the answer is "No": the outer code wants to be "one level above all that", it just wants to have some kind of "data reading error" -- why exactly it happened is often irrelevant (the error message describes it). Or, even better, it could have a way to get the error details, but only if we need to. +The scheme is like this: -So let's make a new class `ReadError` to represent such errors. If an error occurs inside `readUser`, we'll catch it there and generate `ReadError`. We'll also keep the reference to the original error in its `cause` property. Then the outer code will only have to check for `ReadError`. +```js +try { + ... + readUser() // the potential error source + ... +} catch (err) { + if (err instanceof ValidationError) { + // handle validation errors + } else if (err instanceof SyntaxError) { + // handle syntax errors + } else { + throw err; // unknown error, rethrow it + } +} +``` + +In the code above we can see two types of errors, but there can be more. + +If the `readUser` function generates several kinds of errors, then we should ask ourselves: do we really want to check for all error types one-by-one every time? + +Often the answer is "No": we'd like to be "one level above all that". We just want to know if there was a "data reading error" -- why exactly it happened is often irrelevant (the error message describes it). Or, even better, we'd like to have a way to get the error details, but only if we need to. + +The technique that we describe here is called "wrapping exceptions". + +1. We'll make a new class `ReadError` to represent a generic "data reading" error. +2. The function `readUser` will catch data reading errors that occur inside it, such as `ValidationError` and `SyntaxError`, and generate a `ReadError` instead. +3. The `ReadError` object will keep the reference to the original error in its `cause` property. + +Then the code that calls `readUser` will only have to check for `ReadError`, not for every kind of data reading errors. And if it needs more details of an error, it can check its `cause` property. Here's the code that defines `ReadError` and demonstrates its use in `readUser` and `try..catch`: @@ -293,7 +321,7 @@ In the code above, `readUser` works exactly as described -- catches syntax and v So the outer code checks `instanceof ReadError` and that's it. No need to list all possible error types. -The approach is called "wrapping exceptions", because we take "low level exceptions" and "wrap" them into `ReadError` that is more abstract and more convenient to use for the calling code. It is widely used in object-oriented programming. +The approach is called "wrapping exceptions", because we take "low level" exceptions and "wrap" them into `ReadError` that is more abstract. It is widely used in object-oriented programming. ## Summary diff --git a/1-js/11-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md index a98851ac0..9d1a260d5 100644 --- a/1-js/11-async/01-callbacks/article.md +++ b/1-js/11-async/01-callbacks/article.md @@ -10,9 +10,9 @@ If you're not familiar with these methods, and their usage in the examples is co Although, we'll try to make things clear anyway. There won't be anything really complex browser-wise. ``` -Many actions in JavaScript are *asynchronous*. In other words, we initiate them now, but they finish later. +Many functions are provided by JavaScript host environments that allow you to schedule *asynchronous* actions. In other words, actions that we initiate now, but they finish later. -For instance, we can schedule such actions using `setTimeout`. +For instance, one such function is the `setTimeout` function. There are other real-world examples of asynchronous actions, e.g. loading scripts and modules (we'll cover them in later chapters). @@ -109,7 +109,7 @@ loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', s That's called a "callback-based" style of asynchronous programming. A function that does something asynchronously should provide a `callback` argument where we put the function to run after it's complete. -Here we did it in `loadScript`, but of course, it's a general approach. +Here we did it in `loadScript`, but of course it's a general approach. ## Callback in callback diff --git a/1-js/11-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md index f8de3055a..8909df9b5 100644 --- a/1-js/11-async/02-promise-basics/article.md +++ b/1-js/11-async/02-promise-basics/article.md @@ -8,7 +8,7 @@ Everyone is happy: you, because the people don't crowd you anymore, and fans, be This is a real-life analogy for things we often have in programming: -1. A "producing code" that does something and takes time. For instance, a code that loads the data over a network. That's a "singer". +1. A "producing code" that does something and takes time. For instance, some code that loads the data over a network. That's a "singer". 2. A "consuming code" that wants the result of the "producing code" once it's ready. Many functions may need that result. These are the "fans". 3. A *promise* is a special JavaScript object that links the "producing code" and the "consuming code" together. In terms of our analogy: this is the "subscription list". The "producing code" takes whatever time it needs to produce the promised result, and the "promise" makes that result available to all of the subscribed code when it's ready. @@ -22,18 +22,18 @@ let promise = new Promise(function(resolve, reject) { }); ``` -The function passed to `new Promise` is called the *executor*. When `new Promise` is created, it runs automatically. It contains the producing code, that should eventually produce a result. In terms of the analogy above: the executor is the "singer". +The function passed to `new Promise` is called the *executor*. When `new Promise` is created, the executor runs automatically. It contains the producing code which should eventually produce the result. In terms of the analogy above: the executor is the "singer". Its arguments `resolve` and `reject` are callbacks provided by JavaScript itself. Our code is only inside the executor. -When the executor obtains the result, be it soon or late - doesn't matter, it should call one of these callbacks: +When the executor obtains the result, be it soon or late, doesn't matter, it should call one of these callbacks: - `resolve(value)` — if the job finished successfully, with result `value`. - `reject(error)` — if an error occurred, `error` is the error object. -So to summarize: the executor runs automatically, it should do a job and then call either `resolve` or `reject`. +So to summarize: the executor runs automatically and attempts to perform a job. When it is finished with the attempt it calls `resolve` if it was successful or `reject` if there was an error. -The `promise` object returned by `new Promise` constructor has internal properties: +The `promise` object returned by the `new Promise` constructor has these internal properties: - `state` — initially `"pending"`, then changes to either `"fulfilled"` when `resolve` is called or `"rejected"` when `reject` is called. - `result` — initially `undefined`, then changes to `value` when `resolve(value)` called or `error` when `reject(error)` is called. @@ -58,7 +58,7 @@ let promise = new Promise(function(resolve, reject) { We can see two things by running the code above: 1. The executor is called automatically and immediately (by `new Promise`). -2. The executor receives two arguments: `resolve` and `reject` — these functions are pre-defined by the JavaScript engine. So we don't need to create them. We should only call one of them when ready. +2. The executor receives two arguments: `resolve` and `reject`. These functions are pre-defined by the JavaScript engine, so we don't need to create them. We should only call one of them when ready. After one second of "processing" the executor calls `resolve("done")` to produce the result. This changes the state of the `promise` object: @@ -79,7 +79,7 @@ The call to `reject(...)` moves the promise object to `"rejected"` state: ![](promise-reject-1.svg) -To summarize, the executor should do a job (something that takes time usually) and then call `resolve` or `reject` to change the state of the corresponding promise object. +To summarize, the executor should perform a job (usually something that takes time) and then call `resolve` or `reject` to change the state of the corresponding promise object. A promise that is either resolved or rejected is called "settled", as opposed to an initially "pending" promise. @@ -166,7 +166,7 @@ promise.then( The first function was executed. -And in the case of a rejection -- the second one: +And in the case of a rejection, the second one: ```js run let promise = new Promise(function(resolve, reject) { @@ -205,7 +205,7 @@ let promise = new Promise((resolve, reject) => { }); *!* -// .catch(f) is the same as .then(null, f) +// .catch(f) is the same as promise.then(null, f) promise.catch(alert); // shows "Error: Whoops!" after 1 second */!* ``` @@ -255,7 +255,7 @@ It's not exactly an alias of `then(f,f)` though. There are several important dif }) .finally(() => alert("Promise ready")) .catch(err => alert(err)); // <-- .catch handles the error object - ``` + ``` That's very convenient, because `finally` is not meant to process a promise result. So it passes it through. @@ -272,6 +272,10 @@ let promise = new Promise(resolve => resolve("done!")); promise.then(alert); // done! (shows up right now) ``` + +Note that this is different, and more powerful than the real life "subscription list" scenario. If the singer has already released their song and then a person signs up on the subscription list, they probably won't receive that song. Subscriptions in real life must be done prior to the event. + +Promises are more flexible. We can add handlers any time: if the result is already there, our handlers get it immediately. ```` Next, let's see more practical examples of how promises can help us write asynchronous code. @@ -299,7 +303,7 @@ Let's rewrite it using Promises. The new function `loadScript` will not require a callback. Instead, it will create and return a Promise object that resolves when the loading is complete. The outer code can add handlers (subscribing functions) to it using `.then`: ```js run -function loadScript(src) { +function loadScript(src) { return new Promise(function(resolve, reject) { let script = document.createElement('script'); script.src = src; diff --git a/1-js/11-async/03-promise-chaining/article.md b/1-js/11-async/03-promise-chaining/article.md index e4609b8e7..bd072cc2a 100644 --- a/1-js/11-async/03-promise-chaining/article.md +++ b/1-js/11-async/03-promise-chaining/article.md @@ -1,7 +1,7 @@ # Promises chaining -Let's return to the problem mentioned in the chapter : we have a sequence of asynchronous tasks to be done one after another. For instance, loading scripts. How can we code it well? +Let's return to the problem mentioned in the chapter : we have a sequence of asynchronous tasks to be performed one after another — for instance, loading scripts. How can we code it well? Promises provide a couple of recipes to do that. @@ -72,7 +72,7 @@ promise.then(function(result) { }); ``` -What we did here is just several handlers to one promise. They don't pass the result to each other, instead they process it independently. +What we did here is just several handlers to one promise. They don't pass the result to each other; instead they process it independently. Here's the picture (compare it with the chaining above): @@ -164,7 +164,7 @@ loadScript("/article/promise-chaining/one.js") Here each `loadScript` call returns a promise, and the next `.then` runs when it resolves. Then it initiates the loading of the next script. So scripts are loaded one after another. -We can add more asynchronous actions to the chain. Please note that the code is still "flat", it grows down, not to the right. There are no signs of "pyramid of doom". +We can add more asynchronous actions to the chain. Please note that the code is still "flat" — it grows down, not to the right. There are no signs of the "pyramid of doom". Technically, we could add `.then` directly to each `loadScript`, like this: @@ -252,7 +252,7 @@ fetch('/article/promise-chaining/user.json') }); ``` -There is also a method `response.json()` that reads the remote data and parses it as JSON. In our case that's even more convenient, so let's switch to it. +The `response` object returned from `fetch` also includes the method `response.json()` that reads the remote data and parses it as JSON. In our case that's even more convenient, so let's switch to it. We'll also use arrow functions for brevity: @@ -287,7 +287,7 @@ fetch('/article/promise-chaining/user.json') }); ``` -The code works, see comments about the details. However, there's a potential problem in it, a typical error of those who begin to use promises. +The code works; see comments about the details. However, there's a potential problem in it, a typical error for those who begin to use promises. Look at the line `(*)`: how can we do something *after* the avatar has finished showing and gets removed? For instance, we'd like to show a form for editing that user or something else. As of now, there's no way. @@ -319,13 +319,9 @@ fetch('/article/promise-chaining/user.json') .then(githubUser => alert(`Finished showing ${githubUser.name}`)); ``` -That is, `.then` handler in line `(*)` now returns `new Promise`, that becomes settled only after the call of `resolve(githubUser)` in `setTimeout` `(**)`. +That is, the `.then` handler in line `(*)` now returns `new Promise`, that becomes settled only after the call of `resolve(githubUser)` in `setTimeout` `(**)`. The next `.then` in the chain will wait for that. -The next `.then` in chain will wait for that. - -As a good practice, an asynchronous action should always return a promise. - -That makes it possible to plan actions after it. Even if we don't plan to extend the chain now, we may need it later. +As a good practice, an asynchronous action should always return a promise. That makes it possible to plan actions after it; even if we don't plan to extend the chain now, we may need it later. Finally, we can split the code into reusable functions: diff --git a/1-js/11-async/04-promise-error-handling/article.md b/1-js/11-async/04-promise-error-handling/article.md index b467d5e0f..7c6af6a33 100644 --- a/1-js/11-async/04-promise-error-handling/article.md +++ b/1-js/11-async/04-promise-error-handling/article.md @@ -60,7 +60,7 @@ new Promise((resolve, reject) => { new Promise((resolve, reject) => { *!* reject(new Error("Whoops!")); -*/!* +*/!* }).catch(alert); // Error: Whoops! ``` @@ -92,15 +92,15 @@ new Promise((resolve, reject) => { }).catch(alert); // ReferenceError: blabla is not defined ``` -The final `.catch` not only catches explicit rejections, but also occasional errors in the handlers above. +The final `.catch` not only catches explicit rejections, but also accidental errors in the handlers above. ## Rethrowing As we already noticed, `.catch` at the end of the chain is similar to `try..catch`. We may have as many `.then` handlers as we want, and then use a single `.catch` at the end to handle errors in all of them. -In a regular `try..catch` we can analyze the error and maybe rethrow it if can't handle. The same thing is possible for promises. +In a regular `try..catch` we can analyze the error and maybe rethrow it if it can't be handled. The same thing is possible for promises. -If we `throw` inside `.catch`, then the control goes to the next closest error handler. And if we handle the error and finish normally, then it continues to the closest successful `.then` handler. +If we `throw` inside `.catch`, then the control goes to the next closest error handler. And if we handle the error and finish normally, then it continues to the next closest successful `.then` handler. In the example below the `.catch` successfully handles the error: diff --git a/1-js/11-async/05-promise-api/article.md b/1-js/11-async/05-promise-api/article.md index 58722afb0..e6be25008 100644 --- a/1-js/11-async/05-promise-api/article.md +++ b/1-js/11-async/05-promise-api/article.md @@ -4,9 +4,9 @@ There are 5 static methods in the `Promise` class. We'll quickly cover their use ## Promise.all -Let's say we want to run many promises to execute in parallel, and wait until all of them are ready. +Let's say we want many promises to execute in parallel and wait until all of them are ready. -For instance, download several URLs in parallel and process the content when all are done. +For instance, download several URLs in parallel and process the content once they are all done. That's what `Promise.all` is for. @@ -18,7 +18,7 @@ let promise = Promise.all([...promises...]); `Promise.all` takes an array of promises (it technically can be any iterable, but is usually an array) and returns a new promise. -The new promise resolves when all listed promises are settled and the array of their results becomes its result. +The new promise resolves when all listed promises are settled, and the array of their results becomes its result. For instance, the `Promise.all` below settles after 3 seconds, and then its result is an array `[1, 2, 3]`: @@ -89,12 +89,12 @@ Promise.all([ ]).catch(alert); // Error: Whoops! ``` -Here the second promise rejects in two seconds. That leads to an immediate rejection of `Promise.all`, so `.catch` executes: the rejection error becomes the outcome of the whole `Promise.all`. +Here the second promise rejects in two seconds. That leads to an immediate rejection of `Promise.all`, so `.catch` executes: the rejection error becomes the outcome of the entire `Promise.all`. ```warn header="In case of an error, other promises are ignored" If one promise rejects, `Promise.all` immediately rejects, completely forgetting about the other ones in the list. Their results are ignored. -For example, if there are multiple `fetch` calls, like in the example above, and one fails, other ones will still continue to execute, but `Promise.all` won't watch them anymore. They will probably settle, but the result will be ignored. +For example, if there are multiple `fetch` calls, like in the example above, and one fails, the others will still continue to execute, but `Promise.all` won't watch them anymore. They will probably settle, but their results will be ignored. `Promise.all` does nothing to cancel them, as there's no concept of "cancellation" in promises. In [another chapter](info:fetch-abort) we'll cover `AbortController` that can help with that, but it's not a part of the Promise API. ``` @@ -110,7 +110,7 @@ Promise.all([ setTimeout(() => resolve(1), 1000) }), 2, - 3 + 3 ]).then(alert); // 1, 2, 3 ``` @@ -121,7 +121,7 @@ So we are able to pass ready values to `Promise.all` where convenient. [recent browser="new"] -`Promise.all` rejects as a whole if any promise rejects. That's good for "all or nothing" cases, when we need *all* results to go on: +`Promise.all` rejects as a whole if any promise rejects. That's good for "all or nothing" cases, when we need *all* results successful to proceed: ```js Promise.all([ @@ -131,7 +131,7 @@ Promise.all([ ]).then(render); // render method needs results of all fetches ``` -`Promise.allSettled` waits for all promises to settle. The resulting array has: +`Promise.allSettled` just waits for all promises to settle, regardless of the result. The resulting array has: - `{status:"fulfilled", value:result}` for successful responses, - `{status:"rejected", reason:error}` for errors. @@ -169,7 +169,7 @@ The `results` in the line `(*)` above will be: ] ``` -So, for each promise we get its status and `value/error`. +So for each promise we get its status and `value/error`. ### Polyfill @@ -191,13 +191,13 @@ if(!Promise.allSettled) { In this code, `promises.map` takes input values, turns them into promises (just in case a non-promise was passed) with `p => Promise.resolve(p)`, and then adds `.then` handler to every one. -That handler turns a successful result `v` into `{state:'fulfilled', value:v}`, and an error `r` into `{state:'rejected', reason:r}`. That's exactly the format of `Promise.allSettled`. +That handler turns a successful result `value` into `{state:'fulfilled', value}`, and an error `reason` into `{state:'rejected', reason}`. That's exactly the format of `Promise.allSettled`. Now we can use `Promise.allSettled` to get the results of *all* given promises, even if some of them reject. ## Promise.race -Similar to `Promise.all`, but waits only for the first settled promise, and gets its result (or error). +Similar to `Promise.all`, but waits only for the first settled promise and gets its result (or error). The syntax is: @@ -222,9 +222,11 @@ The first promise here was fastest, so it became the result. After the first set Methods `Promise.resolve` and `Promise.reject` are rarely needed in modern code, because `async/await` syntax (we'll cover it [a bit later](info:async-await)) makes them somewhat obsolete. -We cover them here for completeness, and for those who can't use `async/await` for some reason. +We cover them here for completeness and for those who can't use `async/await` for some reason. -- `Promise.resolve(value)` creates a resolved promise with the result `value`. +### Promise.resolve + +`Promise.resolve(value)` creates a resolved promise with the result `value`. Same as: @@ -234,7 +236,7 @@ let promise = new Promise(resolve => resolve(value)); The method is used for compatibility, when a function is expected to return a promise. -For example, `loadCached` function below fetches a URL and remembers (caches) its content. For future calls with the same URL it immediately gets the previous content from cache, but uses `Promise.resolve` to make a promise of it, so that the returned value is always a promise: +For example, the `loadCached` function below fetches a URL and remembers (caches) its content. For future calls with the same URL it immediately gets the previous content from cache, but uses `Promise.resolve` to make a promise of it, so the returned value is always a promise: ```js let cache = new Map(); @@ -259,7 +261,7 @@ We can write `loadCached(url).then(…)`, because the function is guaranteed to ### Promise.reject -- `Promise.reject(error)` creates a rejected promise with `error`. +`Promise.reject(error)` creates a rejected promise with `error`. Same as: diff --git a/1-js/11-async/06-promisify/article.md b/1-js/11-async/06-promisify/article.md index 6d91c0490..4ef622546 100644 --- a/1-js/11-async/06-promisify/article.md +++ b/1-js/11-async/06-promisify/article.md @@ -1,8 +1,8 @@ # Promisification -Promisification -- is a long word for a simple transform. It's conversion of a function that accepts a callback into a function returning a promise. +"Promisification" is a long word for a simple transformation. It's the conversion of a function that accepts a callback into a function that returns a promise. -Such transforms are often needed in real-life, as many functions and libraries are callback-based. But promises are more convenient. So it makes sense to promisify those. +Such transformations are often required in real-life, as many functions and libraries are callback-based. But promises are more convenient, so it makes sense to promisify them. For instance, we have `loadScript(src, callback)` from the chapter . @@ -21,7 +21,7 @@ function loadScript(src, callback) { // loadScript('path/script.js', (err, script) => {...}) ``` -Let's promisify it. The new `loadScriptPromise(src)` function will do the same, but accept only `src` (no `callback`) and return a promise. +Let's promisify it. The new `loadScriptPromise(src)` function achieves the same result, but it accepts only `src` (no `callback`) and returns a promise. ```js let loadScriptPromise = function(src) { @@ -41,9 +41,7 @@ Now `loadScriptPromise` fits well in promise-based code. As we can see, it delegates all the work to the original `loadScript`, providing its own callback that translates to promise `resolve/reject`. -In practice we'll probably need to promisify many functions, it makes sense to use a helper. - -We'll call it `promisify(f)`: it accepts a to-promisify function `f` and returns a wrapper function. +In practice we'll probably need to promisify many functions, so it makes sense to use a helper. We'll call it `promisify(f)`: it accepts a to-promisify function `f` and returns a wrapper function. That wrapper does the same as in the code above: returns a promise and passes the call to the original `f`, tracking the result in a custom callback: @@ -53,7 +51,7 @@ function promisify(f) { return new Promise((resolve, reject) => { function callback(err, result) { // our custom callback for f if (err) { - return reject(err); + reject(err); } else { resolve(result); } @@ -84,7 +82,7 @@ function promisify(f, manyArgs = false) { return new Promise((resolve, reject) => { function *!*callback(err, ...results*/!*) { // our custom callback for f if (err) { - return reject(err); + reject(err); } else { // resolve with all callback results if manyArgs is specified *!*resolve(manyArgs ? results : results[0]);*/!* @@ -103,7 +101,7 @@ f = promisify(f, true); f(...).then(arrayOfResults => ..., err => ...) ``` -For more exotic callback formats, like those without `err` at all: `callback(result)`, we can promisify such functions without using the helper, manually. +For more exotic callback formats, like those without `err` at all: `callback(result)`, we can promisify such functions manually without using the helper. There are also modules with a bit more flexible promisification functions, e.g. [es6-promisify](https://github.com/digitaldesignlabs/es6-promisify). In Node.js, there's a built-in `util.promisify` function for that. diff --git a/1-js/11-async/07-microtask-queue/article.md b/1-js/11-async/07-microtask-queue/article.md index 7691ba3be..4e01493f0 100644 --- a/1-js/11-async/07-microtask-queue/article.md +++ b/1-js/11-async/07-microtask-queue/article.md @@ -3,9 +3,9 @@ Promise handlers `.then`/`.catch`/`.finally` are always asynchronous. -Even when a Promise is immediately resolved, the code on the lines *below* `.then`/`.catch`/`.finally` will still execute before these handlers . +Even when a Promise is immediately resolved, the code on the lines *below* `.then`/`.catch`/`.finally` will still execute before these handlers. -Here's the demo: +Here's a demo: ```js run let promise = Promise.resolve(); @@ -23,14 +23,14 @@ Why did the `.then` trigger afterwards? What's going on? ## Microtasks queue -Asynchronous tasks need proper management. For that, the standard specifies an internal queue `PromiseJobs`, more often referred to as "microtask queue" (v8 term). +Asynchronous tasks need proper management. For that, the ECMA standard specifies an internal queue `PromiseJobs`, more often referred to as the "microtask queue" (ES8 term). -As said in the [specification](https://tc39.github.io/ecma262/#sec-jobs-and-job-queues): +As stated in the [specification](https://tc39.github.io/ecma262/#sec-jobs-and-job-queues): - The queue is first-in-first-out: tasks enqueued first are run first. - Execution of a task is initiated only when nothing else is running. -Or, to say that simply, when a promise is ready, its `.then/catch/finally` handlers are put into the queue. They are not executed yet. When the JavaScript engine becomes free from the current code, it takes a task from the queue and executes it. +Or, to say more simply, when a promise is ready, its `.then/catch/finally` handlers are put into the queue; they are not executed yet. When the JavaScript engine becomes free from the current code, it takes a task from the queue and executes it. That's why "code finished" in the example above shows first. @@ -38,7 +38,7 @@ That's why "code finished" in the example above shows first. Promise handlers always go through this internal queue. -If there's a chain with multiple `.then/catch/finally`, then every one of them is executed asynchronously. That is, it first gets queued, and executed when the current code is complete and previously queued handlers are finished. +If there's a chain with multiple `.then/catch/finally`, then every one of them is executed asynchronously. That is, it first gets queued, then executed when the current code is complete and previously queued handlers are finished. **What if the order matters for us? How can we make `code finished` run after `promise done`?** @@ -54,11 +54,11 @@ Now the order is as intended. ## Unhandled rejection -Remember the `unhandledrejection` event from the chapter ? +Remember the `unhandledrejection` event from the article ? Now we can see exactly how JavaScript finds out that there was an unhandled rejection. -**"Unhandled rejection" occurs when a promise error is not handled at the end of the microtask queue.** +**An "unhandled rejection" occurs when a promise error is not handled at the end of the microtask queue.** Normally, if we expect an error, we add `.catch` to the promise chain to handle it: @@ -72,7 +72,7 @@ promise.catch(err => alert('caught')); window.addEventListener('unhandledrejection', event => alert(event.reason)); ``` -...But if we forget to add `.catch`, then, after the microtask queue is empty, the engine triggers the event: +But if we forget to add `.catch`, then, after the microtask queue is empty, the engine triggers the event: ```js run let promise = Promise.reject(new Error("Promise Failed!")); @@ -93,20 +93,20 @@ setTimeout(() => promise.catch(err => alert('caught')), 1000); window.addEventListener('unhandledrejection', event => alert(event.reason)); ``` -Now, if you run it, we'll see `Promise Failed!` first and then `caught`. +Now, if we run it, we'll see `Promise Failed!` first and then `caught`. -If we didn't know about the microtasks queue, we could wonder: "Why did `unhandledrejection` handler run? We did catch the error!". +If we didn't know about the microtasks queue, we could wonder: "Why did `unhandledrejection` handler run? We did catch and handle the error!" -But now we understand that `unhandledrejection` is generated when the microtask queue is complete: the engine examines promises and, if any of them is in "rejected" state, then the event triggers. +But now we understand that `unhandledrejection` is generated when the microtask queue is complete: the engine examines promises and, if any of them is in the "rejected" state, then the event triggers. -In the example above, `.catch` added by `setTimeout` also triggers, but later, after `unhandledrejection` has already occurred, so that doesn't change anything. +In the example above, `.catch` added by `setTimeout` also triggers. But it does so later, after `unhandledrejection` has already occurred, so it doesn't change anything. ## Summary -Promise handling is always asynchronous, as all promise actions pass through the internal "promise jobs" queue, also called "microtask queue" (v8 term). +Promise handling is always asynchronous, as all promise actions pass through the internal "promise jobs" queue, also called "microtask queue" (ES8 term). -So, `.then/catch/finally` handlers are always called after the current code is finished. +So `.then/catch/finally` handlers are always called after the current code is finished. If we need to guarantee that a piece of code is executed after `.then/catch/finally`, we can add it into a chained `.then` call. -In most Javascript engines, including browsers and Node.js, the concept of microtasks is closely tied with "event loop" and "macrotasks". As these have no direct relation to promises, they are covered in another part of the tutorial, in the chapter . +In most Javascript engines, including browsers and Node.js, the concept of microtasks is closely tied with the "event loop" and "macrotasks". As these have no direct relation to promises, they are covered in another part of the tutorial, in the article . diff --git a/1-js/11-async/08-async-await/01-rewrite-async/task.md b/1-js/11-async/08-async-await/01-rewrite-async/task.md index ad33fdb23..e2fd375d9 100644 --- a/1-js/11-async/08-async-await/01-rewrite-async/task.md +++ b/1-js/11-async/08-async-await/01-rewrite-async/task.md @@ -15,6 +15,6 @@ function loadJson(url) { }) } -loadJson('no-such-user.json') // (3) +loadJson('no-such-user.json') .catch(alert); // Error: 404 ``` diff --git a/1-js/11-async/08-async-await/article.md b/1-js/11-async/08-async-await/article.md index 85c90c44c..dfb8a9d59 100644 --- a/1-js/11-async/08-async-await/article.md +++ b/1-js/11-async/08-async-await/article.md @@ -14,7 +14,7 @@ async function f() { The word "async" before a function means one simple thing: a function always returns a promise. Other values are wrapped in a resolved promise automatically. -For instance, this function returns a resolved promise with the result of `1`, let's test it: +For instance, this function returns a resolved promise with the result of `1`; let's test it: ```js run async function f() { @@ -24,7 +24,7 @@ async function f() { f().then(alert); // 1 ``` -...We could explicitly return a promise, that would be the same: +...We could explicitly return a promise, which would be the same: ```js run async function f() { @@ -67,7 +67,7 @@ f(); The function execution "pauses" at the line `(*)` and resumes when the promise settles, with `result` becoming its result. So the code above shows "done!" in one second. -Let's emphasize: `await` literally makes JavaScript wait until the promise settles, and then go on with the result. That doesn't cost any CPU resources, because the engine can do other jobs meanwhile: execute other scripts, handle events etc. +Let's emphasize: `await` literally makes JavaScript wait until the promise settles, and then go on with the result. That doesn't cost any CPU resources, because the engine can do other jobs in the meantime: execute other scripts, handle events, etc. It's just a more elegant syntax of getting the promise result than `promise.then`, easier to read and write. @@ -130,7 +130,7 @@ let response = await fetch('/article/promise-chaining/user.json'); let user = await response.json(); ``` -We can wrap it into an anonymous async function, like this: +But we can wrap it into an anonymous async function, like this: ```js (async () => { @@ -143,9 +143,9 @@ We can wrap it into an anonymous async function, like this: ```` ````smart header="`await` accepts \"thenables\"" -Like `promise.then`, `await` allows to use thenable objects (those with a callable `then` method). The idea is that a 3rd-party object may not be a promise, but promise-compatible: if it supports `.then`, that's enough to use with `await`. +Like `promise.then`, `await` allows us to use thenable objects (those with a callable `then` method). The idea is that a third-party object may not be a promise, but promise-compatible: if it supports `.then`, that's enough to use it with `await`. -Here's a demo `Thenable` class, the `await` below accepts its instances: +Here's a demo `Thenable` class; the `await` below accepts its instances: ```js run class Thenable { @@ -168,7 +168,7 @@ async function f() { f(); ``` -If `await` gets a non-promise object with `.then`, it calls that method providing built-in functions `resolve`, `reject` as arguments (just as it does for a regular `Promise` executor). Then `await` waits until one of them is called (in the example above it happens in the line `(*)`) and then proceeds with the result. +If `await` gets a non-promise object with `.then`, it calls that method providing the built-in functions `resolve` and `reject` as arguments (just as it does for a regular `Promise` executor). Then `await` waits until one of them is called (in the example above it happens in the line `(*)`) and then proceeds with the result. ```` ````smart header="Async class methods" @@ -192,7 +192,7 @@ The meaning is the same: it ensures that the returned value is a promise and ena ```` ## Error handling -If a promise resolves normally, then `await promise` returns the result. But in case of a rejection, it throws the error, just as if there were a `throw` statement at that line. +If a promise resolves normally, then `await promise` returns the result. But in the case of a rejection, it throws the error, just as if there were a `throw` statement at that line. This code: @@ -204,7 +204,7 @@ async function f() { } ``` -...Is the same as this: +...is the same as this: ```js async function f() { @@ -233,7 +233,7 @@ async function f() { f(); ``` -In case of an error, the control jumps to the `catch` block. We can also wrap multiple lines: +In the case of an error, the control jumps to the `catch` block. We can also wrap multiple lines: ```js run async function f() { @@ -263,15 +263,13 @@ f().catch(alert); // TypeError: failed to fetch // (*) */!* ``` -If we forget to add `.catch` there, then we get an unhandled promise error (viewable in the console). We can catch such errors using a global event handler as described in the chapter . +If we forget to add `.catch` there, then we get an unhandled promise error (viewable in the console). We can catch such errors using a global `unhandledrejection` event handler as described in the chapter . ```smart header="`async/await` and `promise.then/catch`" -When we use `async/await`, we rarely need `.then`, because `await` handles the waiting for us. And we can use a regular `try..catch` instead of `.catch`. That's usually (not always) more convenient. +When we use `async/await`, we rarely need `.then`, because `await` handles the waiting for us. And we can use a regular `try..catch` instead of `.catch`. That's usually (but not always) more convenient. -But at the top level of the code, when we're outside of any `async` function, we're syntactically unable to use `await`, so it's a normal practice to add `.then/catch` to handle the final result or falling-through errors. - -Like in the line `(*)` of the example above. +But at the top level of the code, when we're outside any `async` function, we're syntactically unable to use `await`, so it's a normal practice to add `.then/catch` to handle the final result or falling-through error, like in the line `(*)` of the example above. ``` ````smart header="`async/await` works well with `Promise.all`" @@ -286,7 +284,7 @@ let results = await Promise.all([ ]); ``` -In case of an error, it propagates as usual: from the failed promise to `Promise.all`, and then becomes an exception that we can catch using `try..catch` around the call. +In the case of an error, it propagates as usual, from the failed promise to `Promise.all`, and then becomes an exception that we can catch using `try..catch` around the call. ```` @@ -295,13 +293,13 @@ In case of an error, it propagates as usual: from the failed promise to `Promise The `async` keyword before a function has two effects: 1. Makes it always return a promise. -2. Allows to use `await` in it. +2. Allows `await` to be used in it. The `await` keyword before a promise makes JavaScript wait until that promise settles, and then: -1. If it's an error, the exception is generated, same as if `throw error` were called at that very place. +1. If it's an error, the exception is generated — same as if `throw error` were called at that very place. 2. Otherwise, it returns the result. -Together they provide a great framework to write asynchronous code that is easy both to read and write. +Together they provide a great framework to write asynchronous code that is easy to both read and write. -With `async/await` we rarely need to write `promise.then/catch`, but we still shouldn't forget that they are based on promises, because sometimes (e.g. in the outermost scope) we have to use these methods. Also `Promise.all` is a nice thing to wait for many tasks simultaneously. +With `async/await` we rarely need to write `promise.then/catch`, but we still shouldn't forget that they are based on promises, because sometimes (e.g. in the outermost scope) we have to use these methods. Also `Promise.all` is nice when we are waiting for many tasks simultaneously. diff --git a/1-js/12-generators-iterators/1-generators/article.md b/1-js/12-generators-iterators/1-generators/article.md index 0ae427b11..e77ceb66d 100644 --- a/1-js/12-generators-iterators/1-generators/article.md +++ b/1-js/12-generators-iterators/1-generators/article.md @@ -102,7 +102,7 @@ But usually the first syntax is preferred, as the star `*` denotes that it's a g As you probably already guessed looking at the `next()` method, generators are [iterable](info:iterable). -We can get loop over values by `for..of`: +We can loop over their values using `for..of`: ```js run function* generateSequence() { @@ -140,7 +140,7 @@ for(let value of generator) { } ``` -As generators are iterable, we can call all related functionality, e.g. the spread operator `...`: +As generators are iterable, we can call all related functionality, e.g. the spread syntax `...`: ```js run function* generateSequence() { @@ -154,7 +154,7 @@ let sequence = [0, ...generateSequence()]; alert(sequence); // 0, 1, 2, 3 ``` -In the code above, `...generateSequence()` turns the iterable generator object into an array of items (read more about the spread operator in the chapter [](info:rest-parameters-spread-operator#spread-operator)) +In the code above, `...generateSequence()` turns the iterable generator object into an array of items (read more about the spread syntax in the chapter [](info:rest-parameters-spread#spread-syntax)) ## Using generators for iterables @@ -314,11 +314,11 @@ alert(str); // 0..9A..Za..z A generator composition is a natural way to insert a flow of one generator into another. It doesn't use extra memory to store intermediate results. -## "yield" is a two-way road +## "yield" is a two-way street Until this moment, generators were similar to iterable objects, with a special syntax to generate values. But in fact they are much more powerful and flexible. -That's because `yield` is a two-way road: it not only returns the result outside, but also can pass the value inside the generator. +That's because `yield` is a two-way street: it not only returns the result to the outside, but also can pass the value inside the generator. To do so, we should call `generator.next(arg)`, with an argument. That argument becomes the result of `yield`. @@ -347,7 +347,7 @@ generator.next(4); // --> pass the result into the generator 2. Then, as shown at the picture above, the result of `yield` gets into the `question` variable in the calling code. 3. On `generator.next(4)`, the generator resumes, and `4` gets in as the result: `let result = 4`. -Please note, the outer code does not have to immediately call`next(4)`. It may take time. That's not a problem: the generator will wait. +Please note, the outer code does not have to immediately call `next(4)`. It may take time. That's not a problem: the generator will wait. For instance: diff --git a/1-js/12-generators-iterators/2-async-iterators-generators/article.md b/1-js/12-generators-iterators/2-async-iterators-generators/article.md index 9931f55d4..d5a746ff9 100644 --- a/1-js/12-generators-iterators/2-async-iterators-generators/article.md +++ b/1-js/12-generators-iterators/2-async-iterators-generators/article.md @@ -1,7 +1,7 @@ # Async iterators and generators -Asynchronous iterators allow to iterate over data that comes asynchronously, on-demand. For instance, when we download something chunk-by-chunk over a network. Asynchronous generators make it even more convenient. +Asynchronous iterators allow us to iterate over data that comes asynchronously, on-demand. Like, for instance, when we download something chunk-by-chunk over a network. And asynchronous generators make it even more convenient. Let's see a simple example first, to grasp the syntax, and then review a real-life use case. @@ -52,7 +52,7 @@ If necessary, please refer to the [chapter about iterables](info:iterable) for d To make the object iterable asynchronously: 1. We need to use `Symbol.asyncIterator` instead of `Symbol.iterator`. 2. `next()` should return a promise. -3. To iterate over such an object, we should use `for await (let item of iterable)` loop. +3. To iterate over such an object, we should use a `for await (let item of iterable)` loop. Let's make an iterable `range` object, like the one before, but now it will return values asynchronously, one per second: @@ -109,7 +109,7 @@ As we can see, the structure is similar to regular iterators: 1. To make an object asynchronously iterable, it must have a method `Symbol.asyncIterator` `(1)`. 2. This method must return the object with `next()` method returning a promise `(2)`. -3. The `next()` method doesn't have to be `async`, it may be a regular method returning a promise, but `async` allows to use `await`, so that's convenient. Here we just delay for a second `(3)`. +3. The `next()` method doesn't have to be `async`, it may be a regular method returning a promise, but `async` allows us to use `await`, so that's convenient. Here we just delay for a second `(3)`. 4. To iterate, we use `for await(let value of range)` `(4)`, namely add "await" after "for". It calls `range[Symbol.asyncIterator]()` once, and then its `next()` for values. Here's a small cheatsheet: @@ -120,11 +120,10 @@ Here's a small cheatsheet: | `next()` return value is | any value | `Promise` | | to loop, use | `for..of` | `for await..of` | - -````warn header="The spread operator `...` doesn't work asynchronously" +````warn header="The spread syntax `...` doesn't work asynchronously" Features that require regular, synchronous iterators, don't work with asynchronous ones. -For instance, a spread operator won't work: +For instance, a spread syntax won't work: ```js alert( [...range] ); // Error, no Symbol.iterator ``` @@ -269,7 +268,7 @@ So far we've seen simple examples, to gain basic understanding. Now let's review There are many online services that deliver paginated data. For instance, when we need a list of users, a request returns a pre-defined count (e.g. 100 users) - "one page", and provides a URL to the next page. -This pattern is very common. It's not about users, but just about anything. For instance, GitHub allows to retrieve commits in the same, paginated fashion: +This pattern is very common. It's not about users, but just about anything. For instance, GitHub allows us to retrieve commits in the same, paginated fashion: - We should make a request to URL in the form `https://api.github.com/repos//commits`. - It responds with a JSON of 30 commits, and also provides a link to the next page in the `Link` header. @@ -313,10 +312,10 @@ async function* fetchCommits(repo) { } ``` -1. We use the browser [fetch](info:fetch) method to download from a remote URL. It allows to supply authorization and other headers if needed, here GitHub requires `User-Agent`. -2. The fetch result is parsed as JSON, that's again a `fetch`-specific method. -3. We should get the next page URL from the `Link` header of the response. It has a special format, so we use a regexp for that. The next page URL may look like `https://api.github.com/repositories/93253246/commits?page=2`, it's generated by GitHub itself. -4. Then we yield all commits received, and when they finish -- the next `while(url)` iteration will trigger, making one more request. +1. We use the browser [fetch](info:fetch) method to download from a remote URL. It allows us to supply authorization and other headers if needed -- here GitHub requires `User-Agent`. +2. The fetch result is parsed as JSON. That's again a `fetch`-specific method. +3. We should get the next page URL from the `Link` header of the response. It has a special format, so we use a regexp for that. The next page URL may look like `https://api.github.com/repositories/93253246/commits?page=2`. It's generated by GitHub itself. +4. Then we yield all commits received, and when they finish, the next `while(url)` iteration will trigger, making one more request. An example of use (shows commit authors in console): @@ -361,4 +360,4 @@ Syntax differences between async and regular generators: In web-development we often meet streams of data, when it flows chunk-by-chunk. For instance, downloading or uploading a big file. -We can use async generators to process such data. It's also noteworthy that in some environments, such as browsers, there's also another API called Streams, that provides special interfaces to work with such streams, to transform the data and to pass it from one stream to another (e.g. download from one place and immediately send elsewhere). +We can use async generators to process such data. It's also noteworthy that in some environments, like in browsers, there's also another API called Streams, that provides special interfaces to work with such streams, to transform the data and to pass it from one stream to another (e.g. download from one place and immediately send elsewhere). diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md index f21367c88..319794c91 100644 --- a/1-js/13-modules/01-modules-intro/article.md +++ b/1-js/13-modules/01-modules-intro/article.md @@ -24,7 +24,7 @@ A module is just a file. One script is one module. Modules can load each other and use special directives `export` and `import` to interchange functionality, call functions of one module from another one: - `export` keyword labels variables and functions that should be accessible from outside the current module. -- `import` allows to import functionality from other modules. +- `import` allows the import of functionality from other modules. For instance, if we have a file `sayHi.js` exporting a function: @@ -45,7 +45,7 @@ alert(sayHi); // function... sayHi('John'); // Hello, John! ``` -The `import` directive loads the module by path `./sayHi.js` relative the current file and assigns exported function `sayHi` to the corresponding variable. +The `import` directive loads the module by path `./sayHi.js` relative to the current file, and assigns exported function `sayHi` to the corresponding variable. Let's run the example in-browser. @@ -85,7 +85,7 @@ Modules are expected to `export` what they want to be accessible from outside an So we should import `user.js` into `hello.js` and get the required functionality from it instead of relying on global variables. -That's the correct variant: +This is the correct variant: [codetabs src="scopes-working" height="140" current="hello.js"] @@ -110,7 +110,7 @@ If we really need to make a window-level global variable, we can explicitly assi If the same module is imported into multiple other places, its code is executed only the first time, then exports are given to all importers. -That has important consequences. Let's see that on examples. +That has important consequences. Let's look at them using examples: First, if executing a module code brings side-effects, like showing a message, then importing it multiple times will trigger it only once -- the first time: @@ -163,7 +163,7 @@ alert(admin.name); // Pete So, let's reiterate -- the module is executed only once. Exports are generated, and then they are shared between importers, so if something changes the `admin` object, other modules will see that. -Such behavior allows to *configure* modules on first import. We can setup its properties once, and then in further imports it's ready. +Such behavior allows us to *configure* modules on first import. We can setup its properties once, and then in further imports it's ready. For instance, the `admin.js` module may provide certain functionality, but expect the credentials to come into the `admin` object from outside: @@ -268,11 +268,11 @@ Please note: the second script actually runs before the first! So we'll see `und That's because modules are deferred, so we wait for the document to be processed. The regular script runs immediately, so we see its output first. -When using modules, we should be aware that HTML-page shows up as it loads, and JavaScript modules run after that, so the user may see the page before the JavaScript application is ready. Some functionality may not work yet. We should put "loading indicators", or otherwise ensure that the visitor won't be confused by that. +When using modules, we should be aware that the HTML page shows up as it loads, and JavaScript modules run after that, so the user may see the page before the JavaScript application is ready. Some functionality may not work yet. We should put "loading indicators", or otherwise ensure that the visitor won't be confused by that. ### Async works on inline scripts -For non-module scripts, `async` attribute only works on external scripts. Async scripts run immediately when ready, independently of other scripts or the HTML document. +For non-module scripts, the `async` attribute only works on external scripts. Async scripts run immediately when ready, independently of other scripts or the HTML document. For module scripts, it works on inline scripts as well. diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index cb45b1fdf..4fe5322fc 100644 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -439,7 +439,7 @@ sayHi(); import {sayHi} from './say.js'; // import at the end of the file ``` -In practice imports are usually at the start of the file, but that's only for better convenience. +In practice imports are usually at the start of the file, but that's only for more convenience. **Please note that import/export statements don't work if inside `{...}`.** diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md index 63a3158de..84a2ef553 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -94,5 +94,5 @@ say(); ```smart যদিও `import()` দেখতে ফাংশন কলের মতো, কিন্তু এটি একটি (`super()` মতো) বিশেষ সিন্টেক্স যার জন্য "parentheses" ব্যবহার করতে হয়। `). -তাই আমারা `import` কে কোন ভেরিয়েবলে কপি অথবা `call/apply` করতে পারি না। +তাই আমারা `import` কে কোন ভেরিয়েবলে কপি অথবা `call/apply` করতে পারি না। এটা কোন ফাংশন নয়। ``` diff --git a/1-js/99-js-misc/01-proxy/article.md b/1-js/99-js-misc/01-proxy/article.md index 0ae375f77..ae06a580e 100644 --- a/1-js/99-js-misc/01-proxy/article.md +++ b/1-js/99-js-misc/01-proxy/article.md @@ -2,7 +2,9 @@ A `Proxy` object wraps another object and intercepts operations, like reading/writing properties and others, optionally handling them on its own, or transparently allowing the object to handle them. -Proxies are used in many libraries and some browser frameworks. We'll see many practical applications in this chapter. +Proxies are used in many libraries and some browser frameworks. We'll see many practical applications in this article. + +## Proxy The syntax: @@ -244,7 +246,7 @@ If we forget to do it or return any falsy value, the operation triggers `TypeErr Such methods differ in details: - `Object.getOwnPropertyNames(obj)` returns non-symbol keys. - `Object.getOwnPropertySymbols(obj)` returns symbol keys. -- `Object.keys/values()` returns non-symbol keys/values with `enumerable` flag (property flags were explained in the chapter ). +- `Object.keys/values()` returns non-symbol keys/values with `enumerable` flag (property flags were explained in the article ). - `for..in` loops over non-symbol keys with `enumerable` flag, and also prototype keys. ...But all of them start with that list. @@ -446,7 +448,7 @@ Besides, an object may be proxied multiple times (multiple proxies may add diffe So, such a proxy shouldn't be used everywhere. ```smart header="Private properties of a class" -Modern JavaScript engines natively support private properties in classes, prefixed with `#`. They are described in the chapter . No proxies required. +Modern JavaScript engines natively support private properties in classes, prefixed with `#`. They are described in the article . No proxies required. Such properties have their own issues though. In particular, they are not inherited. ``` @@ -485,7 +487,7 @@ range = new Proxy(range, { *!* has(target, prop) { */!* - return prop >= target.start && prop <= target.end + return prop >= target.start && prop <= target.end; } }); @@ -507,9 +509,9 @@ The `apply(target, thisArg, args)` trap handles calling a proxy as function: - `thisArg` is the value of `this`. - `args` is a list of arguments. -For example, let's recall `delay(f, ms)` decorator, that we did in the chapter . +For example, let's recall `delay(f, ms)` decorator, that we did in the article . -In that chapter we did it without proxies. A call to `delay(f, ms)` returned a function that forwards all calls to `f` after `ms` milliseconds. +In that article we did it without proxies. A call to `delay(f, ms)` returned a function that forwards all calls to `f` after `ms` milliseconds. Here's the previous, function-based implementation: @@ -587,7 +589,7 @@ The result is the same, but now not only calls, but all operations on the proxy We've got a "richer" wrapper. -Other traps exist: the full list is in the beginning of this chapter. Their usage pattern is similar to the above. +Other traps exist: the full list is in the beginning of this article. Their usage pattern is similar to the above. ## Reflect @@ -619,7 +621,7 @@ alert(user.name); // John In particular, `Reflect` allows us to call operators (`new`, `delete`...) as functions (`Reflect.construct`, `Reflect.deleteProperty`, ...). That's an interesting capability, but here another thing is important. -**For every internal method, trappable by `Proxy`, there's a corresponding method in `Reflect`, with the same name and arguments as `Proxy` trap.** +**For every internal method, trappable by `Proxy`, there's a corresponding method in `Reflect`, with the same name and arguments as the `Proxy` trap.** So we can use `Reflect` to forward an operation to the original object. diff --git a/1-js/99-js-misc/03-currying-partials/article.md b/1-js/99-js-misc/03-currying-partials/article.md index 1ae2a12a0..bb308847c 100644 --- a/1-js/99-js-misc/03-currying-partials/article.md +++ b/1-js/99-js-misc/03-currying-partials/article.md @@ -39,7 +39,7 @@ alert( curriedSum(1)(2) ); // 3 As you can see, the implementation is straightforward: it's just two wrappers. - The result of `curry(func)` is a wrapper `function(a)`. -- When it is called like `sum(1)`, the argument is saved in the Lexical Environment, and a new wrapper is returned `function(b)`. +- When it is called like `curriedSum(1)`, the argument is saved in the Lexical Environment, and a new wrapper is returned `function(b)`. - Then this wrapper is called with `2` as an argument, and it passes the call to the original `sum`. More advanced implementations of currying, such as [_.curry](https://lodash.com/docs#curry) from lodash library, return a wrapper that allows a function to be called both normally and partially: @@ -73,7 +73,7 @@ Let's curry it! log = _.curry(log); ``` -After that `log` work normally: +After that `log` works normally: ```js log(new Date(), "DEBUG", "some debug"); // log(a, b, c) @@ -111,7 +111,7 @@ So: ## Advanced curry implementation -In case you'd like to get in details, here's the "advanced" curry implementation for multi-argument functions that we could use above. +In case you'd like to get in to the details, here's the "advanced" curry implementation for multi-argument functions that we could use above. It's pretty short: @@ -175,7 +175,7 @@ For the call `curried(1)(2)(3)`: 2. The wrapper `pass` is called with `(2)`: it takes previous args (`1`), concatenates them with what it got `(2)` and calls `curried(1, 2)` with them together. As the argument count is still less than 3, `curry` returns `pass`. 3. The wrapper `pass` is called again with `(3)`, for the next call `pass(3)` takes previous args (`1`, `2`) and adds `3` to them, making the call `curried(1, 2, 3)` -- there are `3` arguments at last, they are given to the original function. -If that's still not obvious, just trace the calls sequence in your mind or on the paper. +If that's still not obvious, just trace the calls sequence in your mind or on paper. ```smart header="Fixed-length functions only" The currying requires the function to have a fixed number of arguments. @@ -191,6 +191,6 @@ But most implementations of currying in JavaScript are advanced, as described: t ## Summary -*Currying* is a transform that makes `f(a,b,c)` callable as `f(a)(b)(c)`. JavaScript implementations usually both keep the function callable normally and return the partial if arguments count is not enough. +*Currying* is a transform that makes `f(a,b,c)` callable as `f(a)(b)(c)`. JavaScript implementations usually both keep the function callable normally and return the partial if the arguments count is not enough. -Currying allows to easily get partials. As we've seen in the logging example: the universal function `log(date, importance, message)` after currying gives us partials when called with one argument like `log(date)` or two arguments `log(date, importance)`. +Currying allows us to easily get partials. As we've seen in the logging example, after currying the three argument universal function `log(date, importance, message)` gives us partials when called with one argument (like `log(date)`) or two arguments (like `log(date, importance)`). diff --git a/1-js/99-js-misc/05-bigint/article.md b/1-js/99-js-misc/05-bigint/article.md index 29c5e27da..72f06d0c7 100644 --- a/1-js/99-js-misc/05-bigint/article.md +++ b/1-js/99-js-misc/05-bigint/article.md @@ -45,7 +45,7 @@ alert(bigint + BigInt(number)); // 3 alert(Number(bigint) + number); // 3 ``` -The conversion of bigint to number is always silent, but if the bigint is too huge and won't fit the number type, then extra bits will be cut off, causing a precision loss. +The conversion operations are always silent, never give errors, but if the bigint is too huge and won't fit the number type, then extra bits will be cut off, so we should be careful doing such conversion. ````smart header="The unary plus is not supported on bigints" The unary plus operator `+value` is a well-known way to convert `value` to a number. @@ -69,7 +69,7 @@ alert( 2n > 1n ); // true alert( 2n > 1 ); // true ``` -As numbers and bigints belong to different types, they can be equal `==`, but not strictly equal `===`: +Please note though, as numbers and bigints belong to different types, they can be equal `==`, but not strictly equal `===`: ```js run alert( 1 == 1n ); // true @@ -101,15 +101,15 @@ alert( 0n || 2 ); // 2 (0n is considered falsy) Polyfilling bigints is tricky. The reason is that many JavaScript operators, such as `+`, `-` and so on behave differently with bigints compared to regular numbers. -For example, division of bigints always returns an integer. +For example, division of bigints always returns a bigint (rounded if necessary). -To emulate such behavior, a polyfill would need to replace all such operators with its functions. But doing so is cumbersome and would cost a lot of performance. +To emulate such behavior, a polyfill would need to analyze the code and replace all such operators with its functions. But doing so is cumbersome and would cost a lot of performance. So, there's no well-known good polyfill. -Although, the other way around is proposed by the developers of [https://github.com/GoogleChromeLabs/jsbi](JSBI) library. +Although, the other way around is proposed by the developers of [JSBI](https://github.com/GoogleChromeLabs/jsbi) library. -They suggest to use JSBI library calls instead of native bigints: +This library implements big numbers using its own methods. We can use them instead of native bigints: | Operation | native `BigInt` | JSBI | |-----------|-----------------|------| @@ -120,7 +120,9 @@ They suggest to use JSBI library calls instead of native bigints: ...And then use the polyfill (Babel plugin) to convert JSBI calls to native bigints for those browsers that support them. -In other words, this approach suggests that we write code in JSBI instead of native bigints. But JSBI works with numbers as with bigints internally, closely following the specification, so the code will be "bigint-ready". +In other words, this approach suggests that we write code in JSBI instead of native bigints. But JSBI works with numbers as with bigints internally, emulates them closely following the specification, so the code will be "bigint-ready". + +We can use such JSBI code "as is" for engines that don't support bigints and for those that do support - the polyfill will convert the calls to native bigints. ## References diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 332f57827..f7123d70d 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -201,7 +201,7 @@ The parent is available as `parentNode`. For example: -```js +```js run // parent of is alert( document.body.parentNode === document.documentElement ); // true diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index cc878009f..f5ab0b785 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -103,7 +103,7 @@ Here we look for all `
  • ` elements that are last children: This method is indeed powerful, because any CSS selector can be used. ```smart header="Can use pseudo-classes as well" -Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is over now (in nesting order: from the outermost `` to the most nested one). +Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is over now (in nesting order: from the outermost `` to the most nested one). ``` ## querySelector [#querySelector] @@ -178,7 +178,7 @@ So here we cover them mainly for completeness, while you can still find them in - `elem.getElementsByTagName(tag)` looks for elements with the given tag and returns the collection of them. The `tag` parameter can also be a star `"*"` for "any tags". - `elem.getElementsByClassName(className)` returns elements that have the given CSS class. -- `document.getElementsByName(name)` returns elements with the given `name` attribute, document-wide. very rarely used. +- `document.getElementsByName(name)` returns elements with the given `name` attribute, document-wide. Very rarely used. For instance: ```js diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md index 78bc3fd88..76469c187 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -20,7 +20,7 @@ The classes are: - [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- is the root "abstract" class. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events", we'll study them later. - [Node](http://dom.spec.whatwg.org/#interface-node) -- is also an "abstract" class, serving as a base for DOM nodes. It provides the core tree functionality: `parentNode`, `nextSibling`, `childNodes` and so on (they are getters). Objects of `Node` class are never created. But there are concrete node classes that inherit from it, namely: `Text` for text nodes, `Element` for element nodes and more exotic ones like `Comment` for comment nodes. -- [Element](http://dom.spec.whatwg.org/#interface-element) -- is a base class for DOM elements. It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. A browser supports not only HTML, but also XML and SVG. The `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` and `HTMLElement`. +- [Element](http://dom.spec.whatwg.org/#interface-element) -- is a base class for DOM elements. It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. A browser supports not only HTML, but also XML and SVG. The `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` and `HTMLElement`. - [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) -- is finally the basic class for all HTML elements. It is inherited by concrete HTML elements: - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- the class for `` elements, - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- the class for `` elements, @@ -36,7 +36,7 @@ It gets properties and methods as a superposition of (listed in inheritance orde - `HTMLInputElement` -- this class provides input-specific properties, - `HTMLElement` -- it provides common HTML element methods (and getters/setters), - `Element` -- provides generic element methods, -- `Node` -- provides common DOM node properties,. +- `Node` -- provides common DOM node properties, - `EventTarget` -- gives the support for events (to be covered), - ...and finally it inherits from `Object`, so "plain object" methods like `hasOwnProperty` are also available. diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md index 31bcf8760..49243e8e3 100644 --- a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md +++ b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md @@ -1,19 +1,18 @@ The solution is short, yet may look a bit tricky, so here I provide it with extensive comments: - ```js -let sortedRows = Array.from(table.rows) - .slice(1) - .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1); +let sortedRows = Array.from(table.tBodies[0].rows) // 1 + .sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML)); -table.tBodies[0].append(...sortedRows); +table.tBodies[0].append(...sortedRows); // (3) ``` -1. Get all ``, like `table.querySelectorAll('tr')`, then make an array from them, cause we need array methods. -2. The first TR (`table.rows[0]`) is actually a table header, so we take the rest by `.slice(1)`. -3. Then sort them comparing by the content of the first `` (the name field). -4. Now insert nodes in the right order by `.append(...sortedRows)`. +The step-by-step algorthm: + +1. Get all ``, from ``. +2. Then sort them comparing by the content of the first `` (the name field). +3. Now insert nodes in the right order by `.append(...sortedRows)`. - Tables always have an implicit `` element, so we need to take it and insert into it: a simple `table.append(...)` would fail. +We don't have to remove row elements, just "re-insert", they leave the old place automatically. - Please note: we don't have to remove them, just "re-insert", they leave the old place automatically. +P.S. In our case, there's an explicit `` in the table, but even if HTML table doesn't have ``, the DOM structure always has it. diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html b/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html index 81e985748..40692031a 100644 --- a/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html +++ b/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html @@ -1,37 +1,30 @@ - - - - - - - - - - - - - - - - - - - - - - - -
    NameSurnameAge
    JohnSmith10
    PeteBrown15
    AnnLee5
    + + + + + + + + + + + + + + + + + + + + +
    NameSurnameAge
    JohnSmith10
    PeteBrown15
    AnnLee5
    .........
    - - - - + table.tBodies[0].append(...sortedRows); + diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html b/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html index e41eb229f..9071c88ee 100644 --- a/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html +++ b/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html @@ -1,33 +1,27 @@ - - - - - - - - - - - - - - - - - - - - - - - -
    NameSurnameAge
    JohnSmith10
    PeteBrown15
    AnnLee5
    + + + + + + + + + + + + + + + + + + + + +
    NameSurnameAge
    JohnSmith10
    PeteBrown15
    AnnLee5
    .........
    - - - - + diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/task.md b/2-ui/1-document/07-modifying-document/12-sort-table/task.md index 41d6fca29..7cdba35bc 100644 --- a/2-ui/1-document/07-modifying-document/12-sort-table/task.md +++ b/2-ui/1-document/07-modifying-document/12-sort-table/task.md @@ -6,33 +6,29 @@ importance: 5 There's a table: +```html run - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
    NameSurnameAge
    JohnSmith10
    PeteBrown15
    AnnLee5
    .........
    NameSurnameAge
    JohnSmith10
    PeteBrown15
    AnnLee5
    .........
    +``` There may be more rows in it. diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md index 67bb5e13d..de8be56e9 100644 --- a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md +++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md @@ -3,7 +3,7 @@ We'll create the table as a string: `"...
    "`, and then assign it t The algorithm: 1. Create the table header with `` and weekday names. -1. Create the date object `d = new Date(year, month-1)`. That's the first day of `month` (taking into account that months in JavaScript start from `0`, not `1`). -2. First few cells till the first day of the month `d.getDay()` may be empty. Let's fill them in with ``. -3. Increase the day in `d`: `d.setDate(d.getDate()+1)`. If `d.getMonth()` is not yet the next month, then add the new cell `` to the calendar. If that's a Sunday, then add a newline "</tr><tr>". -4. If the month has finished, but the table row is not yet full, add empty `` into it, to make it square. +2. Create the date object `d = new Date(year, month-1)`. That's the first day of `month` (taking into account that months in JavaScript start from `0`, not `1`). +3. First few cells till the first day of the month `d.getDay()` may be empty. Let's fill them in with ``. +4. Increase the day in `d`: `d.setDate(d.getDate()+1)`. If `d.getMonth()` is not yet the next month, then add the new cell `` to the calendar. If that's a Sunday, then add a newline "</tr><tr>". +5. If the month has finished, but the table row is not yet full, add empty `` into it, to make it square. diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md index 34d441ae5..9154d43d6 100644 --- a/2-ui/1-document/08-styles-and-classes/article.md +++ b/2-ui/1-document/08-styles-and-classes/article.md @@ -249,7 +249,7 @@ For instance: ```smart header="Computed and resolved values" There are two concepts in [CSS](https://drafts.csswg.org/cssom/#resolved-values): -1. A *computed* style value is the value after all CSS rules and CSS inheritance is applied, as the result of the CSS cascade. It can look like `height:1em` or `font-size:125%`. +1. A *computed* style value is the value after all CSS rules and CSS inheritance is applied, as the result of the CSS cascade. It can look like `height:1em` or `font-size:125%`. 2. A *resolved* style value is the one finally applied to the element. Values like `1em` or `125%` are relative. The browser takes the computed value and makes all units fixed and absolute, for instance: `height:20px` or `font-size:16px`. For geometry properties resolved values may have a floating point, like `width:50.5px`. A long time ago `getComputedStyle` was created to get computed values, but it turned out that resolved values are much more convenient, and the standard changed. diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html index ca9c4d579..8f855ecfa 100755 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html @@ -9,7 +9,7 @@ background-color: #00FF00; position: relative; } - + #ball { position: absolute; } @@ -20,7 +20,7 @@
    - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    @@ -38,4 +38,4 @@ - \ No newline at end of file + diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md index c6fe6c3bb..afa1d8f50 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md @@ -24,17 +24,22 @@ ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'; ``` -**Attention: the pitfall!** +Now the ball is finally centered. + +````warn header="Attention: the pitfall!" The code won't work reliably while `` has no width/height: ```html ``` +```` When the browser does not know the width/height of an image (from tag attributes or CSS), then it assumes them to equal `0` until the image finishes loading. -After the first load browser usually caches the image, and on next loads it will have the size immediately. But on the first load the value of `ball.offsetWidth` is `0`. That leads to wrong coordinates. +So the value of `ball.offsetWidth` will be `0` until the image loads. That leads to wrong coordinates in the code above. + +After the first load, the browser usually caches the image, and on reloads it will have the size immediately. But on the first load the value of `ball.offsetWidth` is `0`. We should fix that by adding `width/height` to ``: diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html index 9ebe6001e..9f21e5421 100755 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html @@ -26,7 +26,7 @@ +```js +document.addEventListener("DOMContentLoaded", function() { + alert("DOM built"); // this way it works +}); ``` +So `addEventListener` is more universal. Although, such events are an exception rather than the rule. ```` ## Event object @@ -462,7 +446,7 @@ HTML attributes are used sparingly, because JavaScript in the middle of an HTML DOM properties are ok to use, but we can't assign more than one handler of the particular event. In many cases that limitation is not pressing. -The last way is the most flexible, but it is also the longest to write. There are few events that only work with it, for instance `transtionend` and `DOMContentLoaded` (to be covered). Also `addEventListener` supports objects as event handlers. In that case the method `handleEvent` is called in case of the event. +The last way is the most flexible, but it is also the longest to write. There are few events that only work with it, for instance `transitionend` and `DOMContentLoaded` (to be covered). Also `addEventListener` supports objects as event handlers. In that case the method `handleEvent` is called in case of the event. No matter how you assign the handler -- it gets an event object as the first argument. That object contains the details about what's happened. diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md index 1ac989c79..ac0186f42 100644 --- a/2-ui/2-events/02-bubbling-and-capturing/article.md +++ b/2-ui/2-events/02-bubbling-and-capturing/article.md @@ -204,7 +204,7 @@ elem.addEventListener("click", e => alert(2)); When an event happens -- the most nested element where it happens gets labeled as the "target element" (`event.target`). -- Then the event moves down from the document root to `event.target`, calling handlers assigned with `addEventListener(...., true)` on the way (`true` is a shorthand for `{capture: true}`). +- Then the event moves down from the document root to `event.target`, calling handlers assigned with `addEventListener(..., true)` on the way (`true` is a shorthand for `{capture: true}`). - Then handlers are called on the target element itself. - Then the event bubbles up from `event.target` up to the root, calling handlers assigned using `on` and `addEventListener` without the 3rd argument or with the 3rd argument `false/{capture:false}`. diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index 3d8beda0f..1fbb3f3bd 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -121,7 +121,7 @@ The first idea may be to assign a separate handler to each button. But there's a The handler reads the attribute and executes the method. Take a look at the working example: -```html autorun height=60 run +```html autorun height=60 run untrusted