[ { "path": ".gitignore", "content": "# General\n.DS_Store\n.AppleDouble\n.LSOverride\n.idea\n.cloud\n.project\ntmp/\ntypings/\n\n# Visual Studio Code\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n\n" }, { "path": "README.md", "content": "# JavaScript Bootcamp\n\n## উদ্দেশ্য:\nজাভাস্ক্রিপ্ট শেখার জন্য নতুনদের পাশাপাশি মিড লেভেল JS ডেভেলপারদের জন্য একটি রোডম্যাপ তৈরি করা।\n\n## To get started:\n1. [Basic](basic)\n2. [Advanced](advanced)\n3. [Projects](projects)\n" }, { "path": "advanced/1. call-apply-bind-methods/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/1. call-apply-bind-methods/Examples/example1.js", "content": "\nconst person = {\n firstName: \"Anik\",\n lastName: \"Sajli\",\n getFullName: function() {\n var fullName = this.firstName + \" \" + this.lastName;\n return fullName;\n }\n}\n\nfunction printName(favoriteFood) {\n console.log(this.getFullName() + ` loves to eat ${favoriteFood}`);\n}\n\n // This bind method returns a new function which has it's \"this\" keyword set to the\n // provided value in the bind method.\n // bind() method example:\n \nconst logName = printName.bind(person, \"Pine apple\"); // Anik Sajli loves to eat Pine apple\nlogName();\n\n// * call method executes the function immediately \n// * doesn't make any copy of the function \n// * call method takes additional parameters as well\n// call() method example:\n\nprintName.call(person, \"Apple\"); // Anik Sajli loves to eat Apple\n\n// the difference between call() and apply() method is call() method accepts \n// comma seperated arguments whereas apply method expects the parameters in an array\n// apply() method example:\n\nprintName.apply(person, [\"Orange\"]); // Anik Sajli loves to eat Orange\n\n\n\n\n\n\n\n" }, { "path": "advanced/1. call-apply-bind-methods/Examples/example2.js", "content": "{\n /*\n We can achieve constructor chaining by using call() and apply().\n We can pick common properties from another constructor function\n to be included in our new constructor function by using these methods.\n */\n}\n\nfunction Food(name, price) {\n this.name = name;\n this.price = price;\n}\n\nfunction Burger(name, price) {\n Food.call(this, name, price);\n this.category = \"fastfood\";\n}\n\nfunction Brownie(name, price) {\n Food.call(this, name, price);\n this.category = \"dessert\";\n}\n\nburger = new Burger(\"Hamburger\", \"300\");\nbrownie = new Brownie(\"Chocolate brownie\", \"200\");\nconsole.log(burger);\nconsole.log(brownie);\n\n{\n /*\n Output:\n {\n category: \"fastfood\"\n name: \"Hamburger\"\n price: \"300\"\n }\n {\n category: \"dessert\"\n name: \"Chocolate brownie\"\n price: \"200\"\n }\n */\n}\n\n// The same behavior can also be achieved by using the apply() method\nfunction Pizza(name, price) {\n Food.apply(this, [name, price]);\n this.category = \"fastfood\";\n}\n\npizza = new Pizza(\"Pepperoni Pizza\", \"500\");\n\nconsole.log(pizza);\n\n{\n /*\n Output:\n {\n category: \"fastfood\"\n name: \"Pepperoni Pizza\"\n price: \"500\"\n }\n */\n}\n\n\n\n" }, { "path": "advanced/1. call-apply-bind-methods/Examples/example3.js", "content": "/*\ncall(), bind() and apply() methods are used for several reasons.\nSome of them are:\n1. Create custom value of \"this\"\n2. Borrowing another objects methods\nwhich means invoking an object’s method on a totally different object\n*/\n\n/*\ncall() Method\n- The first parameter of call() method is an object on which \"this\" will point to\n- Other parameters are variables\n*/\n\nlet Team = {\n getStatistics : function(league, season){\n return this.name + \" are \" +this.position+ \" in \"+ league+\" with \"+this.points+\" points in season \"+season; \n }\n}\n\nlet RealMadrid = {\n name: \"Real Madrid\",\n position: \"1st\",\n points: 46\n}\n\nlet Barcelona = {\n name: \"FC Barcelona\",\n position: \"5th\",\n points: 31\n}\n\nconsole.log(Team.getStatistics.call(RealMadrid, \"Laliga\", \"2022\"));\n// Here we set \"this\" of getStatistics method to RealMadrid object\n// Output: Real Madrid are 1st in Laliga with 46 points in season 2022\n\nconsole.log(Team.getStatistics.call(Barcelona, \"Laliga\", \"2022\"));\n// Here we set \"this\" of getStatistics method to Barcelona object\n// Output: FC Barcelona are 5th in Laliga with 31 points in season 2022\n\n\n/*\napply() Method\n- The first parameter of apply() method is an object on which \"this\" will point to\n- The second parameter of the apply() method accepts the arguments as an array.\n- Which is the only difference between call() and apply()\n*/\n\nlet others = [\"Laliga\", \"2022\"];\nconsole.log(Team.getStatistics.apply(RealMadrid, others));\n// Here we set \"this\" of getStatistics method to RealMadrid object\n// On 2nd parameter we used an array to produce the same output\n// Output: Real Madrid are 1st in Laliga with 46 points in season 2022\n\n\n/*\nbind() method\n- bind() method is like call() method\nbut it returns a bound function which will be invoked later \n*/\n\nlet result = Team.getStatistics.bind(Barcelona, \"Laliga\", \"2022\");\nconsole.log(result())\n// Output: FC Barcelona are 5th in Laliga with 31 points in season 2022\n// Here we stored the bound function in the result variable\n// Then we invoked the returned function later\n" }, { "path": "advanced/1. call-apply-bind-methods/Examples/example4.js", "content": "// Here are some other use of call(), bind() and apply() methods\n\n/*\nWe can use call() to Invoke an Anonymous Function\n*/\n\nconst sports = [\n { name: 'Cricket' },\n { name: 'Football' }\n];\n\nfor(let i=0;i {\n console.log(\"Student name: \" + name + \"\\n\" \n + \"Department name: \" + dept + \"\\n\"\n + \"Roll number: \" + roll);\n }\n }\n\n return student;\n} \n\nconst student1 = studentFactory(\"Anik\", \"Software Engineering\", \"2016831008\");\nstudent1.printStudentDetails();\n\n\n// output:\n// Student name: Anik\n// Department name: Software Engineering\n// Roll number: 2016831008\n\n\n" }, { "path": "advanced/2. factory-pattern/Examples/example2.js", "content": "{\n /*\n let's say a company has three types of employees and the salary \n for those three positions are predefined. We can create the \n employee objects by using the factory pattern. Constructor pattern \n has also been used in this example for creating certain objects.\n However, the employeeFactory() function has followed the \n factory pattern to create employee objects.\n */\n}\n\nfunction employeeFactory(employeeType, employeeName) {\n let employee;\n if (employeeType === \"fulltime\") {\n employee = new fulltimeEmployee(employeeName);\n } else if(employeeType === \"parttime\") {\n employee = new parttimeEmployee(employeeName);\n } else if (employeeType === \"temporary\") {\n employee = new temporaryEmployee(employeeName);\n }\n employee.printEmployeeDetails = () => {\n console.log(\"Name: \" + employee.name + \"\\n\"\n + \"Salary: \" + employee.salary + \"\\n\"\n + \"Employee Type: \" + employee.employeeType)\n }\n return employee;\n}\n\nfunction fulltimeEmployee(employeeName) {\n this.name = employeeName;\n this.salary = 50000;\n this.employeeType = \"Fulltime Employee\";\n}\n\nfunction parttimeEmployee(employeeName) {\n this.name = employeeName;\n this.salary = 30000;\n this.employeeType = \"Parttime Employee\";\n}\n\nfunction temporaryEmployee(employeeName) {\n this.name = employeeName;\n this.salary = 25000;\n this.employeeType = \"Temporary Employee\";\n}\n\nemployee1 = employeeFactory(\"fulltime\", \"Fahim\");\nemployee1.printEmployeeDetails();\n\n\n\n// output:\n// Name: Fahim\n// Salary: 50000\n// Employee Type: Fulltime Employee\n\n\n\n\n\n\n" }, { "path": "advanced/2. factory-pattern/Examples/example3.js", "content": "/*\nIts easy to define private methods or property in a factory.\nWe just need to include them outside of the returned object.\n*/\n\nfunction person (name) {\n function sayDetail(){\n return name + \" who loves travelling\";\n }\n return {\n talk: function(){\n console.log('Hello, my name is '+sayDetail())\n }\n }\n}\n\n/*\nHere in this code sayDetail() is closed inside factory. \nThis helps us to keep our implementation details encapsulated.\n*/\n\nlet person1 = person(\"Mehedi\"); \nperson1.talk() // Output: Hello, my name is Mehedi who loves travelling\nperson1.sayDetail() // Output: TypeError: person1.sayDetail is not a function\n\n" }, { "path": "advanced/2. factory-pattern/Examples/example4.js", "content": "//Factory Pattern মেথড ব্যাবহার করার উদাহরণ\n//Live: https://jsfiddle.net/rijans/zhLcbepo/5/\n\nfunction makePersonalHomePage(metaTitle) {\n return {\n meta_title: metaTitle,\n make_html: function () {\n console.log('A page with the title of ' + this.meta_title + ' is made!')\n }\n }\n}\n\nconst homePageOfJaber = makePersonalHomePage('Jaber\\'s Home');\nconsole.log(homePageOfJaber.make_html());\n\n\nconst homePageOfVivaSoft = makePersonalHomePage('VivaSoft\\'s Home');\nconsole.log(homePageOfVivaSoft.make_html());\n\n//ফলাফল:\n//A page with the title of Jaber's Home is made!\"\n//A page with the title of VivaSoft's Home is made!\"" }, { "path": "advanced/2. factory-pattern/Examples/example5.js", "content": "//Factory Pattern মেথড ব্যাবহার করার উদাহরণ\n//Live: https://jsfiddle.net/rijans/vr31aj7x/\n\nfunction buildCustomPC(cpu, ram, motherBoard, others) {\n return {\n cpu: cpu,\n ram: ram,\n motherBoard: motherBoard,\n others: others,\n buildPC: function () {\n console.log('A PC with RAM ' + ram + ', CPU ' + cpu + ' and motherboard ' + motherBoard + ' is built!')\n }\n }\n}\n\nconst pc1 = buildCustomPC('Core i7 11700', 'Corsair 16GB 3200GHz', 'Asus Gaming G8', {});\nconsole.log(pc1.buildPC());\n\n\nconst pc2 = buildCustomPC('Apple M1 Pro', 'TSC 16GB Module', 'Foxcon M1 Mainboard', {});\nconsole.log(pc2.buildPC());\n\n//ফলাফল:\n//\"A PC with RAM Corsair 16GB 3200GHz, CPU Core i7 11700 and motherboard Asus Gaming G8 is built!\"\n//\"A PC with RAM TSC 16GB Module, CPU Apple M1 Pro and motherboard Foxcon M1 Mainboard is built!\"" }, { "path": "advanced/2. factory-pattern/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/2. factory-pattern/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/2. factory-pattern/Practices/practice1.md", "content": "Consider the below code where we have created 2 Vehicle objects on the fly. \nHow can you improve this code by using the factory design pattern? \n\n```javascript\nconst Vehicle1 = {\n manufacturer: \"Toyota\",\n PlateNO: 12345,\n startEngine () {console.log(\"Starting engine.\"},\n drive () {console.log(\"Driving car...\")}\n}\n\n\t\nconst Vehicle2 = {\n manufacturer: \"Ford\",\n PlateNO: 13345,\n startEngine () {console.log(\"Starting engine.\"},\n drive () {console.log(\"Driving car...\")}\n}\n```" }, { "path": "advanced/2. factory-pattern/Practices/practice2.md", "content": "\nWhat will be the output of this code?\nHow can we access the functions inside factory function?\n\n```javascript\nfunction person (name, sport) {\n function saySport(){\n return \" who loves \"+sport;\n }\n function sayName(){\n return \"My name is \"+ name +saySport();\n }\n return {\n talk: function(){\n console.log('Hello, '+sayName())\n }\n }\n}\n\nlet person1 = person(\"Mehedi\", \"Cricket\");\nconsole.log(person1.saySport())\n```\n" }, { "path": "advanced/2. factory-pattern/Practices/practice3.md", "content": "নিচের কোড টি খেয়াল করুন। এটাতে factory pattern ব্যাবহার করা হয়েছে। আপনি কিভাবে এটাকে আর ভাল করতে পারেন? সাথে dynamic parameters দিয়ে?\n\n```javascript\nfunction pc1() {\n return {\n manufacturer: \"ASUS\",\n cpu: \"Intel Core i9 11900\",\n ram: \"Corsair 16GB 3200 GHz\",\n buildPC: function () {\n console.log('A PC with manufacturer ' + this.manufacturer + ' CPU ' + this.cpu + ' RAM ' + this.ram + ' is built!');\n }\n }\n\n}\n\nfunction pc2() {\n return {\n manufacturer: \"MSI\",\n cpu: \"Apple M1 Pro Max\",\n ram: \"TSC 16GB 3600GHz\",\n buildPC: function () {\n console.log('A PC with manufacturer ' + this.manufacturer + ' CPU ' + this.cpu + ' RAM ' + this.ram + ' is built!');\n }\n }\n}\n\nlet newPC1 = pc1();\nconsole.log(newPC1.buildPC());\n\nlet newPC2 = pc2();\nconsole.log(newPC2.buildPC());\n\n\n```" }, { "path": "advanced/2. factory-pattern/README.md", "content": "### Factory Pattern\n\nআজকের আলোচনার বিষয় হচ্ছে জাভাস্ক্রিপ্টের Factory Pattern. জাভাস্ক্রিপ্ট প্রোগ্রামার বা ডেভেলপার হিসাবে Factory Pattern সম্পর্কে পরিষ্কার ধারণা থাকা খুব প্রয়োজন। তাই চেষ্টা করবো আজকে practical উদাহরণ দিয়ে এই মেথডকে নিয়ে আলোচনা করতে। আশা করি, আজকের পর থেকে এই Factory Pattern নিয়ে কাজ করতে কখনো সমস্যা হবে না।\n\nধরা যাক, আমাদের কাছে একটি circle নামে একটি Object আছে। circle Object টিতে draw নামে একটি মেথড এবং radius নামে একটি variable আছে।\n\n```js\n\nconst circle = {\n radius: 1,\n draw: function draw() {\n console.log(`Circle radius is ${this.radius}`);\n },\n};\nconsole.log(circle.draw()); \n\n\n/// output: Circle radius is 1\n\n```\nউপরের কোড থেকে দেখতে পাচ্ছি যে, circle Object এর draw মেথডটিকে call করে আমরা circle এর radius টি print করতে পারছি। এখন আমরা যদি circle2 নামে এ একই Functionality এর আরও একটি Object create করতে চাই তাহলে ঠিক একই রকম করে আবার নতুন করে Object এর structure টা লিখতে হবে। অনেকটা এই রকম করে,\n\n```js\n\nconst circle2 = {\n radius: 5,\n draw: function draw() {\n console.log(`Circle2 radius is ${this.radius}`);\n },\n};\nconsole.log(circle2.draw()); /// output: Circle2 radius is 5\n\n```\n\ncircle এবং circle2 এই দুইটি Object এর কোড যদি একটু লক্ষ্য করি তবে দেখব যে, এখানে বেশ repetative কোড আছে। তাছাড়া এখানে মাত্র একটি মেথড রয়েছে কিন্তু যদি এইখানে আরও অনেক মেথড থাকত এবং প্রত্যেক মেথডে অনেক কোড থাকত তবে আমাদের একই কোড বারবার লিখতে হত। এছাড়াও যদি কোনও মেথডের লজিক পরিবর্তন করার দরকার হয় তবে একাধিক জায়গায় কোড পরিবর্তন করতে হবে যা খুবই সময় সাপেক্ষ এবং বিরক্তিকর। তাই না।\nসুতরাং যদি আমাদের Object এ লজিক থাকে তবে আমাদের এখন ভিন্ন একটা পদ্ধতি দরকার যার মাধ্যমে আমরা Object বানাতে পারি। ঠিক এই সময়ে আমরা Factory বা Constructor ফাংশন ব্যবহার করি। এই আলোচনাতে আমরা Factory ফাংশন নিয়ে কথা বলব।\n\n### Factory Pattern\n\nসহজভাবে বলতে গেলে, Factory Function এমন একটি ফাংশন যা Class বা new Keyword এর জটিলতা ছাড়াই Object তৈরি করতে পারে । অন্যভাবে বলতে গেলে, জাভাস্ক্রিপ্টের যেকোন Function-ই Object return করতে পারে কিন্তু যখন কোন Function এই একই কাজ new Keyword ছাড়া করতে পারে তাকেই আমরা Factory Function বলব। Factory Function ব্যবহার করে Object তৈরি করার প্রক্রিয়াই আসলে Factory Pattern.\n\nFactory যেমন বিভিন্ন জিনিস তৈরি করতে পারে ঠিক তেমনি জাভাস্ক্রিপ্টের Factory Function বিভিন্ন Object তৈরি করতে পারে। জটিল মনে হলেও ভয় পাওয়ার কিছু নেই একটা উদাহরণ দেখলে সব ক্লিয়ার হয়ে যাবে।\n\n\nপ্রথমে আমারা একটি Function বানাবো যার নাম হবে createCircle.\n\n```js\n\nfunction createCircle(){\n}\n\n```\nএরপর createCircle Factory Function এর মধ্যে আমরা আমাদের circle Object এর Defination টা বসিয়ে return করব।\n \n ```js\n\nfunction createCircle(){\n const circle = {\n radius: 1,\n draw: function draw() {\n console.log(`Circle radius is ${this.radius}`);\n },\n };\n return circle;\n}\n\n```\n\nএখন যখনই আমরা createCircle Factory Function কে call করব আমরা একটা circle Object পাব। কিন্তু আমারা এখানে circle Object এর radius এর মানটা hardcoded করে রেখেছি ফলে যে circle Object তৈরি হবে তার radius সবসময় একই হবে। সুতরাং আমাদের কোডটাকে ডাইনামিক করতে হবে যাতে আমরা যে কোন radius এর circle Object তৈরি করতে পারি। এক্ষেত্রে আমরা createCircle Factory Function এ প্যারামিটার হিসেবে radius এর মানটা পাঠাতে পারি।\n\n```js\n\nfunction createCircle(radius){\n const circle = {\n radius: radius,\n draw: function draw() {\n console.log(`Circle radius is ${this.radius}`);\n },\n };\n return circle;\n}\n\nconst circle1 = createCircle(5);\nconsole.log(circle1.draw());\n\n\n//\n// output: Circle radius is 5\n//\n//\n\n```\n\nFactory Function এর সৌন্দর্য হল আমরা আমাদের Object এর লজিকগুলো এক জায়গায় সংজ্ঞায়িত করেছি। সুতরাং আমরা এখন createCircle Factory Function কে বিভিন্ন মান বা বিভিন্ন আর্গুমেন্ট দিয়ে কল করে বিভিন্ন circle Object পেতে পারি। কিন্তু একটু লক্ষ্য করলে দেখা যাবে যে, আমরা draw মেথড শুধুমাত্র একটি জায়গায় সংজ্ঞায়িত করেছি। সুতরাং, যদি এই পদ্ধতিতে যদি কোন Bug থাকে যা ভবিষ্যতে আমাদের ঠিক করতে হবে সেখানে শুধুমাত্র একটি জায়গাতে সংশোধন করলেই হবে। নিচের উদাহরণটি দেখলে ব্যাপারটি আরও পরিষ্কার হবে। \n\n```js\n\nfunction createCircle(radius){\n const circle = {\n radius: radius,\n draw: function draw() {\n console.log(`Circle radius is ${this.radius}`);\n },\n };\n return circle;\n}\n\nconst circle1 = createCircle(5);\nconsole.log(circle1.draw());\nconst circle2 = createCircle(10);\nconsole.log(circle2.draw());\n\n//\n// output:\n// Circle radius is 5\n// Circle radius is 10\n// \n\n\n```\n\nউপরের কোড এর আউটপুটটা দেখুন, দুইটি circle Object তৈরি হয়েছে। এভাবে যত খুশি তত circle Object তৈরি করা যাবে। এই ছিল Factory Pattern নিয়ে আজকের লেখা। হ্যাপি কোডিং।\n" }, { "path": "advanced/3. constructor-pattern/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/3. constructor-pattern/Examples/example1.js", "content": "{\n /*\n Counstructor pattern can be used to create new objects. As you may know that factory pattern \n can also be used for the same purpose. But the basic difference between these two process \n is in case of factory pattern the function returns an object but when we're using \n constructor pattern, we'll be using the 'new' keyword to create an empty object and \n then add our desired properties to that object with the help of 'this' keyword.\n \n In our code below, the 'this' keyword used in the CreateLaptop() function points to the\n empty object which is being created by the 'new' keyword below.\n */\n}\n\nfunction CreateLaptop(brand, model, ram, storage) {\n this.brand = brand;\n this.model = model;\n this.ram = ram;\n this.storage = storage;\n this.toString = function(){\n return `This ${this.brand} ${this.model} laptop has ${this.ram} RAM and ${this.storage} storage.`\n }\n}\n\nconst laptop1 = new CreateLaptop(\"Dell\", \"Inspiron 15\", \"8 GB\", \"1 TB\");\nconsole.log(laptop1.toString());\n\n {\n /*\n Output:\n This Dell Inspiron 15 laptop has 8 GB RAM and 1 TB storage.\n */\n }\n" }, { "path": "advanced/3. constructor-pattern/Examples/example2.js", "content": "{\n /*\n In the example below, we have used constructors with prototype.\n Just like any other objects in javascript, functions also contain 'prototype'\n objects.\n The two car objects (car1 and car2) that we created here will contain the same \n instance of the 'toString' property that we added to the 'prototype' object of 'Car'.\n */\n}\nfunction Car(brand, model, price) {\n this.brand = brand;\n this.model = model;\n this.price = price;\n }\n\n Car.prototype.toString = function () {\n return this.brand + ' ' + this.model + \" is worth \" + this.price + \" tk\";\n };\n\n car1 = new Car('Toyota', 'Corolla', 2000000);\n car2 = new Car('Lamborghini', 'Silhouette', 30000000);\n\n console.log(car1.toString());\n console.log(car2.toString());\n\n {\n /*\n Output:\n Toyota Corolla is worth 2000000 tk\n Lamborghini Silhouette is worth 30000000 tk\n */\n }\n\n\n" }, { "path": "advanced/3. constructor-pattern/Examples/example3.js", "content": "/*\nHere 'mehedi' is an object of contructor function 'Person' and\nwe can also add extra properties to the object which\nwill not be property of constructor 'Person'\n*/\n\nfunction Person (firstName, lastName) {\n this.firstName = firstName;\n this.lastName = lastName;\n this.fullName =function () {\n return this.firstName + this.lastName;\n }\n}\n\nlet mehedi = new Person(\"Mehedi\", \"Zamadar\");\nmehedi.age = 24;\nconsole.log(mehedi.age) // Output: 24\n\nmehedi.hello = function (){\n return \"Hello\";\n}\nconsole.log(mehedi.hello()) // Output: Hello" }, { "path": "advanced/3. constructor-pattern/Examples/example4.js", "content": "/*\nWe know while using the constructor pattern,\nwe need to manage the context of this by using the new keyword.\nThere is another technique which avoids this.\nWhich is using Closure with getters and setters.\n*/\n\nfunction Rectangle(length, width){\n let _length = length;\n let _width = width;\n\n let rectangle = {};\n rectangle.Area = function(){\n return _length * _width;\n }\n // Getter/setters\n rectangle.Length = function(value){\n if(!arguments.length) return _length;\n _length = value;\n return rectangle;\n }\n\n rectangle.Width = function(value){\n if(!arguments.length) return _width;\n _width = value;\n return rectangle;\n }\n return rectangle;\n\n}\n\nlet rectangle1 = Rectangle(10, 10); // no 'new' keyword\nconsole.log(rectangle1.Area()) // Output: 100\n\nrectangle1.Length(100)\nrectangle1.Width(50)\nconsole.log(rectangle1.Area()) // Output: 5000\n\n/*\nWith a reference of 'rectangle1' object we can \nset Length and Width property to any value.\n*/" }, { "path": "advanced/3. constructor-pattern/Examples/example5.js", "content": "//Example for Javascript Constructor Pattern Function\n//Constructor Pattern মেথড ব্যাবহার করার উদাহরণ\n\n//Live: https://jsfiddle.net/rijans/4drfo3qw/\n\nfunction BuildCustomPC(cpu, ram, motherBoard, others) {\n\n this.cpu = cpu;\n this.ram = ram;\n this.motherBoard = motherBoard;\n this.others = others;\n this.buildPC = function () {\n console.log('A PC with RAM ' + ram + ', CPU ' + cpu + ' and motherboard ' + motherBoard + ' is built!')\n }\n\n}\n\nconst pc1 = new BuildCustomPC('Core i7 11700', 'Corsair 16GB 3200GHz', 'Asus Gaming G8', {});\nconsole.log(pc1.buildPC());\n\n\nconst pc2 = new BuildCustomPC('Apple M1 Pro', 'TSC 16GB Module', 'Foxcon M1 Mainboard', {});\nconsole.log(pc2.buildPC());\n\n//ফলাফল:\n//\"A PC with RAM Corsair 16GB 3200GHz, CPU Core i7 11700 and motherboard Asus Gaming G8 is built!\"\n//\"A PC with RAM TSC 16GB Module, CPU Apple M1 Pro and motherboard Foxcon M1 Mainboard is built!\"" }, { "path": "advanced/3. constructor-pattern/Examples/example6.js", "content": "//Constructor Pattern মেথড ব্যাবহার করার উদাহরণ\n//Live: https://jsfiddle.net/rijans/opu1xckt/\n\nfunction CreateUser(username, fName, lName, email) {\n this.username = username;\n this.fName = fName;\n this.lName = lName;\n this.email = email;\n this.createUser = function () {\n console.log('A User with username ' + this.username + ', first name ' + this.fName + ' and last name ' + this.lName + ' is created!')\n }\n}\n\nconst user1 = new CreateUser('jaber', 'Jaber', 'Al Nahian', 'j@gmail.com');\nconsole.log(user1.createUser());\n\n\nconst user2 = new CreateUser('tareq', 'Shafiul Hasan', 'Tareq', 't@gmail.com');\nconsole.log(user2.createUser());\n\n//ফলাফল:\n//\"A User with username jaber, first name Jaber and last name Al Nahian is created!\"\n//\"A User with username tareq, first name Shafiul Hasan and last name Tareq is created!\"" }, { "path": "advanced/3. constructor-pattern/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/3. constructor-pattern/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/3. constructor-pattern/Practices/practice1.md", "content": "Consider the below code snippet. Try to guess which design pattern was used in this code.\nConvert this code to implement the same functionailty by using Constructor pattern.\n\n```javascript\nfunction createVehicle(brand, model, price) {\n const vehicle = {\n brand: brand,\n model: model,\n price: price,\n printVehicleDetails: () => {\n console.log(\"Brand: \" + brand + \"\\n\" \n + \"Model: \" + model + \"\\n\"\n + \"Price: \" + price + \" tk\");\n }\n }\n\n return vehicle;\n}\n\nconst vehicle1 = createVehicle(\"Toyota\", \"Corolla\", \"2000000\");\nvehicle1.printVehicleDetails();\n```" }, { "path": "advanced/3. constructor-pattern/Practices/practice2.md", "content": "\nWhat will be the output if we dont use 'new' keyword\nwhile creating new object of constructor function?\n\n```javascript\nfunction Team (name, country){\n this.name = name;\n this.country = country;\n}\n\nTeam.prototype.detail = function (){\n return this.name + \" is from \" + this.country;\n}\n\nlet team1 = Team(\"Manchester City\", \"England\");\nconsole.log(team1.detail())\n```" }, { "path": "advanced/3. constructor-pattern/Practices/practice3.md", "content": "নিচের কোডটি লক্ষ করুন। দুটি ইউজার বানানর জন্য দুটি constructor function বানানো হয়েছে। এহাকে normalize করুন with dynamic parameters.\n\n````javascript\nfunction CreateUser1() {\n this.username = 'jaber';\n this.fName = 'Jaber';\n this.lName = 'Al Nahian';\n this.email = 'j@gmail.com';\n this.createUser = function () {\n console.log('A User with username ' + this.username + ', first name ' + this.fName + ' and last name ' + this.lName + ' is created!')\n }\n}\n\nfunction CreateUser2() {\n this.username = 'tareq';\n this.fName = 'Shaiful Hasan';\n this.lName = 'Tareq';\n this.email = 't@gmail.com';\n this.createUser = function () {\n console.log('A User with username ' + this.username + ', first name ' + this.fName + ' and last name ' + this.lName + ' is created!')\n }\n}\n\nconst user1 = new CreateUser1();\nconsole.log(user1.createUser());\n\n\nconst user2 = new CreateUser2();\nconsole.log(user2.createUser());\n````" }, { "path": "advanced/3. constructor-pattern/README.md", "content": "### Constructor Pattern\n\nআজকের আলোচনার বিষয় হচ্ছে জাভাস্ক্রিপ্টের Constructor Pattern. গত আলোচনাতে আমারা Object তৈরি করার জন্য Factory pattern নিয়ে আলোচনা করেছি। Factory pattern এর মত Constructor Pattern ও Object তৈরি করে থাকে, তবে দুইটির মধ্যে কিছু পার্থক্য রয়েছে। আজকের আলোচনাতে Constructor Pattern কি এবং Factory pattern এর সাথে এটির পার্থক্য কি তা নিয়ে বিস্তারিত আলোচনা করব। বোঝার সুবিধার জন্য আমরা Factory pattern এ যে উদাহরণ ব্যবহার করেছিলাম সেই উদাহরণ দিয়ে Constructor Pattern কে বোঝার চেষ্টা করব। চলুন শুরু করা যাক।\n\nসহজভাবে বলতে গেলে, Constructor Function এমন একটি ফাংশন যা Object তৈরি করতে পারে। Constructor function ব্যবহার করে Object তৈরি করার প্রক্রিয়াই আসলে Constructor Pattern.\n\nযাহোক Constructor Function এর Naming Convension একটু আলাদা। এখানে আমরা ফাংশনের নামে Pascal Notation ব্যবহার করে থাকি। যদি আমারা Pascal Notation ভুলে গিয়ে থাকি তবে মনে করিয়ে দিচ্ছি। Pascal Notation এ আমরা প্রতিটি শব্দের প্রথম বর্ণটি বড় হাতের অক্ষরে লিখে থাকি। উদাহরণসরূপ, \n\n```js\n\nfunction CreateCircle(){} //// CreateCircle maintain Pascel Notation.\nfunction createCircle(){} //// createCircle maintain Camel Notation.\n\n```\n\nসুতরাং, জাভাস্ক্রিপ্টের Convenstion অনুযায়ী, আমরা যখন Constructor Function ব্যবহার করব তখন অবশ্যই Pascal Notation ব্যবহার করব, যাতে অন্য জাভাস্ক্রিপ্টের ডেভেলপাররা নাম পড়েই বুঝতে পারে এই Function এর কাজ কি।\n\nযাহোক, এখন আমরা প্রথমে একটি Function বানাবো যার নাম হবে CreateCircle (Pascal Notation).\n\n```js\n\nfunction CreateCircle(){} //// CreateCircle maintain Pascel Notation.\n\n```\nCreateCircle ফাংশনের কাজ হবে একটা circle Object তৈরি করা যেখানে circle এর radius এবং draw নামে একটা মেথড থাকবে। ঠিক Factory pattern আলোচনার উদাহরণের মত। \n\nএখানে আমরা Factory pattern মত Object Structure return করার পরিবর্তে একটু ভিন্ন পদ্ধতিতে Object কে Initialize করব জাভাস্ক্রিপ্টের ```this``` KeyWord ব্যবহার করে। জাভাস্ক্রিপ্টের একটা KeyWord আছে ```this```. এখন আমরা মনে করি যে, This একটা খালি বা Empty Object কে Reference করে। This যেহেতু খালি বা Empty Object কে Reference করছে তাই Dot Notation ব্যবহার করে আমরা This নামের খালি বা Empty Object এ Property add করতে পারি। চলুন দেখি তাহলে।\n\n```js\n\nfunction CreateCircle(radius){\n this.radius = radius;\n} \n\n```\n\nউপরের কোডে আমরা ```this``` নামের খালি বা Empty Object এ আমরা radius নামের একটা Property যোগ করলাম। জাভাস্ক্রিপ্টের Object হল ডাইনামিক, একবার Create করার পর এতে বিভিন্ন property বা মেথড যোগ করা যায়। চলুন আমার draw নামে একটা মেথড যোগ করি যা circle এর radius টা প্রিন্ট করবে।\n\n```js\n\nfunction CreateCircle(radius){\n this.radius = radius;\n this.draw = function () {\n console.log(`Circle radius is ${this.radius}`);\n };\n} \n\n```\n\nএখন আমরা CreateCircle Constructor Function ব্যবহার করে circle Object তৈরি করব।\n\n```js\n\nfunction CreateCircle(radius){\n this.radius = radius;\n this.draw = function () {\n console.log(`Circle radius is ${this.radius}`);\n };\n}\n\nconst circle1 = new CreateCircle(5);\n\n```\nউপরের কোডে আমারা একটা নতুন Keyword ব্যবহার করেছি তা হল ```new``` নিশ্চয়ই লক্ষ্য করেছেন। এখন এই ```new``` Keyword নিয়ে কিছু কথা বলা যাক। আমারা যখন এই ```new``` Keyword টা ব্যবহার করি তখন আসলে তিনটি জিনিস ঘটে। প্রথমত, এই ```new``` Keyword একটি খালি বা empty জাভাস্ক্রিপ্ট Object তৈরি করে। অনেকটা ```const x = {} ``` এইরকম, যা আসলে Background এ কাজ করে বলে আমরা দেখতে পাই না। দ্বিতীয়ত, এইটি ```this``` টিকে সেট করবে খালি বা empty Object টিকে পয়েন্ট করার জন্য যার মধ্যমে আমরা খালি বা empty Object টিতে property বা মেথড যোগ করব। আর অবশেষে, Object টিকে ফাংশন থেকে return করবে। ```return this```\nএই রকম। এই প্রক্রিয়াটিও আসলে Background এ কাজ করে বলে আমরা দেখতে পাই না। \n\nসুতরাং আমরা এখন CreateCircle Constructor Function কে বিভিন্ন মান বা বিভিন্ন আর্গুমেন্ট দিয়ে কল করে বিভিন্ন circle Object পেতে পারি। চলুন আমরা আরও কিছু circle Object তৈরি করি আমাদের লিখা Constructor Function দিয়ে।\n\n```js\n\nfunction CreateCircle(radius) {\n this.radius = radius;\n this.draw = function () {\n console.log(`Circle radius is ${this.radius}`);\n };\n}\n\nconst circle1 = new CreateCircle(5);\nconsole.log(circle1.draw());\nconst circle2 = new CreateCircle(10);\nconsole.log(circle2.draw());\n\n\n//\n// output:\n// Circle radius is 5\n// Circle radius is 10\n//\n\n\n```\n\nআমরা এখন Factory Function এবং Constructor Function দুইটি পদ্ধতিতেই Object তৈরি করতে পারি। এখন আমরা দেখব এই দুই পদ্ধতির মধ্যে আসলে পার্থক্য কি?\n\nFactory Function এ আমরা শুধু ফাংশনকে কল করি এবং ফাংশন আমাদের একটা Object রিটার্ন করে আর অন্যদিকে Constructor Function এ আমরা ```new``` keyword ব্যবহার করি এবং Object রিটার্ন না করে ```this``` keyword এর মাধ্যমে খালি বা Empty Object এ প্রপার্টি বা মেথড যোগ করি। এছাড়াও Naming Convension এর ক্ষেত্রে Factory Function এ Camel Notation এবং Constructor Function এ Pascal Notation ব্যবহার করে থাকি।\nএখন আমাদের মনে প্রশ্ন আসতে পারে যে, আমরা কোন approach বা pattern টা ব্যবহার করব Object তৈরি করার জন্য। \nযদিও দুইটি approach বা pattern ই সমান কার্যকর কিন্তু যাদের পূর্বে ডেভেলপমেন্টের অভিজ্ঞতা রয়েছে বিশেষ করে C# বা Java Developer তাদের কাছে Constructor pattern টি বেশ পরিচিত, তারা এই pattern এ বেশি Comfort Feel করে। \n\nএই ছিল Constructor pattern নিয়ে আজকের আলোচনা। \n\nহ্যাপি কোডিং।\n\n " }, { "path": "advanced/4. prototype/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/4. prototype/Examples/example1.js", "content": "{\n /*\n In the example below, the function getFullName() will be available \n in every new Name object automatically because we have put this \n function inside the prototype object of the Name() constructor function. \n */\n}\n\nfunction Name(firstName, lastName) {\n this.firstName = firstName;\n this.lastName = lastName;\n}\n\nName.prototype.getFullName = function() {\n return `${this.firstName} ${this.lastName}`;\n}\n\nvar name1 = new Name('Anik', 'Sajli');\nconsole.log(name1.getFullName()); // Anik Sajli\n\nvar name2 = new Name('Fahim', 'Ahmed');\nconsole.log(name2.getFullName()); // Fahim Ahmed\n\n\n" }, { "path": "advanced/4. prototype/Examples/example2.js", "content": "{\n /*\n One fun thing about prototypes is even the prototype of a function has \n it's own prototype. This is called prototype chaining. In the example below,\n the nesting of prototypes can be used to add properties to different layers of \n prototype objects which are accessible to us later. We have added the property\n 'profession' to the prototype of Person's prototype. As you can see below that \n we are also able to update the value of that property later. \n */\n}\n\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\n\nPerson.__proto__.__proto__.profession = 'Software Engineer';\nperson1 = new Person(\"Anik\", 25);\nconsole.log(person1.profession); // Software Engineer\nperson1.profession = 'Businessman';\nconsole.log(person1.profession); // Businessman" }, { "path": "advanced/4. prototype/Examples/example3.js", "content": "/*\nWe know that we can access the defined method on\nthe instances of the object. Like this one below:\n*/\n\nfunction Team(name) {\n this.name = name;\n}\n\nTeam.prototype.getDetails = function() {\n return `${this.name} plays football`;\n}\n\n// In this 'team1' and 'team2' instance of Team,\n// we can access getDetails() method\n\nlet team1 = new Team('Real Madrid');\nconsole.log(team1.getDetails());\n// Output: Real Madrid plays football\nlet team2 = new Team('Barcelona');\nconsole.log(team2.getDetails());\n// Output: Barcelona plays football\n\n\n/*\nBut if we define methods in an individual object (instances of Team)\nthen we can only access those methods from the individual object\n*/\n\nteam1.league = function(){\n return \"La Liga\"\n}\n\nconsole.log(team1.league())\n// Output: La Liga\n\nconsole.log(team2.league())\n// Output: TypeError: team2.league is not a function\n\n" }, { "path": "advanced/4. prototype/Examples/example4.js", "content": "/*\nLet’s add a new method to the object person1\nwith the same name as the method in the Person.prototype object\n*/\nfunction Person(name){\n this.name = name;\n}\nPerson.prototype.City = function(){\n return `${this.name} is from Dhaka`;\n}\n\nlet person1 = new Person(\"Mehedi\");\nperson1.City = function (){\n return `${this.name} is from CTG`;\n}\n\nconsole.log(person1.City())\n\n/* Output: Mehedi is from CTG\n\nBecause the person1 object has the City() method,\nJavaScript just executes it immediately without\nlooking it up in the prototype chain.\n*/" }, { "path": "advanced/4. prototype/Examples/example5.js", "content": "//Prototype মেথড ব্যাবহার করে object construct করার উদাহরণ\n//Live: https://jsfiddle.net/rijans/tumcyw5p/1/\n\nfunction CustomPC(cpu, ram, board) {\n this.cpu = cpu;\n this.ram = ram;\n this.board = board;\n // this.buildPC = function () {\n // return 'A PC with CPU ' + this.cpu + ', RAM ' + this.ram + ' and Motherboard ' + this.board + ' is built!'\n // }\n //আমরা উপরের function কে prototype হিসাবে যোগ করব\n}\n\nCustomPC.prototype.buildPC = function () {\n return 'A PC with CPU ' + this.cpu + ', RAM ' + this.ram + ' and Motherboard ' + this.board + ' is built!'\n}\n\nconst pc1 = new CustomPC('Intel Core i9 11900', 'Corsair 16GB 3200GHz', 'ASUS G1 Sniper');\nconsole.log(pc1.buildPC());\n//ফলাফল: A PC with CPU Apple M1 Pro Max, RAM Corsair 16GB 3200GHz and Motherboard Foxcon M1 Board is built!\"\n\nconst pc2 = new CustomPC('Apple M1 Pro Max', 'Corsair 16GB 3200GHz', 'Foxcon M1 Board');\nconsole.log(pc2.buildPC());\n//ফলাফল: A PC with CPU Apple M1 Pro Max, RAM Corsair 16GB 3200GHz and Motherboard Foxcon M1 Board is built!\"\n" }, { "path": "advanced/4. prototype/Examples/example6.js", "content": "//Prototype মেথড ব্যাবহার করে object construct করার উদাহরণ\n//Live: https://jsfiddle.net/rijans/z0mecdv3/\n\nfunction CustomBike(cc, bikeType, headlightType) {\n this.cc = cc;\n this.bikeType = bikeType;\n this.headlightType = headlightType;\n // this.buildBike = function () {\n // return 'A Bike with CC ' + this.cc + ', type ' + this.bikeType + ' and Headlight ' + this.headlightType + ' is built!'\n // }\n //আমরা উপরের function কে prototype হিসাবে যোগ করব\n}\n\nCustomBike.prototype.buildBike = function () {\n return 'A Bike with CC ' + this.cc + ', type ' + this.bikeType + ' and Headlight ' + this.headlightType + ' is built!'\n}\n\nconst pc1 = new CustomBike('150', 'Sports', 'LED Projector');\nconsole.log(pc1.buildBike());\n//ফলাফল: A Bike with CC 150, type Sports and Headlight LED Projector is built!\"\n\nconst pc2 = new CustomBike('150', 'Commuter', 'LED Regular');\nconsole.log(pc2.buildBike());\n//ফলাফল: A Bike with CC 150, type Commuter and Headlight LED Regular is built!\"" }, { "path": "advanced/4. prototype/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/4. prototype/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/4. prototype/Practices/practice1.md", "content": "Consider the code snippet below. Now suppose I want to create multiple car objects which might have some new properties. All the car objects must have the 'getCarBrand'\nand 'getCarPrice' methods as it's property. But i don't want these 2 methods to be recreated in the memory every time a car object is created. How can you achieve this? \n\n\n```javascript\nlet car = {};\ncar.brand = 'Toyota';\ncar.price = 2000000;\ncar.getCarBrand = function () {\n return this.brand;\n}\n\ncar.getCarPrice = function () {\n return this.price;\n}\n\nconsole.log(car.getCarBrand());\nconsole.log(car.getCarPrice());\n```\n" }, { "path": "advanced/4. prototype/Practices/practice2.md", "content": "\nConsider the code below. Can the person1 object directly access the 'prototype' object?\nWhat do you think the output will be?\n\n```javascript\nfunction Person(name){\n this.name = name;\n}\nPerson.prototype.City = function(){\n return `${this.name} is from Dhaka`;\n}\n\nlet person1 = new Person(\"Mehedi\");\n\nconsole.log(person1.prototype.City())\n```" }, { "path": "advanced/4. prototype/Practices/practice3.md", "content": "নিচের কোডটিতে prototype implement করুন:\n\n````js\nfunction CustomPC(cpu, ram, board) {\n this.cpu = cpu;\n this.ram = ram;\n this.board = board;\n this.buildPC = function () {\n return 'A PC with CPU ' + this.cpu + ', RAM ' + this.ram + ' and Motherboard ' + this.board + ' is built!'\n }\n}\n\nconst pc1 = new CustomPC('Intel Core i9 11900', 'Corsair 16GB 3200GHz', 'ASUS G1 Sniper');\nconsole.log(pc1.buildPC());\n\nconst pc2 = new CustomPC('Apple M1 Pro Max', 'Corsair 16GB 3200GHz', 'Foxcon M1 Board');\nconsole.log(pc2.buildPC());\n````" }, { "path": "advanced/4. prototype/README.md", "content": "### Prototype\n\nআজকের আলোচনার বিষয় হচ্ছে জাভাস্ক্রিপ্টের Prototype. গত আলোচনাতে আমারা জাভাস্ক্রিপ্টের Factory pattern নিয়ে আলোচনা করেছি। জাভাস্ক্রিপ্ট প্রোগ্রামার বা ডেভেলপার হিসাবে Prototype সম্পর্কে পরিষ্কার ধারণা থাকা অতীব জরুরী। তাই চেষ্টা করবো আজকে কিছু ইউজফুল উদারণ দিয়ে Prototype নিয়ে একটু লেখতে। আশা করি, আজকের পর থেকে Prototype নিয়ে কাজ করতে কখনো সমস্যা হবে না। চলুন শুরু করা যাক।\n\nনিচের Constructor Function টা লক্ষ্য করুন।\n\n```js\n\nfunction Car(color, name, manufactureDate) {\n this.color = color;\n this.name = name;\n this.manufactureDate = manufactureDate;\n\n this.getColor = function () {\n return this.color;\n };\n this.getName = function (){\n return this.name;\n }\n this.getManufactureDate = function(){\n return this.manufactureDate;\n }\n}\n\n```\nচলুন আমরা ```firstCar``` এবং ```secondCar``` নামে দুইটি Object তৈরি করি ```Car``` Constructor Function ব্যবহার করে।\n\n```js\n\nconst firstCar = new Car(\"red\", \"Ferrari\", \"2020\");\nconst secondCar = new Car(\"yellow\", \"Lamborgini\", \"2021\");\n\n```\nআশা করি এই পর্যন্ত বোঝতে কোন সমস্যা হয় নি। যদি কোন সমস্যা হয়ে থাকে তবে আমাদের Constructor Function এর আলোচনাটি দেখার জন্য অনুরোধ করছি। \n\nউপরের কোডটি লক্ষ্য করলে দেখা যাবে যে, জাভাস্ক্রিপ্ট ইঞ্জিন আমাদের Constructor Function ```Car``` এর দুইটি কপি তৈরি করেছে। একটি ```firstCar``` আর অন্যটি ```secondCar``` এর জন্য। এখন আমরা Constructor Function ```Car``` দিয়ে যত Object তৈরি করব Constructor Function ```Car``` এর ঠিক তত গুলা কপি তৈরি হবে। একবার ভাবুন তো, প্রত্যেকটি Object এর জন্য একটা ফাংশনের আলাদা আলাদা Instance তৈরি করা মেমোরি অপচয় ছাড়া আর কিছুই নয়। এই সমস্যা আমার খুব সহজে জাভাস্ক্রিপ্টের ```Prototype ``` এর মাধ্যমে সমাধান করতে পারি।\n\n\nচলুন ```Prototype ``` নিয়ে আলোচনা শুরু করা যাক।\nযখন জাভাস্ক্রিপ্টে একটি Object তৈরি করা হয় ঠিক তখনই জাভাস্ক্রিপ্ট ইঞ্জিন ওই Object এ ```Prototype ``` নামে একটা Property যোগ করে। মূলত, জাভাস্ক্রিপ্টে যেকোনো Object Type এর মধ্যে ```Prototype``` Property আছে। Array Type এর মধ্যে একটা ```Prototype ``` Property আছে। Date Type এর মধ্যে ```Prototype ``` Property আছে। এমনকি আমরা যদি কোন Custom Object Type তৈরি করি তবে তার মধ্যেও ```Prototype ``` Property আছে। আমরা জানি যে, জাভাস্ক্রিপ্টে ফাংশনও এক ধরনের Object. তাই ফাংশনেরও একটি ```Prototype``` Property আছে। কোন Object এর ```Prototype ``` Property টি ব্যবহার করতে হয় ``` functionName.prototype ``` দিয়ে। \n\nএখন চলুন আমরা একটি নাম্বারের Array বানাই যেখানে কিছু সংখ্যা থাকবে। যেমনঃ \n```js\n\nconst arr = [1, 2,3,4,5];\nconsole.log(arr);\n\n```\nউপরের কোডটি রান করালে দেখব যে, ```arr``` এর প্রতিটি ইনডেক্সের মান ব্রাউজারে প্রিন্ট করছে। কিন্তু এর নিচে দেখব, ```__proto__``` নামে একটা Object আছে। এই Object টিকে যদি Expand করি তবে দেখব যে, এইখানে ```push```, ```concat```, ```indexOf``` এমন অনেক পরিচিত মেথড বা ফাংশন রয়েছে যা আমরা প্রায়ই Array Manipulation এর কাজ এ ব্যবহার করে থাকি। আমার যদি আরও কোন Array বানাই এবং ওই Array এর ```__proto__``` property টি দেখি তবে দেখব যে আগের মত অনেক পরিচিত মেথড বা ফাংশন এখানেও রয়েছে। কিন্তু এই মেথড বা ফাংশন গুলো কোথা থেকে এলো। আমরা তো কোথাও এইগুলা Define বা Declare করি নি।\n\nএকই constructor Function ব্যবহার করে তৈরি হওয়া সমস্ত Object একই Prototype Object টিকে Share করে। সুতরাং, Array Constructor Function ব্যবহার করে তৈরি করা সব Array তাই একই Prototype Object কে Share করবে। তাই যখনই আমরা একটা Array Declare করি ঠিক তখনই Array এর জন্য নির্ধারিত Prototype Object টি Array এর ভিতর Assign হয়ে যায়। আর Array এর জন্য নির্ধারিত Prototype Object টির ভিতর ```push```, ```concat```, ```indexOf``` এর মত অনেক পরিচিত মেথড বা ফাংশন আগে থেকে লিখা আছে। তাই আমরা যত খুশি Array Type ভেরিয়েবল Declare করি না কেন, সব কয়টার ```__proto__``` ভিতর পূর্ব নির্ধারিত মেথড বা ফাংশন গুলো থাকবে।\n\n\nএখন তাহলে চলুন আমরা আমাদের ```Car``` Constructor Function এর মধ্যে থাকা ```getColor```, ```getName```, ```getManufactureDate``` মেথডগুলোকে সরিয়ে ```Car``` Constructor Function এর Prototype এর মধ্যে ঢোকাই; যাতে করে ```Car``` Constructor Function দিয়ে তৈরি সব Object এর মধ্যে মেথডগুলোকে automatically চলে আসে।\n\n```js\n\nfunction Car(color, name, manufactureDate) {\n this.color = color;\n this.name = name;\n this.manufactureDate = manufactureDate;\n}\n\nCar.prototype.getColor = function () {\n return this.color;\n};\nCar.prototype.getName = function () {\n return this.name;\n};\nCar.prototype.getManufactureDate = function () {\n return this.manufactureDate;\n};\n\nconst firstCar = new Car(\"red\", \"Ferrari\", \"2020\");\nconsole.log(firstCar);\n\nconst secondCar = new Car(\"Yellow\", \"Lamborgini\", \"2021\");\nconsole.log(secondCar);\n\n```\n\nউপরের কোডটি যদি আমরা ব্রাউজার এ গিয়ে Output দেখি তবে দেখব যে, আমাদের ```Car``` Constructor Function এর ভিতর এখন আর মেথডগুলো নেই। মেথডগুলো এখন ```__proto__``` এর ভিতর চলে গিয়েছে যা ```Car``` Constructor Function থেকে তৈরি সব Object ই automatically পেয়ে যাবে। প্রতিটি Object Instance এর ভিতর থাকলে যে মেমোরি অপচয় হওয়ার কথা ছিল টা এখন আর হচ্ছে না।\n\nএই ছিল আজকের জাভাস্ক্রিপ্টের Prototype নিয়ে যত কথা। \n\nহ্যাপি কোডিং।\n" }, { "path": "advanced/5. prototypical-inheritance/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/5. prototypical-inheritance/Examples/example1.md", "content": "```js\nfunction Animal (name, energy) {\n this.name = name;\n this.energy = energy;\n}\n\nAnimal.prototype.eat = function (amount) {\n console.log(`${this.name} is eating.`);\n this.energy += amount;\n}\n\nAnimal.prototype.sleep = function (length) {\n console.log(`${this.name} is sleeping.`);\n this.energy += length;\n}\n\nAnimal.prototype.play = function (length) {\n console.log(`${this.name} is playing.`);\n this.energy -= length;\n}\n\nfunction Dog (name, energy, breed) {\n Animal.call(this, name, energy);\n\n this.breed = breed;\n}\n\nDog.prototype = Object.create(Animal.prototype);\n\nDog.prototype.bark = function () {\n console.log('Woof Woof!');\n this.energy -= .1;\n}\n\nconst charlie = new Dog('Charlie', 10, 'Goldendoodle');\nconsole.log(charlie.constructor);\n```\n" }, { "path": "advanced/5. prototypical-inheritance/Examples/example2.md", "content": "```js\nfunction Person(firstName, lastName, age, gender, interests) {\n this.name = { firstName, lastName };\n this.age = age;\n this.gender = gender;\n this.interests = interests;\n};\n\nfunction Teacher(firstName, lastName, age, gender, interests, subject) {\n Person.call(this, firstName, lastName, age, gender, interests);\n\n this.subject = subject;\n}\n```\n" }, { "path": "advanced/5. prototypical-inheritance/Examples/example3.js", "content": "/*\nWe can use prototype chain to solve this kind of problems\n*/\n\nlet user = {\n name: \"name\",\n email: \"email\",\n id: 00000,\n showAccess: true\n}\n\nlet singleUser = {\n __proto__ : user,\n ads: true\n}\n\nlet premiumUser = {\n __proto__ : singleUser,\n ads: false,\n mutiScreen : true\n}\n\n/*\nwe created a new object user_me where\nwe used three level of prototypical inheritance. \nwe can see that user_me object has access to data throughout the chain.\n*/\nlet user_me = {\n __proto__ : premiumUser,\n name : \"Mehedi\",\n email: \"meheditcf@gmail.com\",\n id: 001\n}\n\nconsole.log(user_me.mutiScreen) // Output: true\nconsole.log(user_me.ads) // Output: false\nconsole.log(user_me.showAccess) // Output: true" }, { "path": "advanced/5. prototypical-inheritance/Examples/example4.js", "content": "/*\nNo matter where the method is found: in an object or its prototype.\nIn a method call, this is always the object before the dot.\n*/\n\nlet animal = {\n sleep(){\n this.isSleeping = true;\n }\n}\n\nlet cat = {\n name: \"Billu\",\n __proto__ : animal\n}\n\ncat.sleep()\nconsole.log(cat.isSleeping) // Output: true\n/*\nAs we called the method as cat.sleep(),\n'this' references to cat object. Thats why in the\ncode below we get undefined. \n*/\nconsole.log(animal.isSleeping) // Output: undefined" }, { "path": "advanced/5. prototypical-inheritance/Examples/example5.js", "content": "//Prototypical Inheritance এর একটি উদ্বাহরও দেখান হল।\n\nlet smartPhone = {\n hasCamera: true\n}\n\nlet nokiaPhone = {\n name: \"Nokia 1100\",\n __proto__ : smartPhone\n}\n\nconsole.log(nokiaPhone.hasCamera);\n//ফলাফল: true" }, { "path": "advanced/5. prototypical-inheritance/Examples/example6.js", "content": "//Prototypical Inheritance এর একটি উদ্বাহরও দেখান হল।\n\nlet plant = {\n hasLeaf: 'yes'\n}\n\nlet cactus = {\n name: \"Cactus\",\n __proto__ : plant\n}\n\nconsole.log(cactus.hasLeaf);\n//ফলাফল: true" }, { "path": "advanced/5. prototypical-inheritance/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/5. prototypical-inheritance/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/5. prototypical-inheritance/Practices/practice1.md", "content": "\nWhat do you think the output of this code will be?\nAnd why?\n\n```js\nfunction House () {\n this.height= 100;\n this.width= 50;\n}\n\nlet house1 = new House();\nHouse.prototype.height = 200;\nconsole.log(house1.height)\n```\n" }, { "path": "advanced/5. prototypical-inheritance/Practices/practice2.md", "content": "নিচের কোডটিতে Prototypical Inheritance Implement করুন\n\n````js\nlet plant = {\nhasLeaf: true\n}\n\nlet cactus = {\nname: \"Cactus\",\nhasLeaf : true\n}\n\nconsole.log(cactus.hasLeaf);\n````\n" }, { "path": "advanced/5. prototypical-inheritance/README.md", "content": "### Prototypical Inheritance\n\nআজকের আলোচনার বিষয় হচ্ছে জাভাস্ক্রিপ্টের Prototypical Inheritance. গত আলোচনাতে আমারা জাভাস্ক্রিপ্টের Prototype pattern নিয়ে আলোচনা করেছি। জাভাস্ক্রিপ্ট প্রোগ্রামার বা ডেভেলপার হিসাবে Prototypical Inheritance সম্পর্কে পরিষ্কার ধারণা থাকা খুবই জরুরী। তাই চেষ্টা করবো আজকে কিছু উদাহরণ দিয়ে Prototypical Inheritance নিয়ে একটু লেখতে। চলুন শুরু করা যাক।\n\n### Prototypical Inheritance কি?\n\nসহজভাবে বলতে গেলে Prototypical Inheritance বলতে একটি Object যখন অন্য একটি Object এর প্রপার্টিকে অ্যাক্সেস করতে পারে তাকেই বুঝায়। আমরা জানি যে, জাভাস্ক্রিপ্টের Prototype এর মধ্যে যে কোন Object এ নতুন প্রপার্টি বা মেথড যোগ করা যায়; আমারা তখন আমাদের জাভাস্ক্রিপ্ট কোডে Prototype থেকে এই প্রপার্টিগুলো Inherite করার জন্য বলে দিতে পারি। একটি Object অন্য Object এর প্রপার্টি বা মেথডগুলোকে পুনরায় ব্যবহার করতে Prototypical Inheritance সাহায্য করে।\n\nসকল জাভাস্ক্রিপ্ট Object ই কোন না কোন প্রপার্টি বা মেথড prototype থেকে Inherit করে থাকে। উদাহরণস্বরূপ,\n১। Date Object, Date.prototype থেকে Inherit করে থাকে।\n২। Array Object, Array.prototype theke Inherit করে থাকে।\nআর এই Prototype chain এর সবার উপর থাকে Object.prototype. Date Object, Array Object সবাই Object.prototype কে Inherite করে।\n\nচলুন, এখন সরাসরি Prototypical Inheritance বুঝার চেষ্টা করি কিছু practical উদাহরন এর মাধ্যমে।\n\nআসুন, একটি `Rectangle constructor` তৈরি করা যাক।\n\n```js\nfunction Rectangle(width, height) {\n this.width = width;\n this.height = height;\n}\n```\n\nএখন যদি আমারা `Rectangle constructor` দিয়ে একটা Object তৈরি করতে চাই তবে কি করে করব। নিশ্চয়ই মনে আছে।\n\n```js\nlet rect = new Rectangle(3, 4);\nrect.width; // Now the width of Rectangle is 3\nrect.height; // And the height of that rectangle is 4\n```\n\nএখন আমরা এই `Rectangle constructor` এর মধ্যে একটা মেথড তৈরি করব। মেথডটির নাম `area` দেয়া যেতে পারে।\n\n```js\nRectangle.prototype.area = function () {\n return this.width * this.height;\n};\n```\n\nএখন আমরা ইচ্ছে করলেই `Rectangle` Object এর `area` মেথডটি ব্যবহার করতে পারি।\n\n```js\nvar rect = new Rectangle(3, 4);\nrect.area(); // 12\n```\n\nআশা করি এই পর্যন্ত বুঝতে আমাদের কোন সমস্যা হয়ে নি। চলুন আমরা `square constructor` এর মাধ্যমে একটি Object তৈরি করি।\n\n```js\nfunction Square(length) {\n this.width = this.height = length;\n}\n```\n\nআমরা সবাই জানি যে, Square আসলে একটা বিশেষ ধরনের Rectangle। তাহলে Rectangle এর বৈশিষ্ট্যগুলোও Square এর মধ্যে থাকা উচিত। কিন্তু কি করে এই কাজটি করব?\nযদি আমাদের মনে থেকে থাকে তবে আমরা জানি যে, `Object.create()` দিয়ে আমারা একটি খালি বা Empty Object তৈরি করতে পারি। তাহলে একটা কাজ করলে কেমন হয়, Square এর prototype এর একটা Object তৈরি করি Reactangle এর prototype কে প্যারেন্ট ধরে।\n\n```js\nSquare.prototype = Object.create(Rectangle.prototype);\n```\n\nএখন Square এর prototype এর মধ্যে Rectangle.prototype এর বৈশিষ্ট্যগুলো চলে এসেছে। সুতরাং, Square এর সকল Instance এর Prototype এর মধ্যেও এই বৈশিষ্ট্যগুলো থাকবে। তাহলে চলুন দেখি সবকিছু ঠিকঠাক কাজ করছে কি না।\n\n```js\nvar square = new Square(4);\nsquare.area(); // 16\n```\n\nউপরের কোডটি যদি একটু লক্ষ্য করে দেখুন তবে থেখা যাবে যে, আমরা `square` নামে যে Object টি তৈরি করেছি তার মধ্যে `area` মেথডটি চলে এসেছে। এটাই আসলে Prototypical Inheritance।\nএখন আমরা যদি চাই, তবে square এর মধ্যে শুধুমাত্র তার নিজের কিছু মেথড বা প্রপার্টি যোগ করতে পারি। চলুন তাহলে করা যাক,\n\n```js\nSquare.prototype.diagonal = function () {\n return Math.sqrt(this.area() * 2);\n};\n```\n\nশেষ করার আগে একটা বিষয় মাথায় রাখা জরুরী, তা হল একটি Object কখনও একাধিক Prototypes Inherit করতে পারে না।\nতাহলে এই ছিল আজকের আলোচনা। আশা করি Prototypical Inheritance বুঝতে আর কোন সমস্যা হবে না। পরবর্তীতে অন্য কোন বিষয় নিয়ে আবার আলোচনা হবে।\n\nহ্যাপি কোডিং।\n" }, { "path": "advanced/6. event-loop/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/6. event-loop/Examples/example1.js", "content": "{\n /*\n When we are putting a code block inside setTimeout() function,\n we're actually declaring that code to be asynchronous. JS will \n send that code to the setTimeout() web api and after that it will be added\n to the task queue/callback queue. The event loop will it's work from that point.\n */\n}\n\nconsole.log(\"First console\");\nsetTimeout(() => {\n console.log(\"First setTimeout\");\n}, 1000);\nconsole.log(\"Second console\");\nsetTimeout(() => {\n console.log(\"Second setTimeout\");\n}, 0);\n\n{\n /*\n Output:\n First console\n Second console\n Second setTimeout\n First setTimeout\n */\n}\n\n" }, { "path": "advanced/6. event-loop/Examples/example2.js", "content": "{\n /*\n Promises are not added to the callback queue. Instead it gets added to\n the micro task queue which has a higher priority than the task queue.\n The tasks existing in the micro task queue get pushed to the call stack \n by the event loop first. \n */\n}\n\nfirstPromise = new Promise((resolve) => {\n resolve(\"First promise.\")\n});\nsecondPromise = new Promise((resolve) => {\n resolve(\"Second promise.\")\n});\nconsole.log(\"First console.\")\nsetTimeout(() => console.log(\"First setTimeout.\"), 1000);\nsetTimeout(() => console.log(\"Second setTimeout.\"));\nfirstPromise.then(response => console.log(response));\nsecondPromise.then(response => console.log(response));\n\n{\n /*\n Output:\n First console.\n First promise.\n Second promise.\n Second setTimeout.\n First setTimeout.\n */\n}\n\n\n " }, { "path": "advanced/6. event-loop/Examples/example3.js", "content": "/*\nEvent though setTimeout has a delay of 0s and \nwhile loop has 5s delay, event loop will wait until\nthe call stack is empty.\nThe while loop keeps on running on the call stack until 5s has elapsed\n*/\n\nfunction myFunc (){\n console.log('first')\n setTimeout(function hello(){\n console.log('second')\n }, 0)\n runforNSceconds(5)\n console.log('third')\n}\n\nmyFunc()\n\nfunction runforNSceconds(sec){\n let start = Date.now(), now = start;\n while(now-start< (sec*1000)){\n now = Date.now()\n }\n}\n\n/*\nOutput:\nfirst\nthird\nsecond\n*/" }, { "path": "advanced/6. event-loop/Examples/example4.js", "content": "//JS Eventloop এর উদাহরণ দেখান হয়েছে একটা URL এ request পাঠিয়ে\n//এটা করা হয়েছে এজ্যাক্স Request এর মাধ্যমে, যেটা Asynchronous\n//live: https://jsfiddle.net/rijans/v17t6qhu/10/\n\n\nfunction main(url){\n console.log('Lets get URL Headers!');\n setTimeout( function (){\n\n//get headers of an URL\n let req = new XMLHttpRequest();\n req.open('GET', url, false);\n req.send(null);\n let headers = req.getAllResponseHeaders().toLowerCase();\n\n console.log(headers);\n }, 1000);\n\n console.log('Done!');\n}\n\nmain('https:://vivasofltd.com');\n\n//এটার ফলাফল এমন:\n// \"Let get URL Headers!\"\n// \"End!\"\n// \"content-encoding: gzip\n// content-type: text/html; charset=utf-8\n// date: thu, 13 jan 2022 17:54:06 gmt\n// server: nginx\n// vary: origin\n// x-request-id: 64624b39-d4ec-4d4d-b8c4-480ddabc8709\n// x-runtime: 0.002067\n// \"\n\n//লক্ষ করে দেখুন যে header response টা পরে আসছে, event লুপ এর কারণে\n" }, { "path": "advanced/6. event-loop/Examples/example5.js", "content": "//JS Eventloop এর উদাহরণ দেখান হয়েছে, নাম্বার counting এর মাধ্যমে।\n//live: https://jsfiddle.net/rijans/pkb3tsLg/\n\n\nfunction main(number) {\n console.log('Lets count from 0 to ' + number);\n for (var i = 0; i <= number; i++) {\n setTimeout(function () {\n console.log(i + '\\n');\n }, 1000);\n }\n console.log('Done!');\n}\n\nmain(5);\n\n//এখানে output হবে এমন:\n// \"Lets count from 0 to 5\"\n// \"Done!\"\n// \"6\n// \"\n// \"6\n// \"\n// \"6\n// \"\n// \"6\n// \"\n// \"6\n// \"\n// \"6\n// \"\n\n//এটা ভার ভারিয়াবল এবং event-loop এর কারণে হয়েছে। এখানে লেট ভারিয়াবল ব্যাবহার করলে থিক ফল আসবে।\n\n" }, { "path": "advanced/6. event-loop/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/6. event-loop/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/6. event-loop/Practices/practice1.md", "content": "What will be the output of this code snippet?\n\n\n```javascript\npromise = new Promise((resolve) => {\n resolve(\"Promise.\");\n});\n\nsetTimeout(() => console.log(\"First setTimeout.\"), 0);\n\npromise.then((res) => {\n setTimeout(() => console.log(res), 0);\n});\n\nsetTimeout(() => console.log(\"Second setTimeout.\"),0);\nconsole.log(\"First console.\");\n```" }, { "path": "advanced/6. event-loop/Practices/practice2.md", "content": "\nWe know event loop has different priorities when\nit comes to promise and setTimeout. Then what\nwill be the output of this code?\n\n```javascript\nsetTimeout(function(){\n console.log(\"first message\")\n setTimeout(function(){\n console.log(\"second message\")\n }, 1000)\n}, 0)\nrunforNSceconds(3)\nconsole.log(\"third message\")\n\nlet promise = new Promise(function(resolve, reject){\n resolve()\n})\n\npromise.then(function(resolve){\n console.log(\"fourth message from promise 1\")\n})\n.then(function(promise){\n console.log(\"fifth message from promise 2\")\n})\n\nconsole.log(\"sixth message\")\n\nfunction runforNSceconds(sec){\n let start = Date.now(), now = start;\n while(now-start< (sec*1000)){\n now = Date.now()\n }\n}\n```" }, { "path": "advanced/6. event-loop/Practices/practice3.md", "content": "নিচের কোডটির output কি হবে?\n\n````js\nfunction main(number) {\nconsole.log('Lets count from 0 to ' + number);\nfor (var i = 0; i <= number; i++) {\nsetTimeout(function () {\nconsole.log(i + '\\n');\n}, 1000);\n}\nconsole.log('Done!');\n}\n\nmain(3);\n````\n" }, { "path": "advanced/6. event-loop/README.md", "content": "### Event loop\n\nআজকে আমরা জাভাস্ক্রিপ্টের খুবই একটা গুরুত্বপূর্ণ বিষয় নিয়ে আলোচনা করব, তা হল Event Loop. জাভাস্ক্রিপ্ট প্রোগ্রামার বা ডেভেলপার হিসাবে Event Loop সম্পর্কে ধারণা থাকা অত্যন্ত জরুরী। তাই চেষ্টা করবো আজকে Event Loop নিয়ে একটু লেখতে। চলুন শুরু করা যাক।\n\n### Event loop কি?\n\nEvent loop জাভাস্ক্রিপ্টের একটি secret machenism যার মাধ্যমে জাভাস্ক্রিপ্ট single-threaded প্রোগ্রামিং ল্যাঙ্গুয়েজ হওয়া সত্ত্বেও বাহ্যিক ভাবে multi-threaded প্রোগ্রামিং ল্যাঙ্গুয়েজের মত কাজ করে। Event loop গভীরভাবে call stack কে পর্যবেক্ষণ করে এবং যদি call stack খালি বা empty থাকে তবে Event queue থেকে Task call stack এ পাঠায় execution সম্পন্ন করার জন্য।\n\nআমরা সকলে জানি, জাভাস্ক্রিপ্ট একটি single-threaded asynchronous প্রোগ্রামিং ল্যাঙ্গুয়েজ । এইটা বিষয় লক্ষ্য করেছেন কি, একটা ল্যাঙ্গুয়েজ কি করে একই সাথে single-threaded আবার asynchronous হতে পারে? আসলে বিষয়টা হল, জাভাস্ক্রিপ্ট একটা single-threaded ল্যাঙ্গুয়েজ; তার মানে হল জাভাস্ক্রিপ্ট একসাথে একই সময়ে একটা মাত্র কাজ ে করতে পারে। আর asynchronous বিষয়টা জাভাস্ক্রিপ্ট ল্যাঙ্গুয়েজের কোন বিষয় না, এটি নিয়ন্ত্রিত হয় ব্রাউজার Enviornment এর মাধ্যমে। কয়েকটি উদাহরন দেখলে বিষয়টা বোঝতে সুবিধা হবে।\nচলুন শুরু করা যাক।\n\n```js\nfunction main() {\n console.log('Hi');\n setTimeout(function display() {\n console.log('there');\n }, 1000);\n console.log('JSConfEU');\n}\nmain();\n//\tOutput\n//\tA\n//\tC\n// B\n```\n\nউপরের কোডটি একটু ভাল করে লক্ষ্য করুন, এখানে প্রথম `console.log('Hi')` এই Statement টি execute হচ্ছে। এরপর একটা setTimeout ফাংশন রয়েছে, যা নিদিষ্ট সময় পর `console.log('there')` এই Statement টি execute করার কথা ছিল। কিন্তু কোন কারণে এই Statement টিকে বাদ দিয়ে তারপরের Statement `console.log('JSConfEU')` এইটিকে execute করছে। এইটির কারণ হল জাভাস্ক্রিপ্টের asynchronous ব্যবহার। জাভাস্ক্রিপ্ট যখনই setTimeout ফাংশনটিকে দেখছে, ঠিক তখনই জাভাস্ক্রিপ্ট বোঝতে পারছে এটি একটি asynchronous ফাংশন । আর আমরা জানি asynchronous ফাংশনের কাজ শেষ হতে কিছু সময়ের প্রয়োজন হয়। তাই জাভাস্ক্রিপ্ট setTimeout ফাংশনটিকে আর `call stack` এ না রেখে, `Browser API` এ পাঠিয়ে দেয়। আর এই `Browser API` তেই setTimeout ফাংশনটি তার নির্ধারিত সময় নিয়ে কাজ টি শেষ করে। কাজ শেষ হবার পর setTimeout ফাংশনটি `Event Queue` তে প্রবেশ করে। এবং পুনরায় `call stack` এ প্রবেশ করার অপেক্ষা করে।\nঠিক এখানে এ `Event Loop` এর কাজ শুরু হয়। `Event Loop` এর কাজ হল Call Stack আর Event Queue এর দিকে লক্ষ্য রাখা। যখন Call Stack খালি হয়ে যায় ঠিক তখন `Event Loop` Event Queue থেকে একটি একটি করে Event call stack এ পাঠায়। এবং call stack ওই অনুযায়ী Statement Execute করতে থাকে। এই প্রোগ্রামের ক্ষেত্রে `console.log('there')`statement টি Execute হয়।\nআর যখন setTimeout ফাংশনটিকে যখন call stack থেকে `Browser API` তে পাঠানো হয় তখন call stack টি খালি থাকার কারণে জাভাস্ক্রিপ্ট `console.log('JSConfEU')` statement টিকে call stack এ পাঠিয়ে execute করে ফেলে যার কারণে ``console.log('JSConfEU')` statement টি console.log('there') এর আগে execute করছে।\n\nজাভাস্ক্রিপ্টে setTimeout ছাড়া আরও কিছু ফাংশন আছে যা asynchronous API রয়েছে। যেমনঃ `addEventListener`, `setTimeout`, `setInterval`, যেকোনো ধরনের API কল।\n\nনিচের Graphical Representation টা দেখলে বিষয়টি আরও পরিষ্কার হবে।\n\n![queue-example-jsconf (1)](https://user-images.githubusercontent.com/9677372/144177972-e998b3cf-7b37-4d52-9feb-f7926ffb9eeb.gif)\n\nএই ছিল আজকের আলোচনা। পরবর্তীতে অন্য কোন বিষয় নিয়ে আবার কথা হবে। হ্যাপি কোডিং।\n" }, { "path": "advanced/7. garbage-collector/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/7. garbage-collector/Examples/example1.js", "content": "const person = {\n name: 'Anik',\n age: 25\n};\n \nperson = 'Anik';\n\n// Initially, the person object is holding a bunch of internal attributes. \n// Then let’s assume I decided that a person could simply be represented \n// as a string. So now, the first person object has no references pointing \n// to it anymore, which makes it available for garbage collection.\n\nfunction circularObj() {\n var a = { };\n var b = { };\n\n a.prop = b;\n b.prop = a;\n};\n\ncircularObj();\n\n// This creates a cycle. Once the function’s finished, JavaScript’s \n// reference-counting algorithm won’t be able to interpret that these two objects \n// can be collected because they still hold references to each other.\n// The 'Mark and sweep algorithm' can easily solve this problem.\n\n" }, { "path": "advanced/7. garbage-collector/Examples/example2.js", "content": "// 'Reference counting garbage collection' example:\n\nvar object_1 = {\n\tobject_2: {\n\t\tobject_3: 7\n\t}\n};\n\n// In the code above, two objects have been created. One of them is referred by another\n// as one of its properties. Currently, none can be garbage collected with the reference \n// counting algorithm.\n\nvar object_4 = object_1;\n\n// Now the \"object_4\" variable is the second thing that has a reference to the object.\n// The objects that were originally in \"object_1\" has a unique reference embodied \n// by the \"object_4\" variable.\n\nobject_1 = \"Object 1\";\n\nvar object_5 = object_4.object_2;\n// Reference to \"object_2\" property of the object. This object now has 2 references: \n// first one as a property, the other as the \"object_5\" variable.\n\nobject_4 = \"Object 4\";\n\n// The object that was in \"object_1\" has now zero references to it. It can be\n// garbage collected. However its \"object_2\" property is still referenced by the\n// \"object_5\" variable, so it cannot be freed.\n\nobject_5 = null;\n\n// Now the \"object_2\" property has no references to it and so it can be garbage collected." }, { "path": "advanced/7. garbage-collector/Examples/example3.js", "content": "/*\nHere x is not in the scope anymore but we can\nstill access it by using 'arr' array. That means it stays\nin the memory untill the reference is there.\n\nIf we pop it from the array, it won't be needed anymore and can be garbage collected.\n*/\n\nlet arr = []\nfunction addName() {\n let x = {name: \"Mehedi\"}\n arr.push(x)\n}\naddName()\nconsole.log(arr[0]) // Output: { name: 'Mehedi' }\narr = null;\nconsole.log(arr) // Output: null\n\n// Now the reference to properties of 'x' is null\n// So it is garbage collected\n\n\n" }, { "path": "advanced/7. garbage-collector/Examples/example4.js", "content": "/*\nWe know that for interlinked/circular objects Reference Counting Algorithm doesn't work.\nHere in this example we will see how we can manually make\ninterlinked object garbage collectable.\n*/\n\nfunction marry(man, woman) {\n woman.husband = man;\n man.wife = woman;\n\n return {\n father: man,\n mother: woman\n }\n}\n\nlet family = marry({\n name: \"David\"\n}, {\n name: \"Angela\"\n}\n)\n\n/*\nFunction marry links two objects by giving them references\nto each other and returns a new object that contains them both.\nNow all objects are reachable\n*/\n\nconsole.log(family.father)\n\n/*\nSuppose we want to make \"David\" unreachable/garbage collected, for that\nwe need to remove all the references of \"David\"\n*/\n\nfamily.father = null;\nfamily.mother.husband = null;\n\n// Now all the references to \"David\" are gone. So it can be garbage collected" }, { "path": "advanced/7. garbage-collector/Examples/example5.js", "content": "let user = {\n name: 'Vivasoft',\n phone: '017'\n};\n\nuser = 'Vivasoft';\n\n//জখন আমরা ইউজার ভারিয়াবল কে re-assign করলাম, JS দেখল আগের object আর ব্যাবহার হচ্ছেনা\n//তাই আগের object তাকে garbage হিসাবে মনে করবে\n\nfunction createUser() {\n var user1 = { };\n var user2 = { };\n\n user1.prop = user2;\n user2.prop = user1;\n};\n\ncreateUser();\n\n\n//যেহেতু user1 এবং user2 এখনো আগের সম্পর্ক বজায়ে রেখেছে, সেহেতু তাদেরকে reference-counting দিয়ে মুছা যাবেনা।\n//এখানে \"Mark and Sweep Algorithm\" টা ব্যাবহার করতে হবে।\n" }, { "path": "advanced/7. garbage-collector/Examples/example6.js", "content": "\nlet list = [];\nfunction addToList() {\n list.push({name: \"Jaber\"})\n}\naddToList()\n\nconsole.log(list[0])\n// Output: { name: 'Jaber' }\n\nlist = null;\nconsole.log(list) // Output: null\n\n//এখন রেফেরেঞ্চ function একটি garbage\n\n" }, { "path": "advanced/7. garbage-collector/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/7. garbage-collector/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "advanced/7. garbage-collector/Practices/practice1.md", "content": "Consider the following scenario. Will the 'Reference counting algorithm' be able to recognize these 2 objects as garbage? Between the two garbage collection algorithms of JS, which one will be more appropriate here and why?\n\n```javascript\nfunction circularReference() {\n\tvar one = {};\n\tvar two = {};\n\n\tone.object = two;\n\ttwo.object = one;\n}\n```\n" }, { "path": "advanced/7. garbage-collector/Practices/practice2.md", "content": "\nConsider the code below. Why 'orange' object can still access\nall the property even though 'fruit' is deleted?\n\n```javascript\nlet fruit = {\n name: \"Mango\",\n price: 200,\n extra: {\n weight: \"2 kg\",\n color: \"red\"\n }\n}\n\nlet orange = fruit;\nlet mango = fruit.extra;\n\nfruit = null;\nmango = null;\nconsole.log(orange.name)\n```" }, { "path": "advanced/7. garbage-collector/Practices/practice3.md", "content": "নিচের কোডটিতে কোন garbage collection algorithm কাজ করতে পারে?\n\n````js\nlet list = [];\nfunction addToList() {\nlist.push({name: \"Jaber\"})\n}\naddToList()\n\nconsole.log(list[0])\n// Output: { name: 'Jaber' }\n\nlist = null;\nconsole.log(list) // Output: null\n````" }, { "path": "advanced/7. garbage-collector/README.md", "content": "### Garbage Collector\n\nআজকে আমাদের আলোচনার বিষয় হল জাভাস্ক্রিপ্টের Grabage Collector. আমরা জানি Grabage কি? Grabage মূলত এমন জিনিসগুলিকে বোঝায় যা আর ব্যবহারযোগ্য নয়। যখন প্রোগ্রামিংয়ের কথা আসে, Grabage Colllector মানে মেমরি স্পেসগুলি পরিষ্কার করা যাতে দরকারী ডেটা থাকে না এবং তারপর সেই ক্লিয়ার করা মেমোরিকে অন্য কিছু ডেটাতে পুনরায় বরাদ্দ বা Allocate করা হয়। সব প্রোগ্রামিং ভাষায় এটিই Garbage Collector এর প্রাথমিক প্রক্রিয়া। কিছু কিছু প্রোগ্রামিং ল্যাঙ্গুয়েজে Garbage Collector এর জন্য ডেভেলপারের স্পষ্ট হস্তক্ষেপের বা Explicit interference প্রয়োজন হয় আবার অন্য কিছু ল্যাঙ্গুয়েজ Automatically এটি করে থাকে। Low লেভেল প্রোগ্রামিং ল্যাঙ্গুয়েজ যেমন C তে, ডেভেলপারকে malloc () এবং free () এর মত পদ্ধতি ব্যবহার করে মেমরি ক্লিয়ার করার প্রয়োজন হয়। \nজাভাস্ক্রিপ্টের মত একটি High level প্রোগ্রামিং ল্যাঙ্গুয়েজে, মেমরি Management প্রক্রিয়া স্বয়ংক্রিয়। ব্রাউজার আমাদের জন্য এই কাজটি করে দেয়।\n\nএই আলোচনাতে আমারা Grabage Collector এর কয়েকটি বিষয় নিয়ে আলোচনা করব।\n\n১) মেমোরি ম্যানেজমেন্ট Life Cylce.\n2) Garbage Collection এলগরিদম।\n৩) মেমোরি Leak\n\n### মেমোরি ম্যানেজমেন্ট Life Cylce :\n\nচলুন আমরা প্রথমে মেমোরি ম্যানেজমেন্টে Life Cylce এর সাধারন ধাপগুলো দেখি।\n\n১) প্রথম ধাপে আমরা যখন একটি Variable, ফাংশন বা Object declare করি ঠিক তখনই এটির জন্য একটি মেমরি Space বরাদ্দ করা হয়।\n২) পরের ধাপে, বরাদ্দকৃত মেমরি রিড/রাইট অপারেশন দ্বারা ব্যবহৃত হয়।\n৩) শেষের ধাপে, যখন মেমরির আর প্রয়োজন হয় না, তখন মেমরির জন্য বরাদ্দকৃত স্থানটি ছেড়ে দেয়া হয়।\n\nশেষের ধাপটিকে আমরা Garbage Collection বলতে পারি। জাভাস্ক্রিপ্টে এই কাজটি Automatically বা স্বয়ংক্রিয়ভাবে হয়ে থাকে। Garbage Collection যে বা যার মাধ্যমে এই কাজটি করে থাকে তাই হল Garbage Collector. Garbage Collector এর মূল উদ্দেশ্য হল, মেমোরি Allocation কে মনিটর করা এবং মেমরির আর প্রয়োজন আছে কিনা তা নির্ধারণ করা আর যদি মেমোরির প্রয়োজন না হয় তবে এটিকে পুনরুদ্ধার করা।\n\n\n### Garbage Collection এলগরিদম\n\nজাভাস্ক্রিপ্টে Garbage Collection প্রক্রিয়াটি দুটি অ্যালগরিদম দ্বারা পরিচালিত হয় যা নীচে তালিকাভুক্ত করা হয়েছে।\n১) Reference Counting Algorithm\n২) Mark and Sweep Algorithm\n\nআসুন এই অ্যালগরিদমগুলোকে বোঝার চেষ্টা করি।\n\n### Reference Counting Algorithm:\n\nপ্রথমে রেফারেন্স কি তা বোঝার চেষ্টা করি। একটি Object অন্য একটি Object কে রেফারেন্স করছে এটির মানে হল, প্রথম Object টি দ্বিতীয় Object এর মেথড বা প্রপার্টিগুলোকে অ্যাক্সেস করতে পারছে। চলুন এখন সরাসরি অ্যালগরিদমে যাওয়া যাক।\n\nReference Counting অ্যালগরিদমের মূল বিষয়টি খুবই সিম্পল। এইটি লক্ষ্য করে যে একটি Object অন্য কোন Object কে রেফারেন্স করছে কিনা। যদি না করে তবে Object টিকে Garbage হিসেবে চিহ্নিত করে । একটি উদাহরন দেখা যাক।\n\n```js\n\nvar obj = { // first object created \n property1: { // second object created\n property2 : 10\n }\n}\n\n```\n\nউপরের কোডটি লক্ষ্য করে দেখুন, দুইটি Object তৈরি হয়েছে একটি হল ```obj``` আর অন্যটি হল ```property1``` এবং একটি Object এর প্রপার্টি হিসেবে অন্য Object কাজ করছে। সুতরাং ```Obj``` Object টি দ্বিতীয় Object টিকে রেফারেন্স করছে তাই এখানে Garbage Collection এর কোন সুযোগ নেই।\n\n```js\n\nvar newObj = obj; // Now we have another to the existing objects.\nobj = 10; // Still the objects are referenced by the newObj variable. So there is no chance of Garbage Collection\n\n```\n\nচলুন আরেকটি Implementation দেখি।\n\n```js\nvar anotherObj = newObj.property1;\n\n```\nএকটু লক্ষ্য করে দেখুন, এখন ```property1``` এর দুইটি Reference রয়েছে। একটি হল ```newObj``` variable এর আর অন্য Reference টি হল ```anotherObj``` variable এর। যেহেতু Reference আছে তাই Garbage Collection এর কোন সুযোগ নেই এখানে।\n\n```js\nnewObj = ‘Some string’;\n```\nএখন ```newObj``` এর কোন Reference নেই। কিন্তু ```property1``` এখনও ```anotherObj``` variable কে Reference করছে। এখানেও তাই Garbage Collection এর কোন সুযোগ নেই।\n\n```js\nanotherObj = null;\n```\nএখন ```anotherObj``` variable ও ```property1``` এর কোন Reference নেই। এক্ষেত্রে Object টি Garbage হিসেবে Consider হবে।\n\n```js\n\nfunction foo() {\n var obj1 = {};\n var obj2 = {}; \n obj1.a = obj2; \n obj2.a = obj1;\n console.log(obj1);\n console.log(obj2);\n}\nfoo();\n\n```\n\nউপরের কোডটি লক্ষ্য করুন, এখানে Circular Reference হচ্ছে। একটি Object অন্য একটি Object কে Reference করছে। এক্ষেত্রে, Reference Counting Algorithm কাজ করতে পারে না। এজন্য আমদের পরবর্তী অ্যালগরিদম Mark and Sweep Algorithm এর সাহায্য নিতে হবে। তাহলে চলুন Mark and Sweep Algorithm নিয়ে আলোচনা শুরু করা যাক।\n\n### Mark and Sweep Algorithm:\n\nএই অ্যালগরিদমটি একটু ভিন্নভাবে কাজ করে। এই অ্যালগরিদমটি Object এর কাছে পৌঁছাতে পারছে কিনা তার উপর নির্ভর করে Garbage Collection করে। একটু জটিল মনে হতে পারে কিন্তু ভয় পাওয়ার কিছু নেই। জাভাস্ক্রিপ্ট প্রথমে Root Object কে (Window Object ) চিহ্নিত করে এরপর এটি অন্য Child Object এর ট্রাভেরস করে তারপর Child Object এর Chilern কে ট্রাভেরস করে। এভাবে যদি কোন Object এ পৌঁছানো না যায় তবে জাভাস্ক্রিপ্ট এটিকে Garbage হিসেবে চিহ্নিত করে এবং Object এর জন্য বরাদ্দকৃত মেমোরি খালি করে ফেলে। এভাবে এই অ্যালগরিদমটি অনেক Efficiently Circular Reference এর সমস্যাটি যা আমরা Reference Counting অ্যালগরিদমে দেখেছিলাম তার সমাধান করতে পারে।\n\n\n### মেমোরি Leak:\n\nএকজন ডেভেলপার তার প্রোজেক্ট এ মেমোরি Leak প্রতিরোধ করার জন্য অনেক কিছুই করে থাকেন। তারপরও মেমোরি Leak এর কিছু সাধারন কারণ সম্পর্কে জেনে থাকা ভাল। কিছু সাধারন কারণ নিয়ে নিচে আলোচনা করা হল।\n\n১) Globals এর অতিরিক্ত ব্যবহার। হউক সেটা অতিরিক্ত গ্লোবাল Variable ব্যবহারের জন্য বা লোকাল Scope এ ```var``` keyword এর ব্যবহার না করার জন্য।\n২) Timer গুলোকে ক্লিয়ার করতে ভুলে গেলে। উদাহরনস্বরূপ: ```setInterval()```.\n৩) ```closure``` এর অপ্রয়োজনীয় ব্যবহার এর জন্য।\n\nআমরা কাজ করার সময় অবশই এই বিষয়গুলো সতর্ক থাকব যাতে পরবর্তীতে মেমোরি Leak না হয়।\n\nএই ছিল Garabage Collector নিয়ে কিছু কথা। পরবর্তীতে অন্য কোন বিষয় নিয়ে আবার কথা হবে।\n\nহ্যাপি কোডিং।\n\n" }, { "path": "advanced/README.md", "content": "## Table of contents\n\n1. [Call, Apply, and Bind methods (কল, এপ্লাই এবং বাইন্ড মেথডস)](1.%20call-apply-bind-methods)\n2. [Factory Pattern (ফ্যাক্টরি প্যাটার্ন)](2.%20factory-pattern)\n3. [Constructor Pattern (কন্সট্রাক্টর প্যাটার্ন)](3.%20constructor-pattern)\n4. [Prototype (প্রোটোটাইপ)](4.%20prototype)\n5. [Prototypical Inheritance (প্রোটোটাইপিক্যাল ইনহেরিটেন্স)](5.%20prototypical-inheritance)\n6. [Event Loop (ইভেন্ট লুপ)](6.%20event-loop)\n7. [Garbage Collector (গার্বেজ কালেক্টর)](7.%20garbage-collector)\n" }, { "path": "basic/1. execution-context/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/1. execution-context/Examples/example1.js", "content": "\n{/*\nThere are three types of Execution Context in javascript. \n1.Global Execution Context(GEC)\n2.Functional Execution Context(FEC)\n3.Eval Execution Context\n\nAny JS code that gets executed within the eval function creates \nand holds its own execution context. However,\n the eval function is not used by the JavaScript developers,\n but it is a part of the Execution Context.\n \n\nAt first the program will execute inside the\n global execution context. But if the program call a function\nthen it will creates a new functional execution context.\nWhen function return anything then the FEC will be removed from call stack\nand returned value will be pass into the GEC again\nthe \n*/}\n\nlet x = 10;\n\nfunction timesTen(a){\n return a * 10;\n}\n\nlet y = timesTen(x);\n\nconsole.log(y); \n\n{/*\noutput:\n100\n\n*/}\n\n" }, { "path": "basic/1. execution-context/Examples/example2.js", "content": " {/*\n\n Time Tide and Javascript waits for none.\n The function fn has an asynchrous function setTimeout \n with a timer of 5 sec. As we know javascript has only a call stack \n to execute all code, so it never waits for the timeout.\n Js engine will send the function to the dom api \n and move on to the next line of code\n*/}\n\nconsole.log('first output of global execution context')\n\nfunction fn(){\n console.log('waiting for timeout...')\n setTimeout(()=>{\n console.log('Output in Functions local execution contex')\n },5000)\n}\n\nfn()\nconsole.log('last output of global execution context')\n\n{/*\noutput:\nfirst output of global execution context\nwaiting for timeout...\nlast output of global execution context\nOutput in Functions local execution contex\n\nie:Time and Js wait for none\n*/}" }, { "path": "basic/1. execution-context/Examples/example3.js", "content": "{/*\nHere we store the return value for\naverage(10, 20) in variable x within the global execution context.\nSo when the average function called, a functional execution \ncontext will creates for function average inside the call stack.\nInside average we call function add. so Another functional\n execution context will create for add function in the call stack.\n When the add function return anything then the \n functional execution context will be removed from the call stack\n and the return value will be returned to the functional execution \n context of average from where the function add was called.\n Again when average function return anything then \n its functional execution context will also removed from\n the call stack and the return value will also returned th \n the global execution context from where the average function was called\n\n\n*/}\n\nfunction add(a, b) {\n return a + b;\n}\n\nfunction average(a, b) {\n return add(a, b) / 2;\n}\n\nlet x = average(10, 20); \nconsole.log(x)\n\n{/*\noutput:\n15\n*/}" }, { "path": "basic/1. execution-context/Examples/example4.js", "content": "\n{/*\nTime Tide and Javascript waits for none.\n The function fn has an asynchrous function setTimeout \n with a timer of 5 sec. As we know javascript has only a call stack \n to execute all code, so it never waits for the timeout.\n Js engine will send the function to the dom api \n and move on to the next line of code\n*/}\n\n\nonsole.log('First Output Inside the Global Execution context')\n\nfunction fn1(){\n setTimeout(()=>{\n console.log('Inside function fn1 with the SetTimeout of 3 seconds')\n },3000)\n}\n\nfunction fn2(){\n console.log('inside function fn2')\n}\n\nsetTimeout(()=>{\n console.log('Inside the Global Execution context With SetTimeout of 10 seconds')\n},10000)\n\nsetTimeout(()=>{\n console.log('Inside the Global Execution context With SetTimeout of 3 seconds')\n},3000)\n\nfn1()\nfn2()\nfn3()\n\nfunction fn3(){\n console.log('Inside function fn3')\n}\n\nconsole.log('Last line Output of Global Execution Context')\n\n\n{/*\n\noutput:\nFirst Output Inside the Global Execution context\ninside function fn2\nInside function fn3\nLast line Output of Global Execution Context\nInside the Global Execution context With SetTimeout of 3 seconds\nInside function fn1 with the SetTimeout of 3 seconds\nInside the Global Execution context With SetTimeout of 10 seconds\n*/}" }, { "path": "basic/1. execution-context/Examples/example5.js", "content": "\n /*\nGlobal Execution Context\nGEC / Global Execution Context is also called \nthe base/default execution. Any JavaScript\n code which does not reside in any function\n will be present in the global execution context. \n The reason behind its name 'default execution\n context' where the code begins its execution \n when the file first loads in the web browser. \n GEC performs the two following tasks:\n\nFirstly, it creates a global object where it is \nfor Node.js and Window object for the browsers.\nSecondly, reference the Windows object to 'this' keyword.\nCreate a memory heap in order to store variables and function references.\nThen it stores all the functions declarations in the memory\n heap area and the variables in the GEC with initial values as 'undefined'.\n\n Function statement is hoisted , so we can called a function statent before the \n declarations\n \n*/\n}\n\nlet globalVar = \"Variable from Global skope\";\n\nfunction a() {\n console.log(\"Inside a\");\n console.log(globalVar);\n console.log();\n let x = \"functional skope of function a\";\n b();\n\n function b() {\n console.log(\"Inside b\");\n let y = \"functional skope of function b\";\n console.log(globalVar);\n console.log(x);\n console.log();\n c();\n\n function c() {\n console.log(\"Inside c\");\n let y = \"functional skope of function b\";\n console.log(\"value of x : \", x);\n console.log(globalVar);\n console.log(y);\n var x = \"functional skope of function c\";\n console.log(\"value of x : \", x);\n }\n }\n}\na();\n\n{\n /*\n\noutput:\nInside a\nVariable from Global skope\nInside b\nVariable from Global skope\nfunctional skope of function a\nInside c\nvalue of x : undefined\nVariable from Global skope\nfunctional skope of function b\nvalue of x : functional skope of function c\n*/\n}\n" }, { "path": "basic/1. execution-context/Examples/example6.js", "content": "/*\n\nএক্সিকিউশন স্ট্যাকের কাজের প্রক্রিয়াটি বোঝার জন্য, নীচে দেওয়া একটি উদাহরণ কোড বিবেচনা করুন:\n\n ব্যাখ্যা:\n * প্রথমত, সমস্ত কোড ব্রাউজারে লোড করা হয়।\n * এর পরে, JS ইঞ্জিন এক্সিকিউশন স্ট্যাকের শীর্ষে GEC push/insert করে।\n * যত তাড়াতাড়ি JS ইঞ্জিন প্রথম ফাংশন কলের সম্মুখীন হয়, এটি এটির জন্য একটি নতুন FEC সেট করে এবং এটি বর্তমান এক্সিকিউশন স্ট্যাকের শীর্ষে যোগ করে।\n * তারপর আমরা দেখতে পারি যে এটি প্রথম ফাংশনের মধ্যে দ্বিতীয় ফাংশনের Call। অতএব JS ইঞ্জিন দ্বিতীয় ফাংশনের জন্য একটি নতুন FEC সেটআপ করে এবং এটি স্ট্যাকের শীর্ষে যোগ করে।\n * যখন দ্বিতীয় ফাংশন সম্পন্ন হয়, এক্সিকিউশন ফাংশনটি স্ট্যাকের বাইরে চলে যায় এবং নিয়ন্ত্রণগুলি স্ট্যাকের মধ্যে উপস্থিত পরবর্তী এক্সিকিউশন প্রসঙ্গে চলে যায়, যা শুধুমাত্র প্রথম ফাংশন এক্সিকিউশন প্রসঙ্গ।\n * যখন প্রথম ফাংশনটি সম্পূর্ণভাবে সম্পন্ন হয়, তখন প্রথম ফাংশনের এক্সিকিউশন স্ট্যাক, স্ট্যাক থেকে বেরিয়ে আসে। অতএব, নিয়ন্ত্রণটি কোডের GECতে ফিরে আসে।\n * শেষ পর্যন্ত, যখন সম্পূর্ণ কোডের এক্সিকিউশন সম্পন্ন হয়, JS ইঞ্জিন GEC কে বর্তমান স্ট্যাক থেকে সরিয়ে দেয়।\n\n */\n\nlet x = \"Hello Execution context!\";\n\nfunction a() {\n console.log(\"This is the first function execution\");\n\n function b() {\n console.log(\"This is the second function execution\");\n }\n\n b();\n}\n\na();\n\nconsole.log(\"It is GEC. \" + x);\n\n/*\nOutput:\n\nThis is the first function execution\nThis is the second function execution\nIt is GEC. Hello Execution context!\n*/" }, { "path": "basic/1. execution-context/Examples/stackOverflow.js", "content": "{/*\nHere foo function called itself again and again.\nSo the call stack will store the same copy of foo for \neach function call And a functional execution context \nwill create for every call inside the call stack.\nThese cause the stack overflow. Because Call stack \nalso has an specific memory limit\n*/}\nfunction foo() {\n foo();\n}\n\nfoo();\n\n{/*\nUncaught RangeError: Maximum call stack size exceeded\n at foo (:2:5)\n at foo (:2:5)\n at foo (:2:5)\n at foo (:2:5)\n at foo (:2:5)\n at foo (:2:5)\n at foo (:2:5)\n at foo (:2:5)\n at foo (:2:5)\n at foo (:2:5)\n*/}" }, { "path": "basic/1. execution-context/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/1. execution-context/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/1. execution-context/Practices/practice1.md", "content": "\nনিচের কোড দেখুন। ভেরিয়েবল a এর মান check() ফাংশনের মধ্যে পরিবর্তন করা কি সম্ভব? check() ফাংশনের বাইরে ভেরিয়েবল b কে একসেস করা কি সম্ভব? এক্সিকিউশন কন্টেক্সট এর উপর ভিত্তি করে হ্যাঁ অথবা না উভয় ক্ষেত্রে আপনার যুক্তি ব্যাখ্যা করুন।\n\n```javascript\n\nlet a = 12;\n\nfunction check() {\n let b = 23;\n a = 44; // Will it change the value of the variable a?\n}\n\nconsole.log(a);\ncheck();\nconsole.log(a);\nb = 55; // Is it possible?\n\n```\n\n\nএকটি প্রোগ্রামে কয়টি গ্লোবাল এক্সিকিউশন কন্টেক্সট ও কয়টি ফাংশনাল এক্সিকিউশন কন্টেক্সট থাকতে পারে? নীচের প্রোগ্রামটি রান করলে কয়টি গ্লোবাল ও ফাংশনাল এক্সিকিউশন কন্টেক্সট তৈরী করবে?\n\n```javascript\n\nfunction a() {\n console.log('Function a() executed');\n\n function b() {\n console.log('Function b() executed');\n }\n\n function c() {\n console.log('Function c() executed');\n\n function cc() {\n console.log('Function cc() executed');\n }\n }\n}\n\nfunction d() {\n console.log('Function d() executed');\n\n function e() {\n console.log('Function e() executed');\n\n function ee() {\n console.log('Function ee() executed');\n }\n }\n\n e();\n}\n\na();\nd();\n\n```" }, { "path": "basic/1. execution-context/Practices/practice2.md", "content": "\n```JavaScript\nlet num = 5;\n\nconst changeNum = () => {\n let num;\n num = 72;\n console.log(num);\n}\n\nchangeNum();\nconsole.log(num);\n```\n\nউপরের কোডের আউটপুট কি হবে? যদি changeNum() ফাংশনের ভেতরে গ্লোবাল ভ্যারিয়েবল num -এর মান পরিবর্তন না হয় তাহলে আমরা কিভাবে সেটা করতে পারবো? " }, { "path": "basic/1. execution-context/README.md", "content": "### এক্সিকিউশন কন্টেক্সট কি?\n\n> এক্সিকিউশন কন্টেক্সট একটি এনভাইরনমেন্ট যেখানে জাভাস্ক্রিপ্ট কোড এক্সিকিউট করা হয়। যখনই জাভাস্ক্রিপ্টে কোন কোড রান করা হয়, এটি একটি এক্সিকিউশন কন্টেক্সটের মধ্যে রান করা হয়।\n\n### জাভাস্ক্রিপ্টে তিন ধরনের এক্সিকিউশন কন্টেক্সট আছেঃ-\n\n- **গ্লোবাল এক্সিকিউশন কন্টেক্সট -** এটি ডিফল্ট এক্সিকিউশন কন্টেক্সট। যে কোডটি কোন ফাংশনের ভিতরে নেই তা গ্লোবাল এক্সিকিউশন কন্টেক্সটে আছে। এটি দুটি জিনিস সম্পন্ন করেঃ\n\n - এটি একটি গ্লোবাল অবজেক্ট তৈরি করে যা ব্রাউজারের ক্ষেত্রে **window** অবজেক্ট এবং নোডের ক্ষেত্রে **global** অবজেক্ট নামে পরিচিত।\n - **this** এর ভ্যালু হিসাবে গ্লোবাল অবজেক্টকে সেট করে। একটি প্রোগ্রামে শুধুমাত্র একটি গ্লোবাল এক্সিকিউশন কন্টেক্সট থাকতে পারে।\n\n- **ফাংশন এক্সিকিউশন কন্টেক্সট -** যখনই কোন ফাংশন কল করা হয়, সেই ফাংশনের জন্য জেএস ইঞ্জিন একটি নতুন এক্সিকিউশন কন্টেক্সট তৈরি করে। প্রতিটি ফাংশনের নিজস্ব এক্সিকিউশন কন্টেক্সট আছে। একাধিক সংখ্যক ফাংশন এক্সিকিউশন কন্টেক্সট হতে পারে। ফাংশন এক্সিকিউশন কন্টেক্সটের গ্লোবাল এক্সিকিউশন কন্টেক্সটের সকল কোড অ্যাক্সেস আছে যদিও গ্লোবাল কন্টেক্সটের ফাংশন এক্সিকিউশন কন্টেক্সটের কোডের অ্যাক্সেস নেই। গ্লোবাল এক্সিকিউশন কন্টেক্সটের কোড এক্সিকিউট করার সময় যদি জেএস ইঞ্জিন কোন ফাংশন কল পায়, এটি সেই ফাংশনের জন্য একটি নতুন ফাংশন এক্সিকিউশন কন্টেক্সট তৈরি করে। ব্রাউজার কন্টেক্সটে, যদি কোড strict মোডে এক্সিকিউট করা হয়, তাহলে **this** এর ভ্যালু **undefined** অন্যথায় **window** অবজেক্ট হবে ফাংশন এক্সিকিউশন কন্টেক্সট।\n\n- **ইভাল এক্সিকিউশন কন্টেক্সট -** ইভাল ফাংশনের ভিতরে এক্সিকিউশন কন্টেক্সট।\n\n**নিম্নলিখিত কোড দেখুনঃ**\n\n```js\nlet a = 7;\n\nconst multByTen = (a) => a * 10;\n\nlet results = multByTen(a);\n\nconsole.log(results); // 70\n```\n\n**উপরের কোডে লক্ষ্য করুনঃ**\n\n- প্রথমে, a ভ্যারিয়েবলে 7 অ্যাসাইন করা হয়েছে।\n- দ্বিতীয়ত, একটি ফাংশন multByTen() ডিক্লেয়ার করা হয়েছে যা 10 এর সাথে তার আর্গুমেন্ট কে গুণ করে।\n- তৃতীয়ত, একটি প্যারামিটার হিসাবে a পাস করে multByTen() ফাংশনকে কল করে এবং ভ্যারিয়েবল results - এ রিটার্ন মান অ্যাসাইন করা হয়েছে।\n- পরিশেষে, কনসোলে ভ্যারিয়েবল results আউটপুট করা হয়েছে।\n\nঅনেক সহজ কোডটা তাই না? যাইহোক, বিহাইন্ড দ্যা সিন জাভাস্ক্রিপ্ট অনেক কিছু করে। ইতিমধ্যে আমরা এক্সিকিউশন কন্টেক্সট সম্পর্কে জেনে গেছি। কিন্তু প্রতিটি এক্সিকিউশন কন্টেক্সটে দুটি করে phases আছেঃ ১। creation phase এবং ২। execution phase।\n\n### ১। Creation phase\n\n- একটি গ্লোবাল অবজেক্ট তৈরি করে অর্থাৎ, ওয়েব ব্রাউজারে **window** বা নোড জেএসে **global**।\n- **this** নামে একটি গ্লোবাল ভ্যারিয়েবল তৈরি করে যা গ্লোবাল অবজেক্টকে নির্দেশ করে।\n- সকল ভ্যারিয়েবল এবং ফাংশনের জন্য একটি মেমোরি স্পেস সেটআপ করে।\n- ভ্যারিয়েবলের ডিফল্ট ভ্যালু হিসাবে **undefined** অ্যাসাইন করে এবং ফাংশন ডিক্লেয়ারেশনগুলি হীপ মেমোরিতে স্টোর করে।\n\nআমাদের উদাহরণে, creation phase - এ জাভাস্ক্রিপ্ট ইঞ্জিন গ্লোবাল এক্সিকিউশন কন্টেক্সটে ভ্যারিয়েবল a ও results এবং ফাংশন ডিক্লেয়ারেশন multByTen() স্টোর করে। এছাড়াও, এটি ভ্যারিয়েবল a এবং results কে undefined হিসাবে ইনিশিয়ালাইজ করে।\n\n> #### Global Execution Context (Creation Phase Browser)\n>\n> - **window**: Global Object\n> - **this**: window\n> - **a**: undefined\n> - **multByTen**: fn()\n> - **results**: undefined\n\nCreation phase এর পর, গ্লোবাল এক্সিকিউশন কন্টেক্সট execution phase শুরু করে।\n\n### ২। Execution phase\n\nExecution phase - এ, জাভাস্ক্রিপ্ট ইঞ্জিন লাইন বাই লাইন কোড এক্সিকিউট করে। এই phase -এ, এটি ভ্যারিয়েবলের মান অ্যাসাইন করে এবং ফাংশন কল এক্সিকিউট করে।\n\n> #### Global Execution Context (Execution Phase Browser)\n>\n> - **window**: Global Object\n> - **this**: window\n> - **a**: 7\n> - **multByTen**: fn()\n> - **results**: multByTen(a)\n\nআমরা আগেই জেনেছি প্রতিটি ফাংশন কলের জন্য জাভাস্ক্রিপ্ট ইঞ্জিন একটি নতুন ফাংশন এক্সিকিউশন কন্টেক্সট তৈরি করে। ফাংশন এক্সিকিউশন কন্টেক্সট গ্লোবাল এক্সিকিউশন কন্টেক্সটের মতই কিন্তু ফাংশন এক্সিকিউশন কন্টেক্সট গ্লোবাল অবজেক্ট তৈরি করার পরিবর্তে এটি **arguments** অবজেক্ট তৈরি করে যা ফাংশনে পাস করা সকল প্যারামিটারের একটি রেফারেন্স ধারণ করে:\n\n> #### Function Execution Context (Creation Phase Browser)\n>\n> - **arguments**: Local Object\n> - **this**: window\n> - **a**: undefined\n\nআমাদের উদাহরণে, ফাংশন এক্সিকিউশন কন্টেক্সট **arguments** অবজেক্ট তৈরি করে যা ফাংশনে পাস করা সকল প্যারামিটারকে নির্দেশ করে, **this** এর মান হিসাবে গ্লোবাল অবজেক্টে **window** কে সেট করে এবং **a** প্যারামিটার কে **undefined** হিসাবে ইনিশিয়ালাইজ করে।\n\n> #### Function Execution Context (Execution Phase Browser)\n>\n> - **arguments**: Local Object\n> - **this**: window\n> - **a**: 7\n\nফাংশন এক্সিকিউশন কন্টেক্সটে **Execution phase** চলার সময়, এটি **a** প্যারামিটারে **7** অ্যাসাইন করে এবং ফলাফল **(70)** গ্লোবাল এক্সিকিউশন কন্টেক্সটের **results** ভ্যারিয়েবলে রিটার্ন করেঃ\n\n> #### Global Execution Context (Execution Phase Browser)\n>\n> - **window**: Global Object\n> - **this**: window\n> - **a**: 7\n> - **multByTen**: fn()\n> - **results**: 70\n\n### আরও বাংলা টিউটোরিয়াল\n\n> - ভালো কিছু পাওয়া যায়নি।\n\n### বাংলা ভিডিও টিউটোরিয়াল\n\n> - [Execution Context in Javascript | JS All You Need To Know | JS Bangla Tutorials](https://www.youtube.com/watch?v=MoPW9pxHMkI)\n\n> - [JavaScript Advance (Bangla) Execution Context](https://www.youtube.com/watch?v=Ke0HhvI9tpw)\n" }, { "path": "basic/10. browser-storage-and-caching/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/10. browser-storage-and-caching/Examples/example1.js", "content": "/*\nIn this example, we will learn about localStorage of a browser.\nAs we already know, in localStorage the data is persisted until \nthe user manually clears the browser cache or until your web app clears the data.\n*/\n\n// To create a entity we need to use a function named setItem\n// which takes key and value as parameters\n\nlocalStorage.setItem(\"item1\", \"Football\")\n\n// we can read this by using getItem\nlocalStorage.getItem(\"item1\")\n\n// we can also update the existing item by using setItem\nlocalStorage.setItem(\"item1\", \"Cricket\")\n\n// we can delete the item using removeItem\nlocalStorage.removeItem(\"item1\")\n\n// we can also clear everything that stored in localStorage by using this\nlocalStorage.clear()\n\n/*\nWe can also use these 4 methods in sessionStorage. like,\nsessionStorage.setItem(), sessionStorage.getItem(), sessionStorage.removeItem() and\nsessionStorage.clear()\n*/" }, { "path": "basic/10. browser-storage-and-caching/Examples/example2.js", "content": "/*\nOnly strings can be stored with localStorage or sessionStorage, \nbut we can use JSON.stringify to store more complex objects.\n*/\n\n// Create item\nlet person = {name: \"mehedi\", designation: \"Front End Developer\"}\nlocalStorage.setItem(\"person1\", JSON.stringify(person))\n\n// Read item\nlet item = JSON.parse(localStorage.getItem(\"person1\"))" }, { "path": "basic/10. browser-storage-and-caching/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/10. browser-storage-and-caching/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/10. browser-storage-and-caching/Practices/practice1.md", "content": "\nConsider the object below. Suppose we want to store this object\nin the localStorage and sessionStorage of our browser. How can we do that?\nAlso how can you can read this object from the localStorage and sessionStorage?\n\n```javascript\nlet team = {\n name: \"Real Madrid\",\n ucl: 13,\n laliga: 33\n}\n```" }, { "path": "basic/10. browser-storage-and-caching/README.md", "content": "### Browser Storage\nওয়েব অ্যাপস/সাইটগুলিতে অফলাইন/Cache মেকানিজম প্রদান করার জন্য Browser Storage ব্যবহার করে: \n - local storage: localStorage অনেক ডেভেলপারদের মধ্যে ব্রাউজারে সবচেয়ে জনপ্রিয় স্টোরেজ বিকল্পগুলির মধ্যে একটি। localStorage-এ, ডেটা সেশন জুড়ে সংরক্ষণ করা হয়, সার্ভারের সাথে share করা হয় না এবং একই প্রোটোকল এবং ডোমেনের অধীনে সমস্ত web-page এর জন্য ব্যবহারযোগ্য। localStorage সীমা সর্বাধিক ~5MB। localStorage-এ সংরক্ষণ করার আগে আমাদের অবশ্যই ডেটাটিকে স্ট্রিংয়ে রূপান্তর করতে হবে। localStorage এর প্রধান তিনটি function হলো:\n 1. localStorage.setItem('key', 'value')\n 2. localStorage.getItem('key')\n 3. localStorage.removeItem('key')\n - session storage : sessionStorage অবজেক্ট শুধুমাত্র একটি সেশনের জন্য ডেটা সঞ্চয় করে। ব্রাউজার ট্যাব বন্ধ হয়ে গেলে ডেটা মুছে ফেলা হয়। sessionStorage এর প্রধান তিনটি fucntion হলো:\n 1. sessionStorage.setItem('key', 'value')\n 2. sessionStorage.getItem('key')\n 3. sessionStorage.removeItem('key')\n - IndexedDB: একটি ক্লায়েন্ট-সাইড, NoSQL ডাটাবেস যা ডেটা, ফাইল এবং ব্লব সংরক্ষণ করতে পারে। ব্রাউজারগুলির উপর নির্ভর করে প্রতি ডোমেইনে কমপক্ষে 1GB পাওয়া উচিত, এবং এটি অবশিষ্ট disc-space এর 60% পর্যন্ত পৌঁছাতে পারে। IndexedDB ব্যবহার করে synchronous অপারেশনগুলি asynchronous করা হয়, যাতে অ্যাপ্লিকেশনগুলি ব্লক না হয়।\n - Cookies: Cookies হলো একমাত্র স্টোরেজ যা সার্ভারের সাথে শেয়ার করা হয়। Cookies প্রতিটি HTTP request অংশ হিসাবে পাঠানো হয়. এটি আমাদের ক্লায়েন্ট এবং সার্ভারের মধ্যে একটি shared state তৈরি করতে দেয়, এবং বিভিন্ন সাব-ডোমেইনে একাধিক অ্যাপ্লিকেশনের মধ্যে shared state তৈরি করে। একটি সতর্কতা: প্রতিটি api request -এর সাথে Cookies পাঠানো হয়, অর্থাৎ একটি request -এর আকার ছোট রাখার জন্য আমাদের কুকিগুলি ছোট রাখতে হবে।\n - URL storage: URL একটি storage নয়, কিন্তু এটি shared state তৈরি করার একটি ভাল উপায়। এর অর্থ current URL এ query parameters যোগ করা যাতে current state পুনরায় তৈরি করতে ব্যবহার করা যেতে পারে। \n - Cache API: Cache API হলো service worker স্পেসিফিকেশনের একটি অংশ, এবং resource cache করার একটি দুর্দান্ত উপায়। এটি আপনাকে URL রিসোর্স (assets, webpages, HTTP API responses) cache করার অনুমতি দেয়। Cache API তৈরি করা হয়েছিল Service Worker নেটওয়ার্ক request cache করতে সক্ষম করার জন্য যাতে তারা দ্রুত response প্রদান করতে পারে, নেটওয়ার্কের speed বা availability নির্বিশেষে। যাইহোক, Cache API একটি সাধারণ স্টোরেজ mechanism হিসাবেও ব্যবহার করা যেতে পারে।\n\n\n### Browser Caching\nCaching হলো ওয়েব ব্রাউজিংয়ের একটি বৈশিষ্ট্য যা সাম্প্রতিক ওয়েব page গুলিকে ওয়েব ব্রাউজারে অস্থায়ীভাবে সংরক্ষণ করার অনুমতি দেয়। এই বৈশিষ্ট্যটি গুরুত্বপূর্ণ, কারণ এটি পৃষ্ঠা লোডের সময়কে উন্নত করে এবং ব্রাউজিং খরচ কমায়৷ এটি একটি resourceful কৌশল যা ডেভেলপাররা ওয়েব ব্রাউজিং অভিজ্ঞতা উন্নত করতে ব্যবহার করতে পারেন। ওয়েবসাইটগুলিকে আরও দ্রুত লোড করার জন্য ওয়েব ব্রাউজারগুলি HTML ফাইল, Javascript এবং Image গুলি cache করে। ওয়েব সার্ভার ওয়েবসাইট থেকে তথ্য সংগ্রহ করে এবং ওয়েব ব্রাউজারে পাঠায়। ব্যবহারকারী প্রথমবার ভিজিটর কিনা বা সাইটটি আগে ব্যবহার করেছেন তার উপর নির্ভর করে Caching করা হয়। Caching কীভাবে কাজ করে তা বোঝার জন্য আসুন এই দুটি ক্ষেত্রে দেখি:\n\n**Case 1: A first-time user**\n\nআপনি যখন প্রথমবার কোনো ওয়েবসাইট ভিজিট করেন, তখন ওয়েব ব্রাউজার ওয়েব সার্ভার থেকে ডেটা (HTML, CSS, JS) সংগ্রহ করবে। এর কারণ হলো ওয়েব রিসোর্সগুলি এখনও Cache সংরক্ষণ করা হয়নি। ওয়েব ব্রাউজার তারপর ওয়েবসাইটটিতে পরবর্তী পরিদর্শনে user experience উন্নত করতে একটি Cache এ ওয়েব resource গুলি সংরক্ষণ করবে।\n\n**Case 2: The user used the website before**\n\nযদি কোনো ব্যবহারকারী একই কম্পিউটার ডিভাইস ব্যবহার করে দ্বিতীয়বার কোনো ওয়েবসাইট পরিদর্শন করেন, ওয়েবসাইটটি প্রথম দর্শনের চেয়ে দ্রুত লোড হবে। কারণ ওয়েব ব্রাউজার Cache থেকে images, CSS এবং Javascript এর মতো স্ট্যাটিক ওয়েব রিসোর্স পুনরুদ্ধার করবে।\n\n\n\nHTTP response headers সাধারণত Caching এর জন্য ব্যবহৃত হয়. একটি ওয়েবসাইটের মালিকের cache policy এর উপর নিয়ন্ত্রণ থাকে। এই নিয়ন্ত্রণ HTTP Cache হেডার ব্যবহার করে ব্যবহার করা হয়। এই headers মেয়াদ শেষ হওয়ার আগে ওয়েব resource কে Cache করা যেতে পারে এমন সর্বাধিক সময় নির্ধারণ করতে ব্যবহৃত হয়। নিম্নলিখিত HTTP response headers সাধারণত Cache করার জন্য ব্যবহৃত হয়:\n\n**ETag:**\n\n এটি 'Entity tag' শব্দটির সংক্ষিপ্ত রূপ। এটি একটি Cache validation টোকেন হিসাবে কাজ করে। ক্যাশ করা ফাইলের মেয়াদ শেষ হলে এটি ব্যবহার করা হয়। ওয়েব ব্রাউজারটি তার request এ ETag ব্যবহার করে Cache এ বিদ্যমান একটি পুরানো কপি আছে কিনা তা নিশ্চিত করতে ব্যবহৃত হয়।\n\n**Cache-Control:** \n\nএই header এ বিভিন্ন parameters রয়েছে যা validation, cache behavior এবং expiration নিয়ন্ত্রণ করে. এই header এর কিছু directives অন্তর্ভুক্ত:\n - no-cache: এই directive টি ওয়েব সার্ভারের content এর সাথে সামঞ্জস্যপূর্ণ কিনা তা পরীক্ষা করতে ব্রাউজারকে Cache এ থাকা content যাচাই করার নির্দেশ দেয়। যদি content টি fresh হয়, তাহলে ব্রাউজার Cache থেকে এটি আনতে পারে।\n - public: এর মানে হলো যে ব্রাউজার বা কোনো মধ্যস্থতাকারী পক্ষ (যেমন CDN বা proxies) ওয়েব রিসোর্স Cache করতে পারে।\n - private: এর মানে হলো যে শুধুমাত্র ব্রাউজারই ওয়েব রিসোর্স Cache করতে পারে।\n - no-store: এই নির্দেশিকা ব্রাউজারকে Cache না করার নির্দেশ দেয়।\n - Expires: এই header টি কখন Cache এ সংরক্ষিত সম্পদের মেয়াদ শেষ হবে তা define করে। মেয়াদ শেষ হওয়ার সময় পৌঁছে গেলে, ব্রাউজার কন্টেন্টটিকে পুরানো বিবেচনা করবে। যেমন, Expires: Mon, 14 June 2021 10:30:00 GMT.\n - Last modified: এই header টি কখন web content পরিবর্তন করা হয়েছিল সেই সংক্রান্ত তথ্য প্রদান করে। এই paremeter টি মূল content পরিবর্তনের তারিখ এবং সময় অন্তর্ভুক্ত করে। যেমন, Last Modified: Tue, 11 February 2021 10:30:00 GMT.\n" }, { "path": "basic/11. debouncing-and-throttling/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/11. debouncing-and-throttling/Examples/example1.html", "content": "\n\n\n\n Throttling\n\n\n \n \n\n\n\n\n" }, { "path": "basic/11. debouncing-and-throttling/Examples/example2.html", "content": "\n\n\n\n Debouncing Example\n\n\n \n \n\n\n\n\n" }, { "path": "basic/11. debouncing-and-throttling/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/11. debouncing-and-throttling/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/11. debouncing-and-throttling/Practices/practice1.md", "content": "\nConsider this scenario. If someone moves his mouse on the map, \nwe are displaying the location coordinates of the mouse pointer.\nIn this scenario, which formula we should use? Debouncing or Throttling?\n" }, { "path": "basic/11. debouncing-and-throttling/README.md", "content": "### Debouncing and Throttling\n\nআমাদের আজকের আলোচনার বিষয় হল জাভাস্ক্রিপ্টের Debouncing এবং Throttling. জাভাস্ক্রিপ্টের কোন Application কে অপ্টিমাইজ করার জন্য বা ব্রাউজার Performance কে আরও উন্নত করার জন্য Debouncing এবং Throttling ব্যবহার করা হয়। তাহলে চলুন আলোচনা শুরু করা যাক।\n\n### Debounce ফাংশন কি?\n\nDebounce ফাংশন হল এমন একটি ফাংশন যা কোন ফাংশন কতবার কল হবে তা নিয়ন্ত্রণ করে এবং কিছু নিদিষ্ট সময় অপেক্ষা করার পর পুনরায় ওই ফাংশনটিকে কল করে। চলুন একটা উদাহরন দেখা যাক।\n\nবেশিরভাগ ওয়েবসাইটেই Search Bar থাকে যার মাধ্যমে User কিছু Specific Keyword দিয়ে সার্চ করে কাঙ্খিত ফলাফল পেয়ে থাকে। Ecommerce সাইটে User যখন কোন প্রোডাক্টের নাম দিয়ে সার্চ করে তখন ওই টাইপের যত প্রোডাক্ট আছে তা User এর কাছে চলে আসে। সুতরাং এখানে যা হচ্ছে তা হলো, User যখন কোন একটা সার্চ Query লিখে তখন সার্চ Query এর প্রত্যেকটা Character এর জন্য API কল হয়। উদাহরণস্বরূপ, User যদি \"Apple Macbook Pro\" লিখে সার্চ করে তবে ১৭ বার API call হবে এই সার্চের ফলাফল দেখানোর জন্য। এটা কখনও একটা ভাল Approach হতে পারে না। আমরা এখানে Debounce ব্যবহার করে API call এর পরিমাণ কমিয়ে অনেক Optimization করতে পারি।\n\nচলুন, আমাদের প্রথম debounce ছাড়া আমাদের কোডটা কেমন হবে তা দেখি।\n\n```html\n\n```\n\nআমরা সাধারণত Search Functionality গুলো onChange অথবা onKeyUp ইভেন্টের মাধ্যমে করে থাকি। এখন আমরা আমারদের `searchHandler` ফাংশনটা লিখে ফেলি।\n\n```js\nfunction searchHandler(...args) {\n /* Here we are capturing the search query entered by customer */\n const { value } = args[0].target;\n /* Make an API call with search query */\n getSearchResults(value);\n}\n```\n\nআশা করছি এই পর্যন্ত বুঝতে কোন সমস্যা হচ্ছে না। তাহলে চলুন আমরা একটা reusable Debounce ফাংশন লিখে ফেলি।\n\n```js\nconst optimisedSearchHandler = debounceFunc(searchHandler, 500);\nconst debounceFunc = (func, delay) => {\n let timer;\n return function (...args) {\n const context = this;\n clearTimeOut(timer);\n timer = setTimeOut(() => {\n func.apply(context, args);\n }, delay);\n };\n};\n```\n\nউপরের কোডটা একটু লক্ষ্য করে দেখুন, যখন আমরা সার্চবার এ কিছু লিখার সাথে সাথে এ API কল করছে না। এটি আমাদের সার্চবার এ কিছু লিখার পর একটা নিদিষ্ট সময় অপেক্ষা করছে যদি এর মধ্যে সার্চবার এ আর নতুন কিছু টাইপ করা না হয় তবেই এটি API কে কল করছে। এতে করে আমাদের API কল এর পরিমাণ অনেকখানি কমে গেল।\nতাহলে চলুন, আমরা আমাদের সার্চবারের `onChange` debounce Technique টা ব্যবহার করে ফেলি।\n\n```html\n\n```\n\nচলুন, এবার `Throttling` নিয়ে আলোচনা করা যাক।\n\n### Throttling\n\n### Throttling আসলে কি?\n\nThrottling এমন একটি Technique যার মাধ্যমে Event Handler এর অ্যাকশানকে Limited করা যায়। অর্থাৎ একটা Event কল হবার পর সুনিদিষ্ট টাইম এর মধ্যে ওই Event আর কল হবে না। বুঝার সুবিধার জন্য আমরা একটা উদাহরনস্বরূপ শুটিংগেমের কথা চিন্তা করতে পারি। একটি শুটিং গেমে বেশ কয়েক ধরনের অস্ত্র থাকতে পারে। প্রতিটি অস্ত্রেরই একটি Fire এর পর পরবর্তী Fire এর জন্য প্রস্তুত হতে কিছু টাইম লাগে। যেমন ShortGun এর ক্ষেত্রে যে সময় লাগবে MachineGun এর ক্ষেত্রে আরও কম সময় লাগবে। ধরি, shortGun এর জন্য এই সময় 500ms আর MachineGun এর জন্য এই টাইম 100ms. তাই আমাদের এমন একটা লজিক সেট করতে হবে যাতে করে User যে অস্ত্র ব্যবহার করুক না কেন, যদি সে Threshold টাইমের মধ্যে একাধিক বার Fire করে তবে শুধুমাত্র একটা Fireই কাজ করবে। আর Fire গুলো নিদিষ্ট সময়ের পর এক এক করে Fire করবে।\n\nচলুন তাহলে Trigger ক্লিকের একটা Event Handler তৈরি করে ফেলি।\n\n```js\nwindow.addEventListener(onclick, handlerTrigger);\nconst handlerTrigger = () => {\n fireShot();\n};\n```\n\nউপরের কোডটি লক্ষ্য করুন, User যখনই Trigger press করছে শট Fire হচ্ছে।\nতাহলে চলুন এখন আমরা Throttle ফাংশন লিখে ফেলি যার parameter এ `handlerTrigger` ফাংশন আর Time Interval কে পাঠাবো।\n\n```js\nconst optimisedTriggerHandler = throttleFunc(handlerTrigger, 100);\nconst throttleFunc = (func, interval) => {\n let shouldFire = true;\n return function () {\n if (shouldFire) {\n func();\n shouldFire = false;\n setTimeOut(() => {\n shouldFire = true;\n }, interval);\n }\n };\n};\n```\n\nতাহলে চলুন, এখন আমরা আমাদের Event Listener ফাংশনটি আপডেট করে ফেলি।\n\n```js\nwindow.addEventListener(onclick, optimisedTriggerHandler);\n```\n\nঠিক এইভাবে আমরা বিভিন্ন Time Interval সেট করে `optimisedTriggerHandler` কে বিভিন্ন অস্ত্রের জন্য ব্যবহার করতে পারি।\n\nআমরা এখন পর্যন্ত Debouncing and Throttling দুইটি Techniqueই দেখলাম। এই দুইটি পদ্ধতি concept খুব কাছাকাছি হলে মূল পার্থক্য হল, Debouncing এর ক্ষেত্রে User এর অ্যাকশান কে মনিটর করি এবং Threshold Time এর মধ্যে আবার যদি কোন নতুন অ্যাকশান আসে তবে আবার নতুন করে Threshold Time পর্যন্ত অপেক্ষা করি API কল এর জন্য। অন্যদিকে, Throttling এর ক্ষেত্রে আমরা আমাদের predetermined time interval পর API কল করে দেই।\n\nআশা করি, Debouncing and Throttling বুঝতে আর কোন সমস্যা হবার কথা না। পরবর্তীতে আবার নতুন কোন বিষয় নিয়ে আবার কথা হবে। সে পর্যন্ত হ্যাপি কোডিং।\n" }, { "path": "basic/12. use-strict/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/12. use-strict/Examples/example1.js", "content": "// In this example we will see some usage of \"strict mode\". \n// As we already know, \"use strict\" defines that JavaScript code \n// should be executed in \"strict mode\", which is safer feature set of javascript.\n\n// if we declare \"use strict\" at the beginning of a script, it has global scope\n\n// Deleting a variable, function or object is not allowed in strict mode\n\n\"use strict\";\nlet x = 10;\ndelete x; \n// Output:\n// SyntaxError: Delete of an unqualified identifier in strict mode.\n\nfunction myFunction(){\n console.log(\"Hello\")\n}\ndelete myFunction;\n// Output:\n// SyntaxError: Delete of an unqualified identifier in strict mode.\n\nlet person = {\n name: \"Mehedi\",\n age: 24\n}\ndelete person;\n// Output:\n// SyntaxError: Delete of an unqualified identifier in strict mode." }, { "path": "basic/12. use-strict/Examples/example2.js", "content": "// Normally, we can use keywords such as eval, arguments as variable names\n// but using strict mode, we cannot do that\n\"use strict\"\n\nlet eval = 10;\nconsole.log(eval)\n// Output:\n// SyntaxError: Unexpected eval or arguments in strict mode\n\nlet arguments = 20;\nconsole.log(arguments)\n// Output:\n// SyntaxError: Unexpected eval or arguments in strict mode\n\n// Keywords reserved for future JavaScript versions also cant be used as variable names in strict mode.\n// Such as public, private, protected, static, interface, implements etc." }, { "path": "basic/12. use-strict/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/12. use-strict/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/12. use-strict/Practices/practice1.md", "content": "\nConsider this code below. Will it give an error?\n\n```javascript\nlet name = \"Mehedi\";\n\nfunction printName(name){\n \"use strict\"\n console.log(name);\n let age = 24;\n delete age\n}\n```" }, { "path": "basic/12. use-strict/README.md", "content": "প্রায় সব ল্যাংগুয়েজেরই নিজস্ব একটা ডকুমেন্ট আছে। যার মাধ্যমে আমরা ঐ ল্যাংগুয়েজের ভাল কিংবা খারাপ দিক অথবা ভাল প্র্যাকটিস এবং খারাপ প্র্যাকটিস সম্পর্কে জানতে পারি। কিন্তু জাভাস্ক্রিপ্টের এই রকম কোন কিছু নেই। যে কারণে এখানে ভুলটা বেশি হবার সুযোগ থাকে এবং সবাই নিজের মত করে কোড লিখে সে ভুলটা করেও বটে। যেগুলো আসলে ভুল সিনট্যাক্স এবং আনসিকিউর কোড। কিন্তু আমরা যখন স্ট্রিক্ট মোড ব্যবহার করি, তখন জাভাস্ক্রিপ্ট কোড কোন ভুল সিনট্যাক্স ছাড়া এক্সিকিউট করে এবং কোড আরও সিকিউর করে।\n\n### “use strict” ডিরেক্টিভঃ-\n**“use strict”** মোডে আমাদের কোড এক্সিকিউট করতে হলে আমাদেরকে **“use strict”** ডিরেক্টিভ ব্যবহার করতে হবে। এটি একটি এক্সপ্রেশন মাত্র। এটি জাভাস্ক্রিপ্টের ১.৮.৫ (ইএস৫) থেকে সাপোর্ট করে।\n\n### “use strict” এর ব্যবহারঃ-\n**“use strict”** ডিরেক্টিভকে আমরা দুইভাবে ব্যবহার করতে পারি। গ্লোবাল ডিক্লারেশন হিসাবে এবং ফাংশন ডিক্লারেশন হিসাবে।\n\n### গ্লোবাল ডিক্লারেশনঃ-\nযখন আমরা গ্লোবাল ডিক্লারেশন হিসাবে **“use strict”** ব্যবহার করি, তখন ঐ পেজের সমস্ত জাভাস্ক্রিপ্ট কোড স্ট্রিক্ট মোডে এক্সিকিউট হয়।\n\n```js\n\"use strict\";\n\nconsole.log(\"Hello JavaScript\");\n```\n\n### ফাংশন ডিক্লারেশনঃ-\nযখন আমরা ফাংশন ডিক্লারেশন হিসাবে **“use strict”** ব্যবহার করি, তখন ফাংশনের ভিতরের সমস্ত জাভাস্ক্রিপ্ট কোড স্ট্রিক্ট মোডে এক্সিকিউট হয়। ফাংশনের বাহিরে সব কোড নর্মাল মোডে এক্সিকিউট হয়।\n\n```js\n(function() {\n \"use strict\";\n\n console.log(\"Hello JavaScript\");\n})();\n```\n\n##### উদাহরন – ১ঃ\nআপনি জাভাস্ক্রিপ্টে ভেরিয়েবল কি-ওয়ার্ড ডিক্লেয়ার না করেও কাজ করতে পারবেন। কারণ আমরা জানি জাভাস্ক্রিপ্টে ভেরিয়েবলের নামের আগে ভেরিয়েবল কি-ওয়ার্ড ব্যবহার না করলে এটি বাই-ডিফল্ট উইন্ডো অবজেক্টের আন্ডারে এক্সিকিউট হয়।\n\n```js\nnum = 10;\n\nconsole.log(num); // 10\n```\n\nএকই কোড যখন আমরা **“use strict”** ব্যবহার করে এক্সিকিউট করবো, আমরা একটা Uncaught ReferenceError: num is not defined পাবো।\n\n```js\n\"use strict\";\n\nnum = 10;\n\nconsole.log(num); // Uncaught ReferenceError: num is not defined\n```\n\n#### উদাহরন-২ঃ\n\nজাভাস্ক্রিপ্টে আমরা রিজার্ভড কি-ওয়ার্ডগুলো ব্যবহার করতে পারি ভেরিয়েবলের নাম হিসাবে।\n\n```js\nvar let = 10;\n\nconsole.log(let); // 10\n```\n\nকিন্তু **“use strict”** মোডে এটি সম্ভব নয়। কারণ এটি ইএস৬ এর জন্যে একটি রিজার্ভড কি-ওয়ার্ড।\n\n```js\n\"use strict\";\nvar let = 10;\n\nconsole.log(let); // Uncaught SyntaxError: Unexpected strict mode reserved word\n```\n\n### কিছু রিজার্ভড কি-ওয়ার্ডঃ\n\n- abstract\n- instanceof\n- super\n- static\n- package\n- const\n- implements\n- with\n- private\n- protected\n\n#### উদাহরন – ৩ঃ\nফাংশনের ভিতরে **“this”** এর ভ্যালু সব সময় উইন্ডো অবজেক্ট হয়।\n\n```js\nfunction showMe() {\n console.log(this);\n}\n\nshowMe(); /// window\n```\nকিন্তু **“use strict”** মোডে ফাংশনের ভিতরে **“this”** এর ভ্যালু **undefined** হবে।\n\n```js\n\"use strict\";\n\nfunction showMe() {\n console.log(this); // undefined\n}\n\nshowMe(); /// window\n```\n\nএই রকম আরও অনেক ব্যবহারের ক্ষেত্র আছে যেটি আপনারা একটু কষ্ট করে নিজ দায়িত্বে দেখে নিবেন। যাইহোক, যেহেতু জাভাস্ক্রিপ্টের জন্যে নির্দিষ্ট কোন ডকুমেন্টস নেই, তাই **“use strict”** ব্যবহার করলে আমরা আমাদের কোডের ডিবাগ করতে সুবিধা হবে। কারণ যদি আমরা কোন ভুল সিনট্যাক্স ব্যবহার করি, জাভাস্ক্রিপ্ট আমাদেরকে ইরর থ্রো করবে। যেটি জাভাস্ক্রিপ্ট সাধরণত করে না। আশা করি, ব্যাপারটা সবাই বুঝতে পারছেন। আর পারবেনই বা কেন? সিম্পল হিসাব, জাভাস্ক্রিপ্ট জিন্দাবাদ। 😛" }, { "path": "basic/13. iife-in-javascript/Examples/example1.js", "content": "/* \n\nIIFE follow their own scope like any other function/variable in JavaScript.\nIt is confusing sometimes that we might expect the IIFE \nto execute irrespective of function scope, which is wrong.\nIn this example where the IIFE is defined within a function \nand will only be immediately invoked if we call the Parent Function.\n\n*/\n\nfunction sayName()\n{\n console.log(\"Hello!\");\n // This will be executed after executing the previous log.\n (function() { console.log(\"Mehedi\"); })();\n console.log(\"is my name\");\n}\n \n// Calling the parent function.\nsayName();\n/*\nOutput:\nHello! \nMehedi \nis my name\n*/" }, { "path": "basic/13. iife-in-javascript/Examples/example2.js", "content": "/*\nWe can use IIFEs to create private variables and functions \nwithin the global scope, or any other function scope.\n*/\n\nfunction sayName(){\n return \"Hello! I am Mehedi\";\n}\n\nconsole.log(sayName())\n\nvar myNumber = 100;\nconsole.log(myNumber*2)\n\n/*\nIf we load other JavaScript files in our browser, \nthey also gain access to sayName() and myNumber. \nTo prevent them from using or editing them, we encase our code in an IIFE like this code bolw:\n*/\n(function(){\n function sayName(){\n return \"Hello! I am Mehedi\";\n }\n \n console.log(sayName())\n \n var myNumber = 100;\n console.log(myNumber*2)\n})();\n// It runs the same, but now sayName() and myNumber are only accessible in our script.\n" }, { "path": "basic/13. iife-in-javascript/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/13. iife-in-javascript/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/13. iife-in-javascript/Practices/practice1.md", "content": "\nConsider the code written below. \nWhat will be the output of this code?\n\n```javascript\nfunction sayHello()\n{\n console.log(\"Hello!\");\n (function(){\n console.log(\"Nice to meet you\");\n (function(){\n console.log(\"I want to tell you\")\n })();\n })();\n console.log(\"something you want to hear\");\n}\n \n// Calling the parent function.\nsayHello();\n```" }, { "path": "basic/13. iife-in-javascript/README.md", "content": "IIFE জাভাস্ক্রিপ্টের অন্যতম জনপ্রিয় একটি ডিজাইন প্যাটার্ন। এটি ইফি বলেই উচ্চারণ করে। IIFE জাভাস্ক্রিপ্ট কমিউনিটি দীর্ঘদিন ধরে ব্যবহার করে আসছে কিন্তু এর মিসলিডিং শব্দটি ছিল \"সেলফ-এক্সিকিউটিং এনোনিমাস ফাংশন\" যা পরবর্তীতে [Ben Alman](http://benalman.com/) এটির একটি উপযুক্ত নাম দিয়েছেন \"IIFE\"। আজকে এটার সম্পর্কে বিস্তারিত লেখার চেষ্টা করবো।\n\n### IIFE কি?\n\n> IIFE - এর পূর্ণরুপ হচ্ছে Immediately Invoked Function Expression। IIFE হল একটি ফাংশন যা একটি এক্সপ্রেশন হিসাবে ডিক্লেয়ার এবং ডিক্লেয়ারেশনের পরপরই এক্সিকিউট করা হয়।\n\n### IIFE সিনট্যাক্সঃ\n\nনিম্নলিখিত সিনট্যাক্স দেখায় কিভাবে IIFE ডিফাইন করতে হয়ঃ\n\n```js\n(function () {\n // code goes here...\n})();\n```\n\nআপনি `arrow function` ব্যবহার করেও IIFE ডিফাইন করতে পারবেন।\n\n```js\n(() => {\n // code goes here...\n})();\n```\n\n### IIFE কেনঃ\n\nযখন আপনি একটি ফাংশন ডিফাইন বা ডিক্লেয়ার করেন, জাভাস্ক্রিপ্ট ইঞ্জিন গ্লোবাল অবজেক্টের সাথে ফাংশনকে যোগ করে। একইভাবে, যদি আপনি ফাংশনের বাইরে একটি ভেরিয়েবল ডিক্লেয়ার করেন, জাভাস্ক্রিপ্ট ইঞ্জিন ঐ ভেরিয়েবলকে গ্লোবাল অবজেক্টের সাথে যোগ করে। নিম্নলিখিত উদাহরণ দেখুনঃ\n\n```js\nvar num = 7;\n\nfunction sum(a, b) {\n return a + b;\n}\n\nconsole.log(window.sum); /**\n\tƒ sum(a,b) {\n return a + b;\n}\n*/\nconsole.log(window.num); // 7\n```\n\nযদি আপনার প্রোগ্রামে অনেক গ্লোবাল ভেরিয়েবল এবং ফাংশন থাকে, তাহলে আপনার প্রোগ্রাম ইনইফিশিয়েন্টলি মেমরি ব্যবহার করতে পারে এবং আপনার গ্লোবাল ভেরিয়েবল এবং ফাংশনগুলি অন্য কোন লাইব্রেরীর সাথে কনফ্লিক্ট করতে পারে যদি ঐ লাইব্রেরীতে একই নামে ভেরিয়েবল এবং ফাংশন থাকে। ফাংশন এবং ভেরিয়েবলগুলিকে গ্লোবাল অবজেক্ট কনফ্লিক্ট করা থেকে বিরত রাখার একটি উপায় হল IIFE ব্যবহার করা।\n\n### নেইমড ইফিঃ\n\n```js\n(function domeSomeMagic() {\n // code goes here...\n})();\n```\n\n### IIFE সেমিকোলন দিয়েও শুরু হতে পারেঃ\n\n```js\n(function () {\n // code goes here...\n})();\n```\n\nএই সিনট্যাক্সে, দুই বা ততোধিক জাভাস্ক্রিপ্ট ফাইলকে একক ফাইলে বান্ডল করার জন্যে স্টেটমেন্টটি শেষ করতে সেমিকোলন ব্যবহার করা হয়। উদাহরণস্বরূপ, আপনার দুটি ফাইল আছে file1.js এবং file2.js যা IIFE ব্যবহার করে।\n\n```js\n/**\n * file1.js\n */\n\n(function () {\n // ...\n})();\n```\n\n```js\n/**\n * file2.js\n */\n\n(function () {\n // ...\n})();\n```\n\nযদি আপনি একটি কোড বান্ডলার টুল ব্যবহার করে উভয় ফাইলগুলির কোডকে একটি একক ফাইলের কোড কনক্যাট করতে চান সেমিকোলন (;) ছাড়া, কনক্যানেটেড কোডটি একটি `Uncaught TypeError: (intermediate value)(...) is not a function` সিনট্যাক্স ইরোর দিবে।\n\nধরুন আপনার নিম্নলিখিত ফাংশন সহ math.js নামে একটি লাইব্রেরি আছে এবং একটি HTML ফাইলে math.js লোড করুনঃ\n\n```js\nfunction add(a, b) {\n return a + b;\n}\n\nfunction sub(a, b) {\n return a - b;\n}\n\nfunction mult(a, b) {\n return a * b;\n}\n\nfunction div(a, b) {\n return a / b;\n}\n```\n\nপরবর্তীতে, আপনি একই ফাইলে anotherLibrary.js নামে আরেকটি জাভাস্ক্রিপ্ট লাইব্রেরি লোড করতে চানঃ\n\n```html\n\n\n \n \n JavaScript IIFE\n \n \n \n \n \n \n\n```\n\n`anotherLibrary.js` লাইব্রেরীতেও `sub()` নামে ফাংশন রয়েছে যেটি একটি স্ট্রিং রিটার্ন করেঃ\n\n```js\nfunction sub() {\n return \"sub\";\n}\n```\n\nযখন আপনি `app.js` ফাইলে `sub()` ফাংশনটি ব্যবহার করবেন, তখন এটি দুটি সংখ্যার বিয়োগের পরিবর্তে **sub** স্ট্রিং রিটার্ন করবেঃ\n\n```js\nlet result = sub(30, 20);\n\nconsole.log(result); // sub\n```\n\nকারণ anotherLibrary.js এর sub() ফাংশন math.js লাইব্রেরির sub() ফাংশনকে ওভাররাইড করে ফেলছে।\n\nএই সমস্যা ঠিক করতে, আপনি math.js এ IIFE ব্যবহার করতে পারেনঃ\n\n```js\nvar math = (function () {\n function add(a, b) {\n return a + b;\n }\n\n function sub(a, b) {\n return a - b;\n }\n\n function mult(a, b) {\n return a * b;\n }\n\n function div(a, b) {\n return a / b;\n }\n\n return {\n add: add,\n sub: sub,\n mult: mult,\n div: div,\n };\n})();\n```\n\n**IIFE** `math` নামে একটি অবজেক্ট রিটার্ন করে যাতে `add`, `sub`, `mult`, এবং `div` মেথড হয়েছে।\n\n`app.js` ফাইলে, আপনি `math.js` লাইব্রেরি নিম্নলিখিতভাবে ব্যবহার করতে পারেনঃ\n\n```js\nvar result = math.sub(30, 20);\nconsole.log(result); // 10\nconsole.log(sub()); // sub\n```\n\nপ্রথম sub() ফাংশনকে math.sub() দিয়ে ইনভোক করা হয়েছে যেটি math.js থেকে এক্সপোর্ট করা অন্যদিকে দ্বিতীয় sub() ফাংশনকে anotherLibrary.js থেকে ইনভোক করা হয়েছে।\n\n### IIFE এর সুবিধাঃ\n\n- অপ্রয়োজনীয় গ্লোবাল ভেরিয়েবল এবং ফাংশন তৈরি করে না।\n- IIFE তে ডিফাইন করা ফাংশন ও ভেরিয়েবল অন্য ফাংশন এবং ভেরিয়েবলের সাথে কনফ্লিক্ট করে না। এমনকি তাদের একই নাম থাকলেও।\n- জাভাস্ক্রিপ্টের কোড অর্গানাইজ করে।\n- জাভাস্ক্রিপ্ট কোড মেইন্টানাবল করে।\n" }, { "path": "basic/2. scope/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/2. scope/Examples/example1.js", "content": "/*\nFunction scope:\nজাভাস্ক্রিপ্টে ব্যাপ্তি কোডের বর্তমান প্রেক্ষাপট বোঝায়, যা জাভাস্ক্রিপ্টে ভেরিয়েবলের অ্যাক্সেসযোগ্যতা নির্ধারণ করে। Scope দুটি ধরণের local এবং global:\n * global ভেরিয়েবল হচ্ছে ব্লকের বাইরে ঘোষিত\n * local ভেরিয়েবল হচ্ছে ব্লকের ভিতরে ঘোষিত\n\nনীচের উদাহরণে, আমরা একটি global variable animal তৈরি করব। ফাংশনের মধ্যে animal নামের একই একটি local variable। কনসোলে তাদের পাঠানোর মাধ্যমে, আমরা দেখতে পাচ্ছি যে কিভাবে ভেরিয়েবলের মান scopeর উপর নির্ভর করে এবং মূল মান পরিবর্তন করা হয় না।\n*/\n\n// Global variable initialization\nvar animal = \"Tiger\";\n\nfunction transform() {\n // A function-scoped local variable initialization\n var animal = \"Cangaroo\";\n console.log(animal);\n}\n\n// Global and local variable log\nconsole.log(animal);\ntransform();\nconsole.log(animal);\n\n/*\nOutput:\n\nTiger\nCangaroo\nTiger\n*/" }, { "path": "basic/2. scope/Examples/example2.js", "content": "/*\nBlock scope:\nজাভাস্ক্রিপ্টে ব্যাপ্তি কোডের বর্তমান প্রেক্ষাপট বোঝায়, যা জাভাস্ক্রিপ্টে ভেরিয়েবলের অ্যাক্সেসযোগ্যতা নির্ধারণ করে। Scope দুটি ধরণের local এবং global:\n * global ভেরিয়েবল হচ্ছে ব্লকের বাইরে ঘোষিত\n * local ভেরিয়েবল হচ্ছে ব্লকের ভিতরে ঘোষিত\n\nনীচের উদাহরণে, আমরা একটি global variable animal তৈরি করব। ব্লকের মধ্যে animal নামের একই একটি local variable। কনসোলে তাদের পাঠানোর মাধ্যমে, আমরা দেখতে পাচ্ছি যে কিভাবে ভেরিয়েবলের মান scopeর উপর নির্ভর করে এবং মূল মান পরিবর্তন করা হয় না।\n*/\n\nvar isInZoo = true;\n\n// A global variable initialization\nlet animal = \"Tiger\";\n\nif (isInZoo) {\n // A block-scoped variable initialization\n let animal = \"Cangaroo\";\n console.log(`Animal is currently a ${animal}.`);\n}\n\nconsole.log(`Animal is currently a ${animal}.`);\n/*\nOutput:\n\nAnimal is currently a Cangaroo.\nAnimal is currently a Tiger.\n*/" }, { "path": "basic/2. scope/Examples/example3.js", "content": "/*\n\nScope যে শুধুমাত্র ফাংশনের মধ্যে তৈরী হয় বিষয়টি তেমন নয়। if-else কন্ডিশন, লুপ ইত্যাদি উপায়ে Scope তৈরী করা যায় এমনকি শুধুমাত্র দ্বিতীয় বন্ধনীর (Curly Braces) মাধ্যমেও Scope তৈরী করা যায়। নীচের প্রোগ্রাম লক্ষ্য করলে দেখতে পাবো যে আমরা প্রথম console.log(bike) এর মাধ্যমে Global Scope এর bike ভেরিয়েবলটি কনসোলে দেখিয়েছি, দ্বিতীয় console.log(bike) এর মাধ্যমে Local Scope এর bike ভেরিয়েবলটি কনসোলে দেখিয়েছি এবং সবশেষে console.log(bike) এর মাধ্যমে পুনঃরায় Global Scope এর bike ভেরিয়েবলটি কনসোলে দেখিয়েছি। \n\n*/\n\nlet bike = 'Yamaha R15 v3';\nconsole.log(bike); // Yamaha R15 v3\n\n{\n let bike = 'Suzuki Gixxer SF';\n console.log(bike); // Suzuki Gixxer SF\n}\n\nconsole.log(bike); // Yamaha R15 v3\n\n\n/*\n\nএখানে একটি বিষয় লক্ষ্য রাখতে হবে যে, জাভাস্ক্রীপ্ট ইঞ্জিন যদি ভিন্ন Scope তৈরী না করতো তাহলে সে আমাদেরকে একই Scope এর মধ্যে একই নামে দুইটি ভিন্ন ভেরিয়েবল ব্যবহার করতে দিতো না (যদিও এই বিষয়টি var দিয়ে ডিক্লেয়ার করা ভেরিয়েবলের জন্য আলাদা হয়ে থাকে)। আরো একটি মজার বিষয় হচ্ছে যে, Global Scope ও Local Scope উভয়ের মধ্যে যদি একই নামের দুটি ভেরিয়েবল থাকে তবে Local Scope এর মধ্যে উভয় ভেরিয়েবলের এক্সেস থাকলেও Local Scope এ ডিক্লেয়ার করা ভেরিয়েবল প্রধান্য বেশি পায়। রিয়েল লাইফের ক্ষেত্রে যার এলাকা তার প্রাধান্য বেশি বিষয়টি তেমন।\n\n*/" }, { "path": "basic/2. scope/Examples/example4.js", "content": "/*\n\nএকটা Scope এর ভিতরে ডিক্লেয়ার করা সকল ভেরিয়েবল এবং ফাংশনসমূহ ঐ Scope এর ভিতের তৈরী সকল Scope (Nested Scope) এ এক্সেস করা যায় আর এক্ষেত্রে সেটা যে কোন লেভেলে ব্যবহার করা যায়। নীচের কোডটি একটু খেয়াল করিঃ\n\n*/\n\nlet companyName = 'Vivasoft Ltd.';\n\nconst fn1 = () => {\n const fn2 = () => {\n console.log(companyName); // Vivasoft Ltd.\n }\n fn2();\n}\nconst fn3 = () => {\n fn1();\n}\n\nfn3();\n\n/*\n\nউপরের কোডটিতে Global Scope এর জন্য companyName হলো গ্লোবাল ভেরিয়েবল এবং fn1() ও fn3() হলো গ্লোবাল ফাংশন অর্থাৎ আমরা চাইলেই আমাদের কোডের যেকোন লেভেলে এগুলোকে ব্যবহার করতে পারি। আর গ্লোবাল স্কোপ যে আমাদেরকে যেকোন লোকাল স্কোপে তার ভেরিয়েবল এবং ফাংশনসমূহ ব্যবহারের সুযোগ দিচ্ছে এটাকেই আমরা Lexical Scoping (লেক্সিক্যাল স্কোপিং) বলে থাকি।\n\n*/" }, { "path": "basic/2. scope/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/2. scope/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/2. scope/Practices/practice1.md", "content": "নীচের কোডে কোথাও ভূল আছে কিনা সেটা খুজে বের করার চেষ্টা করুন। যদি থাকে তবে সেটা কেন হচ্ছে সেটা ব্যাখ্যা করুন।\n\n```js\n\nlet myCar = 'Lamborghini Huracan Evo'; \n\nfunction changeCar() {\n let myCar = 'Ferrari SF90 Stradale';\n console.log(myCar);\n}\n\nlet myCar = 'Ford GT';\nconsole.log(myCar);\n\n```\n\n\nনীচের কোডের আউটপুট কি হবে? \n\n```js\n\nlet secondHome = 'Canada';\n\nfunction toggleHome() {\n let secondHome = 'Australia';\n secondHome = 'USA';\n}\n\ntoggleHome();\n\nconsole.log(secondHome); // What will be the output?\n\n```" }, { "path": "basic/2. scope/README.md", "content": "### Scope কি?\n\n> **Scope** মূলত একটা নির্দিষ্ট সীমানাকে বোঝায়। যার বাহিরে **Variable** এবং **Function**-গুলো এক্সেসিবল না। যদি এই সীমানার বাহিরে কোন **Variable** এবং **Function** কে কল করা হয় তাহলে তার কোন অস্তিত্ব থাকবে না। একটি কথা ভাল করে মাথায় সংরক্ষণ করে রাখেন যে, জাভাস্ক্রিপ্টে একমাত্র তখনই **Scope** তৈরি হয়, যখন আমরা কোন **function** ইনভোক বা কল করি। হ্যাঁ, **function** ছাড়া আর কোথাও **Scope** তৈরি হয় না। আর এই **Scope** হচ্ছে দুই প্রকার- ১. **Global Scope** এবং ২. **Local Scope**।\n\n### ১. Global Scope\n\nজাভাস্ক্রিপ্টে বাই ডিফল্ট সব কিছু **Global Scope** - এ রান হয়। যার এক্সেসিবল সব জায়গায় থাকে। উদাহরণস্বরূপ-\n\n```js\nvar globalVariable = \"I am global variable.\";\nconsole.log(globalVariable); // I am global variable.\n\nvar myFunc = function () {\n console.log(globalVariable);\n};\n\nmyFunc(); // I am global variable.\n```\n\nউপরের কোডটুকু রান করলে দেখতে পারবেন যে globalVariable নামের ভেরিয়েবলটিকে সব যায়গায় ব্যবহার করা যাচ্ছে এবং সবার আউটপুটও একই দেখাচ্ছে।\n\n### ২. Local Scope\n\nআগেই বলেছিলাম যে, জাভাস্ক্রিপ্ট একমাত্র তখনই **Scope** তৈরি করে যখন কোন **Function** কে ইনভোক বা কল করা হয়। এই **Scope** কেই বলা হয় **Local Scope**। মানে হচ্ছে, তার ভিতরে যা কিছু থাকবে তার নিজস্ব **Scope** - এর বাহিরে এর কোন অস্তিত্ব থাকবে না। অর্থাৎ, তার **Scope** - এর ভিতরে লেখা কোন ভেরিয়েবলকে যদি আমরা বাহিরে অন্য কোথাও ব্যবহার করতে চাই তাহলে জাভাস্ক্রিপ্ট খুব সুন্দর করে একটি আনকট রেফারেন্সে ইরর দিয়ে বলে দিবে যে খোকা তুমি যাকে ব্যবহার করতে চাচ্ছ সে তো কোথাও ডিফাইন করা নেই। চলুন একটা উদাহরণ দিয়ে দেখা যাক-\n\n```js\nvar globalVariable = \"I am global variable.\";\n\nvar myFunc = function () {\n var localVariable = \"I am local variable.\";\n\n console.log(globalVariable);\n console.log(localVariable);\n};\n\nmyFunc();\n// I am global variable.\n// I am local variable.\n\nconsole.log(localVariable); // undefined\n```\n\nউপরের কোডটুকু রান করলে দেখতে পারবেন যে প্রথমে দেখাচ্ছে I am global variable. এবং I am local variable. তারপর অতি ভদ্রতার সাথে খুব সুন্দর করে এরর দিয়ে বলে দিছে যে **Uncaught ReferenceError: localVariable is not defined**।\n\n### Lexical Scoping কি?\n\nএখন সবার মনে প্রশ্ন আসতে পারে যে, এই **Lexical Scoping** - টা আবার কি? একটু অপেক্ষা করেন মাথা গরম করার কোন দরকার নেই। আসলে জাভাস্ক্রিপ্টকে বলা হয় **Lexical Scoping** ল্যাঙ্গুয়েজ। আমরা ফাংশনের ভিতরে আমাদের প্রয়োজন অনুযায়ী একাধিক ফাংশন তৈরি করতে পারি এবং চাইল্ড ফাংশনগুলো তার প্যারেন্ট ফাংশনের সব ভেরিয়েবলস এবং আর্গুমেন্টেসের এক্সেস পায়। কিন্তু আউটার ফাংশনগুলো তার চাইল্ড ফাংশনের ভেরিয়াবলস এবং আর্গুমেন্টসের কোন এক্সেস পায় না। এই যে চাইল্ড ফাংশনগুলো তার প্যারেন্ট ফাংশনের ভেরিয়েবলস এবং আর্গুমেন্টেসের এক্সেস পাচ্ছে এই এক্সেস পাওয়াকেই বল হয় **Lexical Scoping**।\n\n```js\nfunction outerFunc(a) {\n var outerFuncVariable = \"Hi there, I am outer \" + a;\n\n console.log(outerFuncVariable); // Hi there, I am outer function variable\n\n function innerFunc() {\n var innerFuncVariable = \"Hi there, I am inner \" + a;\n console.log(innerFuncVariable); // Hi there, I am inner function variable\n }\n\n innerFunc(); \n\n console.log(innerFuncVariable); // undefined\n}\n\nouterFunc(\"function variable\");\n```\n\n**নোটসঃ**\n\n- জাভাস্ক্রিপ্টের গ্লোবাল স্কোপ এবং লোকাল স্কোপ আছে।\n- যে কোন ফাংশনের বাইরে ডিক্লেয়ারড এবং ইনিশিয়ালাইজড ভ্যারিয়েবলগুলো গ্লোবাল ভ্যারিয়েবল হয়ে যায়।\n- ফাংশনের ভিতরে ডিক্লেয়ারড এবং ইনিশিয়ালাইজড ভ্যারিয়েবলগুলো সেই ফাংশনের লোকাল ভ্যারিয়েবল হয়।\n- গ্লোবাল ভ্যারিয়েবলগুলো প্রোগ্রামের যেকোন জায়গায় অ্যাক্সেস এবং পরিবর্তন করা যেতে পারে।\n- ফাংশন ডিক্লেয়ারেশনের বাইরে লোকাল ভ্যারিয়েবল সমূহ অ্যাক্সেস করা যাবে না।\n- গ্লোবাল ভ্যারিয়েবল এবং লোকাল ভ্যারিয়েবল একই নাম থাকতে পারে। কিন্তু একই নাম ব্যবহার না করায় ভালো।\n\n\n### আরও বাংলা টিউটোরিয়াল \n> - [জাভাস্ক্রিপ্টঃ স্কোপ(Scope) নিয়ে ধারণা](https://js.zonayed.me/basic/post-15) \n\n> - [জাভাস্ক্রিপ্ট স্কোপ (JavaScript Scope)](http://bangla.salearningschool.com/recent-posts/জাভাস্ক্রিপ্ট-স্কোপ-javascript-scope/)\n\n\n### বাংলা ভিডিও টিউটোরিয়াল \n> - [JavaScript Scope and Hoisting Explained | JavaScript Bangla Tutorial](https://www.youtube.com/watch?v=6_4NcQQvxmM)\n\n> - [Scope and Scope Variables | Ultimate Beginner JavaScript Course](https://www.youtube.com/watch?v=HZZ0X2Toiok&t=40s)\n\n\n> - [Javascript Behind The Scene Scope Chain and Lexical Scope in Bangla](https://www.youtube.com/watch?v=LPB6oT_pvu4)\n" }, { "path": "basic/3. hoisting/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/3. hoisting/Examples/example1.js", "content": "console.log(x)\nlet x = 5\n\n{/*\noutput:\nUncaught ReferenceError: x is not defined\n*/}\n\nconsole.log(x)\nconst x = 5\n\n{/*\noutput:\nUncaught ReferenceError: x is not defined\n*/}\n\nconsole.log(x)\nvar x = 5\n\n{/*\noutput:\nundefined\n*/}\n" }, { "path": "basic/3. hoisting/Examples/example2.js", "content": "\nhoistedSuccess(); // Hoisted\n\nfunction hoistedSuccess() {\n console.log(\"This is Function Statement and it is hoisted\");\n }\n\n{/*\noutput:\nThis is Function Statement and it is hoisted\n*/} \n\n\nhoistedFailed(); // Hoisted\n\nconst hoistedFailed =()=>{\n console.log(\"This function expression so it is not hoisteed.\");\n }\n\n{/*\noutput:\nUncaught ReferenceError: hoistedFailed is not defined\n*/} " }, { "path": "basic/3. hoisting/Examples/example3.js", "content": "var outerVar= \"Hi , this is outer variable.\";\n\nfunction hoistingFunc() {\n console.log(outerVar);\n var outerVar = \"Hi , this is inner variable.\";\n console.log(outerVar);\n}\n\nhoistingFunc();\n\n{/*\noutput:\nundefined\nHi , this is inner variable.\n*/}\n" }, { "path": "basic/3. hoisting/Examples/example4.js", "content": "function codeHoist(){\n a = 10;\n let b = 50;\n}\ncodeHoist();\n \nconsole.log('value of a is ',a);\nconsole.log('value of b is ',b);\n\n{/*\noutput:\nvalue of a is 10\nUncaught ReferenceError: b is not defined\n*/}" }, { "path": "basic/3. hoisting/Examples/example5.js", "content": "\nconsole.log('value of a is ',a);\nfunction codeHoist(){\n a = 10;\n}\ncodeHoist();\n\n{/*\noutput:\nReferenceError: a is not defined\n*/}" }, { "path": "basic/3. hoisting/Examples/example6.js", "content": "console.log(x); // x is undefined\n\nx = 5; // Assign 5 to x\n\nconsole.log(x); // x is 5\n\nvar x; // Declare x \n\n/*\nOutput:\nundefined\n5\n*/" }, { "path": "basic/3. hoisting/Examples/example7.js", "content": "var x = 5; // Initialize x\n\nconsole.log(x + \" \" + y);\n\nvar y = 7; // Initialize y\n\nconsole.log(x + \" \" + y);\n\n/*\nOutput:\n5 undefined\n5 7\n*/" }, { "path": "basic/3. hoisting/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/3. hoisting/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/3. hoisting/Practices/practice1.md", "content": "নীচের কোডের আউটপুট কি হবে?\n\n```js\n\nsayHi();\nconsole.log(sayHello);\n\nfunction sayHi() {\n var sayHello = 'Hi!';\n console.log(sayHello);\n}\n\nvar sayHello = 'Hello!';\n\n```" }, { "path": "basic/3. hoisting/README.md", "content": "এই লেখাটি পড়ার আগে আমার **Execution Context** এবং **Scope** নিয়ে লেখা দুটি আর্টিকেল পড়ে আসতে বলবো। তাহলে **Hoisting** বুঝতে আপনার জন্যে অনেক সহজ হয়ে যাবে।\n\n১। [Execution Context](../1.%20execution-context/README.md)\n\n২। [Scope](../2.%20scope/README.md)\n\n### Hoisting কি?\n\n> **Hoisting** হচ্ছে জাভাস্ক্রিপ্ট এমন একটি পদ্ধতি যেখানে কোড এক্সিকিউশন করার আগে ভ্যারিয়েবল এবং ফাংশন ডিক্লেয়ারেশনগুলোকে তার বর্তমান **Scope** - এর শুরুতে নিয়ে যায়।\n\nউদাহরণস্বরূপঃ\n\n```js\n\tfunction hoisting() {\n \t console.log(message);\n \t var message='Hi there, We are learning Hoisting!'\n\t}\n\nhoisting(); // Ouput: undefined\n```\nউদাহরণের ব্যাখ্যা দেওয়ার আগে Hoisting সম্পর্কে কিছু কথা বলে নেই। যখন আমরা কাউকে Hoisting বুঝায় উপরের সংজ্ঞাটা দিয়েই বুঝায়। কিন্তু আসলেই কি জাভাস্ক্রিপ্ট তার সকল ভ্যারিয়েবলস এবং ফাংশন ডিক্লেয়ারেশনগুলোকে তার স্কোপের উপরে নিয়ে যায়? না, জাভাস্ক্রিপ্ট এমনটা কখনো করে না। যদি আপনি আমার [Execution Context](https://shahansdiary.com/execution-context-in-javascript/) নিয়ে লেখাটা পড়ে থাকেন, তাহলে আপনি জানেন যে যখন আপনি জাভাস্ক্রিপ্টের কোন কোড এক্সিকিউট করেন, জাভাস্ক্রিপ্ট ইঞ্জিন গ্লোবাল এক্সিকিউশন কন্টেক্সট তৈরি করে।\n\nগ্লোবাল এক্সিকিউশন কন্টেক্সট এর দুটি phase আছে: **creation** এবং **execution**। creation phase চলার সময়, জাভাস্ক্রিপ্ট ইঞ্জিন সকল ভ্যারিয়েবলকে **undefined** হিসাবে ইনিশিয়ালাইজ করে। এবার চলুন আমরা **Hoisting**-এ ফিরে যাই।\n\nজাভাস্ক্রিপ্টে **Hoisting** হচ্ছে দুই প্রকার। ১. **Variable Hoisting** এবং ২. **Function Hoisting**।\n\n১. Variable Hoisting\n\n```js\n\tconsole.log(hoistingIntro); // Output: undefined\n\n\tvar hoistingIntro = \"Hi there, I am a string one.\";\n```\n\nউপরের console.log এর আউটপুট কি হবে? একটু চিন্তা করুন সময় নিয়ে। যাইহোক, উপরের কোডে কোন ভুল নেই। কারণ আমরা জানি জাভাস্ক্রিপ্ট ইঞ্জিন **Creation phase**-এ ভ্যারিয়েবল ডিক্লেয়ারেশনকে **undefined** হিসাবে ইনিশিয়ালাইজ করে। তাই, **Execution phase**-এ আউটপুট **undefined** হচ্ছে কারণ আমরা তার ভ্যালু ইনিশিয়ালাইজ হওয়ার আগেই log করে ফেলেছি। টেকনিক্যালি, কোডটি Execution phase-এ নিম্নলিখিত কোডের মত দেখাবেঃ\n\n```js\n\tvar hoistingIntro = undefined;\n\n\tconsole.log(hoistingIntro); // output: undefined\n\thoistingIntro = \"Hi there, I am a string one.\";\n```\n\n### ২। Functions Hoisting\n\nভ্যারিয়েবলের মত ফাংশনও Hoisted হয়। তাই আপনি আগে ফাংশন কল করে পরে ফাংশন ডিক্লেয়ার করতে পারবেন।\n\n```js\n\thoistedFunc(); // Hoisted\n\n\tfunction hoistedFunc() {\n\t\tconsole.log(\"Hoisted.\");\n\t}\n```\nবিঃ দ্রঃ একটি কথা ভাল করে মনে রাখবেন যে জাভাস্ক্রিপ্ট ফাংশন এক্সপ্রেশনের ক্ষেত্রে কোন Hoisting করে না।\n\n```js\n\thoistedFunEx(); // TypeError: hoistedFunEx is not a function\n\n\t var hoistedFunEx = function() {\n \t console.log(\"Hoisted.\");\n\t}\n```\nআপনাদের জন্যে একটি হোম টাস্ক। নিচের কোডের দুইটা console.log এর আউটপুট কি হবে? চাইলে কমেন্ট করে জানাতে পারেন। :) \n\n```js\nvar hoistingIntro = \"Hi there, I am a string one.\";\n\nfunction hoistingFunc() {\n console.log(hoistingIntro);\n var hoistingIntro = \"Hi there, I am a string two\";\n console.log(hoistingIntro);\n}\n\nhoistingFunc();\n```\n\n### আরও বাংলা টিউটোরিয়াল \n> - [জাভাস্ক্রিপ্টঃ স্কোপ(Scope) নিয়ে ধারণা](https://js.zonayed.me/basic/post-15) \n\n> - [জাভাস্ক্রিপ্ট স্কোপ (JavaScript Scope)](http://bangla.salearningschool.com/recent-posts/জাভাস্ক্রিপ্ট-স্কোপ-javascript-scope/)\n\n\n### বাংলা ভিডিও টিউটোরিয়াল \n> - [JavaScript Scope and Hoisting Explained | JavaScript Bangla Tutorial](https://www.youtube.com/watch?v=6_4NcQQvxmM)\n\n> - [Scope and Scope Variables | Ultimate Beginner JavaScript Course](https://www.youtube.com/watch?v=HZZ0X2Toiok&t=40s)\n\n\n> - [Javascript Behind The Scene Scope Chain and Lexical Scope in Bangla](https://www.youtube.com/watch?v=LPB6oT_pvu4)\n" }, { "path": "basic/4. closure/Examples/Anonymous_fn_with_lexical_scope.js", "content": "{/*\nHere the Anonymous function (within multiply function) creates a closure with x.\nso when multiply function called , it returns Anonymous function. We define that \nfunction in multiplyFive variable.Although multiply function already called and \nremove from the call stack but multiplyFive have now the access of variable x from closure.\n*/}\n\nconst multiply = (x)=> {\n return function(y) {\n return x * y;\n }\n}\n\nlet multiply10 = multiply(10);\nlet multiplyFive = multiply10(5);\n\nconsole.log(multiplyFive); \n\n//Output 50\n" }, { "path": "basic/4. closure/Examples/Closure_In_InnerFunction.js", "content": "//ex:1\nfunction add() {\n let counter = 0;\n function plus() {counter += 1;}\n plus(); \n return counter;\n }\n add()\n add()\n add()\n{/*\noutput:\n1\n*/} \n\n//ex:2\n{/*\n Closure in self invoking function\n A closure is a function having access to the parent scope,\n even after the parent function has closed.\nHere the self invoking Anonymous function will create closure with counter variable. \nand each time the add function called , Anonymous function function will execute \nand increment the value of counter(closure) by 1.\n */}\n\nconst add = (function () {\n let counter = 0;\n return function () {counter += 1; return counter}\n })();\n \n add();\n add();\n add();\n\n 3\n\n{/*\noutput:\n3\n\n*/}" }, { "path": "basic/4. closure/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/4. closure/Examples/closure.js", "content": "var langFunc = function () {\n var langName = \"JavaScript\";\n // displayLangName is a inner function of langFunc\n function displayLangName() {\n console.log(langName);\n }\n return displayLangName;\n};\n\nlangFunc()();\n\n/*\nOutput:\nJavaScript\n*/\n" }, { "path": "basic/4. closure/Examples/closure_scope_chain.js", "content": "{/*\nEvery closure has three scopes:\n\nLocal Scope (Own scope)\nOuter Functions Scope\nGlobal Scope\n\nHere's a series of nested functions,\n all of which have access to the outer \n functions' scope. In this context, \n we can say that closures have access to all outer function scopes.\n\n*/}\n\n// global scope\nvar e = 10;\nfunction sum(a){\n return function(b){\n return function(c){\n // outer functions scope\n return function(d){\n // local scope\n return a + b + c + d + e;\n }\n }\n }\n}\n\nconsole.log(sum(1)(2)(3)(4)); // log 20" }, { "path": "basic/4. closure/Examples/emulating_private_methods_with_closures.js", "content": "// জাভার মতো ভাষাগুলি আপনাকে method private হিসাবে declare করার অনুমতি দেয়,\n// অর্থাত্ তাদের একই class এর অন্যান্য methods দ্বারা call করা যেতে পারে।\n// জাভাস্ক্রিপ্ট এটি করার একটি native way প্রদান করে না,\n// কিন্তু Closure ব্যবহার করে private method অনুকরণ করা সম্ভব।\n// private method গুলি কেবল কোডে অ্যাক্সেস সীমাবদ্ধ করার জন্য কার্যকর নয়।\n// তারা আপনার global namespace পরিচালনার একটি শক্তিশালী উপায়ও প্রদান করে।\n\nvar counter = (function () {\n var privateCounter = 0;\n function changeByValue(val) {\n privateCounter += val;\n }\n\n return {\n increment: function () {\n changeByValue(1);\n },\n\n decrement: function () {\n changeByValue(-1);\n },\n\n value: function () {\n return privateCounter;\n },\n };\n})();\n\n// Initial call privateCounter\nconsole.log(counter.value());\n\n// privateCounter increment by 1\ncounter.increment();\n// again privateCounter increment by 1\ncounter.increment();\nconsole.log(counter.value());\n\n// privateCounter decrement by 1\ncounter.decrement();\nconsole.log(counter.value());\n\n\n/*\nOutput:\n0\n2\n1\n*/" }, { "path": "basic/4. closure/Examples/example_for_understand_usecase_of_closure.js", "content": "{/*\nThis is an example that show another use case of closure.\nVar keyword has functional scope. so when we create variable using\n var keyword with the same variable name, its always point to the same variable.\n Here we use asynchronous function setTimeout. when settimeout\n asynchronously executed after timeout, the value of count \n has been already became 6. Because it will continue the loop upto 5 and then another\n increment operation increment the value of count to 6. so it will print 6 for five time \n We can solve these issue using closure\n*/}\n\nfor(var count = 1; count <= 5; count++) {\n setTimeout(() => console.log(count), 1000);\n}\n\n{/*\nOutput:\n6\n6\n6\n6\n6\n*/}" }, { "path": "basic/4. closure/Examples/solve_var_functional_scope_issue_using_closure.js", "content": "//ex:1\n\n{/*\n In these example We have solve the previous issue\n in two differents way. First one using Closure.\n Here we called an Anonymous function in every iteration.\n We know function create closure with its lexical scope.\n So These Anonymous function will creates closure with count variable.\n When the Timeout finished , it will print the value from closure.\n*/}\nfor(var count = 1; count <= 5; count++) {\n (function (){\n var closurVar=count\n setTimeout(() => console.log(closurVar), 1000);\n\n })()\n}\n\n{/*\nOutput:\n1\n2\n3\n4\n5\n*/}\n\n\n\n\n//ex:2\n\n{/*\nlet has block scope and var has functional skope. \nso let create differents variable in every time where \nvar point to the same variable every time.\n*/}\n\nfor(let count = 1; count <= 5; count++) {\n setTimeout(() => console.log(count), 1000);\n }\n{/*\nOutput:\n1\n2\n3\n4\n5\n\n\n*/} " }, { "path": "basic/4. closure/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/4. closure/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/4. closure/Practices/practice1.md", "content": "নীচের প্রোগ্রামের আউটপুট কি হবে সেটা রান না করে নিজেই অনুমান করার চেষ্টা করো। তোমার অনুমানকৃত আউটপুট কোথাও লিখে রাখো। এবার প্রোগ্রামটি রান করে আউটপুট দেখো। যদি সেটা তোমার আউটপুটের সাথে মিলে যায় তাহলে তোমাকে কনগ্রাচুলেশনস, তুমি ক্লোজার বিষয়টি রপ্ত করতে পেরেছো। আর যদি তোমার আউটপুটের সাথে না মিলে তাহলে ক্লোজার টপিকটি আরেকটিবার ভালো করে পড়ো এবং প্রোগ্রামের আউটপুট কেন এমন হচ্ছে সেটা বোঝার চেষ্টা করো। \n\n```js\n\nsetTimeout(() => console.log('First Output:'), 1000);\nfor(var i = 1; i <= 5; i++) {\n setTimeout(() => console.log(i), 1000);\n}\n\nsetTimeout(() => console.log('\\nSecond Output:'), 2000);\nfor(var i = 1; i <= 5; i++) {\n function a(i) {\n setTimeout(() => console.log(i), 2000);\n }\n a(i);\n}\n\n```" }, { "path": "basic/4. closure/README.md", "content": "## পূর্বশর্ত\n\n২। [Scope](../2.%20scope/README.md)\n\n## ক্লোজার কি?\n\n> Closure কোন ফাংশন না আবার ফাংশনও কোন closure না। Closure হচ্ছে ফাংশনের এমন একটা বৈশিষ্ট্য যে বৈশিষ্ট্যের কারণে ফাংশন এক্সিকিউশন শেষ হয়ে যাবার পরেও তার lexical scope এ অবস্থিত সকল variable কে মনে রাখতে পারে। উদাহরণস্বরূপ বলা যেতে পারে যে ডম থেকে কিছু অ্যাক্সেস করার জন্যে আমরা যে ইভেন্ট ফাইয়ার করি সেটাও একটা closure।\n\n### কিছু উদাহরণঃ\n\n```js\nfunction add(a) {\n return function (b) {\n return a + b;\n };\n}\n\nlet addTen = add(10);\nlet addSeven = addTen(7);\n\nconsole.log(addSeven); // 17\n```\n\nকি হচ্ছে এসব?? ঠিক আছে, চলেন দেখি কোডগুলোকে ভেঙ্গেঃ-\n\n১। যখন add ফাংশনটি কল হয় এটি আরেকটি ফাংশনকে return করে।\n২। ঐ ফাংশনটির এক্সিকিউশন শেষ হয়ে যায় এবং মনে রাখে ঐ সময় তার প্যারামিটার a এর ভ্যালু কি ছিল।\n৩। যখন addTen ভেরিয়েবলে add ফাংশনকে এসাইন করা হয়। এটি সব সময় মনে রাখবে a এর ভেল্যু কি ছিল যখন এটিকে ইনিশিয়ালি কল করা হয়েছিল।\n৪। উপরের addTen ভেরিয়েবল একটি ফাংশনকে বোঝায় যেটি সব সময় ভেল্যু ১০ যোগ করবে যা পাঠানো হয়েছিল।\n৫। তার মানে হল যখন addTen কে কল করা হয় ৭ ভেল্যু দিয়ে, এটি ১০ এর সাথে ৭ যোগ করবে এবং ১৭ রিটার্ন করবে।\n\n**সুতারং, জাভাস্ক্রিপ্ট ইঞ্জিন addTen কে যেভাবে রান করেঃ-**\n\n```js\nfunction addTen(b) {\n return 10 + b;\n}\n```\n\nএখন একটা মজার উদাহরণ দেখবো। কিভাবে আমরা লুপের ভিতরে ক্লোজার চালাতে পারি। এটি ইন্টার্ভিউ বোর্ডের একটা কমন প্রশ্ন। নিচের কোডটা দেখেন এবং একটু মনে মনে চিন্তা করেন এটার আউটপুট কত হবে।\n\n```js\nfor (var i = 1; i <= 5; i++) {\n setTimeout(() => console.log(i), 1000);\n}\n```\n\n**কাঙ্খিত আউটপুটঃ-**\n\n```\n1\n2\n3\n4\n5\n```\n\n**কিন্তু আসছে অনাকাঙ্ক্ষিত আউটপুটঃ-**\n\n```\n6\n6\n6\n6\n6\n```\n\nআসলে এই আউটপুট আসার অনেক কারণ আছে। লুপের মাঝে ভ্যারিয়েবল i হচ্ছে একটি গ্লোবাল ভ্যারিয়েবল। যখন setTimeout রান হয় তার আগেই লুপ শেষ হয়ে যায় এবং তাই i ভ্যালু 6 হয়ে যায়। সেজন্যে প্রতি এক সেকেন্ড পর পর পাঁচবার 6 দেখাচ্ছে। যদি বিশ্বাস না হয় তাহলে কোডটা রান করার পর আপনার গ্লোবাল window অবজেক্টটা একবার দেখেন সেখানে i নামে একটা ভ্যারিয়াবল দেখতে পারবেন এবং তার ভ্যালু 6 হয়ে আছে।\n\nএই সমস্যার সমাধান আমরা IIFE বা Immediately Invoked Function Expression ব্যবহার করে করতে পারি। নিচে উদাহরণ দেওয়া হলোঃ-\n\n**পদ্ধতি ১ঃ-**\n\n```js\nfor (var i = 1; i <= 5; i++) {\n (function () {\n var val = i;\n setTimeout(() => console.log(val), 1000);\n })();\n}\n```\n\n**পদ্ধতি ২ঃ-**\n\n```js\nfor (var i = 1; i <= 5; i++) {\n (function (val) {\n setTimeout(() => console.log(val), 1000);\n })(i);\n}\n```\n\nএখানে আমরা একটা ফাংশন লিখে একটা Scope তৈরি করেছি। ফাংশনটিকে ইমিডিয়েটলি কল করেছি এবং তার প্যারামিটারের ভেল্যু হিসাবে i কে পাস করেছি। এতে সে এখন i এর ভেল্যুকে মনে না রেখে সে এখন তার প্যারামিটারের ভেল্যুকে মনে রাখবে। মানে এখন i এর মান 1, 2 করে যাচ্ছে এবং সেটা থেকে একটা আলাদা Scope তৈরি হচ্ছে যেটাকে সে মনে রাখছে।\n\n**পদ্ধতি\t৩ঃ-**\n\n```js\nfor (let i = 1; i <= 5; i++) {\n setTimeout(() => console.log(i), 1000);\n}\n```\n\n**আউটপুটঃ-**\n\n```\n1\n2\n3\n4\n5\n```\n\nঅবশেষে আমাদের কাঙ্ক্ষিত আউটপুট পেলাম। তবে আজ এই পর্যন্ত দেখা পরবর্তী অন্য টপিকে। হ্যাপি কোডিং...\n" }, { "path": "basic/5. call-by-value-and-call-by-reference/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/5. call-by-value-and-call-by-reference/Examples/example1.js", "content": "/* Call By Value of primitives types এর উদাহরণ */\n\nfunction multiplyByTen(value) {\n value = value * 10;\n}\n\nvar number = 7;\n\nconsole.log(\"Before call: number = \" + number); // 7\n\nmultiplyByTen(number);\n\nconsole.log(\"After call: number = \" + number); // 7\n\n/* Call By Reference of non-primitives types এর উদাহরণ */\n\nfunction passByReference(person) {\n person.name = \"Alex\";\n}\n\nvar alam = { name: \"Alam\" };\n\nconsole.log(alam.name);\n// Alam\n\npassByReference(alam);\n\nconsole.log(alam.name);\n// Alex\n" }, { "path": "basic/5. call-by-value-and-call-by-reference/Examples/example2.js", "content": "/* Call By Value of primitives types এর উদাহরণ */\n\nfunction cube(a) {\n a = a * a * a;\n return a;\n}\n\nvar x = 10;\n\nvar result = cube(x);\n\nconsole.log(x); //a = 10 which is unchanged\n\nconsole.log(result); // 1000\n\n/* Call By Reference of non-primitives types এর উদাহরণ */\n\nfunction switchOn(device) {\n device.isOn = true;\n}\n\nvar phone = {\n isOn: false,\n};\n\nswitchOn(phone);\n\nconsole.log(phone.isOn); // true;\n" }, { "path": "basic/5. call-by-value-and-call-by-reference/Examples/example3.js", "content": "// Call by value for primitive type.\n\nvar a = 5;\nvar b;\nb = a;\na = 3;\nconsole.log(a); // Output: 3\nconsole.log(b); // Output: 5\n\n// call by reference for object type\n\nvar obj1 = { test : 'Test message 1' };\nvar obj2;\nobj2 = obj1;\n\nobj1.test = 'Test message 2';\nconsole.log(obj1); // Output: { test: Test message 2 }\nconsole.log(obj2); // Output: { test: Test message 2 }" }, { "path": "basic/5. call-by-value-and-call-by-reference/Examples/example4.js", "content": "// call by value\n\nfunction printGreeting(greetName) { \n greetName = \"Hello, \" + greetName; \n console.log(\"New value: \" + greetName); // Output: Hello, Anik\n} \nvar greetName = 'Anik';\nprintGreeting(greetName); \nconsole.log(\"Old value: \" + greetName); // Output: Anik \n\n// call by reference\n\nfunction modifyObj(person) { \n person.name = 'Fahim'; \n person.age = 26; \n} \n\nvar person = { \n name: 'Anik', \n age: 25\n}; \n\nconsole.log(\"Initial name value: \" + person.name); // Initial name value: Anik\nmodifyObj(person); \nconsole.log(\"Updated name value: \" + person.name); // Udated name value: Fahim\n\n" }, { "path": "basic/5. call-by-value-and-call-by-reference/Examples/example5.js", "content": "/*\n\nCall by value বিষয়টি Primitive ডাটা টাইপের সাথে জড়িত। আবার Call by reference বিষয়টি Non-primitive বা Reference ডাটা টাইপের সাথে জড়িত। বিষয় দুটি বোঝার জন্য একটু অন্যভাবে চিন্তা করি। \n\nমনে করুন, আমি Google Doc এ একটি ফাইল খুলেছি এবং সেটাতে আপনাকেও এডিট করার পারমিশন দিয়েছি। এখন ফাইলটিতে আপনি বা আমি যেই কোন কিছু লিখি বা পরিবর্তন করি না কেন সেটা আমাদের দুজনের দিক থেকেই পরিবর্তন হবে। বিষয়টি এমন হবে না যে আপনি দেখলে এক রকম হবে আর আমি দেখলে অন্য রকম হবে। এই বিষয়টি ঠিক Call by reference এর মতো। আবার অন্যদিকে, আমার কাছে থাকা একটি ফাইলের কপি আমি আপনাকে দিলাম অর্থাৎ কপি মূলত দুটি, একটি আপনার আর অন্যটি আমার। সুতরাং আমি যদি আমার ফাইলে কোন পরিবর্তন করি তবে সেটি শুধুমাত্র আমার ফাইলেই পরিবর্তন হবে, আপনারটা যেমন ছিল বা আপনি যেভাবে পরিবর্তন করেছেন সেভাবেই থাকবে। আমাদের কারো পরিবর্তন একে অন্যের উপর কোন প্রভাব ফেলবে না। এই বিষয়টি Call by value এর মতো। আশাকরি এখন বিষয় দুটি বুঝতে কোন সমস্যা হবে না। চলুন একটা উদাহরণ দেখিঃ\n\n*/\n\n// Call By Value Part \nlet primitiveData = 200;\n\n(function callByValue(primitiveData) {\n primitiveData = 404;\n})(primitiveData);\n\nconsole.log(primitiveData); // Output: 200\n\n\n// Call By Reference Part \nlet nonPrimitiveData = ['Abid', 'Shahan', 'Imrul', 'Biplob'];\n\n(function callByReference(nonPrimitiveData) {\n nonPrimitiveData[0] = 'Tareq';\n nonPrimitiveData.push('Tajnur');\n})(nonPrimitiveData);\n\nconsole.log(nonPrimitiveData); // Output: [ 'Tareq', 'Shahan', 'Imrul', 'Biplob', 'Tajnur' ]" }, { "path": "basic/5. call-by-value-and-call-by-reference/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/5. call-by-value-and-call-by-reference/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/5. call-by-value-and-call-by-reference/Practices/practice1.md", "content": "Here we are making a function for adding new properties and values to a specific object. What will be the console log value of 'person'? I want the function to return a new object by not changing the initial value of 'person' object sitting at the global scope. How can you do that?\n\n ```javascript\n const addNewProp = (key, value, object) => {\n object[key] = value;\n };\n \n const person = {\n name: 'Anik'\n };\n \n addNewProp('age', 25, person);\n console.log(person);\n ```" }, { "path": "basic/5. call-by-value-and-call-by-reference/Practices/practice2.md", "content": "নীচের প্রোগ্রামের আউটপুট কি হবে? যদি বুঝতে না পারেন তবে একটু একটু করে ডিবাগ করার চেষ্টা করুন।\n\n```js\n\nlet parentProperty = {\n house: ['Dhaka', 'Khulna', 'Sylhet'],\n car: 2\n}\n\nlet childProperty = parentProperty;\nchildProperty.car = 3;\nchildProperty.bike = ['Yamaha', 'Honda'];\n\nconsole.log(parentProperty === childProperty); // True or False?\nparentProperty = childProperty;\nconsole.log(parentProperty === childProperty); // True or False?\n\n```\n\n\nএবার নীচের কোডের আউটপুট কি হবে সেটা বের করো।\n\n```js\n\nlet num = 1100;\n\n(function changeValue(num) {\n num = 1011;\n})(num);\n\nconsole.log(num);\n\n```" }, { "path": "basic/5. call-by-value-and-call-by-reference/README.md", "content": "আজকে আমরা আলোচনা করতে যাচ্ছি Primitive এবং Reference টাইপ ডাটার মাঝে কি পার্থক্য এবং এই ডাটা টাইপগুলো কিভাবে কাজ করে। Primitive এবং Reference টাইপকে pass by value এবং pass by reference ও বলা হয়ে থাকে। একজন জাভাস্ক্রিপ্ট প্রোগ্রামার হিসাবে এই ডাটা টাইপগুলো সম্পর্কে পরিষ্কার জ্ঞান রাখা আবশ্যক।\n\nজাভাস্ক্রিপ্টে দুই টাইপের ডাটা টাইপ আছে।\n1. primitive ডাটা টাইপ এবং\n2. non-primitive বা reference ডাটা টাইপ\n\nজাভাস্ক্রিপ্টে Strings, Numbers, Boolean, Null, undefined এই ডাটা টাইপগুলো প্রিমিটিভ ডাটা টাইপ হিসাবে পরিচিত এবং Arrays, Objects, Function নন-প্রিমিটিভ বা রেফারেন্স ডাটা টাইপ হিসাবে পরিচিত। এদের মাঝে মৌলিক পার্থক্য হচ্ছে যে প্রিমিটিভ ডাটা immutable বা অপরিবর্তনীয় এবং নন-প্রিমিটিভ ডাটা mutable বা পরিবর্তনীয়।\n\n### প্রিমিটিভ ডাটা টাইপ\nপ্রমিটিভ ডাটা immutable বা অপরিবর্তনীয় ডাটা টাইপ হিসাবে পরিচিত। কারণ এই ডাটা একবার তৈরি হয়ে গেলে এটি পরিবর্তন করার কোন পথ নেই। তাহলে চলেন আপনাদের প্রমাণ করে দেখাই।\n\n```js\n\tlet str1 = \"Hi there, I am a string!\";\n\tconsole.log(str1[1]); // \"i\"\n\t\n\tstr1[1] = \"e\";\n\tconsole.log(str1); // \"Hi there, I am a string!\"\n```\n\nউপরের কোডটা রান করলে জাভাস্ক্রিপ্টের কারিশমা দেখতে পারবেন। সব কিছু মাথার উপর দিয়ে গেল? আচ্ছা, চলেন ব্যাপারটা ব্যাখ্যা করি। আপনি হাজার বার চাইলেও স্ট্রিং এর ভ্যালু পরিবর্তন করতে পারবেন না। কারণ স্ট্রিং একটি immutable বা অপরিবর্তনীয় ডাটা। একটি কথা মনে রাখবেন যদি স্ট্রিংকে কোন ভেরিয়েবলে অ্যাসাইন করে ফেলেন এবং অ্যাসাইন করার পর স্ট্রিংকে মডিফাই করতে চান, তাহলে আপনি একটি নতুন স্ট্রিং পাবেন। যেমন- .toUpperCase(), .slice(), .trim() ইত্যাদি।\n\n```js\n\tlet str1 = \"Hi there, I am a string!\";\n\tlet newStr = str1.toUpperCase();\n\t\n\tconsole.log(newStr); // HI THERE, I AM A STRING!\n\tconsole.log(str1); // Hi there, I am a string!\n```\n\nপ্রিমিটিভ ডাটা টাইপগুলো একে অপরের সাথে তাদের ভ্যালু দ্বারা তুলনা করে।\n\n```js\n\tlet str1 = \"Hi there, I am a string!\";\n\tlet str2 = \"Hi there, I am a string!\";\n\t\n\tconsole.log(str1 == str2); // true\n\t\n\tlet num1 = 7;\n\tlet num2 = 7;\n\t\n\tconsole.log(num1 == num2); // true\n```\n\nপ্রিমিটিভ টাইপগুলো সব সময় তাদের ভ্যালু পাস করে। যখন আমরা কোন প্রিমিটিভ ডাটা টাইপকে অন্য কোন ভেরিয়েবলে অ্যাসাইন করি, তখন তার ভ্যালু কপি হয়ে নতুন ভেরিয়েবলে অ্যাসাইন হয়।\n\n```js\n\tlet num1 = 7;\n\tlet num2 = num1;\n\t\n\tconsole.log(num1); // 7\n\tconsole.log(num2); // 7\n\t\n\tnum2 = 8;\n\t\n\tconsole.log(num1); // 7\n\tconsole.log(num2); // 8\n```\n\n### নন-প্রিমিটিভ ডাটা টাইপ\n\nনন-প্রিমিটিভ ডাটা mutable বা পরিবর্তনীয়। কারণ একটি নন-প্রিমিটিভ ডাটা তৈরি হয়ে যাওয়ার পরেও তার ভ্যালু পরিবর্তন হতে পারে। আমরা যখন কোন নন-প্রিমিটিভ ডাটা তৈরি করি, তখন সেই ডাটার জন্যে মেমোরিতে একটা অ্যাড্রেস তৈরি হয় এবং সেই অ্যাড্রেসটাকে মনে রেখে কোন এক জায়গায় ভ্যালুগুলোকে ষ্টোর করে রাখে। তারপর আমাদের যখন দরকার পড়ে তখন সে ঐ অ্যাড্রেসকে কল করে এবং আমাদের ডাটা প্রদান করে। এটা বুঝতে হলে আপনাকে স্ট্যাক এবং হীপ মেমোরি সম্পর্কে জানতে হবে। তবে আমি যতটুকু বললাম এখন এতটুকু মনে রাখলেই হবে।\n\n```js\n\tlet arr1 = [\"JavaScript\", \"React\", \"Redux\", \"React-Redux\"];\n\tlet arr2 = arr1;\n\t\n\tconsole.log(arr1); // [\"JavaScript\", \"React\", \"Redux\", \"React-Redux\"]\n\tconsole.log(arr2); // [\"JavaScript\", \"React\", \"Redux\", \"React-Redux\"]\n\t\n\tarr2[3] = \"Redux-Toolkit\";\n\tconsole.log(arr1); // [\"JavaScript\", \"React\", \"Redux\", \"Redux-Toolkit\"]\n\tconsole.log(arr2); // [\"JavaScript\", \"React\", \"Redux\", \"Redux-Toolkit\"]\n```\n\nনন-প্রিমিটিভ বা রেফারেন্স ডাটাগুলো সব সময় তাদের রেফারেন্স পাস করে। যখন আমরা কোন রেফারেন্স ডাটাকে অন্য কোন ভেরিয়েবলে অ্যাসাইন করি, তখন তার রেফারেন্স কপি হয়। মানে arr1 কে যখন আমরা arr2 তে অ্যাসাইন করি তখন তার রেফারেন্স বা অ্যাড্রেসটাকে কপি করে বা মনে রাখে তার ভ্যালুকে না। তাই দুইটা ভেরিয়েবলের অ্যাড্রেস একই থাকে। তাই যখন আমরা কোন একটি ভেরিয়েবলের ভ্যালু পরিবর্তন করি, তখন দুইটা ভেরিয়েবলেরই ভ্যালু পরিবর্তন হয়ে যায়।\n\n```js\n\tlet obj1 = {\n \t\tname: 'JavaScript'\n\t};\n\n\tlet obj2 = obj1;\n\t\n\tconsole.log(`${obj1.name}`); // JavaScript\n\tconsole.log(`${obj2.name}`); // JavaScript\n\t\n\tobj2.name = \"React\";\n\t\n\tconsole.log(`${obj1.name}`); // React\n\tconsole.log(`${obj2.name}`); // React\n```\n\nআশা করি, উপরের কোডে কি হচ্ছে সেটা এখন খুব ভাল ভাবেই বুঝতে পারছেন। একটি কথা নন-প্রিমিটিভ ডাটা তাদের রেফারেন্স দ্বারা তুলনা করে।\n\n```js\n\tlet obj1 = {\n \t\tname: 'JavaScript'\n\t};\n\t\n\tlet obj2 = {\n \t\tname: 'JavaScript'\n\t};\n\t\n\tconsole.log(obj1 === obj2); // false\n```\n\nএখানে দুইটা অবজেক্টের একই ভ্যালু কিন্তু যখন আমরা দুইটা অবজেক্টকে একে-অপরের সাথে তুলনা করছি, তখন তারা false রিটার্ন করছে। কারণ তাদের ভ্যালু একই হলেও তাদের অ্যাড্রেস এক না।\n\n```js\n\tlet obj1 = {\n \t\tname: 'JavaScript'\n\t};\n\t\n\tlet obj2 = obj1;\n\t\n\tconsole.log(obj1 === obj2); // true\n```\n\n" }, { "path": "basic/6. callback-and-higher-order-functions/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/6. callback-and-higher-order-functions/Examples/example1.js", "content": "/* এখানে circleArea এবং squareArea ফাংশন দুটি হচ্ছে Callback ফাংশন\n আর areaCalculate ফাংশনটি হচ্ছে Higher Order ফাংশন\n*/\n\nfunction areaCalculate(arrayWidth, callback) {\n const area = arrayWidth.map((x) => callback(x));\n return area;\n}\n\nfunction circleArea(radius) {\n return Math.PI * radius * radius;\n}\n\nfunction squareArea(side) {\n return side * side;\n}\n\nconst array = [2, 6, 7, 8, 3, 1, 5];\n\nvar circleAreaArray = areaCalculate(array, circleArea);\nconsole.log(circleAreaArray);\n\nvar squareAreaArray = areaCalculate(array, squareArea);\nconsole.log(squareAreaArray);\n\nconsole.log(array);\n\n/*\nOutput:\n[12.566370614359172, 113.09733552923255, 153.93804002589985, 201.06192982974676, 28.274333882308138, 3.141592653589793, 78.53981633974483]\n[4, 36, 49, 64, 9, 1, 25]\n[2, 6, 7, 8, 3, 1, 5]\n*/\n" }, { "path": "basic/6. callback-and-higher-order-functions/Examples/example2.js", "content": "// Dummy object\nconst object = \n[\n { framework: 'React.JS', website: 'Paypal' },\n { framework: 'React.JS', website: 'Tesla' },\n { framework: 'Angular', website: 'Google' },\n { framework: 'Vue.JS', website: 'Vue' },\n { framework: 'JavaScript', website: 'inblack67' },\n]\n\n// Higher Order Function\nfunction modifyArray(arr, callback) {\n return callback(arr);\n}\n\n// Callback function which add element to existing array\nfunction addElemToArray(item, arr) {\n return [ ...arr, item ];\n}\n\n// Callback function for counting the occurences of a particular object key like, 'framework'\nfunction keyOccurence(key, arr) {\n const obj = {};\n arr.forEach((data) => {\n if(data.hasOwnProperty(key)){\n if(obj[data[key]]){\n obj[data[key]]++;\n }\n else{\n obj[data[key]] = 1;\n }\n }\n })\n\n const occurenceCountObj = Object.keys(obj).map(k => ({ [key]: k, count: obj[k] }))\n \n return occurenceCountObj;\n}\n\n// Common bind wrapper for the callback function\nfunction bindWrapper(func, ...restArgs) {\n return func.bind(null, ...restArgs);\n}\n\nconsole.log(modifyArray(object, bindWrapper(keyOccurence, 'framework')));\n/* Output: \n [ { framework: 'React.JS', count: 2 },\n { framework: 'Angular', count: 1 },\n { framework: 'Vue.JS', count: 1 },\n { framework: 'JavaScript', count: 1 } \n ]\n*/\nconsole.log(modifyArray(object, bindWrapper(addElemToArray, { framework: 'Gats by', website: 'gatsby' })));\n/* Output: \n [ { framework: 'React.JS', website: 'Paypal' },\n { framework: 'React.JS', website: 'Tesla' },\n { framework: 'Angular', website: 'Google' },\n { framework: 'Vue.JS', website: 'Vue' },\n { framework: 'JavaScript', website: 'inblack67' },\n { framework: 'Gats by', website: 'gatsby' } \n ]\n*/\n" }, { "path": "basic/6. callback-and-higher-order-functions/Examples/example3.js", "content": "/*\n\nআমরা সাধারণত একটি ফাংশনের আর্গুমেন্ট হিসেবে ভেরিয়েবল, অ্যারে, অবজেক্ট ইত্যাদি পাঠিয়ে থাকি। যদি কোন ফাংশনকে আমরা অন্য ফাংশনের আর্গুমেন্ট হিসেবে পাঠায় তাহলে যে ফাংশনকে আর্গুমেন্ট হিসেবে পাঠাচ্ছি সেটাই Callback Function আর যে ফাংশন Callback Function কে আর্গুমেন্ট হিসেবে গ্রহন করছে সেটাই Higher Order Function. এছাড়াও যে ফাংশন তার রিটার্ন ভ্যালু হিসেবে কোন ফাংশনকে পাস করে তাকেও Higher Order Function বলে। একটু উদাহরণ দেখিঃ \n\n*/\n\n// Callback Function \nfunction sayHi(name) {\n console.log('Hi, ' + name + '!');\n}\n\n// Higher Order Function \nfunction greetings(process, name) {\n process(name);\n console.log('Welcome to Callback and Higher Order function tutorial.');\n}\n\nlet student = 'Ahnaf';\ngreetings(sayHi, student);\n\n/**\n * Output:\n * Hi, Ahnaf!\n * Welcome to Callback and Higher Order function tutorial.\n */\n\n// Another Higher Order Function \nfunction company() {\n let companyName = 'Vivasoft Ltd.';\n let companyType = 'Software Company';\n let companyEmail = 'contact@vivasoftltd.com';\n\n function viewDetails() {\n console.log('Company Name:', companyName);\n console.log('Type:', companyType);\n console.log('Email:', companyEmail);\n }\n\n return viewDetails;\n}\n\nlet myCompanyDetails = company();\nmyCompanyDetails();\n\n/**\n * Output:\n * Company Name: Vivasoft Ltd.\n * Type: Software Company\n * Email: contact@vivasoftltd.com\n */" }, { "path": "basic/6. callback-and-higher-order-functions/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/6. callback-and-higher-order-functions/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/6. callback-and-higher-order-functions/Practices/practice1.md", "content": "\nনীচের কোডে higherOrderFunction() ফাংশনটি আসলে কোন ধরনের ফাংশন সেটি যাচাই করার চেষ্টা করুন। এবার নীচের কোডের আউটপুট কি হবে সেটা বের করার চেষ্টা করুন। \n\n```js\n\nfunction higherOrderFunction() {\n let myName = 'Robindranath Thagore';\n\n function displayName() {\n console.log(myName);\n }\n\n return displayName();\n}\n\nlet viewName = higherOrderFunction();\nviewName(); \n\n```\n\nআসলে উপরের কোডের higherOrderFunction() ফাংশনটি একটি সাধারণ ফাংশন, এটি আসলে Higher-Order Function নয়। এমতাবস্থায় higherOrderFunction() ফাংশনটিকে Higher-Order Function বানাতে হলে কোথায় পরিবর্তন করতে হবে সেটার সমাধান করুন।" }, { "path": "basic/6. callback-and-higher-order-functions/README.md", "content": "কলব্যাক ব্যাপারটি আমাদের জীবনের সাথে ব্যাপকভাবে জড়িয়ে আছে। যদি “সে” কলব্যাক না করে আপনি হয়তো “অ” হয়ে যান! ইয়ে মানে বলতে চাচ্ছিলাম যে অভিমানী নয়তো অস্থির হয়ে যান ;) আর যদি আপনার লাইফে “সে” না থাকে তবে তো কোন কথাই নেই। আমার মত বিন্দাস? । যাইহোক, আপনি “অ” হোন আর না হোন, “সে” কলব্যাক করুক আর না করুক আজকে আমরা কলব্যাক নিয়ে আলোচনা করবোই। চলুন তাহলে শুরু থেকেই শুরু করি…\n\nজাভাস্ক্রিপ্টে ফাংশন হচ্ছে একটি ফার্স্ট-ক্লাস অবজেক্ট। এই কারণে, ফাংশন ভেরিয়েবলের মাঝে এসাইন হতে পারে, অন্য একটি ফাংশনকে আর্গুমেন্ট হিসাবে নিতে পারে, ফাংশনের ভিতরেও কাজ করতে পারে এবং ফাংশন দ্বারা রিটার্নও হতে পারে।\n\n### কলব্যাক ফাংশন কি?\n> সহজ কথায়, কলব্যাক ফাংশন হচ্ছে এমন একটি ফাংশন যেটি অন্য একটি ফাংশনে আর্গুমেন্ট হিসাবে পাস করা ফাংশন, যেটি কোন কাজ সম্পন্ন করার জন্যে আউটার ফাংশনের ভিতরে ইনভোক হয়।\n\n### হাইয়ার অর্ডার ফাংশন কি?\n> যে ফাংশনে অন্য কোন ফাংশনকে আর্গুমেন্ট হিসাবে পাস করা হয় বা কোন ফাংশন অন্য কোন ফাংশনকে রিটার্ন করে তাকে হাইয়ার অর্ডার ফাংশন বলা হয়। বাংলায় এটাকে ঊচ্চমার্গীয় ফাংশন হিসেবে ভেবে নিতে পারেন। ঊচ্চমার্গীয় কথাবার্তা মাথার উপর দিয়ে গেলেও ঊচ্চমার্গীয় ফাংশন মাথার নিচ দিয়েই যাবে ইনশাআল্লাহ্‌, নিশ্চিত থাকুন।\n\nআমাদের এমন একটি ফাংশন আছে যেটি আর্গুমেন্ট হিসেবে একটি অ্যারে নিবে এবং সেটি কে মডিফাই করে একটি নতুন অ্যারে রিটার্ন করবে। এক্ষেত্রে, আমাদের ফাংশনটিকে যে অ্যারে দেওয়া হবে তার সাথে দুই যোগ করে নতুন একটি অ্যারে রিটার্ন করবে।\n\n```js\nfunction modifyBy2(arr) {\n\tlet output = [];\n\t\n\tfor(let i = 0; i < arr.length; i++) {\n\t\toutput.push(arr[i] + 2);\n\t}\n\t\n\treturn output;\n}\n\nconst newArr = modifyBy2([1,2,3,4,5,6]);\nconsole.log(newArr); // [3, 4, 5, 6, 7, 8]\n```\n\nএখন আমাদের আরেকটি ফাংশন আছে যেটি আর্গুমেন্ট হিসেবে একটি অ্যারে নিবে এবং যে অ্যারে দেওয়া হবে তার সাথে দুই গুণ করে নতুন একটি অ্যারে রিটার্ন করবে।\n\n```js\nfunction multifyBy2(arr) {\n\tlet output = [];\n\t\n\tfor(let i = 0; i < arr.length; i++) {\n\t\toutput.push(arr[i] * 2);\n\t}\n\t\n\treturn output;\n}\n\nconst newArr = modifyBy2([1,2,3,4,5,6]);\nconsole.log(newArr); // [2, 4, 6, 8, 10, 12]\n```\n\nএখন যদি আমরা বিয়োগ বা ভাগ করতে চাই? তাহলে আমাদেরকে আরও দুটি ফাংশন লিখতে হবে তাই না? ব্যাপারটা তাহলে কি ভাল কিছু হচ্ছে? কোড রিপিটেশন হয়ে যাচ্ছে। একটি বিষয় লক্ষ্য করেন আমাদের লেখা দুটি ফাংশনেই শুধু অপারেশনগুলা ছাড়া একই কোড লিখেছি। আমরা যদি এমন কিছু করতে পারি যে আমাদের ফাংশনে যোগ, বিয়োগ যে কাজই করুক না কেন সেটি আমরা বলে দিবো, তাহলে কেমন হয়? এখন আমরা সে কাজটাই করবো। তার জন্যে আমাদেরকে আমাদের ফাংশনের সাথে আরেকটি আর্গুমেন্ট পাস করতে হবে। যেটি আসলে আমাদের অপারেশনটা হ্যান্ডেল করবে।\n\n```js\nfunction modifyArray(arr, fn) {\n\tlet output = [];\n\t\n\tfor(let i = 0; i < arr.length; i++) {\n\t\toutput.push(fn(arr[i]));\n\t}\n\t\n\treturn output;\n}\n\nfunction modifyBy2(elem) {\n\treturn elem + 2;\n}\n\n\nconst newArr = modifyArray([1,2,3,4,5,6], modifyBy2);\nconsole.log(newArr); // [3, 4, 5, 6, 7, 8]\n```\nউপরের কোডে লক্ষ্য করুন, আমরা **modifyArray** নামে একটি ফাংশন ডিফাইন করেছি যেটি দুটি আর্গুমেন্টস নিচ্ছে। একটি অ্যারে এবং অন্যটি একটি ফাংশন। সে ফাংশনে আমরা বলে দিচ্ছি তার কাজ কি হবে। সে তার কাজ সম্পন্ন করে output অ্যারেতে তার ভ্যালুটা পুশ করে দিচ্ছে এবং modifyArray ফাংশনটি কাজ সম্পন্ন করে একটি নতুন অ্যারে রিটার্ন করতেছে। এখন যদি আমরা বিয়োগ, গুণ বা ভাগ করতে চাই সেটিও খুব সহজেই করতে পারবো এই ফাংশন দিয়ে। আমাদেরকে নতুন করে কোন লজিক লেখা লাগবে না শুধু আমরা একটি নতুন ফাংশন দিয়ে দিবো এবং সেখানে বলে দিবো তাকে কি করতে হবে। তাহলে চলুন দেখি আমাদের কাজ করতে পারি কিনা।\n\n```js\nfunction modifyArray(arr, callback) {\n\tlet output = [];\n\t\n\tfor(let i = 0; i < arr.length; i++) {\n\t\toutput.push(callback(arr[i]));\n\t}\n\t\n\treturn output;\n}\n\nfunction addBy2(elem) {\n\treturn elem + 2;\n}\n\nfunction multifyBy2(elem) {\n\treturn elem * 2;\n}\n\n\nconst additionArr = modifyArray([1,2,3,4,5,6], addBy2);\nconst multiArr = modifyArray([1,2,3,4,5,6], multifyBy2);\n\nconsole.log(additionArr); // [3, 4, 5, 6, 7, 8]\nconsole.log(multiArr); // [2, 4, 6, 8, 10, 12]\n```\n\n**modifyArray** ফাংশনটিতে আর্গুমেন্ট হিসাবে যে ফাংশনটিকে পাস করতেছি ওই ফাংশনটিই হচ্ছে একটি কলব্যাক ফাংশন এবং **modifyArray** ফাংশনটি হচ্ছে একটি **হাইয়ার অর্ডার ফাংশন**।\n" }, { "path": "basic/7. this-keyword/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/7. this-keyword/Examples/this_in_constructor_invocation.js", "content": "/* নিম্নলিখিত Bike ফাংশনের */\n\nfunction Bike(brand) {\n this.brand = brand;\n}\n\nBike.prototype.getBrand = function () {\n return this.brand;\n};\n\n/*\nএক্সপ্রেশন new Bike(\"TVS\") হল Bike ফাংশনের একটি constructor invocation।\n*/\n\nvar bike = new Bike(\"TVS\");\nconsole.log(bike.getBrand()); // TVS\n\n/*\nএখন, আপনি একটি function বা constructor হিসাবে Bike() invoke করতে পারেন।\nআপনি যদি new কীওয়ার্ডটি বাদ দেন তাহলে:\n*/\n\nvar discover = Bike(\"Discover\");\nconsole.log(discover.brand);\n\n// Uncaught TypeError: Cannot read properties of undefined (reading 'brand')\n\n/*\nএই সমস্যার সমাধান:\nBike() ফাংশন সবসময় কনস্ট্রাক্টর call করা হয়েছে তা নিশ্চিত করার জন্য, আপনি Bike() ফাংশনের শুরুতে একটি চেক যোগ করুন নিম্নরূপ:\n*/\n\nfunction Bike(brand) {\n if (!(this instanceof Bike)) {\n throw Error(\"Must use the new operator to call the Bike function\");\n }\n this.brand = brand;\n}\n" }, { "path": "basic/7. this-keyword/Examples/this_in_function_context_with_use_strict.js", "content": "/* Function context এ this with 'use strict' mode */\n\nfunction show() {\n \"use strict\";\n console.log(this === undefined); // true\n\n function display() {\n console.log(this === undefined); // true\n }\n display();\n}\n\nshow();\n" }, { "path": "basic/7. this-keyword/Examples/this_in_function_context_without_use_strict.js", "content": "/* Function context এ this without 'use strict' mode */\n\nfunction show() {\n console.log(this === window); // true\n}\n\nshow(); // true\nwindow.show(); //true\n" }, { "path": "basic/7. this-keyword/Examples/this_in_global_context.js", "content": "/* Global context এ this */\n\nconsole.log(this === window); // true\n\nthis.color = \"Green\";\n\nconsole.log(this.color); // 'Green'\nconsole.log(window.color); // 'Green'\n" }, { "path": "basic/7. this-keyword/Examples/this_in_method_invocation.js", "content": "/*\nthis সেই object কে উল্লেখ করে ফাংশনটি যার একটি property. \n\nঅন্য কথায়, this সেই object কে refer করে যা বর্তমানে ফাংশনটিকে কল করছে।\n\nধরুন আপনার counter নামক একটি object আছে। এই counter object এ next() নামে একটি method আছে।\n\nযখন আপনি next() method কল করেন, আপনি এই object টি অ্যাক্সেস করতে পারেন।\n*/\n\nconst counter = {\n count: 0,\n next: function () {\n return ++this.count;\n },\n};\n\ncounter.next(); // 1\ncounter.next(); // 2\ncounter.next(); // 3\n" }, { "path": "basic/7. this-keyword/Examples/this_in_method_invocation_with_bind.js", "content": "\"use strict\";\nlet bike = {\n brand: \"TVS\",\n getBrand: function () {\n return this.brand;\n },\n};\n\nconsole.log(bike.getBrand()); // TVS\n\n// নিচের comment এর ফলাফল undefined। কারণ globally এটি strict মোডে undefined এবং non-strict মোডে global object।\n\n/*\nlet brand = bike.getBrand;\n\nconsole.log(brand()); // undefined.\n*/\n\n// এই সমস্যা সমাধানের জন্য আমাদের বাইন্ড ব্যবহার করতে হবে\n\nlet brand1 = bike.getBrand.bind(bike);\nconsole.log(brand1()); // TVS\n\nlet bike2 = {\n brand: \"SINGER\",\n};\nlet brand2 = bike.getBrand.bind(bike2);\nconsole.log(brand2()); // SINGER\n\nlet bike3 = {\n brand: \"DISCOVER\",\n};\n\nlet brand3 = bike.getBrand.bind(bike3);\nconsole.log(brand3()); // DISCOVER\n" }, { "path": "basic/7. this-keyword/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/7. this-keyword/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/7. this-keyword/Practices/practice1.md", "content": "\nনীচের কোডের আউটপুট কি হবে? \n\n```js\n\nfunction Mathematician(id, name) {\n this.id = id;\n this.name = name;\n}\n\nlet muslimMtcn = Mathematician('101', 'Al-Khwarizmi');\nconsole.log(muslimMtcn.name);\n\n```\n\nউপরের কোডটিতে যদি কোন ভূল থাকে সেক্ষেত্রে ঠিকঠাক আউটপুট পেতে হলে কি করতে হবে?" }, { "path": "basic/7. this-keyword/README.md", "content": "আজকে আলোচনা করতে যাচ্ছি “this” কিওয়ার্ড নিয়ে। জাভাস্ক্রিপ্টে একটি মারাত্মক ভয়ের নাম হচ্ছে “this”। এটি খুবই গুরুত্বপূর্ণ একটা টার্মস যার সম্পর্কে পরিষ্কার ধারণা থাকা উচিত বলে আমি মনে করি। শুরুর দিকে এটা নিয়ে প্রায় সবাই একটু কনফিউশনে ভুগে। কারণ এটি এক এক সময় এক এক রকম আউটপুট দেয়। আমাদের বুঝতে হবে কেন এবং কখন কি আউটপুট দেয়। আমি চেষ্টা করবো ব্যাপারটাকে যতটা সম্ভব সহজভাবে লেখার জন্যে যাতে করে এই “this” নিয়ে আজকের পর থেকে কারোর কোন প্রকার কনফিউশন না থাকে এবং কারোর মাথার উপর দিয়ে না যায়।\n\nচলুন একটা উদাহরণ দিয়ে শুরু করা যাকঃ-\n\n```js\nfunction myFunc() {\n console.log(this);\n}\n\nmyFunc();\n```\n\nএকটু চিন্তা করুন তো এখানে myFunc() ফাংশনটিকে কে কল করতেছে। যদি এইটা ধরতে পারেন তাহলে myFunc() এর আউটপুট কি হবে সেইটাও বুঝতে পারবেন। একটু চিন্তা করুন সময় নিয়ে।\n\nআশা করি, চিন্তা করেছেন এবং ধরতেও পেরেছেন। যদি না পারেন তাহলে কোন সমস্যা নেই। একটা ব্যাপার সব সময় মাথায় রাখবেন যে “this” এর ভ্যালু কি হবে সেটা নির্ভর করে কোথায় এবং কিভাবে কল হচ্ছে তার উপর ভিত্তি করে। উপরের কোডে myFunc() কে কল করতেছে window অবজেক্ট। কারণ ব্রাউজারে সব কিছু বাই ডিফল্ট window অবজেক্টের আন্ডারে রান হয়। তার মানে হচ্ছে যে যার মাধ্যমে কল হবে “this” তাকে দেখাবে আউটপুট হিসাবে।\n\n```js\nwindow.myFunc();\n```\n\nযেহেতু myFunc() কে window কল করতেছে তাই myFunc() এর ভিতরে থাকা “this” - window এর সব ভ্যালুকে আউটপুট হিসাবে দেখাচ্ছে।\n\nআমরা না অনেক ভাল প্রোগ্রামার। তাই ‘use strict’; মোডে উপরের কোডটি আবার রান করুন এবং দেখুন কি হয়।\n\n\n**এইবার চলুন আরেকটি উদাহরণ দেখিঃ-**\n\n```js\nlet Person = {\n name: \"Shahan's Diary\",\n sayName: function() {\n console.log(this);\n }\n};\n\nPerson.sayName();\n```\n\nএইবার বলুন তো উপরের কোডটির আউটপুট কি হবে। যারা বলতে পারবেন তাদের জন্যে থাকবে আমার পক্ষ থেকে একটি চকলেট। যদি উপরের বলা কথাগুলা ভালো করে পড়ে থাকেন, বুঝতে কোন অসুবিধা হওয়ার কথা না উপরের কোডের আউটপুট কি হবে। শুধু একটা কথা ভালো করে মনে রাখবেন কোন ফাংশন কল করার সময় ফাংশনের নামের ডটের আগে যে অবজেক্ট নামটা থাকবে তার ভ্যালুই দেখাবে। হ্যাঁ, আমি যদিও অবজেক্টের ভিতরে থাকা ফাংশনকে ফাংশন বলতেছি শুধু বোঝার সুবিধার জন্যে। এটা ফাংশন হবে না, কারণ অবজেক্টের ভিতরে থাকা সব ফাংশনকে বলা হয় মেথড। উপরের কোডের আউটপুট হবে নিচের দেওয়া স্নিপেটের মত। \n\n```\n{name: \"Shahan's Diary\", sayName: f}\n```\n\nএখন দেখবো কনস্ট্রাক্টর ফাংশনে “this” নিয়ে কিভাবে কাজ করা যায়।\n\n```js\nlet Person = function(fName, lName) {\n this.fName = fName;\n this.lName = lName;\n this.sayInfo = function() {\n return console.log(\"Hi there, Welcome to \" + this.fName + \" \" + this.lName);\n }\n};\n\nlet person1 = new Person(\"Shahan's\", \"Diary\");\n\nperson1.sayInfo(); // Hi there, Welcome to Shahan's Diary\n```\n\n\nআশা করি, আপনাদের “this” এর বেসিক ধারণাটা এখন পরিষ্কার হয়েছে। এখন থেকে দেখলেই বুঝবেন যে “this” কি কাজ করছে। হ্যাঁ, এই লেখাটা পড়েই আপনি “this” এর মাস্টার হয়ে যাবেন না। এর আরেকটু অ্যাডভান্সড ব্যবহার রয়েছে। সেটা আপনাদের জন্যে রেখে দিলাম। একটু কষ্ট করে নিজ দায়িত্বে দেখে নিবেন। এরপরেও, যদি মাথার উপর দিয়ে যায় তাহলে কমেন্ট বক্সে কমেন্ট করে উড়াই দিবেন, আমি ধরে নিবো। হ্যাপি কোডিং...." }, { "path": "basic/8. event-capturing-and-bubbling/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/8. event-capturing-and-bubbling/Examples/example1.md", "content": "\nWe already know the basics of event capturing and bubbling. \nIn this example, we will dive a little deeper. \nThe third argument of 'addEventListener' function tell \nwhether the event will be in the capture phase or in the bubbling phase. \nBy default it is in bubbling phase (if we provide no parameter) \n\n```html\n\n\n\n\n \n \n \n Event Bubbling and Capturing\n \n \n\n\n
\n Grandparent\n
\n Parent\n
\n Child\n
\n
\n
\n \n\n\n\n```\n\nRun the code. now click on the child div. We can see that the output will be.\n\nOutput: \nParent clicked\nChild clicked\nGrandparent clicked\n\nWe can see that the event capturing of event listeners happened first \nand then the event bubbling happened.\nThis means the propagation of event listeners first goes from \noutside to inside and then from inside to outside in the DOM. \nAs 'parent' div is propagated, it prints to the console first,\nthen by follwing event capturing rules, 'child' div is clicked\nand 'grandparent' div is clicked.\n\nI hope things are clear now. We can play with this code as we want\nand see different output.\n" }, { "path": "basic/8. event-capturing-and-bubbling/Examples/example2.md", "content": "We can stop event capturing and bubbling if we want.\nWe can use a parameter \"e\" in the callback function of \naddEventListener function. It is an event object\nwhich has a function called stopPropagation() which helps\nto stop event capturing and bubbling.\n\n```html\n\n\n\n\n \n \n \n How to stop Event Capturing and Bubbling\n \n \n\n\n
\n Grandparent\n
\n Parent\n
\n Child\n
\n
\n
\n \n\n\n\n```\n\nOutput:\nChild clicked\nParent clicked\n\nIf we clicked on child div, the propagation is stopped \non parent div and does not move to grandparent div. \nHence, the event bubbling is prevented. \nWe can also stop capturing the same way." }, { "path": "basic/8. event-capturing-and-bubbling/Examples/example3.md", "content": "\nইফেক্ট বুঝতে হলে প্রথমে এই HTML ফাইলটি আপনার ব্রাউজারে ওপেন করে মাউসের রাইট বাটন ক্লিক করে Inspect এ ক্লিক করুন।\nঅতঃপর Console ট্যাবে ক্লিক করুন। এখন Event Bubbling ও Event Capturing কিভাবে হচ্ছে সেটা বুঝতে বক্সগুলোতে\nক্লিক করে দেখুন। \n\n```html\n\n\n\n\n \n \n \n Event Bubbling and Capturing\n\n \n \n\n\n \n

\n Event Bubbling\n
\n
\n
\n Click Me\n
\n
\n
\n

\n\n \n

\n Event Capturing\n
\n
\n
\n Click Me\n
\n
\n
\n

\n\n\n \n \n\n\n\n\n```\n\naddEventListener() ফাংশনের তৃতীয় argument হিসেবে আমরা যে true/false ভ্যালু দিয়েছি সেটা বাই ডিফল্ট false থাকে অর্থাৎ nested element ক্লিক করার ক্ষেত্রে সেটা বাই ডিফল্ট event bubbling করে থাকে। বিষয়টি যদি অন্যভাবে বলি তাহলে বলা যায় যে তৃতীয় আর্গুমেন্টে জিজ্ঞাসা করা থাকে এই event টি প্রথমে capture করা হবে নাকি হবে না।" }, { "path": "basic/8. event-capturing-and-bubbling/Examples/example4.md", "content": "\nইফেক্ট বুঝতে হলে প্রথমে এই HTML ফাইলটি আপনার ব্রাউজারে ওপেন করে মাউসের রাইট বাটন ক্লিক করে Inspect এ ক্লিক করুন।\nঅতঃপর Console ট্যাবে ক্লিক করুন। এখন Event Bubbling ও Event Capturing কিভাবে হচ্ছে সেটা বুঝতে বক্সগুলোতে\nক্লিক করে দেখুন। \n\n```html\n\n\n\n\n \n \n \n Event Bubbling and Capturing\n\n \n \n\n\n \n

\n Event Bubbling\n
\n
\n Click Me\n
\n
\n

\n\n \n

\n Event Capturing\n
\n
\n Click Me\n
\n
\n

\n\n\n \n \n\n\n\n\n```\n\nএই উদাহরণে আমরা তেমন কোন নতুন কাজ করি নাই। এই উদাহরণে আমরা শুধুমাত্র প্রোসেস দুটি কিভাবে হচ্ছে সেটার একটা ভিজুয়াল ইফেক্ট তৈরী করেছি।\n" }, { "path": "basic/8. event-capturing-and-bubbling/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/8. event-capturing-and-bubbling/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/8. event-capturing-and-bubbling/Practices/practice1.md", "content": "\nনীচের কোডটি কোন HTML ডকুমেন্ট হিসেবে সংরক্ষণ করুন এবং আপনার ব্রাউজারে ওপেন করুন। কোডটি ব্রাউজারে ওপেন করলে চারটি কালারের (লাল-সোনালী-সবুজ-আকাশি) বক্স দেখতে পাবেন। মাঝের Skyblue (আকাশি) কালারের বক্সে ক্লিক করলে ইভেন্টের সিরিয়াল কেমন হবে? \n\n```html\n\n\n\n\n \n \n \n Event Bubbling and Capturing\n\n \n \n\n\n
\n
\n
\n
\n Click Me\n
\n
\n
\n
\n\n\n \n \n\n\n \n\n```" }, { "path": "basic/8. event-capturing-and-bubbling/Practices/practice2.md", "content": "What will be the output we will get on the console if child div is clicked?\nWhy the output was like that?\n\n```html\n\n\n\n \n \n\n\n
\n Grandparent\n
\n Parent\n
\n Child\n
\n
\n
\n \n\n\n```" }, { "path": "basic/8. event-capturing-and-bubbling/README.md", "content": "### Event capturing and bubbling\n\nইভেন্ট bubbling এবং ক্যাপচারিং HTML DOM API-এ ইভেন্ট প্রচারের দুটি উপায়, যখন একটি event অন্য element এর ভিতরে একটি element এ ঘটে, এবং উভয় element সেই ইভেন্টের জন্য একটি হ্যান্ডেল নিবন্ধিত করেছে. ইভেন্ট propagation মোড নির্ধারণ করে কোন ক্রমে elements গুলি ইভেন্টটি গ্রহণ করে. bubbling এ, event টি প্রথমে অন্তরতম element দ্বারা বন্দী এবং পরিচালনা করা হয় এবং তারপরে বাইরের element গুলিতে প্রচার করা হয়. Capturing এ, event টি সর্বপ্রথম বাইরের element দ্বারা ধারণ করা হয় এবং ভিতরের element গুলিতে প্রচার করা হয়. আমরা ব্যবহার করতে পারি addEventListener(type, listener, useCapture) bubbling(ডিফল্ট) বা ক্যাপচারিং মোডে ইভেন্ট হ্যান্ডলারদের নিবন্ধন করতে. ক্যাপচারিং মডেল ব্যবহার করতে তৃতীয় argument টিকে true হিসাবে পাস করুন.\n\nউদাহরণঃ\n```html\n
\n \n
\n```\nউপরের কাঠামোতে, অনুমান করুন যে button element টিতে একটি ক্লিক ইভেন্ট ঘটেছে।\nক্যাপচারিং মডেলে, ইভেন্টটি প্রথমে ডিভ দ্বারা পরিচালনা করা হবে, তারপর টার্গেট এলিমেন্ট button এ শেষ পর্যন্ত পরিচালনা করা হবে.\nbubbling মডেলে, বিপরীত ঘটবে: ইভেন্টটি প্রথমে button দ্বারা পরিচালনা করা হবে, তারপরে ডিভ element দ্বারা.\n\n#### Event Capturing\nইভেন্ট ক্যাপচারিং-এ, একটি ইভেন্ট সবচেয়ে বাইরের element থেকে target এ চলে যায়. ইভেন্ট bubbling করার আগে ইভেন্ট ক্যাপচারিং করা হয় কিন্তু ক্যাপচারিং খুব কমই ব্যবহার করা হয় কারণ ইভেন্ট bubbling ইভেন্ট ফ্লো পরিচালনা করার জন্য যথেষ্ট।\n\nইভেন্ট ক্যাপচারিং এর কাজ বোঝার জন্য একটি উদাহরণ কোড দেখি:\n```html\n \n
\n \n
\n \n \n \n```\n**Output:**\n\n![image](https://user-images.githubusercontent.com/712313/142607809-7e76f19f-021f-46c1-a2b8-2d78098b3321.png)\n\n - HTML অংশে, আমরা একটি div id ধারণ করে id = p1 তৈরি করেছি। div-এর ভিতরে, আমরা নেস্ট করেছি এবং id = c1 সহ একটি button তৈরি করেছি।\n - JS কোডে, প্রাথমিকভাবে, আমরা html elements গুলি assign করেছি, অর্থাৎ, p1 id, querySelector () পদ্ধতি ব্যবহার করে একটি variable parent এর কাছে \nএবং আমরা একই কাজ করেছি - c1 আইডি দিয়ে যেখানে আমরা এটি একটি child variable assign করেছি.\n - তারপরে আমরা একটি ক্লিক ইভেন্ট ব্যবহার করেছি এবং এটি p1 div এবং c1 button উভয়ের সাথে সংযুক্ত করেছি. কনসোলে উপযুক্ত message প্রিন্ট করার জন্য একটি ফাংশনও রয়েছে. এর মানে যদি চাইল্ড ইভেন্টটি প্রথমে invoke হয়, তারপর এটি প্রথমে কনসোলে \"Child is invoked\" message টি প্রিন্ট করবে, এবং যদি প্যারেন্ট ইভেন্ট হ্যান্ডলারকে প্রথমে invoke হয়, এটি প্রথমে কনসোলে \"Parent is invoked\" message দেবে।\n - এর পরে, আমরা প্যারেন্ট div এ ইভেন্ট ক্যাপচারিং সক্ষম করার জন্য addEventListner () এর তৃতীয় আর্গুমেন্ট যোগ করেছি।\n - যখন আমরা button এ ক্লিক করি, এটি প্রথমে ফাংশনটি কার্যকর করে, যা প্যারেন্ট ডিভ-এ সংযুক্ত থাকে।\n - এর পরে, button টির অনক্লিক () ফাংশন run করে এবং এটা event ক্যাপচারের কারণে. ইভেন্ট ক্যাপচারিংয়ের কারণে, মূল event এর event টি প্রথমে কার্যকর হয়, এব তারপর target element এর event কার্যকর করা হয়.\n\nসুতরাং, যখন আমরা button এ ক্লিক করি, ক্লিক ইভেন্ট নিম্নলিখিত sequence এ সঞ্চালিত হয়, আপনি নীচের ফ্লোচার্ট দেখতে পারেন:\n\n![image](https://user-images.githubusercontent.com/712313/142607966-a0227a6c-f5aa-4077-a694-6874fd34fe5c.png)\n\n#### Evnet Bubbling:\nইভেন্ট bubbling এর কাজের ধারণাটি বোঝার জন্য আসুন নীচের উদাহরণটি দেখি:\n```html\n \n
\n \n
\n \n \n\n``` \n**Output:**\n\n![image](https://user-images.githubusercontent.com/712313/142606233-d0f93544-18dc-49e1-83e5-4d636f61d46e.png)\n\n- আমরা div id = p1 সহ একটি div ট্যাগ ব্যবহার করেছি এবং div-এর মধ্যে আমরা একটি button নেস্ট করেছি যার id = c1 আছে।\n- এখনে আমরা querySelector() ফাংশন ব্যবহার করে html element গুলিকে (p1 এবং c1) যথাক্রমে parent এবং child নামক দুটি ভেরিয়েবলে assign করেছি।\n- এর পরে, আমরা div ও button উভয়ের জন্য একটি করে ক্লিক ইভেন্ট তৈরি করেছি এবং কলব্যাক ফাংশন হিসেবে দুটি ফাংশন তৈরি করেছি যা আমাদের parent এবং child execution এর order জানতে সাহায্য করবে। এর অর্থ হল যদি চাইল্ড ইভেন্টটি প্রথমে কল হয়, \"Child is invoked\" লেখাটি ব্রাউজারের console -এ প্রিন্ট হবে অন্যথায় \"Parent is invoked\" প্রিন্ট হবে।\n- এখন button টি ক্লিক করা হলে এটি প্রথমে \"Child is invoked\" প্রিন্ট করবে এবং পরে \"Parent is invoked\" প্রিন্ট করবে, অর্থাৎ প্রথমে button এর ইভেন্ট হ্যান্ডলার কাজ করবে তারপর div এর ইভেন্ট হ্যান্ডলারটি কাজ করবে।\n\nইভেন্ট bubbling এর কারণে এই ধরনের sequence টি ঘটেছে আর এভাবেই event bubbling সঞ্চালিত হয়। এর মানে ব্যবহারকারী যখন button এ ক্লিক করেন, ক্লিক ইভেন্ট এই ক্রমে নীচে থেকে উপরে প্রবাহিত হয়। নিচের ফ্লো চার্টের সাহায্যে আমরা ইভেন্টের প্রবাহ বুঝতে পারি:\n\n![image](https://user-images.githubusercontent.com/712313/142606596-d3f2f583-6c89-41d7-b51a-17896f57a89e.png)\n\n\n\nএকটি ইভেন্টের সম্পূর্ণ প্রবাহ কিভাবে সম্পাদন হয় নীচের diagram টি দ্বারা সেটি দেখানো হলো:\n\n![image](https://user-images.githubusercontent.com/712313/142607997-8b6caa69-3d3d-446c-a223-724218ff532e.png)\n" }, { "path": "basic/9. event-delegation-and-propagation/Examples/README.md", "content": "### সকল উদাহরন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/9. event-delegation-and-propagation/Examples/example1.md", "content": "Event delegation takes advantage of event propagation. \nIt allows the event listener to be set on a parent element, \nthus avoiding adding event listeners to all the elements.\n\nThe event listener is set on a parent element which listens for click events.\nIf parent element is clicked, the callback will compare \nevent.target (element which was clicked) against a common property.\nThis will be clear if we see the example below:\n\n```html\n\n\n Event Delegation and Propagation\n \n \n\n\n
\n
\n \n
\n
\n \n
\n
\n \n\n\n```\n\nWhen a button or element is clicked, \nthe listener of the parent element catches the bubbling event.\n\nIf we click on Button 1, then the output will be:\nbutton 1 was clicked\nor if we click on the 'box1' div, output will be:\nBox 1 was clicked\n\nHere, using event delegation we dont need to add a \nclick listener to every one of the elements like we saw \nin the previous topic. We just need to add a event listener\nto the parent div and by using event bubbling formula, we can access\nthe clicked child element by using 'e.target'" }, { "path": "basic/9. event-delegation-and-propagation/Examples/example2.md", "content": "Another classic example of event delegation would be \nthis example below, which we might use regularly. \n\nSuppose we have a div on which we have many input boxes. \nWe want to convert specific input values to uppercase. -->\n\n```html\n\n\n Event Delegation & Propagation\n\n\n
\n \n \n \n \n
\n\n \n\n \n\n\n```" }, { "path": "basic/9. event-delegation-and-propagation/Examples/example3.md", "content": "ইফেক্ট বুঝতে হলে প্রথমে এই HTML ফাইলটি আপনার ব্রাউজারে ওপেন করে মাউসের রাইট বাটন ক্লিক করে Inspect এ ক্লিক করুন।\nঅতঃপর Console ট্যাবে ক্লিক করুন। এখন Event Bubbling ও Event Capturing কিভাবে হচ্ছে সেটা বুঝতে বক্সগুলোতে\nক্লিক করে দেখুন। \n\nমনেকরি আমাদের কাছে নীচের কোড অনুযায়ী একটি HTML ফাইল আছে।\n\n```html\n\n\n\n \n \n \n Event Delegation and Propagation\n\n \n \n\n\n

Event Delegation Example

\n
\n
\n \n
\n \n \n
\n\n\n \n \n\n\n \n```\nএখন আমরা কোন বাটনের সাথে ক্লিক ইভেন্ট যুক্ত না করে সেন্ট্রালি তাদের কন্টেইনার 'btn-container' এর সাথে ইভেন্টটি যুক্ত করবো। একই সাথে কোন element বা button এ ক্লিক হচ্ছে সেটা দেখার জন্য আমরা উপরের কোডের জাভাস্ক্রিপ্টের ভিতরে নীচের কোড যুক্ত করবো।\n\n```js\nbtnConatiner.addEventListener('click', (e) => {\n console.log(e.target);\n})\n```\n\nএখন আমরা 'btn-container' এর ভিতরে কোথায় ক্লিক করছি সেটা ব্রাউজারের console ট্যাবে খুব সুন্দর করে দেখতে পাবো। এখন আমরা চাইলে আমাদের ইচ্ছা মতো এটাকে কাজে লাগাতে পারি। এখানে আমরা বাটনের লেখা অনুযায়ী কাজ করার জন্য ইভেন্ট লিসেনারকে নীচের কোডের মতো করে লিখিঃ\n\n```js\nbtnConatiner.addEventListener('click', (e) => {\n console.log(e.target);\n\n if(e.target.id === 'green') {\n e.target.classList.add('btn', 'green');\n }\n else if(e.target.id === 'blue') {\n e.target.classList.add('btn', 'blue');\n }\n else if(e.target.id === 'purple') {\n e.target.classList.add('btn', 'purple');\n }\n})\n```\n\nএখন বাটনগুলোতে ক্লিক করে দেখো। আসলে 'btn-container' কিভাবে এই ক্লিক ইভেন্ট পাচ্ছে সেটা আগেই আমরা জেনেছি [event-capturing-and-bubbling](https://github.com/vivasoft-ltd/javascript-bootcamp/tree/main/basic/8.%20event-capturing-and-bubbling) পার্ট থেকে। এই ক্লিক ইভেন্টটি কিভাবে propagate হচ্ছে সেটা দেখতে চাইলে নীচের কোডের মতো করে ইভেন্ট লিসেনার যুক্ত করুন। \n\n```js\nbtnConatiner.addEventListener('click', (e) => {\n console.log(e.path);\n})\n```\n\nএখন আশাকরি ইভেন্ট bubbling, propagation এবং delegation নিয়ে আর কোন সংশয় থাকবে না।\nহ্যাপি কোডিং ;)" }, { "path": "basic/9. event-delegation-and-propagation/Interview Questions/README.md", "content": "### সকল ইন্টারভিউ এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/9. event-delegation-and-propagation/Practices/README.md", "content": "### সকল প্রাকটিস এর প্রশ্ন এই ফোল্ডারে দেখা যাবে। \n" }, { "path": "basic/9. event-delegation-and-propagation/Practices/practice1.md", "content": "\nHow can we use only one addEventListener in this code to access any element?\nUse Event Delegation to solve this.\n\n```html\n\n\n Event Delegation and Propagation\n \n \n\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n\n\n```" }, { "path": "basic/9. event-delegation-and-propagation/README.md", "content": "### Event delegation and propagation\n\nইভেন্ট delegation ইভেন্ট propagation পদ্ধতি ব্যবহার করে। ইভেন্ট delegation কীভাবে কাজ করে তা বোঝার জন্য, আমাদেরকে প্রথমে ইভেন্ট propagation বুঝতে হবে।\n\n\n### Event propagation\nআপনি যখন নিম্নলিখিত HTML এর button টি ক্লিক করেনঃ\n\n```html\n\n \n
\n \n
\n \n\n```\n\nএকটি ক্লিক ইভেন্ট কতগুলি element এ ট্রিগার হয়? button টি নিজেই একটি ক্লিক ইভেন্ট পায়। কিন্তু এছাড়াও ঐ button এর সকল ancestors এবং এমনকি document ও window অবজেক্ট ক্লিক ইভেন্ট পায়।\n\nএকটি ক্লিক ইভেন্ট 3টি পর্যায়ে প্রচারিত হয়:\n1. Capture phase — window, document এবং root element থেকে শুরু করে ইভেন্ট টার্গেট এলিমেন্টের ancestor মধ্য দিয়ে নিচে নেমে যায়।\n2. Target phase — ব্যবহারকারী যে element টিতে ক্লিক করেছেন তাতে ইভেন্টটি ট্রিগার হয়।\n3. Bubble phase — অবশেষে, root element, document এবং window পর্যন্ত target element এর ancestor এর মাধ্যমে event টি bubble up হয়ে যায়।\n\n![image](https://user-images.githubusercontent.com/712313/143814244-4e801a09-f50f-4d87-8503-2686d5f0f1db.png)\n\nনিম্নলিখিত ইভেন্ট হ্যান্ডলার element এ সংঘটিত ক্যাপচার পর্বে ক্লিক ইভেন্টের জন্য শোনে\n\n ```javascript\n document.body.addEventListener('click', () => {\n console.log('Body click event in capture phase');\n }, true);\n ```\n \nনিচের method এর তৃতীয় আর্গুমেন্ট হল `captureOrOptions` আপনাকে বিভিন্ন পর্যায় থেকে ইভেন্টগুলি ধরতে দেয়:\n\n```javascript\nelement.addEventListener(eventType, handler, [captureOrOptions]);\n```\n \n- যদি captureOrOptions argument টি missing, false বা { capture: false } হয়, তাহলে listener target এবং bubble phase এর event গুলি ক্যাপচার করে\n- যদি argument টি true হয় বা { capture: true } হয়, তাহলে listener ক্যাপচার পর্বের ঘটনাগুলি শোনে।\n \n তাহলে, কিভাবে ইভেন্ট propagation একাধিক button এর event ক্যাপচার করতে সাহায্য করে?\n অ্যালগরিদম টি সহজ: ইভেন্ট লিসেনারকে button এর parent এর সাথে সংযুক্ত করুন, এবং একটি button ক্লিক করা হলে bubble ইভেন্ট ধরতে হবে। ঠিক এভাবেই ইভেন্ট delegation কাজ করে।\n \n \n### Event delegation\nআসুন একাধিক button এ ক্লিকগুলি ধরতে ইভেন্ট delegation ব্যবহার করি:\n \n ```html\n
\n \n \n \n \n
\n \n ```\n\n\n \nইভেন্ট delegation mechanism টি অনেক সহজ, ইভেন্ট listener দের সরাসরি button গুলিতে সংযুক্ত করার পরিবর্তে, আপনি parent element `
` -এ ইভেন্ট listen delegate করেন। যখন একটি ক্লিক করা হয়, তখন মূল element টির listener (parent element টির listener) bubble ইভেন্টটি ধরে।\n \nইভেন্ট delegation ব্যবহার করার জন্য 3টি পদক্ষেপ প্রয়োজন:\n \n**Step 1. ইভেন্টগুলি ধরার জন্য element গুলির parent নির্ধারণ করুন**
\n(উপরের উদাহরণে, `
` হল button গুলির parent element)\n \n**Step 2. ইভেন্ট listener কে মূল element এর সাথে সংযুক্ত করুন**\n`document.getElementById('buttons').addEventListener('click', handler)`\nইভেন্টটি লিসেনারকে button এর parent element এর সাথে সংযুক্ত করে। এই listener button ক্লিকে প্রতিক্রিয়া দেখায় কারণ button ক্লিক ইভেন্ট ancestor এর মাধ্যমে bubble করে event propagation এর কারণে।\n\n**Step 3. target element নির্বাচন করতে event.target ব্যবহার করুন**
\nযখন একটি button ক্লিক করা হয়, হ্যান্ডলার ফাংশন একটি event object argument এর সঙ্গে invoke হয়, event.target.property হল সেই element যার উপর ইভেন্টটি পাঠানো হয়েছে, যা উদাহরণে একটি button \n\n```javascript\n .addEventListener('click', event => {\n if (event.target.className === 'buttonClass') {\n console.log('Click!');\n }\n });\n```\n\n`event.currentTarget` সেই element টিকে নির্দেশ করে যেখানে ইভেন্ট listener সরাসরি সংযুক্ত থাকে। উদাহরণে, `event.currentTarget` হল `
`। \n" }, { "path": "basic/README.md", "content": "## Table of contents\n\n1. [Execution Context (এক্সিকিউশন কনটেক্সট)](1.%20execution-context)\n2. [Scope (স্কোপ)](2.%20scope)\n3. [Hoisting (হইস্টিং)](3.%20hoisting)\n4. [Closure (ক্লোজার)](4.%20closure)\n5. [Call by value and call by reference (কল বাই ভ্যালু এবং কল বাই রেফারেন্স)](5.%20call-by-value-and-call-by-reference)\n6. [Callback & Higher-Order functions (কলব্যাক এবং হাইয়ার অর্ডার ফাংশন)](6.%20callback-and-higher-order-functions)\n7. [This Keyword (দিস কিওয়ার্ড)](7.%20this-keyword)\n8. [Event capturing and bubbling (ইভেন্ট ক্যাপচারিং এবং বাবলিং)](8.%20event-capturing-and-bubbling)\n9. [Event delegation and propagation (ইভেন্ট ডেলিগেশন এবং প্রোপাগেশন)](9.%20event-delegation-and-propagation)\n10. [Browser Storage and Caching (ব্রাউজার স্টোরেজ এবং ক্যাশিং)](10.%20browser-storage-and-caching)\n11. [Debouncing and Throttling (ডিবাউন্সিং এবং থ্রোটলিং)](11.%20debouncing-and-throttling)\n12. [Use Strict in JavaScript (ইউস স্ট্রিক্ট ইন জাভাস্ক্রিপ্ট)](12.%20use-strict)\n13. [IIFE in JavaScript (আইআইএফই ইন জাভাস্ক্রিপ্ট)](13.%20iife-in-javascript)\n" }, { "path": "projects/README.md", "content": "# VivaSoft JavaScript Bootcamp Projects\n\nThis repository contains all the projects for VivaSoft Javascript Bootcamp.\n\n| # | Project | Live Demo |\n| :-: | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- |\n| 01 | [Expanding Cards](https://github.com/vivasoft-ltd/javascript-bootcamp/tree/develop/projects/expanding-cards) | [Live Demo](https://blackbox47.github.io/expanding-cards/) |\n| 02 | [Big Bang](https://github.com/vivasoft-ltd/javascript-bootcamp/tree/develop/projects/big-bang) | [Live Demo](https://blackbox47.github.io/big-bang/) |\n| 03 | [Snake Eye](https://github.com/vivasoft-ltd/javascript-bootcamp/tree/develop/projects/snake-eye) | [Live Demo](https://blackbox47.github.io/snake-eye/) |\n| 03 | [Blurry Loading](https://github.com/vivasoft-ltd/javascript-bootcamp/tree/develop/projects/blurry-loading) | [Live Demo](https://blackbox47.github.io/blurry-loading/) |\n" }, { "path": "projects/big-bang/index.html", "content": "\n\n\n Big Bang\n\n\n\n\n\n
\n
\n

0

\n

Points

\n \n
\n
\n\n\n
\n Score: \n 0\n
\n \n\n \n\n\n" }, { "path": "projects/big-bang/index.js", "content": "const canvas = document.querySelector(\"canvas\");\n\nconst c = canvas.getContext(\"2d\");\n\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\nconst x = canvas.width / 2;\nconst y = canvas.height / 2;\n\nlet modalEL = document.getElementById(\"modalEl\");\nlet finalScore = document.getElementById(\"finalScore\");\nlet scoreId = document.getElementById(\"scoreId\");\nlet interval;\nlet score = 0;\nlet animationId;\nconst projectiles = [];\nconst enemies = [];\n\nclass Player {\n constructor(x, y, radius, color) {\n this.x = x;\n this.y = y;\n this.radius = radius;\n this.color = color;\n }\n draw() {\n c.beginPath();\n c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);\n c.fillStyle = this.color;\n c.fill();\n }\n}\n\nclass Projectile {\n constructor(x, y, radius, color, velocity) {\n this.x = x;\n this.y = y;\n this.radius = radius;\n this.color = color;\n this.velocity = velocity;\n }\n draw() {\n c.beginPath();\n c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);\n c.fillStyle = this.color;\n c.fill();\n }\n update() {\n this.draw();\n this.x = this.x + this.velocity.x;\n this.y = this.y + this.velocity.y;\n }\n}\n\nclass Enemy {\n constructor(x, y, radius, color, velocity) {\n this.x = x;\n this.y = y;\n this.radius = radius;\n this.color = color;\n this.velocity = velocity;\n }\n draw() {\n c.beginPath();\n c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);\n c.fillStyle = this.color;\n c.fill();\n }\n update() {\n this.draw();\n this.x = this.x + this.velocity.x;\n this.y = this.y + this.velocity.y;\n }\n}\n\nlet player = new Player(x, y, 10, \"white\");\n\nfunction drawPlayer() {\n player = new Player(x, y, 10, \"white\");\n player.draw();\n}\n\nfunction spawnEnemy() {\n if (!interval) {\n interval = setInterval(() => {\n const radius = Math.random() * (30 - 4) + 4;\n let x, y;\n if (Math.random() < 0.5) {\n x = Math.random() < 0.5 ? 0 - radius : canvas.width + radius;\n y = Math.random() * canvas.height;\n } else {\n x = Math.random() * canvas.width;\n y = Math.random() < 0.5 ? 0 - radius : canvas.height + radius;\n }\n\n const color = `hsl(${Math.random() * 360}, 50%, 50%)`;\n\n const angle = Math.atan2(canvas.height / 2 - y, canvas.width / 2 - x);\n const velocity = {\n x: Math.cos(angle),\n y: Math.sin(angle),\n };\n enemies.push(new Enemy(x, y, radius, color, velocity));\n }, 1000);\n }\n}\n\nfunction animate() {\n animationId = requestAnimationFrame(animate);\n c.fillStyle = \"rgba(0,0,0,0.1)\";\n c.fillRect(0, 0, canvas.width, canvas.height);\n player.draw();\n\n projectiles.forEach((projectile, index) => {\n projectile.update();\n if (\n projectile.x + projectile.radius < 0 ||\n projectile.x - projectile.radius > canvas.width ||\n projectile.y + projectile.radius < 0 ||\n projectile.y - projectile.radius > canvas.height\n ) {\n projectiles.splice(index, 1);\n }\n });\n\n enemies.forEach((enemy, index) => {\n enemy.update();\n // End Game\n const dist = Math.hypot(player.x - enemy.x, player.y - enemy.y);\n if (dist - player.radius - enemy.radius < 1) {\n cancelAnimationFrame(animationId);\n modalEL.style.display = \"block\";\n projectiles.splice(0, projectiles.length);\n enemies.splice(0, enemies.length);\n\n document.getElementById(\"scoreId\").innerHTML = score;\n document.getElementById(\"finalScore\").innerHTML = score;\n score = 0;\n clearInterval(interval);\n interval = null;\n }\n\n projectiles.forEach((projectile, projectileIndex) => {\n // Detect contact between projectile and enemy\n const dist = Math.hypot(projectile.x - enemy.x, projectile.y - enemy.y);\n\n if (dist - projectile.radius - enemy.radius < 1) {\n if (enemy.radius - 10 > 10) {\n enemy.radius -= 10;\n score += 5;\n document.getElementById(\"scoreId\").innerHTML = score;\n setTimeout(() => {\n projectiles.splice(projectileIndex, 1);\n }, 0);\n } else {\n setTimeout(() => {\n enemies.splice(index, 1);\n projectiles.splice(projectileIndex, 1);\n\n score += 10;\n document.getElementById(\"scoreId\").innerHTML = score;\n }, 0);\n }\n }\n });\n });\n}\n\nwindow.addEventListener(\"click\", (event) => {\n const angle = Math.atan2(\n event.clientY - canvas.height / 2,\n event.clientX - canvas.width / 2\n );\n const velocity = {\n x: Math.cos(angle) * 5,\n y: Math.sin(angle) * 5,\n };\n projectiles.push(\n new Projectile(canvas.width / 2, canvas.height / 2, 5, \"white\", velocity)\n );\n});\n\nfunction startGame() {\n modalEL.style.display = \"none\";\n document.getElementById(\"scoreId\").innerHTML = score;\n animate();\n spawnEnemy();\n}\n" }, { "path": "projects/blurry-loading/index.html", "content": "\n\n \n \n \n \n Blurry Loading\n \n \n
\n
0%
\n\n \n \n\n" }, { "path": "projects/blurry-loading/script.js", "content": "const loadText = document.querySelector('.loading-text')\nconst bg = document.querySelector('.bg')\n\nlet load = 0\n\nlet int = setInterval(blurring, 30)\n\nfunction blurring() {\n load++\n\n if (load > 99) {\n clearInterval(int)\n }\n\n loadText.innerText = `${load}%`\n loadText.style.opacity = scale(load, 0, 100, 1, 0)\n bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`\n}\n\nconst scale = (num, in_min, in_max, out_min, out_max) => {\n return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}" }, { "path": "projects/blurry-loading/style.css", "content": "@import url('https://fonts.googleapis.com/css?family=Ubuntu');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Ubuntu', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.bg {\n background: url('https://images.unsplash.com/photo-1657839368752-00f5f6dd8592?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80')\n no-repeat center center/cover;\n position: absolute;\n top: -30px;\n left: -30px;\n width: calc(100vw + 60px);\n height: calc(100vh + 60px);\n z-index: -1;\n filter: blur(0px);\n}\n\n.loading-text {\n font-size: 50px;\n color: #fff;\n}" }, { "path": "projects/expanding-cards/index.html", "content": "\n\n \n \n \n \n Expanding Cards\n \n \n
\n
\n

Explore The World

\n
\n
\n

Wild Forest

\n
\n
\n

Sunny Beach

\n
\n
\n

City on Winter

\n
\n
\n

Mountains - Clouds

\n
\n\n
\n\n \n \n" }, { "path": "projects/expanding-cards/script.js", "content": "const panels = document.querySelectorAll('.panel')\n\npanels.forEach(panel => {\n panel.addEventListener('click', () => {\n removeActiveClasses()\n panel.classList.add('active')\n })\n})\n\nfunction removeActiveClasses() {\n panels.forEach(panel => {\n panel.classList.remove('active')\n })\n}" }, { "path": "projects/expanding-cards/style.css", "content": "@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Muli', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.container {\n display: flex;\n width: 90vw;\n}\n\n.panel {\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n height: 80vh;\n border-radius: 50px;\n color: #fff;\n cursor: pointer;\n flex: 0.5;\n margin: 10px;\n position: relative;\n -webkit-transition: all 700ms ease-in;\n}\n\n.panel h3 {\n font-size: 24px;\n position: absolute;\n bottom: 20px;\n left: 20px;\n margin: 0;\n opacity: 0;\n}\n\n.panel.active {\n flex: 5;\n}\n\n.panel.active h3 {\n opacity: 1;\n transition: opacity 0.3s ease-in 0.4s;\n}\n\n@media (max-width: 480px) {\n .container {\n width: 100vw;\n }\n\n .panel:nth-of-type(4),\n .panel:nth-of-type(5) {\n display: none;\n }\n}" }, { "path": "projects/modal/app.js", "content": "(function() {\n function Modal() {}\n\n Modal.prototype.open = function() {\n const modal = document.querySelector(\".modal\");\n console.log(\"hello\")\n modal.classList.add(\"modal--active\")\n }\n\n Modal.prototype.close = function() {\n const modal = document.querySelector(\".modal\");\n modal.classList.remove(\"modal--active\")\n }\n \n document.addEventListener(\"DOMContentLoaded\", function() {\n const modal = new Modal();\n const openModal = document.querySelector(\"#openModal\");\n const closeModal = document.querySelectorAll(\".modal__close\");\n \n openModal.addEventListener(\"click\", function() {\n modal.open()\n })\n\n closeModal.forEach(function(btnClose) {\n btnClose.addEventListener(\"click\", function() {\n modal.close()\n })\n })\n\n \n \n });\n})()\n\n" }, { "path": "projects/modal/index.html", "content": "\n\n\n \n \n \n \n \n \n Modal || Vanilla JavaScript\n \n\n\n \n
\n
\n
\n

Modal Title

\n X\n
\n
\n

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis ratione veritatis doloribus laudantium consequatur accusamus.\n

\n

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam iusto impedit vel obcaecati officia modi sit laudantium adipisci fugit dolorum animi natus, doloribus, dolorem assumenda sunt a dicta fuga temporibus! Ipsam inventore magni eligendi fugit distinctio quaerat voluptas? Tempora, neque!

\n
\n
\n \n \n
\n
\n
\n
\n\n \n\n" }, { "path": "projects/modal/style.css", "content": "*, *::after, *::before {\n -webkit-box-sizing: inherit;\n box-sizing: inherit;\n}\n\nbody {\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n font-family: 'Poppins', sans-serif;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.4;\n\n display: -webkit-box;\n\n display: -ms-flexbox;\n\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 100vh;\n}\n\nh1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n margin-bottom: 25px;\n}\n\np {\n margin-top: 0;\n margin-bottom: 15px;\n}\n\np:last-child {\n margin-bottom: 0;\n}\n\n.btn {\n padding: 15px 30px;\n border: none;\n cursor: pointer;\n border-radius: 4px;\n -webkit-transition: all .3s ease-in-out 0s;\n -o-transition: all .3s ease-in-out 0s;\n transition: all .3s ease-in-out 0s;\n}\n.btn--primary {\n background-color: #2D31FA;\n color: #fff;\n}\n.btn--primary:hover {\n background-color: #5D8BF4;\n}\n.btn--danger {\n background-color: #EB4747;\n color: #fff;\n}\n.btn--danger:hover {\n background-color: #FF8B8B;\n}\n.modal__footer--right .btn--primary {\n margin-right: 15px;\n}\n\n\n@-webkit-keyframes scale-up-center {\n 0% {\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n@keyframes scale-up-center {\n 0% {\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n\n.modal {\n position: fixed;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 30px;\n height: 100%;\n width: 100%;\n \n visibility: hidden;\n opacity: 0;\n}\n.modal.modal--active {\n visibility: visible;\n opacity: 1;\n}\n.modal.modal.modal--active .modal__container {\n -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;\n animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;\n}\n.modal--small .modal__container {\n width: 600px;\n}\n\n.modal--full .modal__container {\n height: 100%;\n width: 100%;\n}\n\n.modal__container {\n position: relative;\n z-index: 1;\n background-color: #fff;\n border-radius: 4px;\n width: 1200px;\n}\n.modal__header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n border-bottom: 1px solid #ddd;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 30px;\n}\n.modal__header--left {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: reverse;\n -ms-flex-direction: row-reverse;\n flex-direction: row-reverse;\n}\n.modal__title {\n margin-bottom: 0;\n font-weight: 700;\n}\n.modal__close--icon {\n cursor: pointer;\n padding: 10px 15px;\n font-size: 18px;\n line-height: 1;\n background-color: transparent;\n border-radius: 4px;\n -webkit-transition: all .3s ease-in-out 0s;\n -o-transition: all .3s ease-in-out 0s;\n transition: all .3s ease-in-out 0s;\n}\n.modal__close--icon:hover {\n background-color: rgb(190, 46, 46);\n color: #fff;\n}\n.modal__body {\n padding: 30px;\n}\n.modal__footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n border-top: 1px solid #ddd;\n padding: 30px;\n}\n.modal__footer--right {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.modal__footer--between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.modal__backdrop {\n position: absolute;\n left: 0;\n top: 0;\n background-color: rgba(0, 0, 0, .1);\n height: 100vh;\n width: 100vw;\n}" }, { "path": "projects/snake-eye/index.html", "content": "\n\n \n \n \n \n Snake Eye\n \n\n \n \n\n \n \n\n" }, { "path": "projects/snake-eye/index.js", "content": "const canvas = document.querySelector(\"canvas\");\ncanvas.width = innerWidth;\ncanvas.height = innerHeight;\n\nlet canvasW, canvasH;\ncanvasW = canvas.width;\ncanvasH = canvas.height;\n\nlet eyes = [],\n delta,\n numberOfEyes = 300;\nconst ctx = canvas.getContext(\"2d\");\n\nconsole.log(canvas);\n\nconst mouse = {\n x: undefined,\n y: undefined,\n};\n\nwindow.addEventListener(\"mousemove\", function (e) {\n mouse.x = e.x;\n mouse.y = e.y;\n});\n\nclass Eye {\n constructor(eye) {\n this.x = eye.x;\n this.y = eye.y;\n this.radius = eye.radius;\n }\n draw() {\n ///// Eye\n ctx.fillStyle = \"red\";\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);\n ctx.fill();\n ctx.closePath();\n\n ///// Get Angle between mouse and (Irish and Pupil)\n let dx = mouse.x - this.x;\n let dy = mouse.y - this.y;\n delta = Math.atan2(dy, dx);\n\n //// Irish\n let irish_x = this.x + Math.cos(delta) * (this.radius / 10);\n let irish_y = this.y + Math.sin(delta) * (this.radius / 10);\n let irish_radius = this.radius / 1.2;\n ctx.beginPath();\n ctx.fillStyle = \"white\";\n ctx.arc(irish_x, irish_y, irish_radius, 0, 2 * Math.PI, true);\n ctx.fill();\n ctx.closePath();\n\n //// Pupil\n let pupil_x = this.x + Math.cos(delta) * (this.radius / 2);\n let pupil_y = this.y + Math.sin(delta) * (this.radius / 2);\n let pupil_radius = this.radius / 2.5;\n ctx.beginPath();\n ctx.fillStyle = \"black\";\n ctx.arc(pupil_x, pupil_y, pupil_radius, 0, 2 * Math.PI);\n ctx.fill();\n ctx.closePath();\n\n //// pupil reflection\n ctx.beginPath();\n ctx.arc(\n pupil_x - pupil_radius / 3,\n pupil_y - pupil_radius / 3,\n pupil_radius / 2,\n 0,\n 2 * Math.PI\n );\n ctx.fillStyle = \"rgba(255,255,255,0.1)\";\n ctx.fill();\n ctx.closePath();\n\n //// Mouse\n ctx.beginPath();\n ctx.fillStyle = \"gold\";\n ctx.arc(mouse.x, mouse.y, 25, 0, 2 * Math.PI);\n ctx.fill();\n ctx.closePath();\n }\n}\n\nfunction init() {\n eyes = [];\n for (let ind = 0; ; ind++) {\n if (eyes.length >= numberOfEyes) break;\n let eye = {\n radius: Math.floor(Math.random() * 100 + 5),\n x: Math.random() * canvasW,\n y: Math.random() * canvasH,\n };\n let flag = 0;\n for (let i = 0; i < eyes.length; i++) {\n let previousEye = eyes[i];\n let dx = previousEye.x - eye.x;\n let dy = previousEye.y - eye.y;\n let distance = Math.sqrt(dx * dx + dy * dy);\n if (distance < previousEye.radius + eye.radius) {\n flag = 1;\n break;\n }\n }\n if (flag === 0) eyes.push(new Eye(eye));\n }\n console.log(eyes);\n}\n\nfunction animate() {\n requestAnimationFrame(animate);\n ctx.clearRect(0, 0, canvasW, canvasH);\n for (let i = 0; i < eyes.length; i++) {\n eyes[i].draw();\n }\n}\n\nwindow.addEventListener(\"resize\", function (e) {\n canvas.width = innerWidth;\n canvas.height = innerHeight;\n init();\n});\n\ninit();\nanimate();\n" } ]