From 06943827e54b7164546bde59debdc3639c6e7c72 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Tue, 22 Oct 2019 06:22:06 +0600 Subject: [PATCH 01/15] The old var translated --- 1-js/06-advanced-functions/04-var/article.md | 104 +++++++++---------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/1-js/06-advanced-functions/04-var/article.md b/1-js/06-advanced-functions/04-var/article.md index 02fd43fe5..4184bbcc6 100644 --- a/1-js/06-advanced-functions/04-var/article.md +++ b/1-js/06-advanced-functions/04-var/article.md @@ -1,23 +1,23 @@ -# The old "var" +# পুরাতন "var" -In the very first chapter about [variables](info:variables), we mentioned three ways of variable declaration: +অধ্যায়ের প্রথম দিকে আমরা উল্লেখ করেছিলাম [variables](info:variables) কে তিন ভাবে ঘোষণা করা যায়। -1. `let` -2. `const` -3. `var` +১। `let` +২। `const` +৩। `var` -`let` and `const` behave exactly the same way in terms of Lexical Environments. +লেক্সিকাল এনভায়রনমেন্টের ক্ষেত্রে `let` এবং `const` ঠিক একইভাবে আচরণ করে। -But `var` is a very different beast, that originates from very old times. It's generally not used in modern scripts, but still lurks in the old ones. +কিন্তু `var` সম্পূর্ণ ভিন্ন, যা খুব পুরানো কাল থেকেই উদ্ভূত হয়েছিল। এটি সাধারণত আধুনিক স্ক্রিপ্টগুলিতে ব্যবহৃত হয় না তবে এটি পুরানো স্ক্রিপ্টগুলিতে লুকিয়ে থাকে। -If you don't plan on meeting such scripts you may even skip this chapter or postpone it, but then there's a chance that it bites you later. +আপনি যদি এই জাতীয় স্ক্রিপ্টগুলি সম্পর্কে জানার পরিকল্পনা না করেন তবে আপনি এই অধ্যায়টি এড়িয়ে যেতে পারেন, তবে তা আপনাকে পরে সমসসায় ফেলতে পারে। -From the first sight, `var` behaves similar to `let`. That is, declares a variable: +প্রথমদিকে দেখতে `var` এর আচরন `let` এর মতো হয়ে থাকে। সেটা হলো একটি ভেরিয়েবল ঘোষণা করাঃ ```js run function sayHi() { - var phrase = "Hello"; // local variable, "var" instead of "let" + var phrase = "Hello"; // লোকাল ভেরিয়েবল, "let" এর পরিবর্তে "var" alert(phrase); // Hello } @@ -27,39 +27,39 @@ sayHi(); alert(phrase); // Error, phrase is not defined ``` -...But here are the differences. +...তবে এখানে পার্থক্য রয়েছে। -## "var" has no block scope +# "var" এর কোন ব্লকস্কোপ নেই। -Variables, declared with `var`, are either function-wide or global. They are visible through blocks. +যে সকল ভেরিয়েবল "var" দ্বারা ঘোষণা হয়, তারা হয় ফাংশন-ওয়াইড অথবা গ্লোবাল হয়ে থাকে। -For instance: +এই ক্ষেত্রেঃ ```js run if (true) { - var test = true; // use "var" instead of "let" + var test = true; // "let" এর পরিবর্তে "var" } *!* -alert(test); // true, the variable lives after if +alert(test); // true, "if" ব্লকের বাইরেও এটি বিদ্যমান। */!* ``` -As `var` ignores code blocks, we've got a global variable `test`. +`Var` কোড ব্লকগুলিকে উপেক্ষা করার সাথে সাথে আমরা একটি গ্লোবাল `test` ভেরিয়েবল পেয়েছি. -If we used `let test` instead of `var test`, then the variable would only be visible inside `if`: +যদি আমরা `var test` এর পরিবর্তে `let test` ব্যবহার করি, তবে ভেরিয়েবলটি কেবল `if` ব্লকের মধ্যে সীমাবদ্ধ থাকবেঃ ```js run if (true) { - let test = true; // use "let" + let test = true; // "let" এর ব্যবহার } *!* -alert(test); // Error: test is not defined +alert(test); // এরর: test নির্ধারণ করা নেই */!* ``` -The same thing for loops: `var` cannot be block- or loop-local: +লুপের ক্ষেত্রেও একই রকমঃ `var` লুপ অথবা ব্লকের লোকাল হতে পারে নাঃ ```js for (var i = 0; i < 10; i++) { @@ -67,11 +67,11 @@ for (var i = 0; i < 10; i++) { } *!* -alert(i); // 10, "i" is visible after loop, it's a global variable +alert(i); // 10, "i" লুপের পরেও বিদ্যমান, এটি একটি গ্লোবাল ভেরিয়েবল। */!* ``` -If a code block is inside a function, then `var` becomes a function-level variable: +যদি কোন কোড ব্লক ফাংশনের ভিতরে থাকে, সেক্ষেত্রে `var` ফাংশন লেভেল ভেরিয়েবল হয়ে যায়। ```js run function sayHi() { @@ -79,22 +79,22 @@ function sayHi() { var phrase = "Hello"; } - alert(phrase); // works + alert(phrase); // কাজ করবে } sayHi(); -alert(phrase); // Error: phrase is not defined (Check the Developer Console) +alert(phrase); // এরর: phrase নির্ধারণ করা নেই (ডেভলপার কনসোল চেক করুন) ``` -As we can see, `var` pierces through `if`, `for` or other code blocks. That's because a long time ago in JavaScript blocks had no Lexical Environments. And `var` is a remnant of that. +আমারা যেটা দেখলাম, `var` - `if`, `for` অথবা অন্য ব্লক ভেদ করে বাইরে আসতে পারে। তার কারন অনেক আগে জাভাস্ক্রিপ্টে কোন লেক্সিকাল এনভাইরমেন্ট ছিল না। এবং `var` তারই একটি অংশ। -## "var" declarations are processed at the function start +## "VAR" ফাংশনের শুরুতেই ঘোষিত হয়। -`var` declarations are processed when the function starts (or script starts for globals). +ফাংশনের শুরুতেই `var` ঘোষিত হয়ে যায়(অথবা স্ক্রিপ্ট গ্লোবালের জন্য শুরু হয়) -In other words, `var` variables are defined from the beginning of the function, no matter where the definition is (assuming that the definition is not in the nested function). +অন্যভাবে বলা যায়, `var` ভেরিয়্যবলগুলো ফাংশনের শুরুতেই ঘোষিত হয়, সেটাকে যেখানেই সংজ্ঞায়িত করা হোক না কেন(ধরে নিলাম এটি কোন নেস্টেড ফাংশনের মধ্যে নয়)। -So this code: +তাহলেঃ ```js run function sayHi() { @@ -109,7 +109,7 @@ function sayHi() { sayHi(); ``` -...Is technically the same as this (moved `var phrase` above): +...টেকনিক্যালি এটির মতোই(`var phrase` উপরে স্থানান্তরিত করে দেয়)ঃ ```js run function sayHi() { @@ -124,7 +124,7 @@ function sayHi() { sayHi(); ``` -...Or even as this (remember, code blocks are ignored): +...অথবা এটির মতো(কোড ব্লকগুলি উপেক্ষা করা হয়েছে) ```js run function sayHi() { @@ -141,13 +141,11 @@ function sayHi() { sayHi(); ``` -People also call such behavior "hoisting" (raising), because all `var` are "hoisted" (raised) to the top of the function. +লোকেরা এ জাতীয় আচরণকে "উত্তোলন - hoisting" (উত্থাপন) নামেও অভিহিত করে, কারণ সমস্ত `var` ফাংশনের শীর্ষে "উত্তোলিত" (উত্থাপিত) হয়। -So in the example above, `if (false)` branch never executes, but that doesn't matter. The `var` inside it is processed in the beginning of the function, so at the moment of `(*)` the variable exists. +সুতরাং উপরের উদাহরণে, `if(false)` কখনও কার্যকর হয় না, কিন্তু এতে কোন সমস্যা নেই। ফাংশনের শুরুতে এর অভ্যন্তরের `var` প্রসেস হয়ে যায়, সুতরং `(*)` মুহূর্তে ভেরিয়েবলটি বিদ্যমান থাকে। -**Declarations are hoisted, but assignments are not.** - -That's better to demonstrate with an example, like this: +**ডিকলারেশন গুলো "hoisted" হলেও, কিন্তু "assignment" হয় না** ```js run function sayHi() { @@ -161,40 +159,42 @@ function sayHi() { sayHi(); ``` -The line `var phrase = "Hello"` has two actions in it: +`var phrase` = "Hello" লাইনটির মধ্যে দুটি কাজ রয়েছেঃ + +১। ভেরিয়েবল ঘোষণা `var` -1. Variable declaration `var` -2. Variable assignment `=`. +২। ভেরিয়াবল আসাইনমেন্ট `=`। -The declaration is processed at the start of function execution ("hoisted"), but the assignment always works at the place where it appears. So the code works essentially like this: +ঘোষণাটি ফাংশনের শুরুতে প্রক্রিয়া করা হয় ("hoisted"), +তবে অ্যাসাইনমেন্টটি সর্বদা যেখানে প্রদর্শিত হবে সেখানে কাজ করে। সুতরাং কোডটি মূলত এই ভাবে কাজ করে: ```js run function sayHi() { *!* - var phrase; // declaration works at the start... + var phrase; // +ঘোষণাটি শুরুতেই কাজ করে... */!* alert(phrase); // undefined *!* - phrase = "Hello"; // ...assignment - when the execution reaches it. + phrase = "Hello"; // ...অ্যাসাইনমেন্ট - যখন এক্সিকিউশন এখানে পৌঁছায়। */!* } - sayHi(); ``` -Because all `var` declarations are processed at the function start, we can reference them at any place. But variables are undefined until the assignments. +কারন সকল `var` ফাংশনের শুরুতেই ঘোষিত হয়, আমরা যে কোনও জায়গায় তাদের রেফারেন্স করতে পারি। কিন্তু অ্যাসাইনমেন্টের আগ পর্যন্ত ভেরিয়্যবলগুলো আনডিফাইন থাকে। -In both examples above `alert` runs without an error, because the variable `phrase` exists. But its value is not yet assigned, so it shows `undefined`. +উপরের দুটি উদাহরণে `alert` কোন এরর ছাড়াই চলে, কারন ভেরিয়েবল `phrase` বিদ্যমান রয়েছে। তবে এর মান এখনও নির্ধারিত হয়নি, সুতরাং এটি আনডিফাইন দেখায়। -## Summary +## সারাংশ -There are two main differences of `var` compared to `let/const`: +এখানে দুটি প্রধান পার্থক্য রয়েছে `var` এবং `let/const` এর মধ্যেঃ -1. `var` variables have no block scope, they are visible minimum at the function level. -2. `var` declarations are processed at function start (script start for globals). +১। `var` ভেরিয়েবলের কোন ব্লক স্কোপ নেই, এগুলি সর্বনিম্ন ফাংশন লেভেল পর্যন্ত বিদ্যমান থাকে। +২। ফাংশনের শুরুতেই `var` ঘোষিত হয়ে যায়(স্ক্রিপ্ট গ্লোবালের জন্য শুরু হয়)। -There's one more minor difference related to the global object, we'll cover that in the next chapter. +গ্লোবাল অবজেক্টের সাথে সম্পর্কিত আরও একটি ছোটখাটো পার্থক্য রয়েছে, আমরা পরবর্তী অধ্যায়ে এটি আলোচনা করব। -These differences make `var` worse than `let` most of the time. Block-level variables is such a great thing. That's why `let` was introduced in the standard long ago, and is now a major way (along with `const`) to declare a variable. +এই পার্থক্যগুলি `var` কে বেশিরভাগ সময় `let` এর চেয়ে খারাপ করে তোলে। ব্লক-লেভেলের ভেরিয়েবলগুলি একটি দুর্দান্ত জিনিস। এই জন্য `let` এর স্ট্যান্ডার্ড চালু হয় অনেক আগে, এবং ভেরিয়েবল ঘোষণার জন্য এখন এটি একটি প্রধান উপায় (`const` সহ)। From f258c4a3b2dd54afd01836262617760d31a45914 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Wed, 23 Oct 2019 15:49:15 +0600 Subject: [PATCH 02/15] changes done --- 1-js/06-advanced-functions/04-var/article.md | 26 ++++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/1-js/06-advanced-functions/04-var/article.md b/1-js/06-advanced-functions/04-var/article.md index 4184bbcc6..5ced96fd9 100644 --- a/1-js/06-advanced-functions/04-var/article.md +++ b/1-js/06-advanced-functions/04-var/article.md @@ -9,11 +9,11 @@ লেক্সিকাল এনভায়রনমেন্টের ক্ষেত্রে `let` এবং `const` ঠিক একইভাবে আচরণ করে। -কিন্তু `var` সম্পূর্ণ ভিন্ন, যা খুব পুরানো কাল থেকেই উদ্ভূত হয়েছিল। এটি সাধারণত আধুনিক স্ক্রিপ্টগুলিতে ব্যবহৃত হয় না তবে এটি পুরানো স্ক্রিপ্টগুলিতে লুকিয়ে থাকে। +কিন্তু `var` সম্পূর্ণ ভিন্ন, যা খুব পুরানো কাল থেকেই উদ্ভূত হয়েছিল। এটি সাধারণত আধুনিক স্ক্রিপ্টগুলিতে ব্যবহৃত হয় না তবে এটি পুরানো স্ক্রিপ্টগুলিতে সচরাচর দেখা যাবে। -আপনি যদি এই জাতীয় স্ক্রিপ্টগুলি সম্পর্কে জানার পরিকল্পনা না করেন তবে আপনি এই অধ্যায়টি এড়িয়ে যেতে পারেন, তবে তা আপনাকে পরে সমসসায় ফেলতে পারে। +আপনি যদি এই জাতীয় স্ক্রিপ্টগুলি সম্পর্কে জানার পরিকল্পনা না করেন তবে আপনি এই অধ্যায়টি এড়িয়ে যেতে পারেন, তবে তা আপনাকে পরে সমস্যায় ফেলতে পারে। -প্রথমদিকে দেখতে `var` এর আচরন `let` এর মতো হয়ে থাকে। সেটা হলো একটি ভেরিয়েবল ঘোষণা করাঃ +প্রথমদিকে দেখতে var ও let এর আচরণ একই রকম মনে হবে। সেটা হলো একটি ভেরিয়েবল ঘোষণা করাঃ ```js run function sayHi() { @@ -45,7 +45,7 @@ alert(test); // true, "if" ব্লকের বাইরেও এটি ব */!* ``` -`Var` কোড ব্লকগুলিকে উপেক্ষা করার সাথে সাথে আমরা একটি গ্লোবাল `test` ভেরিয়েবল পেয়েছি. +`var` কোড ব্লকগুলিকে উপেক্ষা করার সাথে সাথে আমরা একটি গ্লোবাল `test` ভেরিয়েবল পেয়েছি. যদি আমরা `var test` এর পরিবর্তে `let test` ব্যবহার করি, তবে ভেরিয়েবলটি কেবল `if` ব্লকের মধ্যে সীমাবদ্ধ থাকবেঃ @@ -88,11 +88,11 @@ alert(phrase); // এরর: phrase নির্ধারণ করা নেই আমারা যেটা দেখলাম, `var` - `if`, `for` অথবা অন্য ব্লক ভেদ করে বাইরে আসতে পারে। তার কারন অনেক আগে জাভাস্ক্রিপ্টে কোন লেক্সিকাল এনভাইরমেন্ট ছিল না। এবং `var` তারই একটি অংশ। -## "VAR" ফাংশনের শুরুতেই ঘোষিত হয়। +## "var" ফাংশনের শুরুতেই ঘোষিত হয়। ফাংশনের শুরুতেই `var` ঘোষিত হয়ে যায়(অথবা স্ক্রিপ্ট গ্লোবালের জন্য শুরু হয়) -অন্যভাবে বলা যায়, `var` ভেরিয়্যবলগুলো ফাংশনের শুরুতেই ঘোষিত হয়, সেটাকে যেখানেই সংজ্ঞায়িত করা হোক না কেন(ধরে নিলাম এটি কোন নেস্টেড ফাংশনের মধ্যে নয়)। +অন্যভাবে বলা যায়, `var` ভেরিয়্যবল গুলো ফাংশনের শুরুতেই ঘোষিত হয়, সেটাকে যেখানেই সংজ্ঞায়িত করা হোক না কেন(ধরে নিলাম এটি কোন নেস্টেড ফাংশনের মধ্যে নয়)। তাহলেঃ @@ -141,12 +141,14 @@ function sayHi() { sayHi(); ``` -লোকেরা এ জাতীয় আচরণকে "উত্তোলন - hoisting" (উত্থাপন) নামেও অভিহিত করে, কারণ সমস্ত `var` ফাংশনের শীর্ষে "উত্তোলিত" (উত্থাপিত) হয়। +লোকেরা এ জাতীয় আচরণকে "hoisting" নামেও অভিহিত করে, কারণ সমস্ত var ফাংশনের শীর্ষে "hoisting" হয়। সুতরাং উপরের উদাহরণে, `if(false)` কখনও কার্যকর হয় না, কিন্তু এতে কোন সমস্যা নেই। ফাংশনের শুরুতে এর অভ্যন্তরের `var` প্রসেস হয়ে যায়, সুতরং `(*)` মুহূর্তে ভেরিয়েবলটি বিদ্যমান থাকে। **ডিকলারেশন গুলো "hoisted" হলেও, কিন্তু "assignment" হয় না** +একটি উদাহরণ দিয়ে দিয়ে দেখা যাক, যেমনঃ + ```js run function sayHi() { alert(phrase); @@ -162,17 +164,14 @@ sayHi(); `var phrase` = "Hello" লাইনটির মধ্যে দুটি কাজ রয়েছেঃ ১। ভেরিয়েবল ঘোষণা `var` - ২। ভেরিয়াবল আসাইনমেন্ট `=`। -ঘোষণাটি ফাংশনের শুরুতে প্রক্রিয়া করা হয় ("hoisted"), -তবে অ্যাসাইনমেন্টটি সর্বদা যেখানে প্রদর্শিত হবে সেখানে কাজ করে। সুতরাং কোডটি মূলত এই ভাবে কাজ করে: +ফাংশন এক্সিকিউশনের শুরুতেই ডিক্লেয়ার করা হয়ে থাকে ("hoisted"),তবে অ্যাসাইনমেন্টটি সর্বদা যেখানে প্রদর্শিত হবে সেখানে কাজ করে। সুতরাং কোডটি মূলত এই ভাবে কাজ করে: ```js run function sayHi() { *!* - var phrase; // -ঘোষণাটি শুরুতেই কাজ করে... + var phrase; // ভেরিয়েবল ডিক্লেয়ার শুরুতেই কাজ করে ... */!* alert(phrase); // undefined @@ -181,10 +180,11 @@ function sayHi() { phrase = "Hello"; // ...অ্যাসাইনমেন্ট - যখন এক্সিকিউশন এখানে পৌঁছায়। */!* } + sayHi(); ``` -কারন সকল `var` ফাংশনের শুরুতেই ঘোষিত হয়, আমরা যে কোনও জায়গায় তাদের রেফারেন্স করতে পারি। কিন্তু অ্যাসাইনমেন্টের আগ পর্যন্ত ভেরিয়্যবলগুলো আনডিফাইন থাকে। +কারন সকল var ফাংশনের শুরুতেই ডিক্লেয়ার করা হয়, আমরা ওই ফাংশন স্কোপের যে কোন জায়গায় থেকে ভেরিয়েবল সমূহ কে ব্যবহার করতে পারি। কিন্তু অ্যাসাইনমেন্টের আগ পর্যন্ত ভেরিয়েবল গুলো আনডিফাইন অবস্থায় থাকে। উপরের দুটি উদাহরণে `alert` কোন এরর ছাড়াই চলে, কারন ভেরিয়েবল `phrase` বিদ্যমান রয়েছে। তবে এর মান এখনও নির্ধারিত হয়নি, সুতরাং এটি আনডিফাইন দেখায়। From 3bde0fde1b60db16a56f3816f5739f3a531a01f1 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Wed, 23 Oct 2019 17:52:47 +0600 Subject: [PATCH 03/15] dynamic import --- .../03-modules-dynamic-imports/article.md | 39 ++++++++++--------- 1 file changed, 20 insertions(+), 19 deletions(-) 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 b638fd347..a937686cd 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,48 +1,49 @@ # Dynamic imports -Export and import statements that we covered in previous chapters are called "static". The syntax is very simple and strict. +আগের অধ্যায়ে আমরা ইমপোর্ট এবং এক্সপোর্ট নিয়ে আলোচনা করেছি যাদের "static" বলা হয়। যার সিনট্যাক্স খুবই সাধারন। -First, we can't dynamically generate any parameters of `import`. +প্রথমত, `import` এর কোন প্যারামিটার ডাইনামিক ভাবে আমরা জেনারেট করতে পারি না। -The module path must be a primitive string, can't be a function call. This won't work: +মডিউলের পাথ অবশ্যই প্রিমিটিভ স্ট্রিং হতে হবে, ফাংশন কল হওয়া যাবে না। এটি কাজ করবে নাঃ ```js -import ... from *!*getModuleName()*/!*; // Error, only from "string" is allowed +import ... from *!*getModuleName()*/!*; // এরর, শুধুমাত্র "string" প্রযোজ্য ``` -Second, we can't import conditionally or at run-time: +দ্বিতীয়ত, আমরা কন্ডিশনালি অথবা রান-টাইমে ইমপোর্ট করতে পারবো না। ```js if(...) { - import ...; // Error, not allowed! + import ...; // এরর, এটি প্রযোজ্য নয়। } { - import ...; // Error, we can't put import in any block + import ...; // এরর, আমারা কোন ব্লকের মধ্যে ইমপোর্ট রাখতে পারি না। } ``` -That's because `import`/`export` aim to provide a backbone for the code structure. That's a good thing, as code structure can be analyzed, modules can be gathered and bundled into one file by special tools, unused exports can be removed ("tree-shaken"). That's possible only because the structure of imports/exports is simple and fixed. +তার কারন `import`/`export` এর উদ্দেশ্য হচ্ছে কোডের গঠনে মেরুদন্ডের ন্যায় কাজ করা। এটি একটি ভালো দিক, কোডের গঠন বিশ্লেষণ করে দেখা যায়, একটি বিশেষ টুলের দ্বারা মডিউল গুলোকে ফাইলে একসাথে রাখা যায়, অব্যবহৃত এক্সপোর্ট গুলো রিমুভ("tree-shaken") করা যায়. `imports/exports` এর সাধারন গঠনের কারনেই এটি সম্ভব হয়। -But how can we import a module dynamically, on-demand? +কিন্তু, প্রয়োজনে একটি মডিউলকে কিভাবে আমরা ডাইনামিকালি ইমপোর্ট করতে পারি? -## The import() expression +## import() এক্সপ্রেশন -The `import(module)` expression loads the module and returns a promise that resolves into a module object that contains all its exports. It can be called from any place in the code. +`import(module)` এক্সপ্রেশনটি মডিউলকে লোড করে এবং একটি প্রমিস রিটার্ন করে যা একটি মডিউল অবজেক্টের মধ্যে রিসল্ভ হয়ে থাকে এবং এতে সমস্ত এক্সপোর্ট গুলো থাকে। + +আমরা কোডের যে কোন জায়গায় এটি ডাইনামিকালি ব্যবহার করতে পারি, যেমনঃ -We can use it dynamically in any place of the code, for instance: ```js -let modulePath = prompt("Which module to load?"); +let modulePath = prompt("কোন মডিউলটি লোড করতে চান?"); import(modulePath) .then(obj => ) - .catch(err => ) + .catch(err => ) ``` -Or, we could use `let module = await import(modulePath)` if inside an async function. +অথবা, যদি এটি একটি `async` ফাংশনের ভিতর হয়ে থাকে তবে `let module = await import(modulePath)` ব্যবহার করতে পারি। -For instance, if we have the following module `say.js`: +যেমন, আমাদের যদি নিম্নলিখিত মডিউল থাকে `say.js`: ```js // 📁 say.js @@ -55,7 +56,7 @@ export function bye() { } ``` -...Then dynamic import can be like this: +...তবে ডাইনামিক ইমপোর্টটি হতে পারেঃ ```js let {hi, bye} = await import('./say.js'); @@ -64,12 +65,12 @@ hi(); bye(); ``` -Or, if `say.js` has the default export: +অথবা, যদি `say.js` এর ডিফল্ট এক্সপোর্ট থাকেঃ ```js // 📁 say.js export default function() { - alert("Module loaded (export default)!"); + alert("মডিউল লোড হয়েছে (export default)!"); } ``` From 80b37ec1094c880aa149061b326e2005fcbad074 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Thu, 24 Oct 2019 13:35:38 +0600 Subject: [PATCH 04/15] Dynamic imports translated --- .../03-modules-dynamic-imports/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 a937686cd..cd0cbd244 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -38,7 +38,7 @@ let modulePath = prompt("কোন মডিউলটি লোড করতে import(modulePath) .then(obj => ) - .catch(err => ) + .catch(err => ) ``` অথবা, যদি এটি একটি `async` ফাংশনের ভিতর হয়ে থাকে তবে `let module = await import(modulePath)` ব্যবহার করতে পারি। @@ -74,26 +74,26 @@ export default function() { } ``` -...Then, in order to access it, we can use `default` property of the module object: +...তারপর এটাকে এক্সেস করার জন্য আমরা মডিউল অব্জেক্টের `default` প্রপার্টি ব্যাবহার করতে পারি। ```js let obj = await import('./say.js'); let say = obj.default; -// or, in one line: let {default: say} = await import('./say.js'); +// অথাবা, এক লাইনে: let {default: say} = await import('./say.js'); say(); ``` -Here's the full example: +এখানে সম্পূর্ণ উদাহারনটি রয়েছেঃ [codetabs src="say" current="index.html"] ```smart -Dynamic imports work in regular scripts, they don't require `script type="module"`. +রেগুলার স্ক্রিপ্টে ডাইনামিক ইমপোর্ট কাজ করে, তার জন্য `script type="module" প্রয়োজন হয় না। ``` ```smart -Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`). +যদিও `import()` দেখতে ফাংশন কলের মতো, কিন্তু এটি একটি (`super()` মতো) বিশেষ সিন্টেক্স যার জন্য "parentheses" ব্যবহার করতে হয়। -So we can't copy `import` to a variable or use `call/apply` with it. That's not a function. +তাই আমারা `import` কে কোন ভেরিয়েবলে কপি অথবা `call/apply` করা যায় না। ``` From e2959925a824ad61d1fb36f03837bff4547484c4 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Thu, 24 Oct 2019 13:44:28 +0600 Subject: [PATCH 05/15] /done --- 1-js/13-modules/03-modules-dynamic-imports/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 cd0cbd244..7faea96cf 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,4 +1,4 @@ -# Dynamic imports +# ডাইন্যামিক ইমপোর্ট আগের অধ্যায়ে আমরা ইমপোর্ট এবং এক্সপোর্ট নিয়ে আলোচনা করেছি যাদের "static" বলা হয়। যার সিনট্যাক্স খুবই সাধারন। From f8add8ae7a5df05ac4c4776b7355f19821f9ada7 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Sun, 27 Oct 2019 15:34:31 +0600 Subject: [PATCH 06/15] Revert "/done" This reverts commit e2959925a824ad61d1fb36f03837bff4547484c4. --- 1-js/13-modules/03-modules-dynamic-imports/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 7faea96cf..cd0cbd244 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,4 +1,4 @@ -# ডাইন্যামিক ইমপোর্ট +# Dynamic imports আগের অধ্যায়ে আমরা ইমপোর্ট এবং এক্সপোর্ট নিয়ে আলোচনা করেছি যাদের "static" বলা হয়। যার সিনট্যাক্স খুবই সাধারন। From cd2c7f3bf94819e4dd04ff182a0b85905b19c846 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Sun, 27 Oct 2019 15:34:43 +0600 Subject: [PATCH 07/15] Revert "Dynamic imports translated" This reverts commit 80b37ec1094c880aa149061b326e2005fcbad074. --- .../03-modules-dynamic-imports/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 cd0cbd244..a937686cd 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -38,7 +38,7 @@ let modulePath = prompt("কোন মডিউলটি লোড করতে import(modulePath) .then(obj => ) - .catch(err => ) + .catch(err => ) ``` অথবা, যদি এটি একটি `async` ফাংশনের ভিতর হয়ে থাকে তবে `let module = await import(modulePath)` ব্যবহার করতে পারি। @@ -74,26 +74,26 @@ export default function() { } ``` -...তারপর এটাকে এক্সেস করার জন্য আমরা মডিউল অব্জেক্টের `default` প্রপার্টি ব্যাবহার করতে পারি। +...Then, in order to access it, we can use `default` property of the module object: ```js let obj = await import('./say.js'); let say = obj.default; -// অথাবা, এক লাইনে: let {default: say} = await import('./say.js'); +// or, in one line: let {default: say} = await import('./say.js'); say(); ``` -এখানে সম্পূর্ণ উদাহারনটি রয়েছেঃ +Here's the full example: [codetabs src="say" current="index.html"] ```smart -রেগুলার স্ক্রিপ্টে ডাইনামিক ইমপোর্ট কাজ করে, তার জন্য `script type="module" প্রয়োজন হয় না। +Dynamic imports work in regular scripts, they don't require `script type="module"`. ``` ```smart -যদিও `import()` দেখতে ফাংশন কলের মতো, কিন্তু এটি একটি (`super()` মতো) বিশেষ সিন্টেক্স যার জন্য "parentheses" ব্যবহার করতে হয়। +Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`). -তাই আমারা `import` কে কোন ভেরিয়েবলে কপি অথবা `call/apply` করা যায় না। +So we can't copy `import` to a variable or use `call/apply` with it. That's not a function. ``` From 47205d87e28daf140ee09ecf046889568113a07c Mon Sep 17 00:00:00 2001 From: lhmisho Date: Sun, 27 Oct 2019 15:35:29 +0600 Subject: [PATCH 08/15] Revert "Revert "Dynamic imports translated"" This reverts commit cd2c7f3bf94819e4dd04ff182a0b85905b19c846. --- .../03-modules-dynamic-imports/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 a937686cd..cd0cbd244 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -38,7 +38,7 @@ let modulePath = prompt("কোন মডিউলটি লোড করতে import(modulePath) .then(obj => ) - .catch(err => ) + .catch(err => ) ``` অথবা, যদি এটি একটি `async` ফাংশনের ভিতর হয়ে থাকে তবে `let module = await import(modulePath)` ব্যবহার করতে পারি। @@ -74,26 +74,26 @@ export default function() { } ``` -...Then, in order to access it, we can use `default` property of the module object: +...তারপর এটাকে এক্সেস করার জন্য আমরা মডিউল অব্জেক্টের `default` প্রপার্টি ব্যাবহার করতে পারি। ```js let obj = await import('./say.js'); let say = obj.default; -// or, in one line: let {default: say} = await import('./say.js'); +// অথাবা, এক লাইনে: let {default: say} = await import('./say.js'); say(); ``` -Here's the full example: +এখানে সম্পূর্ণ উদাহারনটি রয়েছেঃ [codetabs src="say" current="index.html"] ```smart -Dynamic imports work in regular scripts, they don't require `script type="module"`. +রেগুলার স্ক্রিপ্টে ডাইনামিক ইমপোর্ট কাজ করে, তার জন্য `script type="module" প্রয়োজন হয় না। ``` ```smart -Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`). +যদিও `import()` দেখতে ফাংশন কলের মতো, কিন্তু এটি একটি (`super()` মতো) বিশেষ সিন্টেক্স যার জন্য "parentheses" ব্যবহার করতে হয়। -So we can't copy `import` to a variable or use `call/apply` with it. That's not a function. +তাই আমারা `import` কে কোন ভেরিয়েবলে কপি অথবা `call/apply` করা যায় না। ``` From 18d88d1b10b1efcd46f242fba07fbaf291aa92b8 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Sun, 27 Oct 2019 15:36:30 +0600 Subject: [PATCH 09/15] Revert "Revert "Revert "Dynamic imports translated""" This reverts commit 47205d87e28daf140ee09ecf046889568113a07c. --- .../03-modules-dynamic-imports/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 cd0cbd244..a937686cd 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -38,7 +38,7 @@ let modulePath = prompt("কোন মডিউলটি লোড করতে import(modulePath) .then(obj => ) - .catch(err => ) + .catch(err => ) ``` অথবা, যদি এটি একটি `async` ফাংশনের ভিতর হয়ে থাকে তবে `let module = await import(modulePath)` ব্যবহার করতে পারি। @@ -74,26 +74,26 @@ export default function() { } ``` -...তারপর এটাকে এক্সেস করার জন্য আমরা মডিউল অব্জেক্টের `default` প্রপার্টি ব্যাবহার করতে পারি। +...Then, in order to access it, we can use `default` property of the module object: ```js let obj = await import('./say.js'); let say = obj.default; -// অথাবা, এক লাইনে: let {default: say} = await import('./say.js'); +// or, in one line: let {default: say} = await import('./say.js'); say(); ``` -এখানে সম্পূর্ণ উদাহারনটি রয়েছেঃ +Here's the full example: [codetabs src="say" current="index.html"] ```smart -রেগুলার স্ক্রিপ্টে ডাইনামিক ইমপোর্ট কাজ করে, তার জন্য `script type="module" প্রয়োজন হয় না। +Dynamic imports work in regular scripts, they don't require `script type="module"`. ``` ```smart -যদিও `import()` দেখতে ফাংশন কলের মতো, কিন্তু এটি একটি (`super()` মতো) বিশেষ সিন্টেক্স যার জন্য "parentheses" ব্যবহার করতে হয়। +Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`). -তাই আমারা `import` কে কোন ভেরিয়েবলে কপি অথবা `call/apply` করা যায় না। +So we can't copy `import` to a variable or use `call/apply` with it. That's not a function. ``` From 552a59e0c7b087b92c86ff2e6be4e2c7c1badc31 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Sun, 27 Oct 2019 15:38:01 +0600 Subject: [PATCH 10/15] Revert "Revert "Revert "Revert "Dynamic imports translated"""" This reverts commit 18d88d1b10b1efcd46f242fba07fbaf291aa92b8. --- .../03-modules-dynamic-imports/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 a937686cd..cd0cbd244 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -38,7 +38,7 @@ let modulePath = prompt("কোন মডিউলটি লোড করতে import(modulePath) .then(obj => ) - .catch(err => ) + .catch(err => ) ``` অথবা, যদি এটি একটি `async` ফাংশনের ভিতর হয়ে থাকে তবে `let module = await import(modulePath)` ব্যবহার করতে পারি। @@ -74,26 +74,26 @@ export default function() { } ``` -...Then, in order to access it, we can use `default` property of the module object: +...তারপর এটাকে এক্সেস করার জন্য আমরা মডিউল অব্জেক্টের `default` প্রপার্টি ব্যাবহার করতে পারি। ```js let obj = await import('./say.js'); let say = obj.default; -// or, in one line: let {default: say} = await import('./say.js'); +// অথাবা, এক লাইনে: let {default: say} = await import('./say.js'); say(); ``` -Here's the full example: +এখানে সম্পূর্ণ উদাহারনটি রয়েছেঃ [codetabs src="say" current="index.html"] ```smart -Dynamic imports work in regular scripts, they don't require `script type="module"`. +রেগুলার স্ক্রিপ্টে ডাইনামিক ইমপোর্ট কাজ করে, তার জন্য `script type="module" প্রয়োজন হয় না। ``` ```smart -Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`). +যদিও `import()` দেখতে ফাংশন কলের মতো, কিন্তু এটি একটি (`super()` মতো) বিশেষ সিন্টেক্স যার জন্য "parentheses" ব্যবহার করতে হয়। -So we can't copy `import` to a variable or use `call/apply` with it. That's not a function. +তাই আমারা `import` কে কোন ভেরিয়েবলে কপি অথবা `call/apply` করা যায় না। ``` From a10bbd56e8a58e07547012a7f3775ea0aab5ec79 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Sun, 27 Oct 2019 15:50:14 +0600 Subject: [PATCH 11/15] /done --- .../03-modules-dynamic-imports/article.md | 51 +++++++++---------- 1 file changed, 25 insertions(+), 26 deletions(-) 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 cd0cbd244..b638fd347 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,49 +1,48 @@ # Dynamic imports -আগের অধ্যায়ে আমরা ইমপোর্ট এবং এক্সপোর্ট নিয়ে আলোচনা করেছি যাদের "static" বলা হয়। যার সিনট্যাক্স খুবই সাধারন। +Export and import statements that we covered in previous chapters are called "static". The syntax is very simple and strict. -প্রথমত, `import` এর কোন প্যারামিটার ডাইনামিক ভাবে আমরা জেনারেট করতে পারি না। +First, we can't dynamically generate any parameters of `import`. -মডিউলের পাথ অবশ্যই প্রিমিটিভ স্ট্রিং হতে হবে, ফাংশন কল হওয়া যাবে না। এটি কাজ করবে নাঃ +The module path must be a primitive string, can't be a function call. This won't work: ```js -import ... from *!*getModuleName()*/!*; // এরর, শুধুমাত্র "string" প্রযোজ্য +import ... from *!*getModuleName()*/!*; // Error, only from "string" is allowed ``` -দ্বিতীয়ত, আমরা কন্ডিশনালি অথবা রান-টাইমে ইমপোর্ট করতে পারবো না। +Second, we can't import conditionally or at run-time: ```js if(...) { - import ...; // এরর, এটি প্রযোজ্য নয়। + import ...; // Error, not allowed! } { - import ...; // এরর, আমারা কোন ব্লকের মধ্যে ইমপোর্ট রাখতে পারি না। + import ...; // Error, we can't put import in any block } ``` -তার কারন `import`/`export` এর উদ্দেশ্য হচ্ছে কোডের গঠনে মেরুদন্ডের ন্যায় কাজ করা। এটি একটি ভালো দিক, কোডের গঠন বিশ্লেষণ করে দেখা যায়, একটি বিশেষ টুলের দ্বারা মডিউল গুলোকে ফাইলে একসাথে রাখা যায়, অব্যবহৃত এক্সপোর্ট গুলো রিমুভ("tree-shaken") করা যায়. `imports/exports` এর সাধারন গঠনের কারনেই এটি সম্ভব হয়। +That's because `import`/`export` aim to provide a backbone for the code structure. That's a good thing, as code structure can be analyzed, modules can be gathered and bundled into one file by special tools, unused exports can be removed ("tree-shaken"). That's possible only because the structure of imports/exports is simple and fixed. -কিন্তু, প্রয়োজনে একটি মডিউলকে কিভাবে আমরা ডাইনামিকালি ইমপোর্ট করতে পারি? +But how can we import a module dynamically, on-demand? -## import() এক্সপ্রেশন +## The import() expression -`import(module)` এক্সপ্রেশনটি মডিউলকে লোড করে এবং একটি প্রমিস রিটার্ন করে যা একটি মডিউল অবজেক্টের মধ্যে রিসল্ভ হয়ে থাকে এবং এতে সমস্ত এক্সপোর্ট গুলো থাকে। - -আমরা কোডের যে কোন জায়গায় এটি ডাইনামিকালি ব্যবহার করতে পারি, যেমনঃ +The `import(module)` expression loads the module and returns a promise that resolves into a module object that contains all its exports. It can be called from any place in the code. +We can use it dynamically in any place of the code, for instance: ```js -let modulePath = prompt("কোন মডিউলটি লোড করতে চান?"); +let modulePath = prompt("Which module to load?"); import(modulePath) .then(obj => ) - .catch(err => ) + .catch(err => ) ``` -অথবা, যদি এটি একটি `async` ফাংশনের ভিতর হয়ে থাকে তবে `let module = await import(modulePath)` ব্যবহার করতে পারি। +Or, we could use `let module = await import(modulePath)` if inside an async function. -যেমন, আমাদের যদি নিম্নলিখিত মডিউল থাকে `say.js`: +For instance, if we have the following module `say.js`: ```js // 📁 say.js @@ -56,7 +55,7 @@ export function bye() { } ``` -...তবে ডাইনামিক ইমপোর্টটি হতে পারেঃ +...Then dynamic import can be like this: ```js let {hi, bye} = await import('./say.js'); @@ -65,35 +64,35 @@ hi(); bye(); ``` -অথবা, যদি `say.js` এর ডিফল্ট এক্সপোর্ট থাকেঃ +Or, if `say.js` has the default export: ```js // 📁 say.js export default function() { - alert("মডিউল লোড হয়েছে (export default)!"); + alert("Module loaded (export default)!"); } ``` -...তারপর এটাকে এক্সেস করার জন্য আমরা মডিউল অব্জেক্টের `default` প্রপার্টি ব্যাবহার করতে পারি। +...Then, in order to access it, we can use `default` property of the module object: ```js let obj = await import('./say.js'); let say = obj.default; -// অথাবা, এক লাইনে: let {default: say} = await import('./say.js'); +// or, in one line: let {default: say} = await import('./say.js'); say(); ``` -এখানে সম্পূর্ণ উদাহারনটি রয়েছেঃ +Here's the full example: [codetabs src="say" current="index.html"] ```smart -রেগুলার স্ক্রিপ্টে ডাইনামিক ইমপোর্ট কাজ করে, তার জন্য `script type="module" প্রয়োজন হয় না। +Dynamic imports work in regular scripts, they don't require `script type="module"`. ``` ```smart -যদিও `import()` দেখতে ফাংশন কলের মতো, কিন্তু এটি একটি (`super()` মতো) বিশেষ সিন্টেক্স যার জন্য "parentheses" ব্যবহার করতে হয়। +Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`). -তাই আমারা `import` কে কোন ভেরিয়েবলে কপি অথবা `call/apply` করা যায় না। +So we can't copy `import` to a variable or use `call/apply` with it. That's not a function. ``` From d955d71633ea7239a10f4e936cfe13a2e58002f1 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Sun, 27 Oct 2019 17:28:28 +0600 Subject: [PATCH 12/15] back to master --- 1-js/06-advanced-functions/04-var/article.md | 100 +++++++++---------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/1-js/06-advanced-functions/04-var/article.md b/1-js/06-advanced-functions/04-var/article.md index 5ced96fd9..02fd43fe5 100644 --- a/1-js/06-advanced-functions/04-var/article.md +++ b/1-js/06-advanced-functions/04-var/article.md @@ -1,23 +1,23 @@ -# পুরাতন "var" +# The old "var" -অধ্যায়ের প্রথম দিকে আমরা উল্লেখ করেছিলাম [variables](info:variables) কে তিন ভাবে ঘোষণা করা যায়। +In the very first chapter about [variables](info:variables), we mentioned three ways of variable declaration: -১। `let` -২। `const` -৩। `var` +1. `let` +2. `const` +3. `var` -লেক্সিকাল এনভায়রনমেন্টের ক্ষেত্রে `let` এবং `const` ঠিক একইভাবে আচরণ করে। +`let` and `const` behave exactly the same way in terms of Lexical Environments. -কিন্তু `var` সম্পূর্ণ ভিন্ন, যা খুব পুরানো কাল থেকেই উদ্ভূত হয়েছিল। এটি সাধারণত আধুনিক স্ক্রিপ্টগুলিতে ব্যবহৃত হয় না তবে এটি পুরানো স্ক্রিপ্টগুলিতে সচরাচর দেখা যাবে। +But `var` is a very different beast, that originates from very old times. It's generally not used in modern scripts, but still lurks in the old ones. -আপনি যদি এই জাতীয় স্ক্রিপ্টগুলি সম্পর্কে জানার পরিকল্পনা না করেন তবে আপনি এই অধ্যায়টি এড়িয়ে যেতে পারেন, তবে তা আপনাকে পরে সমস্যায় ফেলতে পারে। +If you don't plan on meeting such scripts you may even skip this chapter or postpone it, but then there's a chance that it bites you later. -প্রথমদিকে দেখতে var ও let এর আচরণ একই রকম মনে হবে। সেটা হলো একটি ভেরিয়েবল ঘোষণা করাঃ +From the first sight, `var` behaves similar to `let`. That is, declares a variable: ```js run function sayHi() { - var phrase = "Hello"; // লোকাল ভেরিয়েবল, "let" এর পরিবর্তে "var" + var phrase = "Hello"; // local variable, "var" instead of "let" alert(phrase); // Hello } @@ -27,39 +27,39 @@ sayHi(); alert(phrase); // Error, phrase is not defined ``` -...তবে এখানে পার্থক্য রয়েছে। +...But here are the differences. -# "var" এর কোন ব্লকস্কোপ নেই। +## "var" has no block scope -যে সকল ভেরিয়েবল "var" দ্বারা ঘোষণা হয়, তারা হয় ফাংশন-ওয়াইড অথবা গ্লোবাল হয়ে থাকে। +Variables, declared with `var`, are either function-wide or global. They are visible through blocks. -এই ক্ষেত্রেঃ +For instance: ```js run if (true) { - var test = true; // "let" এর পরিবর্তে "var" + var test = true; // use "var" instead of "let" } *!* -alert(test); // true, "if" ব্লকের বাইরেও এটি বিদ্যমান। +alert(test); // true, the variable lives after if */!* ``` -`var` কোড ব্লকগুলিকে উপেক্ষা করার সাথে সাথে আমরা একটি গ্লোবাল `test` ভেরিয়েবল পেয়েছি. +As `var` ignores code blocks, we've got a global variable `test`. -যদি আমরা `var test` এর পরিবর্তে `let test` ব্যবহার করি, তবে ভেরিয়েবলটি কেবল `if` ব্লকের মধ্যে সীমাবদ্ধ থাকবেঃ +If we used `let test` instead of `var test`, then the variable would only be visible inside `if`: ```js run if (true) { - let test = true; // "let" এর ব্যবহার + let test = true; // use "let" } *!* -alert(test); // এরর: test নির্ধারণ করা নেই +alert(test); // Error: test is not defined */!* ``` -লুপের ক্ষেত্রেও একই রকমঃ `var` লুপ অথবা ব্লকের লোকাল হতে পারে নাঃ +The same thing for loops: `var` cannot be block- or loop-local: ```js for (var i = 0; i < 10; i++) { @@ -67,11 +67,11 @@ for (var i = 0; i < 10; i++) { } *!* -alert(i); // 10, "i" লুপের পরেও বিদ্যমান, এটি একটি গ্লোবাল ভেরিয়েবল। +alert(i); // 10, "i" is visible after loop, it's a global variable */!* ``` -যদি কোন কোড ব্লক ফাংশনের ভিতরে থাকে, সেক্ষেত্রে `var` ফাংশন লেভেল ভেরিয়েবল হয়ে যায়। +If a code block is inside a function, then `var` becomes a function-level variable: ```js run function sayHi() { @@ -79,22 +79,22 @@ function sayHi() { var phrase = "Hello"; } - alert(phrase); // কাজ করবে + alert(phrase); // works } sayHi(); -alert(phrase); // এরর: phrase নির্ধারণ করা নেই (ডেভলপার কনসোল চেক করুন) +alert(phrase); // Error: phrase is not defined (Check the Developer Console) ``` -আমারা যেটা দেখলাম, `var` - `if`, `for` অথবা অন্য ব্লক ভেদ করে বাইরে আসতে পারে। তার কারন অনেক আগে জাভাস্ক্রিপ্টে কোন লেক্সিকাল এনভাইরমেন্ট ছিল না। এবং `var` তারই একটি অংশ। +As we can see, `var` pierces through `if`, `for` or other code blocks. That's because a long time ago in JavaScript blocks had no Lexical Environments. And `var` is a remnant of that. -## "var" ফাংশনের শুরুতেই ঘোষিত হয়। +## "var" declarations are processed at the function start -ফাংশনের শুরুতেই `var` ঘোষিত হয়ে যায়(অথবা স্ক্রিপ্ট গ্লোবালের জন্য শুরু হয়) +`var` declarations are processed when the function starts (or script starts for globals). -অন্যভাবে বলা যায়, `var` ভেরিয়্যবল গুলো ফাংশনের শুরুতেই ঘোষিত হয়, সেটাকে যেখানেই সংজ্ঞায়িত করা হোক না কেন(ধরে নিলাম এটি কোন নেস্টেড ফাংশনের মধ্যে নয়)। +In other words, `var` variables are defined from the beginning of the function, no matter where the definition is (assuming that the definition is not in the nested function). -তাহলেঃ +So this code: ```js run function sayHi() { @@ -109,7 +109,7 @@ function sayHi() { sayHi(); ``` -...টেকনিক্যালি এটির মতোই(`var phrase` উপরে স্থানান্তরিত করে দেয়)ঃ +...Is technically the same as this (moved `var phrase` above): ```js run function sayHi() { @@ -124,7 +124,7 @@ function sayHi() { sayHi(); ``` -...অথবা এটির মতো(কোড ব্লকগুলি উপেক্ষা করা হয়েছে) +...Or even as this (remember, code blocks are ignored): ```js run function sayHi() { @@ -141,13 +141,13 @@ function sayHi() { sayHi(); ``` -লোকেরা এ জাতীয় আচরণকে "hoisting" নামেও অভিহিত করে, কারণ সমস্ত var ফাংশনের শীর্ষে "hoisting" হয়। +People also call such behavior "hoisting" (raising), because all `var` are "hoisted" (raised) to the top of the function. -সুতরাং উপরের উদাহরণে, `if(false)` কখনও কার্যকর হয় না, কিন্তু এতে কোন সমস্যা নেই। ফাংশনের শুরুতে এর অভ্যন্তরের `var` প্রসেস হয়ে যায়, সুতরং `(*)` মুহূর্তে ভেরিয়েবলটি বিদ্যমান থাকে। +So in the example above, `if (false)` branch never executes, but that doesn't matter. The `var` inside it is processed in the beginning of the function, so at the moment of `(*)` the variable exists. -**ডিকলারেশন গুলো "hoisted" হলেও, কিন্তু "assignment" হয় না** +**Declarations are hoisted, but assignments are not.** -একটি উদাহরণ দিয়ে দিয়ে দেখা যাক, যেমনঃ +That's better to demonstrate with an example, like this: ```js run function sayHi() { @@ -161,40 +161,40 @@ function sayHi() { sayHi(); ``` -`var phrase` = "Hello" লাইনটির মধ্যে দুটি কাজ রয়েছেঃ +The line `var phrase = "Hello"` has two actions in it: -১। ভেরিয়েবল ঘোষণা `var` -২। ভেরিয়াবল আসাইনমেন্ট `=`। +1. Variable declaration `var` +2. Variable assignment `=`. -ফাংশন এক্সিকিউশনের শুরুতেই ডিক্লেয়ার করা হয়ে থাকে ("hoisted"),তবে অ্যাসাইনমেন্টটি সর্বদা যেখানে প্রদর্শিত হবে সেখানে কাজ করে। সুতরাং কোডটি মূলত এই ভাবে কাজ করে: +The declaration is processed at the start of function execution ("hoisted"), but the assignment always works at the place where it appears. So the code works essentially like this: ```js run function sayHi() { *!* - var phrase; // ভেরিয়েবল ডিক্লেয়ার শুরুতেই কাজ করে ... + var phrase; // declaration works at the start... */!* alert(phrase); // undefined *!* - phrase = "Hello"; // ...অ্যাসাইনমেন্ট - যখন এক্সিকিউশন এখানে পৌঁছায়। + phrase = "Hello"; // ...assignment - when the execution reaches it. */!* } sayHi(); ``` -কারন সকল var ফাংশনের শুরুতেই ডিক্লেয়ার করা হয়, আমরা ওই ফাংশন স্কোপের যে কোন জায়গায় থেকে ভেরিয়েবল সমূহ কে ব্যবহার করতে পারি। কিন্তু অ্যাসাইনমেন্টের আগ পর্যন্ত ভেরিয়েবল গুলো আনডিফাইন অবস্থায় থাকে। +Because all `var` declarations are processed at the function start, we can reference them at any place. But variables are undefined until the assignments. -উপরের দুটি উদাহরণে `alert` কোন এরর ছাড়াই চলে, কারন ভেরিয়েবল `phrase` বিদ্যমান রয়েছে। তবে এর মান এখনও নির্ধারিত হয়নি, সুতরাং এটি আনডিফাইন দেখায়। +In both examples above `alert` runs without an error, because the variable `phrase` exists. But its value is not yet assigned, so it shows `undefined`. -## সারাংশ +## Summary -এখানে দুটি প্রধান পার্থক্য রয়েছে `var` এবং `let/const` এর মধ্যেঃ +There are two main differences of `var` compared to `let/const`: -১। `var` ভেরিয়েবলের কোন ব্লক স্কোপ নেই, এগুলি সর্বনিম্ন ফাংশন লেভেল পর্যন্ত বিদ্যমান থাকে। -২। ফাংশনের শুরুতেই `var` ঘোষিত হয়ে যায়(স্ক্রিপ্ট গ্লোবালের জন্য শুরু হয়)। +1. `var` variables have no block scope, they are visible minimum at the function level. +2. `var` declarations are processed at function start (script start for globals). -গ্লোবাল অবজেক্টের সাথে সম্পর্কিত আরও একটি ছোটখাটো পার্থক্য রয়েছে, আমরা পরবর্তী অধ্যায়ে এটি আলোচনা করব। +There's one more minor difference related to the global object, we'll cover that in the next chapter. -এই পার্থক্যগুলি `var` কে বেশিরভাগ সময় `let` এর চেয়ে খারাপ করে তোলে। ব্লক-লেভেলের ভেরিয়েবলগুলি একটি দুর্দান্ত জিনিস। এই জন্য `let` এর স্ট্যান্ডার্ড চালু হয় অনেক আগে, এবং ভেরিয়েবল ঘোষণার জন্য এখন এটি একটি প্রধান উপায় (`const` সহ)। +These differences make `var` worse than `let` most of the time. Block-level variables is such a great thing. That's why `let` was introduced in the standard long ago, and is now a major way (along with `const`) to declare a variable. From 28567707d90d8fc3f83d87722c2081855f5e0ef4 Mon Sep 17 00:00:00 2001 From: lhmisho Date: Sun, 27 Oct 2019 17:46:40 +0600 Subject: [PATCH 13/15] Dynamic imports translated --- .../03-modules-dynamic-imports/article.md | 210 +++++++++++++----- 1 file changed, 156 insertions(+), 54 deletions(-) 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 b638fd347..2ad819dc6 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,98 +1,200 @@ -# Dynamic imports -Export and import statements that we covered in previous chapters are called "static". The syntax is very simple and strict. +# পুরাতন "var" -First, we can't dynamically generate any parameters of `import`. +অধ্যায়ের প্রথম দিকে আমরা উল্লেখ করেছিলাম [variables](info:variables) কে তিন ভাবে ঘোষণা করা যায়। -The module path must be a primitive string, can't be a function call. This won't work: +১। `let` +২। `const` +৩। `var` -```js -import ... from *!*getModuleName()*/!*; // Error, only from "string" is allowed -``` +লেক্সিকাল এনভায়রনমেন্টের ক্ষেত্রে `let` এবং `const` ঠিক একইভাবে আচরণ করে। -Second, we can't import conditionally or at run-time: +কিন্তু `var` সম্পূর্ণ ভিন্ন, যা খুব পুরানো কাল থেকেই উদ্ভূত হয়েছিল। এটি সাধারণত আধুনিক স্ক্রিপ্টগুলিতে ব্যবহৃত হয় না তবে এটি পুরানো স্ক্রিপ্টগুলিতে সচরাচর দেখা যাবে। -```js -if(...) { - import ...; // Error, not allowed! +আপনি যদি এই জাতীয় স্ক্রিপ্টগুলি সম্পর্কে জানার পরিকল্পনা না করেন তবে আপনি এই অধ্যায়টি এড়িয়ে যেতে পারেন, তবে তা আপনাকে পরে সমস্যায় ফেলতে পারে। + +প্রথমদিকে দেখতে var ও let এর আচরণ একই রকম মনে হবে। সেটা হলো একটি ভেরিয়েবল ঘোষণা করাঃ + +```js run +function sayHi() { + var phrase = "Hello"; // লোকাল ভেরিয়েবল, "let" এর পরিবর্তে "var" + + alert(phrase); // Hello } -{ - import ...; // Error, we can't put import in any block +sayHi(); + +alert(phrase); // Error, phrase is not defined +``` + +...তবে এখানে পার্থক্য রয়েছে। + +# "var" এর কোন ব্লকস্কোপ নেই। + +যে সকল ভেরিয়েবল "var" দ্বারা ঘোষণা হয়, তারা হয় ফাংশন-ওয়াইড অথবা গ্লোবাল হয়ে থাকে। + +এই ক্ষেত্রেঃ + +```js run +if (true) { + var test = true; // "let" এর পরিবর্তে "var" } + +*!* +alert(test); // true, "if" ব্লকের বাইরেও এটি বিদ্যমান। +*/!* ``` -That's because `import`/`export` aim to provide a backbone for the code structure. That's a good thing, as code structure can be analyzed, modules can be gathered and bundled into one file by special tools, unused exports can be removed ("tree-shaken"). That's possible only because the structure of imports/exports is simple and fixed. +`var` কোড ব্লকগুলিকে উপেক্ষা করার সাথে সাথে আমরা একটি গ্লোবাল `test` ভেরিয়েবল পেয়েছি. -But how can we import a module dynamically, on-demand? +যদি আমরা `var test` এর পরিবর্তে `let test` ব্যবহার করি, তবে ভেরিয়েবলটি কেবল `if` ব্লকের মধ্যে সীমাবদ্ধ থাকবেঃ -## The import() expression +```js run +if (true) { + let test = true; // "let" এর ব্যবহার +} -The `import(module)` expression loads the module and returns a promise that resolves into a module object that contains all its exports. It can be called from any place in the code. +*!* +alert(test); // এরর: test নির্ধারণ করা নেই +*/!* +``` -We can use it dynamically in any place of the code, for instance: +লুপের ক্ষেত্রেও একই রকমঃ `var` লুপ অথবা ব্লকের লোকাল হতে পারে নাঃ ```js -let modulePath = prompt("Which module to load?"); +for (var i = 0; i < 10; i++) { + // ... +} -import(modulePath) - .then(obj => ) - .catch(err => ) +*!* +alert(i); // 10, "i" লুপের পরেও বিদ্যমান, এটি একটি গ্লোবাল ভেরিয়েবল। +*/!* ``` -Or, we could use `let module = await import(modulePath)` if inside an async function. +যদি কোন কোড ব্লক ফাংশনের ভিতরে থাকে, সেক্ষেত্রে `var` ফাংশন লেভেল ভেরিয়েবল হয়ে যায়। -For instance, if we have the following module `say.js`: +```js run +function sayHi() { + if (true) { + var phrase = "Hello"; + } -```js -// 📁 say.js -export function hi() { - alert(`Hello`); + alert(phrase); // কাজ করবে } -export function bye() { - alert(`Bye`); -} +sayHi(); +alert(phrase); // এরর: phrase নির্ধারণ করা নেই (ডেভলপার কনসোল চেক করুন) ``` -...Then dynamic import can be like this: +আমারা যেটা দেখলাম, `var` - `if`, `for` অথবা অন্য ব্লক ভেদ করে বাইরে আসতে পারে। তার কারন অনেক আগে জাভাস্ক্রিপ্টে কোন লেক্সিকাল এনভাইরমেন্ট ছিল না। এবং `var` তারই একটি অংশ। -```js -let {hi, bye} = await import('./say.js'); +## "var" ফাংশনের শুরুতেই ঘোষিত হয়। + +ফাংশনের শুরুতেই `var` ঘোষিত হয়ে যায়(অথবা স্ক্রিপ্ট গ্লোবালের জন্য শুরু হয়) + +অন্যভাবে বলা যায়, `var` ভেরিয়্যবল গুলো ফাংশনের শুরুতেই ঘোষিত হয়, সেটাকে যেখানেই সংজ্ঞায়িত করা হোক না কেন(ধরে নিলাম এটি কোন নেস্টেড ফাংশনের মধ্যে নয়)। + +তাহলেঃ + +```js run +function sayHi() { + phrase = "Hello"; + + alert(phrase); -hi(); -bye(); +*!* + var phrase; +*/!* +} +sayHi(); ``` -Or, if `say.js` has the default export: +...টেকনিক্যালি এটির মতোই(`var phrase` উপরে স্থানান্তরিত করে দেয়)ঃ -```js -// 📁 say.js -export default function() { - alert("Module loaded (export default)!"); +```js run +function sayHi() { +*!* + var phrase; +*/!* + + phrase = "Hello"; + + alert(phrase); } +sayHi(); ``` -...Then, in order to access it, we can use `default` property of the module object: +...অথবা এটির মতো(কোড ব্লকগুলি উপেক্ষা করা হয়েছে) -```js -let obj = await import('./say.js'); -let say = obj.default; -// or, in one line: let {default: say} = await import('./say.js'); +```js run +function sayHi() { + phrase = "Hello"; // (*) + + *!* + if (false) { + var phrase; + } + */!* -say(); + alert(phrase); +} +sayHi(); ``` -Here's the full example: +লোকেরা এ জাতীয় আচরণকে "hoisting" নামেও অভিহিত করে, কারণ সমস্ত var ফাংশনের শীর্ষে "hoisting" হয়। -[codetabs src="say" current="index.html"] +সুতরাং উপরের উদাহরণে, `if(false)` কখনও কার্যকর হয় না, কিন্তু এতে কোন সমস্যা নেই। ফাংশনের শুরুতে এর অভ্যন্তরের `var` প্রসেস হয়ে যায়, সুতরং `(*)` মুহূর্তে ভেরিয়েবলটি বিদ্যমান থাকে। -```smart -Dynamic imports work in regular scripts, they don't require `script type="module"`. +**ডিকলারেশন গুলো "hoisted" হলেও, কিন্তু "assignment" হয় না** + +একটি উদাহরণ দিয়ে দিয়ে দেখা যাক, যেমনঃ + +```js run +function sayHi() { + alert(phrase); + +*!* + var phrase = "Hello"; +*/!* +} + +sayHi(); ``` -```smart -Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`). +`var phrase` = "Hello" লাইনটির মধ্যে দুটি কাজ রয়েছেঃ + +১। ভেরিয়েবল ঘোষণা `var` +২। ভেরিয়াবল আসাইনমেন্ট `=`। -So we can't copy `import` to a variable or use `call/apply` with it. That's not a function. +ফাংশন এক্সিকিউশনের শুরুতেই ডিক্লেয়ার করা হয়ে থাকে ("hoisted"),তবে অ্যাসাইনমেন্টটি সর্বদা যেখানে প্রদর্শিত হবে সেখানে কাজ করে। সুতরাং কোডটি মূলত এই ভাবে কাজ করে: + +```js run +function sayHi() { +*!* + var phrase; // ভেরিয়েবল ডিক্লেয়ার শুরুতেই কাজ করে ... +*/!* + + alert(phrase); // undefined + +*!* + phrase = "Hello"; // ...অ্যাসাইনমেন্ট - যখন এক্সিকিউশন এখানে পৌঁছায়। +*/!* +} + +sayHi(); ``` + +কারন সকল var ফাংশনের শুরুতেই ডিক্লেয়ার করা হয়, আমরা ওই ফাংশন স্কোপের যে কোন জায়গায় থেকে ভেরিয়েবল সমূহ কে ব্যবহার করতে পারি। কিন্তু অ্যাসাইনমেন্টের আগ পর্যন্ত ভেরিয়েবল গুলো আনডিফাইন অবস্থায় থাকে। + +উপরের দুটি উদাহরণে `alert` কোন এরর ছাড়াই চলে, কারন ভেরিয়েবল `phrase` বিদ্যমান রয়েছে। তবে এর মান এখনও নির্ধারিত হয়নি, সুতরাং এটি আনডিফাইন দেখায়। + +## সারাংশ + +এখানে দুটি প্রধান পার্থক্য রয়েছে `var` এবং `let/const` এর মধ্যেঃ + +১। `var` ভেরিয়েবলের কোন ব্লক স্কোপ নেই, এগুলি সর্বনিম্ন ফাংশন লেভেল পর্যন্ত বিদ্যমান থাকে। +২। ফাংশনের শুরুতেই `var` ঘোষিত হয়ে যায়(স্ক্রিপ্ট গ্লোবালের জন্য শুরু হয়)। + +গ্লোবাল অবজেক্টের সাথে সম্পর্কিত আরও একটি ছোটখাটো পার্থক্য রয়েছে, আমরা পরবর্তী অধ্যায়ে এটি আলোচনা করব। + +এই পার্থক্যগুলি `var` কে বেশিরভাগ সময় `let` এর চেয়ে খারাপ করে তোলে। ব্লক-লেভেলের ভেরিয়েবলগুলি একটি দুর্দান্ত জিনিস। এই জন্য `let` এর স্ট্যান্ডার্ড চালু হয় অনেক আগে, এবং ভেরিয়েবল ঘোষণার জন্য এখন এটি একটি প্রধান উপায় (`const` সহ)। \ No newline at end of file From 7dcdab1522efaf0a79a5e8931e4c009e3615984f Mon Sep 17 00:00:00 2001 From: lhmisho Date: Tue, 29 Oct 2019 16:43:06 +0600 Subject: [PATCH 14/15] /done --- .../03-modules-dynamic-imports/article.md | 210 +++++------------- 1 file changed, 54 insertions(+), 156 deletions(-) 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 2ad819dc6..40d5cd3ea 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,200 +1,98 @@ +# ডাইন্যামিক ইমপোর্ট -# পুরাতন "var" +আগের অধ্যায়ে আমরা ইমপোর্ট এবং এক্সপোর্ট নিয়ে আলোচনা করেছি যাদের "static" বলা হয়। যার সিনট্যাক্স খুবই সাধারন। -অধ্যায়ের প্রথম দিকে আমরা উল্লেখ করেছিলাম [variables](info:variables) কে তিন ভাবে ঘোষণা করা যায়। +প্রথমত, `import` এর কোন প্যারামিটার ডাইনামিক ভাবে আমরা জেনারেট করতে পারি না। -১। `let` -২। `const` -৩। `var` +মডিউলের পাথ অবশ্যই প্রিমিটিভ স্ট্রিং হতে হবে, ফাংশন কল হওয়া যাবে না। এটি কাজ করবে নাঃ -লেক্সিকাল এনভায়রনমেন্টের ক্ষেত্রে `let` এবং `const` ঠিক একইভাবে আচরণ করে। - -কিন্তু `var` সম্পূর্ণ ভিন্ন, যা খুব পুরানো কাল থেকেই উদ্ভূত হয়েছিল। এটি সাধারণত আধুনিক স্ক্রিপ্টগুলিতে ব্যবহৃত হয় না তবে এটি পুরানো স্ক্রিপ্টগুলিতে সচরাচর দেখা যাবে। - -আপনি যদি এই জাতীয় স্ক্রিপ্টগুলি সম্পর্কে জানার পরিকল্পনা না করেন তবে আপনি এই অধ্যায়টি এড়িয়ে যেতে পারেন, তবে তা আপনাকে পরে সমস্যায় ফেলতে পারে। - -প্রথমদিকে দেখতে var ও let এর আচরণ একই রকম মনে হবে। সেটা হলো একটি ভেরিয়েবল ঘোষণা করাঃ - -```js run -function sayHi() { - var phrase = "Hello"; // লোকাল ভেরিয়েবল, "let" এর পরিবর্তে "var" - - alert(phrase); // Hello -} - -sayHi(); - -alert(phrase); // Error, phrase is not defined +```js +import ... from *!*getModuleName()*/!*; এরর, শুধুমাত্র "string" প্রযোজ্য ``` -...তবে এখানে পার্থক্য রয়েছে। - -# "var" এর কোন ব্লকস্কোপ নেই। +দ্বিতীয়ত, আমরা কন্ডিশনালি অথবা রান-টাইমে ইমপোর্ট করতে পারবো না। -যে সকল ভেরিয়েবল "var" দ্বারা ঘোষণা হয়, তারা হয় ফাংশন-ওয়াইড অথবা গ্লোবাল হয়ে থাকে। - -এই ক্ষেত্রেঃ - -```js run -if (true) { - var test = true; // "let" এর পরিবর্তে "var" +```js +if(...) { + import ...; // এরর, এটি প্রযোজ্য নয়। } -*!* -alert(test); // true, "if" ব্লকের বাইরেও এটি বিদ্যমান। -*/!* +{ + import ...; // এরর, আমারা কোন ব্লকের মধ্যে ইমপোর্ট রাখতে পারি না। +} ``` -`var` কোড ব্লকগুলিকে উপেক্ষা করার সাথে সাথে আমরা একটি গ্লোবাল `test` ভেরিয়েবল পেয়েছি. +তার কারন `import`/`export` এর উদ্দেশ্য হচ্ছে কোডের গঠনে মেরুদন্ডের ন্যায় কাজ করা। এটি একটি ভালো দিক, কোডের গঠন বিশ্লেষণ করে দেখা যায়, একটি বিশেষ টুলের দ্বারা মডিউল গুলোকে ফাইলে একসাথে রাখা যায়, অব্যবহৃত এক্সপোর্ট গুলো রিমুভ("tree-shaken") করা যায়. `imports/exports` এর সাধারন গঠনের কারনেই এটি সম্ভব হয়। -যদি আমরা `var test` এর পরিবর্তে `let test` ব্যবহার করি, তবে ভেরিয়েবলটি কেবল `if` ব্লকের মধ্যে সীমাবদ্ধ থাকবেঃ +কিন্তু, প্রয়োজনে একটি মডিউলকে কিভাবে আমরা ডাইনামিকালি ইমপোর্ট করতে পারি? -```js run -if (true) { - let test = true; // "let" এর ব্যবহার -} +## import() এক্সপ্রেশন -*!* -alert(test); // এরর: test নির্ধারণ করা নেই -*/!* -``` +`import(module)` এক্সপ্রেশনটি মডিউলকে লোড করে এবং একটি প্রমিস রিটার্ন করে যা একটি মডিউল অবজেক্টের মধ্যে রিসল্ভ হয়ে থাকে এবং এতে সমস্ত এক্সপোর্ট গুলো থাকে। -লুপের ক্ষেত্রেও একই রকমঃ `var` লুপ অথবা ব্লকের লোকাল হতে পারে নাঃ +আমরা কোডের যে কোন জায়গায় এটি ডাইনামিকালি ব্যবহার করতে পারি, যেমনঃ ```js -for (var i = 0; i < 10; i++) { - // ... -} +let modulePath = prompt("কোন মডিউলটি লোড করতে চান?"); -*!* -alert(i); // 10, "i" লুপের পরেও বিদ্যমান, এটি একটি গ্লোবাল ভেরিয়েবল। -*/!* +import(modulePath) + .then(obj => ) + .catch(err => <লোডিং এরর, যদি কোন মডিউল না থাকে>) ``` -যদি কোন কোড ব্লক ফাংশনের ভিতরে থাকে, সেক্ষেত্রে `var` ফাংশন লেভেল ভেরিয়েবল হয়ে যায়। +অথবা, যদি এটি একটি `async` ফাংশনের ভিতর হয়ে থাকে তবে `let module = await import(modulePath)` ব্যবহার করতে পারি। -```js run -function sayHi() { - if (true) { - var phrase = "Hello"; - } +যেমন, আমাদের যদি নিম্নলিখিত মডিউল থাকে `say.js`: - alert(phrase); // কাজ করবে +```js +// 📁 say.js +export function hi() { + alert(`Hello`); } -sayHi(); -alert(phrase); // এরর: phrase নির্ধারণ করা নেই (ডেভলপার কনসোল চেক করুন) -``` - -আমারা যেটা দেখলাম, `var` - `if`, `for` অথবা অন্য ব্লক ভেদ করে বাইরে আসতে পারে। তার কারন অনেক আগে জাভাস্ক্রিপ্টে কোন লেক্সিকাল এনভাইরমেন্ট ছিল না। এবং `var` তারই একটি অংশ। - -## "var" ফাংশনের শুরুতেই ঘোষিত হয়। - -ফাংশনের শুরুতেই `var` ঘোষিত হয়ে যায়(অথবা স্ক্রিপ্ট গ্লোবালের জন্য শুরু হয়) - -অন্যভাবে বলা যায়, `var` ভেরিয়্যবল গুলো ফাংশনের শুরুতেই ঘোষিত হয়, সেটাকে যেখানেই সংজ্ঞায়িত করা হোক না কেন(ধরে নিলাম এটি কোন নেস্টেড ফাংশনের মধ্যে নয়)। - -তাহলেঃ - -```js run -function sayHi() { - phrase = "Hello"; - - alert(phrase); - -*!* - var phrase; -*/!* +export function bye() { + alert(`Bye`); } -sayHi(); ``` -...টেকনিক্যালি এটির মতোই(`var phrase` উপরে স্থানান্তরিত করে দেয়)ঃ +...তবে ডাইনামিক ইমপোর্টটি হতে পারেঃ -```js run -function sayHi() { -*!* - var phrase; -*/!* - - phrase = "Hello"; +```js +let {hi, bye} = await import('./say.js'); - alert(phrase); -} -sayHi(); +hi(); +bye(); ``` -...অথবা এটির মতো(কোড ব্লকগুলি উপেক্ষা করা হয়েছে) - -```js run -function sayHi() { - phrase = "Hello"; // (*) - - *!* - if (false) { - var phrase; - } - */!* +অথবা, যদি `say.js` এর ডিফল্ট এক্সপোর্ট থাকেঃ - alert(phrase); +```js +// 📁 say.js +export default function() { + alert("মডিউল লোড হয়েছে (export default)!"); } -sayHi(); ``` -লোকেরা এ জাতীয় আচরণকে "hoisting" নামেও অভিহিত করে, কারণ সমস্ত var ফাংশনের শীর্ষে "hoisting" হয়। - -সুতরাং উপরের উদাহরণে, `if(false)` কখনও কার্যকর হয় না, কিন্তু এতে কোন সমস্যা নেই। ফাংশনের শুরুতে এর অভ্যন্তরের `var` প্রসেস হয়ে যায়, সুতরং `(*)` মুহূর্তে ভেরিয়েবলটি বিদ্যমান থাকে। - -**ডিকলারেশন গুলো "hoisted" হলেও, কিন্তু "assignment" হয় না** +...তারপর এটাকে এক্সেস করার জন্য আমরা মডিউল অব্জেক্টের `default` প্রপার্টি ব্যাবহার করতে পারি। -একটি উদাহরণ দিয়ে দিয়ে দেখা যাক, যেমনঃ - -```js run -function sayHi() { - alert(phrase); - -*!* - var phrase = "Hello"; -*/!* -} +```js +let obj = await import('./say.js'); +let say = obj.default; +// অথাবা, এক লাইনে: let {default: say} = await import('./say.js'); -sayHi(); +say(); ``` -`var phrase` = "Hello" লাইনটির মধ্যে দুটি কাজ রয়েছেঃ - -১। ভেরিয়েবল ঘোষণা `var` -২। ভেরিয়াবল আসাইনমেন্ট `=`। - -ফাংশন এক্সিকিউশনের শুরুতেই ডিক্লেয়ার করা হয়ে থাকে ("hoisted"),তবে অ্যাসাইনমেন্টটি সর্বদা যেখানে প্রদর্শিত হবে সেখানে কাজ করে। সুতরাং কোডটি মূলত এই ভাবে কাজ করে: +এখানে সম্পূর্ণ উদাহারনটি রয়েছেঃ -```js run -function sayHi() { -*!* - var phrase; // ভেরিয়েবল ডিক্লেয়ার শুরুতেই কাজ করে ... -*/!* - - alert(phrase); // undefined - -*!* - phrase = "Hello"; // ...অ্যাসাইনমেন্ট - যখন এক্সিকিউশন এখানে পৌঁছায়। -*/!* -} +[codetabs src="say" current="index.html"] -sayHi(); +```smart +রেগুলার স্ক্রিপ্টে ডাইনামিক ইমপোর্ট কাজ করে, তার জন্য `script type="module" প্রয়োজন হয় না। ``` -কারন সকল var ফাংশনের শুরুতেই ডিক্লেয়ার করা হয়, আমরা ওই ফাংশন স্কোপের যে কোন জায়গায় থেকে ভেরিয়েবল সমূহ কে ব্যবহার করতে পারি। কিন্তু অ্যাসাইনমেন্টের আগ পর্যন্ত ভেরিয়েবল গুলো আনডিফাইন অবস্থায় থাকে। +```smart +যদিও `import()` দেখতে ফাংশন কলের মতো, কিন্তু এটি একটি (`super()` মতো) বিশেষ সিন্টেক্স যার জন্য "parentheses" ব্যবহার করতে হয়। `). -উপরের দুটি উদাহরণে `alert` কোন এরর ছাড়াই চলে, কারন ভেরিয়েবল `phrase` বিদ্যমান রয়েছে। তবে এর মান এখনও নির্ধারিত হয়নি, সুতরাং এটি আনডিফাইন দেখায়। - -## সারাংশ - -এখানে দুটি প্রধান পার্থক্য রয়েছে `var` এবং `let/const` এর মধ্যেঃ - -১। `var` ভেরিয়েবলের কোন ব্লক স্কোপ নেই, এগুলি সর্বনিম্ন ফাংশন লেভেল পর্যন্ত বিদ্যমান থাকে। -২। ফাংশনের শুরুতেই `var` ঘোষিত হয়ে যায়(স্ক্রিপ্ট গ্লোবালের জন্য শুরু হয়)। - -গ্লোবাল অবজেক্টের সাথে সম্পর্কিত আরও একটি ছোটখাটো পার্থক্য রয়েছে, আমরা পরবর্তী অধ্যায়ে এটি আলোচনা করব। - -এই পার্থক্যগুলি `var` কে বেশিরভাগ সময় `let` এর চেয়ে খারাপ করে তোলে। ব্লক-লেভেলের ভেরিয়েবলগুলি একটি দুর্দান্ত জিনিস। এই জন্য `let` এর স্ট্যান্ডার্ড চালু হয় অনেক আগে, এবং ভেরিয়েবল ঘোষণার জন্য এখন এটি একটি প্রধান উপায় (`const` সহ)। \ No newline at end of file +তাই আমারা `import` কে কোন ভেরিয়েবলে কপি অথবা `call/apply` করতে পারি না। +``` From 8f4d89d68d24cd656d5e4b711ee9839e20acb90e Mon Sep 17 00:00:00 2001 From: lhmisho Date: Tue, 5 Nov 2019 12:11:52 +0600 Subject: [PATCH 15/15] /done --- 1-js/13-modules/03-modules-dynamic-imports/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 40d5cd3ea..63a3158de 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -7,7 +7,7 @@ মডিউলের পাথ অবশ্যই প্রিমিটিভ স্ট্রিং হতে হবে, ফাংশন কল হওয়া যাবে না। এটি কাজ করবে নাঃ ```js -import ... from *!*getModuleName()*/!*; এরর, শুধুমাত্র "string" প্রযোজ্য +import ... from *!*getModuleName()*/!*; // এরর, শুধুমাত্র "string" প্রযোজ্য ``` দ্বিতীয়ত, আমরা কন্ডিশনালি অথবা রান-টাইমে ইমপোর্ট করতে পারবো না।