{"id":18352293,"url":"https://github.com/devstack06/javascript-resources","last_synced_at":"2025-04-10T00:38:10.932Z","repository":{"id":113698018,"uuid":"448329565","full_name":"DevStack06/javascript-resources","owner":"DevStack06","description":null,"archived":false,"fork":false,"pushed_at":"2022-01-17T17:10:18.000Z","size":7,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T00:38:08.194Z","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/DevStack06.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":"2022-01-15T16:24:05.000Z","updated_at":"2022-01-15T18:16:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"d5b517be-70e2-41d3-bfb2-084c75c9086d","html_url":"https://github.com/DevStack06/javascript-resources","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/DevStack06%2Fjavascript-resources","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevStack06%2Fjavascript-resources/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevStack06%2Fjavascript-resources/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevStack06%2Fjavascript-resources/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevStack06","download_url":"https://codeload.github.com/DevStack06/javascript-resources/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248138008,"owners_count":21053775,"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-05T21:35:33.578Z","updated_at":"2025-04-10T00:38:10.910Z","avatar_url":"https://github.com/DevStack06.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg height=\"60\" src=\"https://img.icons8.com/color/344/javascript.png\"\u003e\n  \u003ch1\u003eJavaScript Concepts\u003c/h1\u003e\n\n## Here I am trying to create the notes related to javascript concepts. Feel free to add more concepts.\n\n#### All the points are taken from the online resources ( Ex - GeeksForGeek, FreeCodeCamp, W3School, StackOverflow)\n\n\u003c/div\u003e\n\n##### 1. What is `Execution Context` in javascript?\n\n##### \u003cb\u003e Everything in Javascript happens inside the Execution context.\u003c/b \u003e\n\nWhenever we run a javascript programme a global Execution context will be created. Execution context consist two part `Memory allocation` and `Code execution`. In Memory allocation part all the variable and function get a memory allocated.\n\n\u003cp\u003eSuppose Let's take example of below code:\u003c/p\u003e\n\n```javascript\nvar firstName = \"Balram\";\nvar lastName = \"Rathore\";\ngetFullName(fName,lName){\nreturn fName + \" \" + lName;\n}\nvar fullName = getFullName(firstName,lastName);\n```\n\n##### 2. What is `call` method?\n\nWith the `call()` method, we can write a method that can be used on different objects. See the below example -\n\n\u003e const fullNameMsg = logFullName.call(this, args1, args2,args3);\n\u003e\n\u003e function logFullName(this, args1,args2,args3){}\n\n- Example 1 without arguments\n\n```javascript\nfunction logFullName() {\n  console.log(`My name is ${this.fName} ${this.lName}`);\n}\n\nconst fullName = {\n  fName: \"Dev\",\n  lName: \"Stack\",\n};\n\n// const fullNameMsg = logFullName.call(this, args1, args2); (here this is the fullName)\nconst fullNameMsg = logFullName.call(fullName);\n// It will console log My name is Dev Stack\n```\n\n- Example 2 with extra arguments\n\n```javascript\nconst person = {\n  fullName: function (location) {\n    console.log(`My name is ${this.fName} ${this.lName} from ${location}`);\n  },\n};\nconst person1 = {\n  fName: \"Dev\",\n  lName: \"Stack\",\n};\n\nperson.fullName.call(person1, \"India\");\n// This will return \"Dev Stack from India\":\n```\n\n##### 3. What is `apply` method?\n\n`apply` method have same uses like `call`, the difference b/w `call` and `apply` is the way we pass arguments.\n\n\u003e const fullNameMsg = logFullName.apply(this, args1, args2,args3);\n\u003e\n\u003e function logFullName(this, [args1,args2,args3]){}\n\n- Ex with arguments\n\n```javascript\nconst person = {\n  fullName: function (city, country) {\n    console.log(\n      `My name is ${this.fName} ${this.lName} from ${city} ,${country}`\n    );\n  },\n};\nconst person1 = {\n  fName: \"Dev\",\n  lName: \"Stack\",\n};\n\nperson.fullName.apply(person1, [\"XYZ\", \"India\"]);\n// It will log `My name is Dev Stack from XYZ ,India`\n```\n\n##### 4. What is `bind` method?\n\n`Bind` creates a new function that will force the `this` inside the function to be the parameter passed to bind().\n\nHere's an example that shows how to use `bind` to pass a member method around that has the correct `this`:\n\n```javascript\nvar myButton = {\n  content: \"OK\",\n  click() {\n    console.log(this.content + \" clicked\");\n  },\n};\n\nmyButton.click();\n// log `OK clicked`\nvar looseClick = myButton.click;\nlooseClick(); // not bound, 'this' is not myButton - it is the globalThis\n// log `undefined clicked`\n\nvar boundClick = myButton.click.bind(myButton);\nboundClick(); // bound, 'this' is myButton\n// log `Ok clicked`\n```\n\n##### 5. What is `Currying`?\n\n##### 6. How `this` keyword work in javascript?\n\nIn JavaScript, the `this` keyword allows us to:\n\n- Reuse functions in different execution contexts. It means, a function once defined can be invoked for different objects using the this keyword.\n- Identifying the object in the current execution context when we invoke a method.\n\nDifferent way to use the `this` keyword -\n\n1. Let's understand implicit binding of `this` keyword with help of code\n\n```javascript\nconst introduction = {\n  fName: \"Balram\",\n  lName: \"Rathore\",\n  logFullName: function () {\n    console.log(`My full name is ${this.fName} ${this.lName}.`);\n  },\n};\n\nintroduction.logFullName();\n// It will log My full name is Balram Rathore.\n```\n\nHere `this` is bound with the introduction object. Similarly if we take a complex example with below code.\n\n```javascript\nconst addLogFullName = (object) =\u003e {\n  object.logFullName = function () {\n    console.log(`My full name is ${this.fName} ${this.lName}.`);\n  };\n};\nconst intro1 = {\n  fName: \"Balram\",\n  lName: \"Rathore\",\n};\nconst intro2 = {\n  fName: \"Dev\",\n  lName: \"Stack\",\n};\naddLogFullName(intro1);\naddLogFullName(intro2);\nintro1.logFullName();\n// It will log `My full name is Balram Rathore`.\nintro2.logFullName();\n// It will log `My full name is Dev Stack`.\n```\n\n2. Let's understand explicit binding of `this` keyword with help of code\n\n##### 7. What is `debouncing`?\n\n\u003cp\u003eDebouncing is a programming practice used to ensure that time-consuming tasks do not fire so often, that it stalls the performance of the web page. In other words, it limits the rate at which a function gets invoked.\u003c/p\u003e\n\nEx-\n\n```javascript\nconst debouncing = (fn, delay) =\u003e {\n  let debounceTimer;\n  return () =\u003e {\n    const context = this;\n    const args = arguments;\n    ClearTimeOut(debounceTimer);\n    debounceTimer = setTimeout(() =\u003e {\n      fn.apply(context, args);\n    }, delay);\n  };\n};\n\ndebouncing(() =\u003e {\n  console.log(\"do somethiung\");\n}, 300);\n```\n\n##### 8. What is `Generator`?\n\n##### 9. What is `Throttling`?\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevstack06%2Fjavascript-resources","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevstack06%2Fjavascript-resources","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevstack06%2Fjavascript-resources/lists"}