{"id":26458824,"url":"https://github.com/morshedulmunna/software-engineering-core-concept","last_synced_at":"2025-10-09T20:34:52.577Z","repository":{"id":205730522,"uuid":"714940325","full_name":"morshedulmunna/software-engineering-core-concept","owner":"morshedulmunna","description":"Learn Software Engineering core concept.","archived":false,"fork":false,"pushed_at":"2024-12-17T16:10:47.000Z","size":3877,"stargazers_count":14,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-17T17:25:01.992Z","etag":null,"topics":["algorithms","data-structures","database","distributed-systems","javascript","nodejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/morshedulmunna.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-06T06:50:53.000Z","updated_at":"2024-12-17T16:10:52.000Z","dependencies_parsed_at":"2023-12-11T07:49:56.066Z","dependency_job_id":null,"html_url":"https://github.com/morshedulmunna/software-engineering-core-concept","commit_stats":null,"previous_names":["morshedulmunna/nodejs-javascript","morshedulmunna/core-concept-learning","morshedulmunna/software-engineering-core-concept"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morshedulmunna%2Fsoftware-engineering-core-concept","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morshedulmunna%2Fsoftware-engineering-core-concept/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morshedulmunna%2Fsoftware-engineering-core-concept/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morshedulmunna%2Fsoftware-engineering-core-concept/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morshedulmunna","download_url":"https://codeload.github.com/morshedulmunna/software-engineering-core-concept/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244332905,"owners_count":20436116,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algorithms","data-structures","database","distributed-systems","javascript","nodejs"],"created_at":"2025-03-19T00:43:39.423Z","updated_at":"2025-10-09T20:34:52.555Z","avatar_url":"https://github.com/morshedulmunna.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Table of Contents \u003ca name=\"table\"\u003e\u003c/a\u003e\n\n-   [JavaScript in-depth Architecture](#javascript-architecture)\n-   [JavaScript Execution Context](#javascript-execution-context)\n-   [Call Stack](#call-stack)\n-   [Function Details](#function-details)\n    -   [Function Declaration or Function Statement](#function-declaration-or-function-statement)\n    -   [Function Expression](#function-expression)\n    -   [Anonymous Function](#anonymous-function)\n    -   [IIFE (Immediately Invoked Function Expression)](#iife-immediately-invoked-function-expression)\n    -   [Arrow Function](#arrow-function)\n    -   [First-Class Function or Higher-Order Function](#first-class-function-or-higher-order-function)\n    -   [Callback Function](#callback-function)\n    -   [Parameters vs Arguments](#parameters-vs-arguments)\n-   [JavaScript Errors](#javascript-errors)\n    -   [ReferenceError](#referenceerror)\n    -   [SyntaxError](#syntaxerror)\n    -   [TypeError](#typeerror)\n    -   [AggregateError](#aggregateerror)\n-   [JavaScript Scope \u0026 Scope Chain](#javascript-scope-chain)\n-   [Variable Shadowing , let const [Solve memory leak problem]](#variable-shadowing)\n-   [JavaScript Hoisting](#javascript-hoisting)\n-   [JavaScript closure](#javascript-closure)\n-   [Temporal Dead Zone (TDZ) in JavaScript ( Time zone)](#temporal-dead)\n-   [Undefined vs not Defined in JavaScript](#undefined-vs-notdefined)\n-   [Asynchronous JavaScript \u0026 EVENT LOOP from scratch](#asynchronous-javascript--event-loop-from-scratch)\n-   [Polyfill Bind Method](#polyfill-bind)\n-   [Debounce Strategy](#debounce)\n\n![important]\n**_Abbreviation_**\n\n```text\n    TCP =\u003e Transmission Control Protocol\n    UDP =\u003e User Datagram Protocol\n    MQTT-\u003e Message Queuing Telemetry Transport\n    CoAP - Constrained Application Protocol\n    AMQP  - Advanced Message Queuing Protocol\n    RESTapi =\u003e Representational state transfer\n    API =\u003e Application programming interface (API or web API)\n```\n\n# Learn JavaScript core Concept!\n\n\u003ca name=\"javascript-execution-context\"\u003e\u003c/a\u003e\n\n### How javaScript Work :\n\n#### **Execution Context**\n\nIn JavaScript, the execution context refers to the environment in which the code is executed.\n\n**Global Execution Context:** This is the default execution context. When the JavaScript code is executed, the global execution context is created in the call stack, which contains global variables and functions. It's essentially the environment where code that isn't inside any function is executed.\n\n**Function Execution Context:** Every time a function is invoked, a new execution context is created for that function. It includes information about the function's arguments, local variables, and any nested functions declared within it. When a function is called, a new function execution context is pushed onto the execution stack.\n\n-   Parts of Each Execution Context :\n    -   Memory Component or variable environment\n    -   Code Component or thread of execution\n-   Phase of Each Execution Context :\n    -   Creation Phase or memory creation phase\n    -   Execution phase or code execution phase\n\n![execution-context](./readmeImage/context.png)\n\n### **Call Stack**\u003ca name=\"call-stack\"\u003e\u003c/a\u003e\n\nThe call stack in JavaScript is a mechanism used to keep track of the functions being executed in a program. It operates on a Last In, First Out (LIFO) basis, meaning that the last function that gets pushed onto the stack is the first one to be popped off and executed.\n\nWhen a function is called in JavaScript, it's added to the call stack. As functions are executed, they are removed from the stack. If a function calls another function, the new function gets added on top of the previous one, forming a stack of function calls. When a function finishes executing, it is removed from the stack, and the control returns to the previous function in the stack.\n\n![call-stack](./readmeImage//call-back.png)\n\n\u003cdiv style=\"text-align: right;\"\u003e\n    \u003ca href=\"#table\"\u003e\n        \u003cbutton\u003eGo to top\u003c/button\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n### Function Details :\u003ca name=\"function-details\"\u003e\u003c/a\u003e\n\n**Function Declaration or Function Statement** : \u003ca name=\"function-declaration-or-function-statement\"\u003e\u003c/a\u003e\n\nThis is a basic way to declare a function using the `function` keyword. or arrow function. it's just declared as a function never call. when it's called that means it's invoked.\n\n```plaintext\n\nfunction greet() {\n    console.log(\"Hello!\");\n}\n```\n\n**Function Expression** : \u003ca name=\"function-expression\"\u003e\u003c/a\u003e\n\nA function expression stores a function as a value in a variable.\n\n```plaintext\n\nconst sayHello = function() {\n    console.log(\"Hi there!\");\n};\nor -----------------------------------\nvar greet = () =\u003e {\n    console.log(\"Hello!\");\n}\n```\n\n    \u003ca href=\"#table\"\u003e\n        \u003cbutton\u003eGo to top\u003c/button\u003e\n    \u003c/a\u003e\n\n\u003c/div\u003e\n\n**Anonymous Function** : \u003ca name=\"anonymous-function\"\u003e\u003c/a\u003e\n\nAn anonymous function doesn't have a name; it's assigned to a variable without a specific name.\n\n```plaintext\n\nconst add = function(a, b) {\n    return a + b;\n};\n```\n\n**IIFE (Immediately Invoked Function Expression)** : \u003ca name=\"iife-immediately-invoked-function-expression\"\u003e\u003c/a\u003e\n\nAn IIFE runs immediately after it's defined, encapsulating its scope.\n\n```plaintext\n(function() {\n    console.log(\"IIFE running!\");\n})();\n```\n\n**Arrow Function** : \u003ca name=\"arrow-function\"\u003e\u003c/a\u003e\n\nArrow functions provide a more concise syntax for writing functions.\n\n```plaintext\n\nconst multiply = (a, b) =\u003e {\n    return a * b;\n};\n```\n\n| Aspect               | Arrow Functions                                                                          | Normal Functions                                           |\n| -------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------- |\n| Syntax               | Concise syntax                                                                           | More verbose syntax                                        |\n| `this` binding       | Inherits `this` from surrounding context. that means this keyword point her outer scope. | Has its own `this` context determined by how it's called   |\n| `arguments` object   | Does not have its own `arguments` object                                                 | Has its own `arguments` object containing passed arguments |\n| Constructor usage    | Cannot be used with `new` to create objects                                              | Can be used with `new` to create objects                   |\n| `prototype` property | Does not have a `prototype` property                                                     | Has a `prototype` property for object creation             |\n| Implicit return      | Can implicitly return a value if single expression                                       | Explicit `return` statement needed                         |\n\n**First-Class Function or Higher-Order Function** : \u003ca name=\"first-class-function-or-higher-order-function\"\u003e\u003c/a\u003e\n\nFunctions are treated as first-class citizens; they can be assigned as values, passed as arguments, and returned from other functions. or Received functions as a parameter and return a function.\n\n```javascript\nfunction sayName(name) {\n    return function () {\n        console.log(`Hello, ${name}!`);\n    };\n}\nconst greeting = sayName(\"Alice\");\ngreeting(); // Outputs: Hello, Alice!\n```\n\n**Callback Function** :\u003ca name=\"callback-function\"\u003e\u003c/a\u003e\n\nA callback function is passed as an argument to another function and executed after an operation is completed.\n\n```plaintext\n\nfunction fetchData(callback) {\n    // Simulated asynchronous operation\n    setTimeout(() =\u003e {\n        const data = \"Some data\";\n        callback(data);\n    }, 1000);\n}\n\nfunction displayData(data) {\n    console.log(`Data received: ${data}`);\n}\n\nfetchData(displayData); // Outputs: Data received: Some data\n```\n\n**Parameters vs Arguments**: \u003ca name=\"parameters-vs-arguments\"\u003e\u003c/a\u003e\n\nParameters are variables in a function definition, while arguments are the actual values passed to the function when it's invoked.\n\n```plaintext\n\nfunction addNumbers(x, y) { // x and y are parameters\n    return x + y;\n}\n\nconst result = addNumbers(3, 5); // 3 and 5 are arguments\n```\n\n\u003cdiv style=\"text-align: right;\"\u003e\n    \u003ca href=\"#table\"\u003e\n        \u003cbutton\u003eGo to top\u003c/button\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n## JavaScript Errors\u003ca name=\"javascript-errors\"\u003e\u003c/a\u003e\n\nCertainly! JavaScript has various types of errors that can occur during code execution. Here's an overview of some common errors:\n\n**ReferenceError:**\u003ca name=\"referenceerror\"\u003e\u003c/a\u003e\n\nThis error occurs when trying to use a variable that has not been declared or is not within the current scope. For instance, accessing a variable that doesn't exist will result in a ReferenceError.\n\n```\nconsole.log(x); // Uncaught ReferenceError: x is not defined\nlet x = 20\n```\n\n**SyntaxError:**\u003ca name=\"syntaxerror\"\u003e\u003c/a\u003e\n\nThis error occurs when there's a mistake in the syntax of the code, making it impossible for the interpreter to parse correctly. Common examples include missing brackets, semicolons, or incorrect keywords.\n\n**TypeError:**\u003ca name=\"typeerror\"\u003e\u003c/a\u003e\n\nThis error occurs when a value is not of the expected type. For instance, attempting to call a method on a variable that is not a function will result in a TypeError.\n**_when you can try to mutated const declarations value will result in a TypeError instead of a TypeError._**\n\n```\nconst foo = 30;\nfoo = 90 // Uncaught TypeError: Assignment to constant variable.\n```\n\n**AggregateError:**\u003ca name=\"aggregateerror\"\u003e\u003c/a\u003e\n\nIntroduced in ES2020, it's used to represent multiple errors in the context of operations like Promise.allSettled() or Promise.any(). This error aggregates several errors into a single object, allowing handling multiple errors simultaneously.\n\\_\\_\\_access Errors using:\\_\\_\\_\n\n```\ntry{\n\n}catch(e){\n    console.error(err.error);\n}\n```\n\nThese errors can be caught using try...catch blocks in JavaScript to handle exceptional cases gracefully. Each type of error provides specific information that can be helpful for debugging, allowing developers to identify and fix issues in their code effectively.\n\n\u003cdiv style=\"text-align: right;\"\u003e\n    \u003ca href=\"#table\"\u003e\n        \u003cbutton\u003eGo to top\u003c/button\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n### JavaScript Scope \u0026 Scope Chain \u003ca name=\"javascript-scope-chain\"\u003e\u003c/a\u003e\n\nBefore learning about scope , scope chain , or even closures , you need to understand the Lexical Environment .\n\n**What is Lexical Environments?**\n\nEnglish “Lexical” means connection from outside in a certain order.\n\nA function’s “Lexical Environment” includes the function’s local memory plus its parent’s “Lexical Environment”.\n\nFor example, the above function y is nested inside the function x ( y is a child of x ), and the function x is inside the global scope ( x is a child of global ).\n\nAlso called y is lexically inside the x function. x is lexically inside global .\n\nAs soon as an “Execution Context” is initialized, a “Lexical Environment” is also initialized.\n\nLet’s see the corresponding parent’s lexical environment in the example above:\n\n![lexical-enviroment](./readmeImage/laxi-env.png)\n\nNow, lets go to deep drive on Scope and Scope chain,\n**What is Scope?**\nScope can be defined as the space in which variables and statements are accessible. In JavaScript we have three types of scope:\n\n-   Global scope,\n-   Function/local scope (Script)\n-   Block scope.\n\n**Global scope :**\n\n-   The default scope\n-   There is only one global scope in the program\n-   It is the top scope that englobes the entire code\n-   The declarations inside this space can be accessed anywhere in the code\n    ![global-scope](./readmeImage/image.png)\n\n**Block scope :**\n\n-   The space between a pair of curly braces (if block, for block, etc.)\n-   Applicable to let and const\n-   Declarations are only accessible inside the block\n\n```java\n{ //block start\n    statement1;\n    statement2;\n    // ... more statements\n} // block end\n```\n\nIn the example below we are able to print the variable msgOne but not constant msgTwo. As mentioned before **const** and **let** are block scoped so they are only visible inside the block, in this case inside the if statement.\n\nOn the other hand **var** is function scope so can be accessed within the function.\n\n![block-scope](./readmeImage/block-scope.png)\n\nlet's talk about scope chaining............\n\n**SCOPE CHAIN**\n\n![lexical-enviroment](./readmeImage/laxi-env.png)\nLooking at the image, can you see how the program looks up the values ​​of the variable?\n\nThe search order will be from the **purple ring** of **_Y_** to the purple ring of **_x_** and then to the purple ring of global and still not found, it will encounter null and end this search.\n\nAssuming c does not exist at the violet ring x as above, the program will continue to look for the purple rings y , then global .\n\nIf it is still not found, an error will be reported. If it is found somewhere first, then the local value will be used.\n\nThese are the things that JS Engine looks for from the inside out, called Scope Chain .\n\nOr to put it more simply, the Scope Chain is the chain of the Lexical Environments.\n\n**_Note: If the variable is not found in the local memory of the execution context , it will search the lexical environment until the end of the string._**\n\n\u003cdiv style=\"text-align: right;\"\u003e\n    \u003ca href=\"#table\"\u003e\n        \u003cbutton\u003eGo to top\u003c/button\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003ca name=\"variable-shadowing\"\u003e\u003c/a\u003e\n\n### Variable Shadowing , let const [Solve memory leak problem]\n\nat first, need to understand why needs **let** **const** variables. what is the problem in **var** keyword\nlet's see the code below,\n\n```javascript\nvar x = 90\n{\n var x = 80 //global x pointer point same memory location\n console.log(x)\n}\nconsole.log(x)\n\noutput:\n 80\n 80\n\n // why output same for the different variables scope. it's memory leak issue.\n here x shadows the global x variables\n```\n\nWhen you declare a variable using **var** within a block (like within {}), it doesn't create a new block scope; instead, it modifies the existing variable of the same name in the outer scope. This behavior can lead to unexpected results, as you rightly pointed out.\n\nThe introduction of `let` and `const` in ES6 provides a solution to this problem by introducing block-scoped variables:\n\n-   `let` allows the variable to be reassigned within its scope but doesn't allow redeclaration within the same scope.\n-   `const` also creates block-scoped variables but doesn't allow reassignment after declaration.\n\nBy using `let` or `const`, you can avoid variable shadowing and prevent unintentional modification of variables in outer scopes.\n\nIn your example, using `let` or `const` instead of `var` would resolve the issue:\n\n```javascript\nlet x = 90; // or const x = 90; if it's not meant to be reassigned\n{\n    let x = 80; // This x is in a different scope\n    console.log(x); // Outputs 80\n}\nconsole.log(x); // Outputs 90\n```\n\nThis way, the variable x within the block has its own scope and doesn't affect the outer x variable, thereby preventing unintended behavior and potential memory leaks.\n\n**let const and var**\n\n![Alt text](./readmeImage/variable.png)\n\n**Block Scope Shadowing with let or const:**\n\n```javascript\nlet a = 10;\n{\n    let a = 20; // This is legal and creates a new 'a' variable within this block scope\n    console.log(a); // Output: 20\n}\nconsole.log(a); // Output: 10 (Global 'a' remains unaffected)\n```\n\n**Function Scope Shadowing with var:**\n\n```javascript\nvar b = 15;\nfunction example() {\n    var b = 25; // This is legal and creates a new 'b' variable within this function scope\n    console.log(b); // Output: 25\n}\nexample();\nconsole.log(b); // Output: 15 (Global 'b' remains unaffected)\n```\n\n**_Illegal Variable Shadowing:_**\n\n**Block Scope Illegal Shadowing let/const with var:**\n\n```javascript\nlet c = 30;\n{\n    var c = 40; // Illegal - 'var' cannot shadow 'let' or 'const' within the same scope\n    console.log(c); // This will cause an error\n}\nconsole.log(c);\n```\n\n**JavaScript Scoping and Variable Declaration: Understanding Block Scope and Shadowing**\n\n```javascript\n{\n    let x = 90;\n\n    {\n        let y = 50;\n        console.log(x); // 90\n        {\n            console.log(y); // 50\n            const x = \"Happy Day\";\n            {\n                console.log(x); // happy day\n            }\n        }\n    }\n    console.log(x); // 90\n}\n//Output:\nHappy Day;\n90;\n50;\nHappy Day;\n90;\n```\n\nRemember, JavaScript follows **lexical scoping rules**, where inner scopes have access to variables defined in outer scopes, but redeclaring variables within inner scopes creates new variables that only exist within those inner scopes.\n\n**Is variable shadowing good or bad?**\nIf we already had some variable and we shadowed it inside another scope, we are losing access to the original variable and will not receive the output we need inside another scope. Shadowing can lead to unneeded bugs and results and will be harder to debug when you have many variables.\n\nThat’s why it’s always better to name variables in a more explanatory way\n\n\u003cdiv style=\"text-align: right;\"\u003e\n    \u003ca href=\"#table\"\u003e\n        \u003cbutton\u003eGo to top\u003c/button\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n### JavaScript Hoisting Concept \u003ca name=\"javascript-hoisting\"\u003e\u003c/a\u003e\n\nWhen the JS engine gets our script, the first thing it does is setting up memory for the data in our code. No code is executed at this point, it’s simply just preparing everything for execution. The way that function declarations and variables are stored is different. Functions are stored with a reference to the entire function.\n\nsee image below\n![Alt text](./readmeImage/hoisting.png)\n\nafter setting up memory then go to execute patch\n![Alt text](./readmeImage/gif12.gif)\n\nAll done! 🎉 Quick recap:\n\n-   **Functions** and **variables** are stored in memory for an execution context before we execute our code. This is called hoisting.\n-   **Functions are stored with a reference** to the entire functions, variables with the **var keyword with the value of undefined**, and variables with the **let and const keyword are stored uninitialized**.\n\n\u003e [!IMPORTANT]\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eIsn't there hoisting in let/const or function?\u003c/b\u003e\u003c/summary\u003e\n  \n  \u003cp \u003e\nVariables declared with var are hoisted to the top of their scope and initialized with a value of `undefined`. This means you can access var variables before they're actually declared in the code.\n\nHowever, variables declared with let and const are also hoisted to the top of their scope but are not initialized. They're in a **_\"temporal dead zone\"_** until the actual declaration is encountered in the code. Accessing let and const variables before their declaration results in a `ReferenceError`.\n\nFor functions, **function declarations are hoisted entirely**, so you can call a function declared using function myFunction() before its actual placement in the code. However, function expressions, such as arrow functions or functions assigned to variables using const, are not hoisted in the same way. They behave similarly to let and const variables in terms of hoisting.\n\n  \u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdiv style=\"text-align: right;\"\u003e\n    \u003ca href=\"#table\"\u003e\n        \u003cbutton\u003eGo to top\u003c/button\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n### JavaScript Closure \u003ca name=\"javascript-closure\"\u003e\u003c/a\u003e\n\nA closure is the combination of a **function bundled together (enclosed) with references to its surrounding state (the lexical environment).** In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, **_closures are created every time a function is created, at function creation time._**\n\n```JavaScript\nfunction outer() {\n    let b = 1;\n    function inner() {\n        return b;\n    }\n    return inner;\n}\nlet get_func_inner = outer(); //here create closure outer function\n\n/* how can access b after returning a outer function.\nnormally it's could not be access b because outer function return\nthen it's not stay in call stack and memory.\nbut it's still accessible because of javaScript closure*/\nconsole.log(get_func_inner());\n\n```\n\nAnother Example\n![js-closure](./readmeImage/closure.png)\n\n\u003cdiv style=\"text-align: right;\"\u003e\n    \u003ca href=\"#table\"\u003e\n        \u003cbutton\u003eGo to top\u003c/button\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003ca name=\"javascript-deadzone\"\u003e\u003c/a\u003e\n\n[!Important]\n\n\u003e Create a Function which one Print 1 first 1 sec \u003e again 2 sec print 2 \u003e again 3 sec print 3. for 10 times\n\nPossible solutions but not correct:\n\n```javascript\nfunction x() {\n   for (var i = 0; i \u003c= 10; i++) {\n       setTimeout(function () {\n           console.log(i);\n       }, i * 1000);\n   }\n}\nx()\noutput:\n10\n10\n10\n10\n.\n.\n.\nits not working, because of closure. var x point all setTimeout function same memory location.\n\nfunction x() {\n   for (let i = 0; i \u003c 10; i++) {\n       setTimeout(function () {\n           console.log(i);\n       }, i * 1000);\n   }\n}\nx()\n\noutput:\n1\n2\n3\n4\n.\n.\n\n```\n\n\u003ca name=\"temporal-dead\"\u003e\u003c/a\u003e\n\n### Temporal Dead Zone (TDZ) in JavaScript ( Time zone)\n\nIn JavaScript, the temporal dead zone (TDZ) refers to the **period of time** during which a variable declared with the `let` or `const` keyword cannot be accessed or used. The TDZ begins at the point of declaration and ends when the variable is initialized with a value.\n\n[!Important]\nVariable declarations থেকে শুরু করে initializations হাওয়ার আগে মুহুর্ত পর্যন্ত সময়কে TDZ বলে। এই সময় এর মধ্যে যদি কোন variables কে access করতে চাই তাহলে তা `ReferenceError: __ is not defined` দিয়ে থাকে।\nবিদ্রঃ এটা শুধু মাত্র `let \u0026 const` এর সময় হয়ে থাকে। var এ কোন সময় হয় না।\n\n```javascript\nconsole.log(num); // ReferenceError: num is not defined\nlet x = 23;\n```\n\n\u003cdiv style=\"text-align: right;\"\u003e\n    \u003ca href=\"#table\"\u003e\n        \u003cbutton\u003eGo to top\u003c/button\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003ca name=\"undefined-vs-notdefined\"\u003e\u003c/a\u003e\n\n### Undefined VS Not defined in JavaScript\n\n-   Undefined:\n    It's a Placeholder for JavaScript which is place in the memory. It's not exactly a **placeholder in memory**; rather, it's a specific value that JavaScript uses to denote the absence of an assigned value. When a variable is created but not initialized, JavaScript **automatically** assigns it the value of undefined until a value is explicitly assigned to it. This is different from languages like **C or C++ where uninitialized variables can contain random or garbage values.**\n\n    \u003e It's Take Memory Usage but not defined in JavaScript not use memory\n\n```javascript\nlet a;\nconsole.log(a); // Output will be 'undefined'\n```\n\n-   Not Defined: means not allocated memory in our Ram\n\n---\n\n---\n\n\u003ca name=\"asynchronous-javascript--event-loop-from-scratch\"\u003e\u003c/a\u003e\n\n### Asynchronous JavaScript \u0026 EVENT LOOP from scratch 🔥\n\nAsynchronous programming model has become so popular these days that programmers use it without actually understanding it. This leads to confusions such as conflating concurrency with parallelism.\n\n![\"Event-loop\"](./readmeImage/event-loop.gif)\n\n**Models of programming**\nProgramming model is an abstract concept that explains how the program is structured and how it will run when executed. In order to appreciate asynchronous programming model,\n\n\u003c!-- TODO=\u003e --\u003e\n\n---\n\n\u003ca name=\"polyfill-bind\"\u003e\u003c/a\u003e\n\n### Polyfill for bind Method\n\nPolyfill is nothing but support to older browsers which doesn’t have new methods.\njust add this method to Function.prototype\n\n```javascript\nCreate a myoOwn MyBind method\nlet info = {\n    name: \"Muhib Khan\",\n    age: 12,\n};\n\nlet printName = function (birthday, university, hello) {\n    console.log(\n        `${hello} My name is ${this.name} and age is ${this.age}. my birthday ${birthday}. my university name is ${university}`\n    );\n};\n\nlet printMyInfo = printName.bind(info, \"21/04/1997\", \"BUBT\");\nprintMyInfo(\"Hi\");\n\nFunction.prototype.myBind = function (...arg) {\n    console.log(\"arg:\", arg);\n    let obj = this;\n    let params = arg.slice(1);\n    console.log(\"params:\", params);\n    return function (...arg2) {\n        obj.apply(arg[0], [...params, ...arg2]);\n    };\n};\n\nlet printMyInfo2 = printName.myBind(info, \"21/04/1997\", \"BUBT\");\nprintMyInfo2(\"Hello\");\n\n```\n\n---\n\n\u003ca name=\"debounce\"\u003e\u003c/a\u003e\n\n### Debouching \u0026 Throttling Strategy\n\n**Debouncing: Taming Rapid Fire Actions**\nDebouncing is a technique used to control the frequency of function execution. It is particularly useful when dealing with events that fire rapidly, such as resizing a browser window or handling input from a user typing on a keyboard.\n\n-   **Search Input:** In an autocomplete search bar, debounce can be used to delay the search query until the user has stopped typing for a short period, reducing the number of unnecessary API requests.\n\n-   **Text Editor Autosave:** When implementing an autosave feature in a text editor, debounce can ensure that the save operation only occurs after the user has paused typing.\n\n-   **Window Resize Handling:** Debounce can be useful when handling window resize events, allowing you to recalculate and adjust the layout only after the user has finished resizing the window.\n\nlet's build Search Suggestions -\n\nImagine you're implementing an autocomplete feature in a search bar. Without debouncing, the function responsible for fetching suggestions from a server might be called repeatedly as the user types each letter, causing unnecessary network requests. Debouncing allows you to delay these requests until the user has paused typing.\n\nlets implement the function\n\n```javascript\nlet count = 0;\nconst doNetwork = () =\u003e {\n    console.log(\"network calling..\", count++);\n};\n\nconst debouching = function (fn, delay) {\n    let timer;\n    return function () {\n        clearTimeout(timer);\n        timer = setTimeout(() =\u003e {\n            doNetwork.apply(this, arguments);\n        }, delay);\n    };\n};\n\nconst batterFunction = debouching(doNetwork, 600);\n```\n\n**Throttling: Limiting Function Calls**\nThrottling is a method used to limit the rate at which a function is executed. It is beneficial when you want to ensure a function isn't invoked more often than a certain threshold, such as handling scroll events or preventing button double-clicks.\n\n-   **Scroll Animation:** Throttling can be used to control the rate at which scroll events trigger animations or transitions on elements as the user scrolls down a page.\n\n-   **Mousemove Tracking:** Throttle mousemove events to create interactive effects like parallax scrolling without overloading the browser with constant updates.\n-   **Button Clicks:** Throttle button clicks to prevent double-clicking or rapid successive clicks from triggering multiple actions.\n\nlet's build Scrolling Animations -\n\nSuppose you're creating a parallax scrolling effect where elements change position based on the user's scroll. Without throttling, the position update function could be called rapidly as the user scrolls, resulting in a jittery animation. Throttling ensures the function is called at a controlled rate.\n\n```javascript\nfunction throttle(func, limit) {\n    let inThrottle;\n    return function (...args) {\n        if (!inThrottle) {\n            func(...args);\n            inThrottle = true;\n            setTimeout(() =\u003e {\n                inThrottle = false;\n            }, limit);\n        }\n    };\n}\n\nconst handleScroll = throttle(() =\u003e {\n    // Update element positions based on scroll here\n    console.log(\"Updating scroll position\");\n}, 200);\n\nwindow.addEventListener(\"scroll\", handleScroll);\n```\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorshedulmunna%2Fsoftware-engineering-core-concept","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorshedulmunna%2Fsoftware-engineering-core-concept","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorshedulmunna%2Fsoftware-engineering-core-concept/lists"}