Biswa's Devlog

JS Handbook

Biswaranjan Rout's photo
Biswaranjan Rout
·

5 min read

Q. When should you use Arrow functions in JavaScript? What is the `this ?

Apart from being cleaner to read, arrow functions help in avoiding bugs related to the 'this' within callbacks, it because easier for a programmer to predict the value of this.

In simpler terms, when you use a formal function, this points to the context where the function is called. In case of an arrow function, this points to the context where the function was declared.

In JavaScript, the value of this depends upon the context where the function was actually called and not where it is defined. You can force a specific value for this using call, apply or bind. Once you’ve passed a method as a callback, you have no idea how it will be called, and thus no idea what this will be.

Here are some rules:

  • If the new keyword is used when calling the function, this inside the function is a brand new object.
  • If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument.
  • If a function is called as a method, such as obj.method() — this is the object that the function is a property of.
  • If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode ('use strict'), this will be undefined instead of the global object.
  • If multiple of the above rules apply, the rule that is higher wins and will set the this value.
  • If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.

Q. Write a debounce function?

const debounce = (func, wait) => {
  // TODO: Your code here
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func(...args);
    }, wait);
  }
}

const greet = (country) => {
  console.log(`Welcome to ${country}!`);
}

const debouncedGreet = debounce(greet, 2000);
debouncedGreet("Taiwan (1)");
debouncedGreet("Vietnam (2)");
debouncedGreet("India (3)");
debouncedGreet("Singapore (4)");

Search bar de-bounce example

Describe the difference between <script>, <script async> and <script defer>

<script> - HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.

<script async> - The script will be fetched in parallel to HTML parsing and executed as soon as it is available (potentially before HTML parsing completes). Use async when the script is independent of any other scripts on the page, for example, analytics.

<script defer> - The script will be fetched in parallel to HTML parsing and executed when the page has finished parsing. If there are multiple of them, each deferred script is executed in the order they were encoun­tered in the document. If a script relies on a fully-parsed DOM, the defer attribute will be useful in ensuring that the HTML is fully parsed before executing. There's not much difference in putting a normal <script> at the end of <body>. A deferred script must not contain document.write. Note: The async and defer attrib­utes are ignored for scripts that have no src attribute.