{"id":23065753,"url":"https://github.com/ullaskunder3/master-javascript","last_synced_at":"2025-04-03T08:48:59.229Z","repository":{"id":186132311,"uuid":"657284471","full_name":"ullaskunder3/master-javascript","owner":"ullaskunder3","description":"I have combined a few JavaScript files that I created while learning the language. The files cover a wide range of topics, including functions, objects, arrays, etc. I hope that the files will be helpful to other people who are learning JavaScript.","archived":false,"fork":false,"pushed_at":"2023-08-04T14:52:25.000Z","size":1168,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-08T22:25:20.778Z","etag":null,"topics":["advanced","intermediate","javascript","modern-javascript","projects","vanilla-js"],"latest_commit_sha":null,"homepage":"https://ullaskunder3.github.io/master-javascript/","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/ullaskunder3.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}},"created_at":"2023-06-22T18:11:28.000Z","updated_at":"2024-02-24T17:10:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"4845cc1b-5048-4bc6-a799-b1e0970c34d2","html_url":"https://github.com/ullaskunder3/master-javascript","commit_stats":null,"previous_names":["ullaskunder3/master-javascript"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2Fmaster-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2Fmaster-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2Fmaster-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2Fmaster-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ullaskunder3","download_url":"https://codeload.github.com/ullaskunder3/master-javascript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246970338,"owners_count":20862508,"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":["advanced","intermediate","javascript","modern-javascript","projects","vanilla-js"],"created_at":"2024-12-16T05:09:54.580Z","updated_at":"2025-04-03T08:48:59.193Z","avatar_url":"https://github.com/ullaskunder3.png","language":"JavaScript","readme":"# Javascript\n\n## Thanks\n\n\u003e I would like to express my gratitude to the following YouTube creators for their impactful videos that greatly aided my understanding of JavaScript core concepts:\n\n- CodeSmith (Will Sentance): \"JavaScript The Hard Parts: Object Oriented Programming\"\n- Kyle Simpson: \"You Don't Know JS\" (also available on YouTube)\n- Dave Gray: YouTube JavaScript Playlist\n- Enes Karakaş: Advanced Object Concepts (available on YouTube)\n\nThank you all for sharing your knowledge and helping me on my learning journey!\n\n```js\nfunction outerFun() {\n  let counter = 0;\n  function increment() {\n    counter++;\n    console.log(\"counter:\", counter);\n  }\n  increment();\n}\nouterFun();\n```\n\n```\nGlobal Execution Context:\n  - Variables:\n    - outerFun: `\u003cfunction reference\u003e`\n  - Function Declarations:\n    - outerFun()\n\nExecution Context of outerFun():\n  - Variables:\n    - counter: `0`\n    - increment: `\u003cfunction reference\u003e`\n  - Function Declarations:\n    - increment()\n  - Call Stack:\n    - outerFun()\n\nExecution Context of increment():\n  - Variables:\n    - (none)\n  - Call Stack:\n    - increment()\n    - outerFun()\n    - Global Execution Context\n```\n\nIn this representation:\n\n- The global execution context includes the `outerFun` function reference.\n- When `outerFun()` is invoked, a new execution context for `outerFun` is created. It includes the `counter` variable initialized to 0 and the `increment` function reference.\n- Within the `outerFun` execution context, there is a call to the `increment()` function. This triggers the creation of a new execution context for `increment`.\n- The `increment` execution context does not have any variables specific to it.\n- The call stack keeps track of the active execution contexts. Initially, `outerFun()` is at the top of the call stack. When `increment()` is called, it is pushed onto the call stack above `outerFun()`, and the global execution context is at the bottom.\n- After the `increment` function completes its execution, its execution context is popped off the call stack.\n- Once `outerFun()` finishes, its execution context is also popped off the stack.\n- Finally, only the global execution context remains on the call stack.\n\nI hope this Markdown format helps you understand the execution contexts more clearly. Let me know if you have any further questions!\n\n```js\nfunction outerFun() {\n  let counter = 0;\n  function increment() {\n    counter++;\n    console.log(\"counter:\", counter);\n  }\n  increment();\n}\nouterFun();\n```\n\n1. Global Execution Context:\n\n   - Variables:\n     - outerFunction: `\u003cfunction reference\u003e`\n     - exFun: `undefined` (initially uninitialized)\n\n2. When `outerFunction()` is called:\n\n   - A new execution context is created for `outerFunction`.\n   - The `counter` variable is declared and initialized to 0 in the `outerFunction` execution context.\n   - The `increment` function is defined inside the `outerFunction` function.\n   - The value of `counter` (0) is logged to the console.\n   - The `increment` function is returned from `outerFunction` and assigned to the `exFun` variable.\n   - The execution context of `outerFunction` is deleted as it has completed execution.\n\n3. Call Stack:\n\n   - **Initially:** `outerFunction()` is at the top of the call stack, and the global execution context is at the bottom.\n\n4. When `exFun()` is called the first time:\n\n   - A new execution context is created for `exFun`.\n   - Inside `exFun`, it tries to access and increment `counter`.\n   - It first looks for `counter` within its own execution context but doesn't find it.\n   - It then looks in the outer scope, which is the global execution context, but still doesn't find `counter`.\n   - Since `counter` is not found, it does not increment.\n   - The execution context of `exFun` completes, and it is popped off the call stack.\n\n5. Call Stack:\n\n   - After `exFun()` is called: `exFun()` is at the top of the call stack, and the global execution context is at the bottom.\n\n6. When `exFun()` is called the second time:\n\n   - A new execution context is created for `exFun`.\n   - Inside `exFun`, it again tries to access and increment `counter`.\n   - As before, it looks for `counter` within its own execution context but doesn't find it.\n   - It then looks in the outer scope, which is the global execution context, but `counter` was never incremented or reassigned, so it remains 0.\n   - Since `counter` is not found, it does not increment.\n   - The execution context of `exFun` completes, and it is popped off the call stack.\n\n7. Call Stack:\n   - After the second `exFun()` call: `exFun()` is at the top of the call stack, and the global execution context is at the bottom.\n\nIn summary, the `counter` variable is not incremented because `exFun` tries to access it in the global execution context after the `outerFunction` execution context has been deleted. The value of `counter` is not persisted, so it remains at its initial value of 0.\n\n## Promises and Async/Await:\n\n- Promises: Asynchronous programming is a fundamental aspect of JavaScript. Promises provide a way to handle asynchronous operations and avoid callback hell\n\n```js\nconst fetchData = () =\u003e {\n  return new Promise((resolve, reject) =\u003e {\n    // Simulating an asynchronous operation\n    setTimeout(() =\u003e {\n      const data = \"One piece is real\";\n      if (data) {\n        resolve(data);\n      } else {\n        reject(\"Error occurred\");\n      }\n    }, 2000);\n  });\n};\n\nfetchData()\n  .then((data) =\u003e console.log(data))\n  .catch((error) =\u003e console.error(error));\n```\n\n- Async/Await: Introduced in ES2017, async/await simplifies asynchronous code even further by allowing you to write asynchronous code that looks like synchronous code\n\n```js\nconst fetchData = () =\u003e {\n  return new Promise((resolve, reject) =\u003e {\n    setTimeout(() =\u003e {\n      const data = \"Some fetched data\";\n      if (data) {\n        resolve(data);\n      } else {\n        reject(\"Error occurred\");\n      }\n    }, 2000);\n  });\n};\n\nconst fetchDataAsync = async () =\u003e {\n  try {\n    const data = await fetchData();\n    console.log(data);\n  } catch (error) {\n    console.error(error);\n  }\n};\n\nfetchDataAsync();\n```\n\n## Closures\n\n- Closures allow functions to retain access to variables from their parent scopes even after the parent function has finished executing.\n\n```js\nconst outerFunction = (outerParam) =\u003e {\n  const innerFunction = (innerParam) =\u003e {\n    console.log(outerParam + innerParam);\n  };\n\n  return innerFunction;\n};\n\nconst closure = outerFunction(10);\nclosure(5); // Output: 15\n```\n\n## Object Oriented Programming OOP ✨\n\n4 principle:\n\n- Abstraction\n- Encapsulation\n- Inheritance\n- Polymorphism\n\n## Prototypes\n\nThe `prototype` is a special hidden property object that is associated with every functions and objects by default in JavaScript.\n\nObjects in JavaScript are linked to a certain prototype, by means object can access that prototype method =\u003e `Prototypal inheritance`\n\n```js\nlet myArray = [11, 22, 33];\nconsole.log(myArray.at(0));\n//output: 11\n\n/** Array.prototype is the prototype of all array objects\n * behind its calling myArray.prototype.at(2)\n **/\n```\n\nOOP is an enormously popular paradigm for structuring out complex code\n\n- Easy to add features and functionality\n- Performant (efficient in term of memory)\n- Easy for us and other developers to reason about (a clear structure)\n\nObjects - store functions with their associated data!\n\n```javascript\nconst user1 = {\n  name: \"ullas\",\n  score: 2,\n\n  increment: function () {\n    user1.score++;\n  },\n};\n\nuser1.increment();\n```\n\nThis is the principal of encapsulation.\n\n\u003e Multiple way to create an object, just to get familier with few means of defining the object\n\n## Using empty object and then populate it with dot notation 🔰\n\nCreating user2 user 'dot notation'\n\n```Javascript\n\nconst user2 = {};\n\nuser2.name = 'ullas';\nuser2.score = 6;\nuser2.increment = function(){\n    user2.score++;\n};\n\n// Square bracket notation [] (never used except in one condition: evaluatng what goes in ex: user2[property] property: 'name')\n\n```\n\n- Using the built in js Object.create which will create empty object\n\n```Javascript\n\nconst user3 = Object.create(null);\n\nuser3.name = 'ullas';\nuser3.score = 7;\nuser3.increment = function(){\n    user3.score++;\n};\n\n```\n\n! _our code is getting repetitive, we are breaking our DRY principle_\n\n? **What if we have milion of user....?**\n\n## Champ =\u003e Functions 😁\n\nThey are helpfull in this case so we don't have to repeat the code. They are wrapping up the instructions... write once call as many time you want\n\n## Solution 1. Generate Object using a function\n\n```Javascript\nfunction userCreator(name, score){\n\n    const newUser = { };\n\n    newuser.name = name;\n    newuser.score = score;\n\n    newuser.increment = function(){\n        newuser.score++;\n    };\n\n    return newUser;\n};\n\nconst user1 = userCreator('ullas', 10)\nconst user2 = userCreator('kingsman', 10)\n\n\nuser2.increment()\n\n```\n\n\u003e ! this solution is doing its task but **fundamentally Unusable**\n\nReason:\n\n- In global memory\n\n  **Initially:**\n\n  ```js\n    global memory \u003e\n    - userCreator: -[f]-\n\n    - User1 ...undefined\n  ```\n\nuser1 = `userCreator('ullas' 10)`\n\nwhich create a new execuation context\n\n- In a local memory\n\n  ```js\n    local Memory \u003e\n    - name: 'ullas'\n    - score: 10\n\n    - newUser: {\n        name: 'ullas'\n        score: 10\n        increment: -[f]-\n    }\n  ```\n\n  returning =\u003e `newUser` object\n\n  - return out to **Gloabl Memory**\n\n- In global memory\n\n  ```js\n    global memory \u003e\n    - [function userCreator()]\n\n    - User1 : {\n        name: 'ullas'\n        score: 10\n        increment: -[f]-\n    }\n  ```\n\nSame with =\u003e **user2**, declaring user2\n\n- In global memory\n\n  ```js\n    global memory with \u003e\n    - [function userCreator()]\n\n    - user1 : {\n        name: 'ullas'\n        score: 10\n        increment: -[f]-\n    }\n    - user2: ...undefined\n  ```\n\nuser2 = `userCreator('kingsman' 10)`\n\nwhich create a new execuation context\n\n- In a local memory\n\n  ```js\n    local Memory with \u003e\n    - name: 'kingsman'\n    - score: 10\n\n    - newUser: {\n        name: 'kingsman'\n        score: 10\n        increment: -[f]-\n    }\n  ```\n\n  returning =\u003e `newUser` object\n\n  - return out to **Gloabl Memory**\n\n- In global memory\n\n  ```js\n    global memory with \u003e\n    - [function userCreator()]\n\n    - user1 : {\n        name: 'ullas'\n        score: 10\n        increment: -[f]-\n    }\n\n    - user2 : {\n        name: 'kingsman'\n        score: 10\n        increment: -[f]-\n    }\n  ```\n\nnext step was =\u003e **to increment**\n\n```js\nUser1.increment();\nUser2.increment();\n```\n\n## Problem\n\n\u003e Each time we create a new user we make space in our computer's memory for our data functions.\n\u003e But our functions are just copies\n\nIn Global memory:\n\n```js\n    global memory with \u003e\n    - [function userCreator()]\n\n    - user1 : {\n        name: 'ullas'\n        score: 10\n        increment: -[f]- // same copy\n    }\n\n    - user2 : {\n        name: 'kingsman'\n        score: 10\n        increment: -[f]- // same copy\n    }\n\n    - what if n number of user...\n```\n\n- Each object have brand new increment function defined on them...\n  We should be able attach multiple function on them not single function ex: login, logout, render etc...\n\nIs there a better way? to getting single copyies of them in `Global Memory`\n\n---\n\n## Solution 2 😮\n\n- Store the increment function in just one object and have the interpreter, if it doesn't find the function on user1, look up to that object to check if it's there\n\nHow to make this link ?\n\n## Prototype chain\n\nIn Global memory:\n\n```js\n    global memory with \u003e\n\n    userCreator : -[f]-\n\n    user1 : {\n        name: 'ullas'\n        score: 10\n        =\u003e functionStore\n    }\n\n    user2 : {\n        name: 'kingsman'\n        score: 10\n        =\u003e functionStore\n    }\n\n    function functionStore: {\n        increment: -[f]-\n    }\n\n    // =\u003e this bond is called prototypal bond : chain link to or go look functionStore\n    /**\n     * when user doesn't find increment it goes look in function store for increment()\n     */\n\n```\n\nThe Code Base\n\n```js\nfunction userCreator(name, score) {\n  const newUser = Object.create(functionStore);\n\n  newUser.name = name;\n  newUser.score = score;\n\n  return newUser;\n}\n\nconst functionStore = {\n  increment: function () {\n    this.score++;\n  },\n  Login: function () {\n    console.log(\"Your are loggedin\");\n  },\n};\n\nconst user1 = userCreator(\"ullas\", 10);\nconst user2 = userCreator(\"kingsman\", 10);\n\nuser1.increment();\n```\n\nIn the global memory\n\n**Initially:**\n\n```js\n  global memory \u003e\n\n  userCreator: -[f]-\n\n  functionStore: {\n      increment: -[f]-\n      login: -[f]-\n  }\n\n  User1 :undefined\n```\n\nuser1 = `userCreator('ullas' 10)`\n\nwhich create a new execuation context\n\n- In a local memory\n\n  - In thread of execution:\n\n  ```js\n  newUser: Object.create(functionStore)\n  =\u003e which return empty obj {}\n  ```\n\n  ```js\n    local Memory \u003e\n\n    - name: 'ullas'\n    - score: 10\n\n    - newUser: {\n        name: 'ullas'\n        score: 10\n\n        =\u003e [hidden property:\n        _prto_ which is bond to `functionStore` which we passed in Object.create(`functionStore`);\n        ]\n    }\n  ```\n\n  - **returning** =\u003e `newUser` object\n\n  - return out to **Gloabl Memory**\n\n  ```js\n    global memory \u003e\n\n    userCreator: -[f]-\n\n    functionStore: {\n        increment: -[f]-\n        login: -[f]-\n    }\n\n    User1 : {\n        name: 'ullas'\n        score: 10\n\n        =\u003e [hidden: bond _proto_ to `functionStore` for `Increment()`]\n    }\n  ```\n\nNow the `increment()`\n\n- This `increment()` function need to be usable on what ever object we run it on.\n\n- We need some placeholder inside of that function increment in order to refer to that object\n\nOr we need label thats always going to refer to that object on which we are running the function\n\n\u003e **this** Fundamental rule always pointing to the relevent object to the left-hand side of the dot on which we calling the function\n\nCreates a execuation Context\n\nIn a local memory\n\nIn the example above, `user1` is to “the left of the dot” which means the `this` keyword is referencing the `user1` object. So, it’s as if, inside the `increment` method, the JavaScript interpreter changes `this to user1`.\n\n```js\n// this =\u003e to user1\n\nthis.score++\n===\u003e user1.score++\n```\n\n- Do we have copies of increment() stored in user1 and user2 =\u003e `none`\n\n\u003e Super sophisticated but not standard\n\n## solution 3, new Keyword 🤩\n\nEmbracing the Magic of the `new` Keyword: No Hard Work, Just Automation! 🤩\n\nLet's witness this enchantment in action with a spellbinding code example:\n\n```js\nconst user1 = new userCreator(\"ullas\", 10);\n```\n\nWhen we call the constructor function with `new` keyword in front we automate 2 things\n\n- **Create** a new user object\n- **return** the new user object\n\n\u003e **Creating a New User Object**: By simply adding new before the function call, the `new` keyword conjures a brand-new user object into existence. No more manual labor required!\n\n\u003e **Returning the New User Object**: The `new` keyword, being the generous enchantress it is, automatically returns the newly created user object. We can catch it and cherish it as our very own.\n\nBut now we need to adjust how we write the body of userCreator\n\n- Refer to the auto-created object?\n- Known where to put our single copies of functions?\n\n## Interlude - functions are both objects and functions\n\nBefore we continue our journey, let's explore a mesmerizing fact about functions. In JavaScript, functions possess the remarkable ability to be both objects and functions simultaneously. Mind-bending, isn't it?\n\n```js\nfunction multiplyBy2(num){\n    return num*2\n}\n\nmultiplyBy2.stored = 5\nmultiplyBy2.(3) // 6\n\nmultiplyBy2.stored //5\nmultiplyBy2.prototype // ()\n\n```\n\nHere, we have the captivating `multiplyBy2` function. It gracefully showcases its object-like qualities by sporting a `stored` property with a value of 5. But wait, there's more! When invoked as a function, it magically multiplies the provided number by 2. In this case, `multiplyBy2(3)` gracefully yields 6.\n\nCuriously, we can access the `stored` property separately, giving us a surprising value of 5. Additionally, the enigmatic `multiplyBy2.prototype` property returns an empty parentheses pair (). Its true purpose will soon be revealed.\n\n- let's return to the enchanting world of the `UserCreator` constructor function.\n\nCode Base\n\n```js\nfunction UserCreator(name, score) {\n  this.name = name;\n  this.score = score;\n}\nUserCreator.prototype.increment = function () {\n  this.score++;\n};\nUserCreator.prototype.login = function () {\n  console.log(\"You are loggedin\");\n};\n\nconst user1 = new UserCreator(\"ullas\", 10);\nuser1.increment();\n```\n\nIn the global memory\n\n**Initially:**\n\n```js\n  global memory \u003e\n\n  userCreator() -[f]- //userCreator function version\n\n  userCreator: {\n      //userCreator object version\n      prototype: {\n          //functionStore\n          increment: -[f]-\n          login: -[f]-\n      }\n  }\n\n  User1 :undefined\n```\n\nuser1 = new `UserCreator('ullas' 10)`\n\nwhich create a new execuation context\n\nWithin the realm of `Local Memory`, secrets are revealed:\n\n- In a local memory\n\n  ```js\n    local Memory \u003e\n\n    - name: 'ullas'\n    - score: 10\n\n   // Due to the power of the `new` keyword, an empty object is created first.\n   // The `this` label binds to the functionStore using the hidden _proto_ reference.\n   // This becomes the object returned by `create()`.\n\n    this: {\n        name: 'ullas'\n        score: 10\n    }\n\n  ```\n\n  returning =\u003e `this` object to `user1`\n\n  - return out to **Gloabl Memory**\n\n  ```js\n    global memory \u003e\n\n    userCreator() -[f]- //userCreator function version\n\n    userCreator: {\n        //userCreator object version\n        prototype: {\n            //functionStore\n            increment: -[f]-\n            login: -[f]-\n        }\n    }\n\n    User1 : {\n        name: 'ullas'\n        score: 10\n       // Hidden _proto_ reference to userCreator.prototype, granting access to `increment()`\n    }\n  ```\n\nNow the `increment()`\n\n```js\nuser1.increment();\n```\n\nCreates a execuation Context\n\nIn a local memory\n\n```js\n// this =\u003e to user1\n\nthis.score++;\n// Translates to: user1.score++\n```\n\nBenefits\n\n- **Faster to Write**: The new keyword automates object creation and eliminates the need for manual object instantiation. We can summon objects into existence with a single line of code. Huzzah!\n\n- **Simplicity Reigns**: Our code becomes cleaner and more intuitive. We no longer need to explicitly return the object or worry about the intricate details of object creation. The new keyword takes care of it all. How delightful!\n\n- **Professional Practices**: Despite its magical powers, using the new keyword remains a widely accepted and professional practice. Embrace this technique to impress your peers and create code that shines like a star.\n\n## Solution 4, class 🙌\n\n## The class `Syntatic Sugar`\n\n```js\nclass userCreator {\n  constructor(name, score) {\n    this.name = name;\n    this.score = score;\n  }\n  increment() {\n    this.score++;\n  }\n  login() {\n    console.log(\"loggin\");\n  }\n}\nconst user1 = new UserCreator(\"ullas\", 10);\nuser1.increment();\n```\n\nIn the global memory\n\n**Initially:**\n\n```js\n  global memory \u003e\n\n  //class\n  [\n      userCreator() -[f]- //userCreator function version\n\n      userCreator: {\n          //userCreator object version\n          prototype: {\n              // =\u003efunctionStore\n              increment: -[f]-\n              login: -[f]-\n          }\n      }\n  ]\n\n  User1 :undefined\n```\n\nuser1 = new `UserCreator('ullas' 10)`\n\nwhich create a new execuation context\n\n- In a local memory\n\n  ```js\n    local Memory \u003e\n\n    - name: 'ullas'\n    - score: 10\n\n    // due to new it create an empty object first and 'this' label for reference bond to functionStore using _proto_\n    // this = object create() returning =\u003e { }\n\n    this: {\n        name: 'ullas'\n        score: 10\n    }\n\n  ```\n\n  returning =\u003e `this` object to `user1`\n\n  - return out to **Gloabl Memory**\n\n  ```js\n    global memory \u003e\n\n    userCreator() -[f]- //userCreator function version\n\n    userCreator: {\n        //userCreator object version\n        prototype: {\n            //functionStore\n            increment: -[f]-\n            login: -[f]-\n        }\n    }\n\n    User1 : {\n        name: 'ullas'\n        score: 10\n\n        // hidden _proto_ reference to userCreator.prototype =\u003e increment()\n    }\n  ```\n\n## Proxy Object\n\n- Proxy Objects:\n\n  - Proxy objects allow you to intercept and customize fundamental operations of target objects.\n\n- Creating a Proxy Object:\n\n  ```javascript\n  let proxy = new Proxy(target, handler);\n  ```\n\n  - `target`: The object to be proxied.\n  - `handler`: An object that defines trap methods for different operations on the proxy.\n\n- Trap Methods:\n\n  - Trap methods are functions defined in the handler object that intercept and handle specific operations on the proxy.\n\n- Proxy Handler:\n\n  - The handler object contains trap methods to customize object operations.\n  - Common trap methods include `get`, `set`, `apply`, `has`, `deleteProperty`, etc.\n\n- Example: Property Access (get trap):\n\n  ```javascript\n  let target = { name: \"luffy\" };\n  let handler = {\n    get: function (target, prop, receiver) {\n      console.log(`Accessed property: ${prop}`);\n      return target[prop];\n    },\n  };\n  let proxy = new Proxy(target, handler);\n\n  console.log(proxy.name); // Output: Accessed property: name, luffy\n  ```\n\n- Example: using `receiver` parameter in get trap\n\n  ```javascript\n  let target = { name: \"luffy\" };\n  let handler = {\n    get: function (target, prop, receiver) {\n      if (receiver === proxy) {\n        console.log(`Accessed property: ${prop}`);\n        console.log(\"Accessed through proxy object\");\n      } else if (receiver instanceof Proxy) {\n        console.log(`Accessed property: ${prop}`);\n        console.log(\"Accessed through an object inheriting from the proxy\");\n      } else {\n        console.log(`Accessed property: ${prop}`);\n        console.log(\"Accessed through a regular object\");\n      }\n      return target[prop];\n    },\n  };\n  let proxy = new Proxy(target, handler);\n\n  console.log(proxy.name); // Accessed property: name, Accessed through proxy object\n\n  let inheritingObject = Object.create(proxy);\n  console.log(inheritingObject.name); // Accessed property: name, Accessed through an object inheriting from the proxy\n\n  let regularObject = { name: \"zoro\" };\n  console.log(regularObject.name); // Accessed property: name, Accessed through a regular object\n  ```\n\n- Example: Property Assignment (set trap):\n\n  ```javascript\n  let target = { name: \"luffy\" };\n  let handler = {\n    set: function (target, prop, value, receiver) {\n      console.log(`Set property: ${prop} = ${value}`);\n      target[prop] = value;\n      return true;\n    },\n  };\n  let proxy = new Proxy(target, handler);\n\n  proxy.age = 19; // Output: Set property: age = 19\n  console.log(proxy.age); // Output: 19\n  ```\n\n- Example: Property Deletion (deleteProperty trap):\n\n  ```javascript\n  let target = { name: \"luffy\", age: 19 };\n  let handler = {\n    deleteProperty: function (target, prop) {\n      console.log(`Deleted property: ${prop}`);\n      delete target[prop];\n      return true;\n    },\n  };\n  let proxy = new Proxy(target, handler);\n\n  delete proxy.age; // Output: Deleted property: age\n  console.log(proxy.age); // Output: undefined\n  ```\n\n- Example: Prohibit Property Deletion (deleteProperty trap):\n\n  ```javascript\n  let target = { name: \"luffy\", age: 30 };\n\n  let handler = {\n    deleteProperty(target, prop) {\n      throw new Error(`Deleting property '${prop}' is prohibited.`);\n    },\n  };\n\n  let proxy = new Proxy(target, handler);\n\n  console.log(proxy.name); // Output: luffy\n\n  delete proxy.name; // Throws an error\n\n  console.log(proxy.name); // Output: luffy (property still exists)\n  ```\n\n- Example: Validation and Security:\n\n  ```javascript\n  let user = { name: \"luffy\", isAdmin: false };\n  let handler = {\n    get: function (target, prop) {\n      if (prop === \"isAdmin\") {\n        throw new Error(\"Unauthorized access\");\n      }\n      return target[prop];\n    },\n  };\n  let proxy = new Proxy(user, handler);\n\n  console.log(proxy.name); // Output: luffy\n  console.log(proxy.isAdmin); // Throws an error: Unauthorized access\n  ```\n\n- Example: Array Manipulation (apply trap):\n\n  ```javascript\n  let list = [1, 2, 3];\n  let handler = {\n    apply: function (target, thisArg, args) {\n      console.log(`Called with arguments: ${args}`);\n      return target.apply(thisArg, args);\n    },\n  };\n  let proxy = new Proxy(Array.prototype.push, handler);\n\n  proxy.call(list, 4, 5); // Output: Called with arguments: 4,5\n  console.log(list); // Output: [1, 2, 3, 4, 5]\n  ```\n\n- [ ] asd ","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fullaskunder3%2Fmaster-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fullaskunder3%2Fmaster-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fullaskunder3%2Fmaster-javascript/lists"}