{"id":20945395,"url":"https://github.com/beebombshell/everything-about-javascript","last_synced_at":"2025-04-11T16:20:45.544Z","repository":{"id":114775226,"uuid":"600056175","full_name":"BeeBombshell/Everything-about-JavaScript","owner":"BeeBombshell","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-19T12:01:45.000Z","size":12,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T12:21:58.210Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/BeeBombshell.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-02-10T13:39:37.000Z","updated_at":"2023-09-29T07:19:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"a8b8726c-c1b8-4bd2-a535-c3fd257d9715","html_url":"https://github.com/BeeBombshell/Everything-about-JavaScript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeeBombshell%2FEverything-about-JavaScript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeeBombshell%2FEverything-about-JavaScript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeeBombshell%2FEverything-about-JavaScript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeeBombshell%2FEverything-about-JavaScript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BeeBombshell","download_url":"https://codeload.github.com/BeeBombshell/Everything-about-JavaScript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248438471,"owners_count":21103410,"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":[],"created_at":"2024-11-18T23:47:56.625Z","updated_at":"2025-04-11T16:20:45.503Z","avatar_url":"https://github.com/BeeBombshell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Everything about JavaScript 💯\n\n- [x] What actually is JavaScript?\n- [x] Types of functions\n- [x] How JS code is executed?\n- [x] Hoisting and Fake Functions\n- [x] Lexical scope and scope chain\n- [x] Var Let Const\n\n\n# What actually is JavaScript?\n\n- Very versitile language\n\n- Runs in Javascript runtime environment -\u003e Either browser or Node.js (or electronJS for desktop apps)\n\n- Different browsers implement different JS engines. (V8, SpiderMonkey, Chakra, JavaScriptCore)\n\n- Provide logic inside environment. (Browser, Node.js)\n\n- Environment provides APIs to interact with DOM, File System, Network, etc.\n\n- JS syntax is derived from Java. (Functional Programming, OOP)\n\n- JavaScript name is a copyright of Oracle. Organization named ECMA International standardized the language. (ECMAScript)\nACTUAL NAME IS ECMASCRIPT, CALLED ES. Then we have more versions ES1, ES2, ES3, ES5, ES6.\n\n- TC-39 committee defines the feature of ES.\n\n- Vanilla JavaScript: Simple JavaScript.\n\n- NodeJs: JavaScript runtime environment. (V8 engine) has multiple features. (npm, package manager, etc)\n\n- Angular, React, Vue, etc are frameworks. (React is a library) [Changes in UI are very costly, the reason why GPUs are really expensive] To reduce this cost, we use frameworks. Writes code in JSX. (JSX is a syntax extension to JS) This makes optimised UI changes.\n\n\n# Types of functions in JS\n\nIt is possible to:\n- pass a function as an argument to another function\n- return a function from a function\n- assign a function to a variable\nwith JS. JS functions are very powerful. They are called first class functions/ citizens.\n\nRefer to function.js for more details.\n\n## Function statement \n\n```js\nfunction sayHello(param){\n    console.log(\"Hello\", param);\n}\nsayHello(); // invocation\nsayHello(\"World\");\nsayHello(10);\nsayHello([1,2,3,4,5])\nsayHello({ name: \"Bhavya\" })\nsayHello(); // this will print \"Hello undefined\"\n```\n\n## Functions are first class citizens \n\nThis means functions are treated as a variable.\n\n```js\nlet a = [1,2,3,4,5];\nlet b = a;\nconsole.log(b); // assignment by reference is possible\n```\nWe can directly assign values to a variable.\n\n## Function Expression\n\n```js\nlet fnContainer = function fn() {\n    console.log(\"I am a function expression\");\n}\n```\n\nNow if we call `FnContainer` it will invoke the `fn` function.\n\n## Anonymous Function\n\n```js\nlet fnContainer = function () {\n    console.log(\"I am a function expression\");\n    console.log(\"I am also an anonymous function\");\n}\n```\n\nWhenever we do not give a name to a function, it is called an anonymous function. (In the above example, the name `fn` wasn't necessary, we could identify it by the name `fnContainer`)\n\n**USAGE:** Higher order functions\n\n## IIFE (Immediately Invoked Function Expression)\n\nBack in the time when we didn't have `let` or `const`, `var` was very troublesome. It was possible to create a global variable by mistake. To avoid this, we used IIFE.\n\nIt is like `init()` function in python which is called automatically. (Initialization purposes)\n\n```js\n(function fn() {\n    console.log(\"I an IIFE\");\n    console.log(\"I will be invoked immediately\");\n})();\n```\n\u003e Just need to wrap your functions in round braces and add a pair of round braces at the end =\u003e converted into IIFE, called automatically.\n\n**USAGE:** In require, parameter pollution w/o let and const, preserving double pollution, closure (library like Jquery)\n\n## Arrow Function\n\nMany people believe arrow functions are created to simplify the syntax of functions which isnt true.\n\nIt is useful in simplyfying the syntax, but also is the backbone of ReactJS. (Helps in binding, using `this` keyword)\n\n```js\nlet fn = (num) =\u003e {\n    return num * num;\n}\n```\n\n\u003e This can be written as:\n```js\nlet fn = num =\u003e num * num;\nconsole.log(fn(5));\n```\n\n## First Class Citizens\n\n- Functions are treated like variables - can be assigned to variables - **FUNCTION EXPRESSION**\n\n- Can be passed as a parameter - Basis of **Functional Programming**, **Higher Order Functions**, **Callback Functions**, **Everything Async**\n\n- Function can be returned from a function - **Closures**\n\n```js\nfunction sayHello(param){\n    console.log(\"Hello\", param);\n}\n\nfunction smaller() {\n    console.log(\"I am smaller\");\n}\n\nsayHello([1,2,3,4,5]);\nsayHello(smaller);\n```\n\n## Returning a function from a function\n\n```js\nfuncion outer () {\n    console.log(\"I am outer returning inner\");\n    return function inner() {\n        console.log(\"I am inner\");\n    }\n}\n\nlet rVal = outer();\nconsole.log(\"rVal\", rVal);\nrVal();\n\n```\nOUTPUT:\n```\nI am outer returning inner\nRval [Function: inner]\nI am inner\n```\n\nWe can also convert the returning function into an anonymous function, like:\n\n```js\nfuncion outer () {\n    console.log(\"I am outer returning inner\");\n    return function () {\n        console.log(\"I am inner\");\n    }\n}\n\nlet rVal = outer();\nconsole.log(\"rVal\", rVal);\nrVal();\n```\n\nOUTPUT:\n```\nI am outer returning inner\nRval [Function: (anonymous)]\nI am inner\n```\n\n# JS Code Execution, Hoisting, and Execution Context\n\nEvery JS Code runs inside an Execution Context. (Global Execution Context)\n\nExecution Context is a **wrapper** that supplies the environment and catalysts for the code to be executed.\n\nIn Creation Phase, we get:\n- Global Object\n- This variable\n- Code\n\n```js\nconsole.log(global); // in browser we have window object instead of global\nconsole.log(this) // equals an empty object in nodejs environment\n// this equals the window object in browser\n```\n\nAny object that does not lie inside a function, is called a **Global Code** and lies in the Global Area called the **Global Execution Context**.\n\n**Global Object**\n- Node: Global\n- Browser: Window Object\n\n**This**\n- Global Execution Context: Empty Object\n- Browser: Window Object\n\n**Code**\n- Memort gets allocated for the code: Undefined (value) =\u003e Called **Hoisting**\n\n```js\nconsole.log(\"a is: \", a);\nvar a;\nconsole.log(\"a is: \", a);\na = 10;\nconsole.log(\"a is: \", a);\n```\n\nOUTPUT:\n```\na is:  undefined\na is:  undefined\na is:  10\n```\n\n## Memory Allocation for Function statements\nMemory gets allocated already, even for function.\nHeap gets allocated, reference gets stored in a stack, but undefined is not set.\n\n```js\nfn();\nfunction fn() {\n    console.log(\"I can be called even before my declaration\");\n}\n```\n\nOUTPUT:\n```\nI can be called even before my declaration\n```\n\n```js\nfunction real() {\n    console.log(\"I am real. Always run me!\");\n}\n\nfunction real () {\n    console.log(\"I am fake. Never run me!\");\n}\nfunction real () {\n    console.log(\"You both are wasted!\");\n}\n\nreal();\n```\n\nOUTPUT:\n```\nYou both are wasted!\n```\n\n```js\nconsole.log(\"varName: \", varName);\nvar varName;\nvarName = \"Captain America\";\nfn();\nfunction fn() {\n    console.log(\"Hello from fn\");\n}\nfn();\nfnContainer();\nvar fnContainer = function () {\n    console.log(\"I am an expression\");\n}\n```\n\nOUTPUT:\n```\nvarName:  undefined\nHello from fn\nHello from fn\nTypeError: fnContainer is not a function\n```\n\n## Lexical Scope and Scope Chain\n\n```js\nvar varName = 10;\nfunction fn() {\n    var varName = 20;\n    console.log(varName)    // this would give 20\n}\nfn();\n```\n\nEvery function runs in an Execution Context. This Execution Context lies inside a stack called **Call Stack**.\n\n\nGlobal Execution Context contains:\n- Global Object\n- `this` (empty object)\n- memory allocation (for varName -\u003e undefined)\n\nExecution context gets created whenever the function is called. All the global variables are carried forward but the variables inside the function are allocated memory on priority.  \n\nSo for the following code:\n```js\nconsole.log(varName)    // this would give undefined as well\nvar varName = 10;\nfunction fn() {\n    console.log(varName)    // this would give undefined (as the memory has been allocated for the varName inside the function but it isnt initialized)\n    var varName = 20;\n}\nfn();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeebombshell%2Feverything-about-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeebombshell%2Feverything-about-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeebombshell%2Feverything-about-javascript/lists"}