DEV Community: Ankit Kumar

Understanding React Concurrency

Ankit Kumar — Mon, 29 May 2023 10:35:07 +0000

React v18.0 has broken ground by introducing a long-awaited feature: Concurrency! Concurrency refers to having more than one task in progress at once, and concurrent tasks can overlap depending on which is more urgent.

What is concurrency?

It is a way to structure a program by breaking it into pieces that can be executed independently. This is how we can break the limits of using a single thread, and make our application more efficient.

The basic premise of React concurrency is to re-work the rendering process such that while rendering the next view, the current view is kept responsive.

Concurrent Mode was a proposal the React team had to improve application performance. The idea was to break up the rendering process into interruptible units of work.

Under the hood, this would be implemented by wrapping component renders in a requestIdleCallback() call, keeping applications responsive during the rendering process.

So hypothetically, if Blocking Mode were implemented like this:



const renderBlocking = (Component) => {
    for (let Child of Component) {
        renderBlocking(Child);
    }
}

Then Concurrent Mode would be implemented like this:



const renderConcurrent = (Component) => {
    // Interrupt rendering process if state out-dated
    if (isCancelled) return;

    for (let Child of Component) {
        // Wait until browser isn't busy (no inputs to process)
        requestIdleCallback(() => renderConcurrent(Child));
    }
}

If you’re curious how React does this in reality, take a peek at the implementation of React’s scheduler package.
After initially using requestIdleCallback, React switched to requestAnimationFrame, and later to a user-space timer.

Good bye to (Concurrent) Mode, Only Features

The Concurrent Mode plan did not materialize for backward-compatibility reasons.

Instead, the React team pivoted to Concurrent Features, a set of new APIs selectively enabling concurrent rendering. So far, React has introduced two new hooks to opt into a concurrent render.

startTrnsition
useTransiiton
useDefferedValue

Lets now understand all of them with examples

startTransition

The startTransition hook introduced with React 18 helps us keep our app responsive without blocking your user interactions by allowing you to mark specific updates as transitions.

There are two categories of state updates in React:

Urgent updates: show direct interaction like clicking, typing, etc.
Transition updates: change UI views

React considers state updates wrapped in startTransition as non-urgent, so they can be suspended or interrupted by urgent updates.

For example, as a user, it would feel more natural to see the letters as you type in a search input field for filtering data, but as expected, the search result may take a while, and that’s OK.



 import { startTransition } from 'react';

// Urgent
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
   // Transition
   setSearchQuery(input);
})

useTransition

React can also track and update pending state transitions using the useTransition hook with an isPending flag. This lets you display loading feedback to your users, letting them know that work is happening in the background.

The useTransition hook returns two items:

Boolean flag isPending, which is true if a concurrent render is in progress
Function startTransition, which dispatches a new concurrent render

To use it, wrap setState calls in a startTransition callback.



const MyCounter = () => {
    const [isPending, startTransition] = useTransition();
    const [count, setCount] = useState(0);
    const increment = useCallback(() => {
        startTransition(() => {
            // Run this update concurrently
            setCount(count => count + 1);
        });
    }, []);

    return (
        <>
            <button onClick={increment}>Count {count}</button>
            <span>{isPending ? "Pending" : "Not Pending"}</span>
            // Component which benefits from concurrency
            <ManySlowComponents count={count} />
        </>
    )
}

Conceptually, state updates detect if they are wrapped in a startTransition to decide whether to schedule a blocking or concurrent render.



const startTransition = (stateUpdates) => {
  isInsideTransition = true;
  stateUpdates();
  isInsideTransition = false;
}

const setState = () => {
  if (isInsideTransition) {
    // Schedule concurrent render
  } else {
    // Schedule blocking render
  }
}

An important caveat of useTransition is that it cannot be used for controlled inputs. For those cases, it is best to use useDeferredValue.

useDeferredValue

The useDeferredValue hook is a convenient hook for cases where you do not have the opportunity to wrap the state update in startTransition but still wish to run the update concurrently.

useDefferedValue takes in a state value and a timeout in milliseconds and returns the deferred version of that state value. The timeout tells React how long it should delay the deferred value.

Conceptually, useDeferredValue is a debounce effect and can be implemented as such:



import { useState, useDeferredValue } from "react";

   const App = () => {
      const [input, setInput] = useState("");
      const deferredValue = useDeferredValue(text, { timeoutMs: 3000 }); 

      return (
        <div>
          <input value={input} onChange={handleChange} />
          <MyList text={deferredValue} />
        </div>
      );
 }

With what we have in the code snippet above, the input value will be displayed immediately when a user starts typing, but useDeferredValue will display a previous version of the MyList component for at most 3000 milliseconds.

Concurrent Features & Suspense

The useTransition and useDeferredValue hooks have a purpose beyond opting in concurrent rendering: they also wait for Suspense components to complete.

If you like this post, you can buy me a coffee.

Also, to be notified about my new articles and stories: Follow me on Medium.

Subscribe to my YouTube Channel for educational content on similar topics

Follow me on Hashnode and GitHub, for connecting quickly

You can find me on LinkedIn as it’s a professional network for people like me and you.

Cheers!!!!

Functional Programming Principles in JavaScript

Ankit Kumar — Thu, 25 May 2023 13:13:00 +0000

Before going to it’s principles, let first understand a bit about it.

What is Functional Programming

Functional programming is a paradigm which has its roots in mathematics, primarily stemming from lambda calculus.
Its main focus is on “what to solve” in contrast to an imperative style where the main focus is “how to solve”.
Functional programming aims to be declarative and treats applications as the result of pure functions which are composed with one another.

The primary aim of this style of programming is to avoid the problems that come with shared state, mutable data and side effects which are common place in object oriented programming.
Functional programming tends to be more predictable and easier to test than object oriented programming but can also seem dense and difficult to learn for new comers but functional programming isn’t as difficult as it would at first seem.

Why do we need Functional Programming?

There are a few major benefits to Functional Programming and minor drawbacks:

Advantages:

More readability, thus maintainability
Less buggy, especially in concurrent contexts
A new way of thinking about problem solving
(Personal bonus) Just great to learn about!

Drawbacks:

Can have performance issues
Less intuitive to work with when dealing with state and I/O
Unfamiliar for most people + math terminology that slows the learning process

Functional programming tends to be more predictable and easier to test than object oriented programming.

Principles

On broader level, there mainly 6 principles of Functional Programming

Purity
Immutability
Disciplined state
First class functions and high order functions
Type systems
Referential transparency

Lets see them in details below.

Purity

A Pure Function is a function (a block of code) that always returns the same result if the same arguments are passed.
It does not depend on any state or data change during a program’s execution. Rather, it only depends on its input arguments.
Also, a pure function does not produce any observable side effects such as network requests or data mutation, etc.
It has no side effects like modifying an argument or global variable or outputting something.
Pure functions are predictable and reliable. Most of all, they only calculate their result. The only result of calling a pure function is the return value.

Lets see an example below for calculating GST.

const calculateGST = (productPrice) => {
    return productPrice * 0.05;
}

The computation in square function depends on the inputs. No matter how many times we call a square function with the same input, it will always return the same output. Example below

const sqaureIt= (number) => {
    return number * number;
}

Immutability

Immutable data cannot change its structure or the data in it.
Once you assign a value to something, that value won’t change.

Immutability is at the core of functional programming. This eliminates side effects (anything outside of the local function scope), for instance, changing other variables outside the function.

Immutability helps to maintain state throughout the runtime of a program.
It makes code simple, testable, and able to run on distributed and multi-threaded systems
Since function has a disciplined state and does not change other variables outside of the function, we don’t need to look at the code outside the function definition.
Immutability comes into play frequently when we work with data structures. Many array methods in JavaScript directly modify the array.

For example, .pop() directly removes an item from the end of the array and .splice() allows you to take a section of an array.

// We are mutating myArr directly
const myArr = [1, 2, 3];
myArr.pop();
// [1, 2]

Instead, within the functional paradigm, we would copy the array and in that process remove the element we are looking to eliminate.

// We are copying the array without the last element and storing it to a variable
let myArr = [1, 2, 3];
let myNewArr = myArr.slice(0, 2);
// [1, 2]
console.log(myArr);

Disciplined state

Disciplined state is the opposite of shared, mutable state.
A shared mutable state is hard to keep correct since there are many functions that have direct access to this state. It is also hard to read and maintain.
With mutable state, we need to look up for all the functions that use shared variables, in order to understand the logic. - It’s hard to debug for the very same reason.
When we are coding with functional programming principles in mind, you avoid, as much as possible, having a shared mutable state.
Of course we can have state, but you should keep it local, which means inside our function. This is the state discipline : we use state, but in a very disciplined way.

An example of the drawbacks of shared, mutable state would be the following:

const logElements = (arr) => {
  while (arr.length > 0) {
    console.log(arr.shift());
  }
}

const main = () => {
  const arr = ['Node', 'React', 'Javascript', 'Typescript'];

  console.log('=== Before sorting ===');
  logElements(arr);

  arr.sort();

  console.log('=== After sorting ===');
  logElements(arr);
}

main();

// === Before sorting ===
// "Node"
// "React"
// "Javascript"
// "Typescript"

// === After sorting ===
// undefined

We can see that the second call produces no result since the first call emptied the input array and thus mutated the application state generating an unexpected output.

To fix this we turn to immutability and the use of copies to keep the initial state transparent and immutable.

const logElements = (arr) => {
  while (arr.length > 0) {
    console.log(arr.shift());
  }
}

const main = () => {
  const arr = ['Node', 'React', 'Javascript', 'Typescript'];

  console.log('=== Before sorting ===');
  logElements([...arr]); // Change in line

  const sorted = [...arr].sort(); // Assign sorted items to another variable

  console.log('=== After sorting ===');
  logElements([...sorted]); // Change in line
}

main();

// === Before sorting ===
// "Node"
// "React"
// "Javascript"
// "Typescript"

// === After sorting ===
// "Javascript"
// "Node"
// "React"
// "Typescript"

First class functions and high order functions

Higher order functions are functions which do at least one of the following:

Takes one or more functions as arguments
Returns a function as its result

Functional programming treats functions as first-class citizens.

This means that functions are able to be passed as arguments to other functions, returned as values from other functions, stored in data structures and assigned to variables.

const plusFive = (number) => {
  return number + 5;  
};

// f is assigned the value of plusFive
let f = plusFive;

plusFive(3); // 8

// Since f has a function value, it can be invoked. 

f(9); // 14

Higher order function is the function that takes one or more functions as arguments or returns a function as its result.

Type systems

By using types we leverage a compiler to help us avoid common mistakes and errors that can occur during the development process.

With JavaScript we could do the following:

const add = (left, right) => {
  return left + right;
}

add(2, 3) // 5
add(2, "3"); // "5"

This is bad because now we are getting an unexpected output which could have been caught by a compiler.

Let’s look at the same code written with Typescript:

const add = (left: number, right: number): number => {
  return left + right;
}

add(2, 3) // 5
add(2, "3"); // error!

Here we can see the compiler in action protecting us from such basic issues, of course much more is possible with a statically typed approach to developing but this should give you the gist of why it is useful to use.

Referential transparency

Referential transparency is a fancy way of saying that if you were to replace a function call with its return value, the behaviour of the programme would be as predictable as before.
Referentially transparent functions only rely on their inputs and thus are closely aligned with pure functions and the concept of immutability.
An expression is said to be referentially transparent if it can be replaced with its corresponding value without changing the program’s behaviour.
To achieve referential transparency, a function must be pure. This has benefits in terms of readability and speed. Compilers are often able to optimise code that exhibits referential transparency.

const two = () => {
  return 2;
}

const four = two() + two(); // 4
// or
const four = two() + 2; // 4
// or
const four = 2 + two(); // 4
// or
const four = 2 + 2; // 4

Conclusions

Functional programming gives us some principles which make our code more readable, predictable and testable.

This allows us to have code which contains less bugs, easier onboarding and a generally nicer codebase from my experience.

Also, to be notified about my new articles and stories: Follow me on Medium.

Subscribe to my YouTube Channel for educational content on similar topics

Follow me on Medium and GitHub for connecting quickly.

You can find me on LinkedIn as it’s a professional network for people like me and you.

Cheers!!!!

How to create custom Decorator for Circuit Breaker in Typescript/Javascript Applications

Ankit Kumar — Wed, 04 Jan 2023 07:53:34 +0000

To understand “How to create Decorators in Typescript for Circuit Breakers”, we need to understand

What are decorators in typescript?
What are circuit breakers in software systems?

Let's first read a bit about decorators

Decorators are a way to decorate functions, members of a class, or a class itself, with extra functionality.

When you apply a decorator to a function, a class, or a class member, you are actually calling a function that is going to receive details of what is being decorated, and the decorator implementation will then be able to transform the code dynamically, adding extra functionality, and reducing boilerplate code.

They are a way to have metaprogramming in TypeScript, which is a programming technique that enables the programmer to create code that uses other code from the application itself as data.

Let’s now see what are circuit breakers

A circuit breaker is an electrical safety device designed to protect an electrical circuit from damage caused by an overcurrent or short circuit. Its basic function is to interrupt current flow to protect equipment and to prevent the risk of fire. Unlike a fuse, which operates once and then must be replaced, a circuit breaker can be reset (either manually or automatically) to resume normal operation.

The basic idea behind the circuit breaker is very simple. You wrap a protected function call in a circuit breaker object, which monitors for failures. Once the failures reach a certain threshold, the circuit breaker trips, and all further calls to the circuit breaker return with an error, without the protected call being made at all. Usually, you’ll also want some kind of monitor alert if the circuit breaker trips.

Read full article

Marketing Yourself as a Job Candidate: Key points to Stand Out from the Crowd

Ankit Kumar — Wed, 27 Jul 2022 00:57:34 +0000

Job searching is more than just submitting your CV and waiting for a positive response.
In a competitive and vast Information Technology job market, it is vital that you stand out from the crowd. Having the needed skills and experience is not always enough to crack the interview. To be noticed by employers, effective self-marketing is key.
However, self-marketing for a job can be tricky, especially if you’re a fresh job seeker or a worker planning a mid-career switch. Being the former means you’re new to the job search game while the latter puts you out of touch with the latest job search trends.
If you are scratching your head on what to do, stop getting afraid of it because I am putting together some tips for marketing yourself effectively that will up your chances of landing that job you’ve been eyeing.
You are welcome !!
Read full article at
https://link.medium.com/ss8GRMLvZrb

How do you handle toxic environment at your work?

Ankit Kumar — Wed, 13 Jul 2022 13:58:55 +0000

What are Arrow functions?

Ankit Kumar — Sun, 13 Jun 2021 08:56:39 +0000

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations.
- Does not have its own bindings to this or super, and should not be used as methods.
- Does not have arguments, or new.target keywords.
- Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
- Can not be used as constructors.
- Can not use yield, within its body.
Arrow Functions are a new way of making functions in JavaScript.
Arrow Function has a cleaner syntax than a function expression
We omit the function keyword from traditional function in making arrow function

Examples of Arrow Functions

//ES5 Version
var getCurrentDate = function () {
 return new Date();
};

//ES6 Version
const getCurrentDate = () => new Date();

//ES5 Version
function greet(name) {
 return "Hello " + name + "!";
}

//ES6 Version
const greet = (name) => `Hello ${name}`;

Comparing traditional functions to arrow functions

// Traditional Function
function (a) {
 return a + 100;
}

// Arrow Function Break Down

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
 return a + 100;
}

// 2. Remove the body brackets and word "return" -- the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;

As shown in this code, the { brackets }, ( parentheses ) and "return" are optional, but may be required.
If you have multiple arguments or no arguments, you'll need to re-introduce parentheses around the arguments

// Traditional Function
function (a, b){
 return a + b + 100;
}

// Arrow Function
(a, b) => a + b + 100;

// Traditional Function (no arguments)

let a = 4;
let b = 2;
function (){
 return a + b + 100;
}

// Arrow Function (no arguments)
let a = 4;
let b = 2;
() => a + b + 100;

Arrow Functions do not magically guess what or when you want to "return".
If the body requires additional lines of processing, you'll need to re-introduce brackets PLUS the "return"

// Traditional Function
function (a, b){
 let chuck = 42;
 return a + b + chuck;
}
// Arrow Function
(a, b) => {
 let chuck = 42;
 return a + b + chuck;
}

For named functions, arrow expressions like variables are treated like variables

// Traditional Function
function bob (a){
 return a + 100;
}
// Arrow Function
let bob = a => a + 100;

const data = {
 result: 0,
 nums: [1, 2, 3, 4, 5],
 computeResult() {
   // "this" here refers to the "data" object
   const addAll = () => {
     // arrow functions "copies" the "this" value of the lexical enclosing function
     return this.nums.reduce((total, cur) => total + cur, 0)
   };
   this.result = addAll();
 }
};

Arrow functions don't have their own this value.
It captures or gets the this value of lexically enclosing function,
The function addAll() copies the this value of the computeResult() and if we declare an arrow function in the global scope the value of this would be the window object.

Also, to be notified about my new articles and stories:

Subscribe to my YouTube Channel

Follow me on Medium, Github, and Twitter.

You can find me on LinkedIn as well.

I am quite active on Dev Community as well and write small topics over there.

If you are Instagram person, follow me here

What's the difference between var, let and const keywords?

Ankit Kumar — Sat, 12 Jun 2021 13:03:00 +0000

JavaScript has three ways to declare variables.

var width = 100;
let height = 200;
const key = "Tech Talks";

var

The scope of a variable defined with the keyword “var” is limited to the “function” within which it is defined.
If it is defined outside any function, the scope of the variable is global.
var is function scoped

Block Example

{
 var a = 10;
 console.log(a);
} //block 1
{
 a++;
 console.log(a);
} //block 2

We are using the keyword var to define the variable a, the scope of a is limited to the function within which it is defined.
Since a is not defined within any function, the scope of the variable a is global, which means that a is recognized within block 2

Function Example

function fun1() {
 var a = 10;
 console.log(a);
} //function scope of fun1

function fun2() {
 a++;
 console.log(a);
} //function scope of fun2

Since we have enclosed fun1 and fun2, within separate functions, the scope of var a=10, is limited to fun1 and a is not recognized in fun2.

let:

The let keyword was introduced as part of ES6 syntax, as an alternative to var to define variables in Javascript.
The scope of a variable defined with the keyword let or const is limited to the block defined by curly braces i.e. {}
let is block scoped.

Block Example

Let us rewrite the code using the keyword let

{
 let a = 10;
 console.log(a);
} //block 1
{
 a++;
 console.log(a);
} //block 2

Since we are using let a=10, scope of a is limited to block 1 and a is not recognized in block 2

Function Example

function fun1() {
 let a = 10;
 console.log(a);
} //function scope of fun1

function fun2() {
 a++;
 console.log(a);
} //function scope of fun2

Since we have enclosed fun1 and fun2, within separate functions, the scope of let a=10, is limited to fun1 and "a" is not recognized in fun2.

const:

If a variable is defined with keyword const, it cannot be reassigned.
If a variable is defined using the const keyword, its scope is limited to the block scope
It is important to understand that const does NOT mean that the value is fixed and immutable.
It CAN be mutated.

Example

{
 const a = 10;
 console.log(a);
} //block 1
{
 a++;
 console.log(a);
} //block 2

Since we are using const a=10, scope of "a" is limited to block 1 and "a" is not recognized in block 2.
Example to show that the value of the variable defined within the const keyword is mutable, i.e. it can be changed

{
 const a = [1, 2, 3];
 const b = { name: "hello" };
 a.push(4, 5); //mutating the value of constant "a"
 b.name = "World"; //mutating the value of constant "b"

 console.log(a); //this will show [1,2,3,4,5]
 console.log(b); //this will show {name: "World"}
}

This code will run without any errors, and shows that we CAN mutate the values that are defined by "const"
Note that these variables defined by const cannot be re-assigned

{
 const name = "Tech Talks";
 const PI = 3.14;
 const a = [1, 2, 3];
 const b = { name: "Hello" };
 name = "Ankit Kumar"; //Throws an error, since we are attempting to re-assign "name” to a different value.
 PI = PI + 1; //Throws an error, since we are attempting to re-assign PI to a different value.
 a = [1, 2, 3, 4, 5]; //Throws an error, since we are attempting to re-assign "a" to a different value.
 b = { name: "Hello Ankit" }; //Throws an error, since we are attempting to re-assign "b" to a different value.
}

Summary

var:

function scoped
undefined when accessing a variable before it's declared

let:

block scoped
ReferenceError when accessing a variable before it's declared

const:

block scoped
ReferenceError when accessing a variable before it's declared
can't be reassigned

Also, to be notified about my new articles and stories:

Subscribe to my YouTube Channel

Follow me on Medium, Github, and Twitter.

You can find me on LinkedIn as well.

I am quite active on Dev Community as well and write small topics over there.

If you are Instagram person, follow me here

Welcome to the Tech Talks tutorial.

If you guys want to practice for JavaScript Interview on mock video interview, please drop me an email at admin@ankitkumar.dev

Questions

Question 1. What is JavaScript?
Question 2. What are the primitive types in JavaScript?
or
Explain the various JavaScript data types?
Question 3. What's the difference between undefined and null in JavaScript?
Question 4. What are the escape characters in JavaScript?
Question 5. What does the Logical AND (&&) operator do?
Question 6. What does the Logical OR (||) operator do?
Question 7. What is the fastest way to convert a string to a number?
Question 8. What are the different types of Error Name values in JavaScript?
Question 9. Please explain Self Invoking Function
Question 10. Explain difference between function declaration and function expression.
Question 11. What is the DOM?
Question 12. Please explain difference between attributes and property?
Question 13. What are cookies? How will you create, read, and delete a cookie using JavaScript?
Question 14. What is Event Propagation?
Question 15. What is Event Bubbling?
Question 16. What is Event Capturing?
Question 17. Explain difference between event.preventDefault() and event.stopPropagation() methods?
Question 18. How to know if the event.preventDefault() method was used in an element?
Question 19. What is Closure?
Question 20. How many ways can you create an array in JavaScript?
Question 21. How will you empty an array in JavaScript?

If you feel lazy to read more text, you can watch a video covering all questions here

YouTube:

1. What is JavaScript?

** High-level definition of JavaScript is:**

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.
JavaScript is the most popular web scripting language, used for both client-side and server-side development.
Supporting object-oriented programming abilities.
JavaScript code can be inserted into HTML pages that can be understood and executed by web browsers.

Top ↑

2. What are the primitive types in JavaScript?

The data types supported by JavaScript are:

String
Number
Boolean
Symbol
BigInt
Null
Undefined

Top ↑

3. What's the difference between undefined and null in JavaScript?

undefined is the default value of

a variable that has not been assigned a specific value.
a function that has no explicit return value. for example

console.log(12);

a property that does not exist in an object. The JavaScript engine does this for us the assigning undefined values.

  let _undefinedVar;
  const doNothing = () => {};
  const someObj = {
    ab : “Tech Talks”,
    bc : “With AK”,
    cd : “Subscribe, Link in Bio”,
  };
  console.log(_undefinedVar); // undefined
  console.log(doNothing()); // undefined
  console.log(someObj[“d”]); // undefined

null is

a value that represents no value.
value that has been explicitly defined to a variable.
Example we get a value of null when the fs.readFile method does not throw an error.

fs.readFile('path/to/file', (err,data) => {
     console.log(e); //prints null when no error occurred
     if(e){
       console.log(e);
     }
     console.log(data);
   }
);

comparing null and undefined

When comparing null and undefined we get true when using == and false when using ===.

console.log(null == undefined); // logs true
console.log(null === undefined); // logs false

Top ↑

4. What are the Escape Characters in JavaScript?

We use escape characters backslash (\) while working with special characters, such as ampersands (&), apostrophes (‘), double quotes (“ ”), and single quotes (‘ ’).
Whatever enclosed within the escape characters gets displayed by the JavaScript.
Six additional escape characters are also available in JavaScript:
- \b – Backspace
- \f – Form feed
- \n – Newline
- \r – Carriage return
- \t – Horizontal tabulator
- \v – Vertical tabulator
These aren’t in anyway executed in the HTML or JS code.
These were originally designed for controlling fax machines, teletypes, and typewriters.

Top ↑

5. What does the Logical AND operator do?

The && or Logical AND operator finds the first false expression in its operands and returns it.
If it does not find any false expression it returns the last expression.
It employs short-circuiting to prevent unnecessary work.

   console.log(false && 10 && []); // false
   console.log(" " && true && 10); // 10

Top ↑

6. What does the Logical OR operator do?

The || or Logical OR operator finds the first truthy expression in its operands and returns it.
This too employs short-circuiting to prevent unnecessary work.

console.log(null || 10 || undefined); //prints 10

function printChannelName(name) {
  var n = name || "Tech Talks With AK";
  console.log(n);
}

printChannelName(); //prints "Tech Talks With AK"

Top ↑

7. What is the fastest way to convert a string to a number?

According to MDN Documentation the Unary Plus (+) is the fastest way of converting a string to a number because it does not perform any operations on the value if it is already a number.

Top ↑

8. What are the different types of Error Name values in JavaScript?

There are 6 Error Name values in JavaScript.

Eval Error – Thrown when coming across an error in eval() (Newer JS releases don’t have it)
Range Error – Generated when a number outside the specified range is used
Reference Error – It comes into play when an undeclared variable is used.
Syntax Error – When the incorrect syntax is used, we get this error
Type Error – This error is thrown when a value outside the range of data types is tried to be used.
URI Error – Generated due to the use of illegal characters

Top ↑

9. Please explain Self Invoking Function.

Functions that are automatically invoked are termed as Self Invoking Functions.
These are also known as Immediately Invoked Function Expressions and Self Executing Anonymous Functions.
The general syntax of a Self Invoking Function is:

// A function is defined and then invoked
(function_name () {
    return ()
}) ();

However, if there is a need to automatically execute a function at the place where it is given and not be called again, then anonymous functions can be used. Such functions have no name. So the name.

Top ↑

10. Explain difference between function declaration and function expression.

function declaration and function expression can be differentiated on the basis of

Definition
Strict Mode
Time of Use
When to Use

Definition

A function declared as a separate statement in the main code flow is termed the function declaration.
When a function is created inside an expression or another syntax construct, it is called a function expression.

Strict Mode

When a function declaration is within a code block in the Strict mode, it is visible everywhere inside that block but not outside of it.
This isn’t the case for a function expression.

Time of Use

A function expression is created when the execution reaches it. The function expression is usable from that moment onwards.
A function declaration, on the other hand, can be called before the same is defined.

When to Use

Function declaration offers better readability and offers more freedom in organizing the code.
Function expressions are typically restricted to be used when there is a need for a conditional declaration.

Top ↑

11. What is the DOM?

DOM stands for Document Object Model is an interface (API) for HTML and XML documents.
When the browser first reads (parses) HTML document it creates a big object, a really big object based on the HTML document this is the DOM.
It is a tree-like structure that is modeled from the HTML document.
The DOM is used for interacting and modifying the DOM structure or specific Elements or Nodes.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document Object Model</title>
</head>
<body>
   <div>
    <p>
        <span></span>
    </p>
    <label></label>
    <input>   // other elements
   </div>
</body>
</html>

The graphical representation of the DOM of the code above looks like

The document object in JavaScript represents the DOM.

It provides us many methods that we can use to selecting elements to update element contents and many more.

JavaScript can change all the HTML elements in the page
JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page

Top ↑

12. Please explain difference between attributes and property?

JS DOM objects have properties that are like instance variables for particular elements.
A property can be of various data types.
Properties are accessible by interacting with the object in Vanilla JS or using jQuery’s prop() method.
Rather than in the DOM, attributes are in the HTML.
They are similar to properties but not as capable.
It’s recommended to work with properties rather than attributes if the former is available. Unlike a property, an attribute is of the string data type

Top ↑

13. What are cookies? How will you create, read, and delete a cookie using JavaScript?

A cookie is simply data, usually small, sent from a website and stored on the user’s computer by the web browser used to access the website.
It is a reliable way for websites to remember stateful information and record the user's browsing activity.

Creating a Cookie:

The most basic way of creating a cookie using JS is to assign a string value to the document.

document.cookie = “key1 = value1; key2 = value2; … ; keyN= valueN; expires = date”;

Reading a Cookie:

Reading a cookie using JS is as simple as creating.
Cookie object is the cookie, use this string whenever you wish to access the cookie.
The document.cookie string keeps a list of name = value pairs, where a semicolon separates each pair.
The name represents a cookie's name, and the value represents the respective cookie’s string value.
For breaking the string into key and value, you can use the split() method.

Deleting a Cookie:

Simply setting the expiration date (expires) to a time that’s already passed.
Some web browsers don’t let you delete a cookie unless you don’t specify the cookie's path.
Hence, defining the cookie path is important to ensure that the right cookie is deleted.assign a string value to the document.

Top ↑

14. What is Event Propagation?

When an event occurs on a DOM element, that event does not entirely occur on that just one element.
In the Bubbling Phase, the event bubbles up or it goes to its parent, to its grandparents, to its grandparent's parent until it reaches all the way to the window while in the Capturing Phase the event starts from the window down to the element that triggered the event or the event.target.
This process is called Event Propagation.
It has 3 phases.
- Capturing Phase – The event starts from the window then goes down to every element until it reaches the target element.
- Target Phase – The event has reached the target element.
- Bubbling Phase – The event bubbles up from the target element then goes up every element until it reaches the window.

Top ↑

15. What is Event Bubbling?

When an event occurs on a DOM element, that event does not entirely occur on that just one element.

In the Bubbling Phase, the event bubbles up or it goes to its parent, to its grandparents, to its grandparent's parent until it reaches all the way to the window.

If we have an example markup like this

<div class="grandparent">
    <div class="parent">
          <div class="child">1</div>
    </div>
</div>

And javascript code.

function addEvent(el, event, callback, isCapture = false) {
       if (!el || !event || !callback || typeof callback !== 'function') return;
       if (typeof el === 'string') {
        el = document.querySelector(el);
       }; 
       el.addEventListener(event, callback, isCapture);
}
addEvent(document, 'DOMContentLoaded', () => {

       const child = document.querySelector('.child');
       const parent = document.querySelector('.parent');
       const grandparent = document.querySelector('.grandparent');

     addEvent(child, 'click', function (e) {
    console.log('child');
       });
      addEvent(parent, 'click', function (e) {
    console.log('parent');
      });
     addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
     });
     addEvent(document, 'click', function (e) {
    console.log('document');
     });
     addEvent('html', 'click', function (e) {
    console.log('html');
     });
     addEvent(window, 'click', function (e) {
    console.log('window');
     });
});

The addEventListener() method has a third optional parameter useCapture with a default value of false the event will occur in the Bubbling phase.
If useCapture is true, the event will occur in the Capturing Phase.
If we click on the child element it logs child, parent, grandparent, html, document and window respectively on the console.
This whole event is Event Bubbling.

Top ↑

16. What is Event Capturing?

When an event occurs on a DOM element, that event does not entirely occur on that just one element.
In Capturing Phase, the event starts from the window all the way down to the element that triggered the event.

If we have an example markup like this

<div class="grandparent">
    <div class="parent">
          <div class="child">1</div>
    </div>
</div>

And javascript code is

function addEvent(el, event, callback, isCapture = false) {
     if (!el || !event || !callback || typeof callback !== 'function') return;
     if (typeof el === 'string') {
    el = document.querySelector(el);
     };
     el.addEventListener(event, callback, isCapture);
}
addEvent(document, 'DOMContentLoaded', () => {
     const child = document.querySelector('.child');
     const parent = document.querySelector('.parent');
     const grandparent = document.querySelector('.grandparent');

     addEvent(child, 'click', function (e) {
    console.log('child');
     }, true);
     addEvent(parent, 'click', function (e) {
    console.log('parent');
     }, true);
  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  }, true);

  addEvent(document, 'click', function (e) {
    console.log('document');
  }, true);

  addEvent('html', 'click', function (e) {
    console.log('html');
  }, true)

  addEvent(window, 'click', function (e) {
    console.log('window');
  }, true)

});

The addEventListener() method has a third optional parameter useCapture with a default value of false the event will occur in the Bubbling phase.
If useCapture is true, the event will occur in the Capturing Phase.
If we click on the child element it logs window, document, html, grandparent, parent and child respectively on the console.
This is Event Capturing

Top ↑

17. Explain difference between event.preventDefault() and event.stopPropagation() methods?

The event.preventDefault() method prevents the default behavior of an element.
If used in a form element it prevents it from submitting.
If used in an anchor element it prevents it from navigating.
If used in a context menu it prevents it from showing or displaying.
While the event.stopPropagation() method stops the propagation of an event.
It stops the event from occurring in the bubbling or capturing phase.

Top ↑

18. How to know if the event.preventDefault() method was used in an element?

We can use the event.defaultPrevented property in the event object.
It returns a boolean indicating if the event.preventDefault() was called in a particular element.

Top ↑

19. What is Closure?

Closures are created whenever a variable, defined outside the current scope, is accessed from within some inner scope.
It gives us access to an outer function’s scope from an inner function.
In other words, a closure is a locally declared variable that is related to a function and stays in the memory when the related function has returned.
The closure contains all local variables that were in-scope at the time of the closure creation.
In JavaScript, closures are created every time a function is created.
To use a closure, simply define a function inside another function and expose it.

Let's look at an example

Without Closure

function greet(message) {
  console.log(message);
}
function greeter(name, number) {
  return name + " says Hey!! He has " + age + " subscribers";
}
var message = greeter("Tech Talks", 1026);
greet(message);

With Closure

function greeter(name, age) {
  var message = name + " says Hey!! He has " + age + " subscribers";
  return function greet() {
    console.log(message);
  };
}
// Generate the closure
var TechTalksGreeter = greeter("Tech Talks", 1026);
// Use the closure
TechTalksGreeter();

Top ↑

20. How many ways can you create an array in JavaScript?

There are three different ways of creating an array in JavaScript, namely:

By creating an instance of an array:

var someArray = new Array();

By array constructor:

var someArray = new Array(‘value1’, ‘value2’,…, ‘valueN’)

By using an array literal:

var someArray = [value1, value2,…., valueN];

Top ↑

21. How will you empty an array in JavaScript?

There are four ways to empty an array in JavaScript

By assigning an empty array:

var array1 = [1, 22, 24, 46];
array1 = [ ];

By assigning array length to 0:

var array1 = [1, 22, 24, 46];
array1.length=0;

By popping the elements of the array:

var array1 = [1, 22, 24, 46];
while(array1.length > 0) {
array1.pop();
}

By using the splice array function:

var array1 = [1, 22, 24, 46];
array1.splice(0, array1.length)

Top ↑

Originally posted on AnkitKumar.Dev

If you guys want to practice for JavaScript Interview on mock video interview, please drop me an email at admin@ankitkumar.dev

Why Flutter loves Dart

Ankit Kumar — Wed, 20 Jan 2021 05:39:04 +0000

Dart is a simple and powerful language, which is, in its nature, complies to be efficient with everybody’s own javascript.

What Is Dart?
Why Flutter uses Dart?
How Dart enables developers to develop a Flutter app quickly and deploy it to multiple platforms?
Dart SDK - Libraries, Tools, Dart VM, Dart Compiler to JS

What is Dart?

Dart is a

client-optimized programming language for fast apps on any platform,
After lots of experiments, the Google team found dart to be faster, smoother, and pretty efficient to be used for developing applications, including client-side and also server-side applications
Object oriented & Class defined
C Styled syntax

What makes Dart so versatile?

What makes Dart so versatile is the fact that it compiles to its own format but also trans-compiles into javascript, which is readable by most of the devices today.

So Dart can be used cross-platform mobile applications, web applications using Angular Dart, and command-line applications or server-side applications

If you feel lazy to read more text, you can watch a video on the topic below

YouTube:

Why Dart? / Why Flutter uses Dart? / Why Flutter loves Dart?

In today's world, you need to build from many platforms to reach all your users, while maintaining quality to keep them happy.
Flutter enables you to ship an application for Android, iOS,
and the web from a single codebase. To do this, Flutter needs a programming language that works on all these platforms and gives you a fast development experience.

That's why Flutter chose Dart.

How Dart enables developers to develop a Flutter app quickly and deploy it to multiple platforms?

If you're developing for mobile, you might be used to slow compile and debug cycles.

Dart changes this by enabling one of Flutter's most loved features, hot reload, which injects updated Dart source code into your running app and rebuilds your UI in less than a second, so you can see your changes instantly.

To have high-quality experiences of apps on both platforms, traditionally, you might have worked in separate teams to build performant apps for each platform. Dart enables you to build high fidelity Flutter apps for all platforms with one team.

Dart's production quality compilers compile to ARM and x64 machine code for mobile or optimized JavaScript for the web, enabling quick app startup times and smooth animations.

Finally, Dart is easy to learn.

You'll pick up Dart quickly if you're familiar with languages such as Java, Swift, and JavaScript.

Together, Dart and Flutter help you create amazing experiences across Android, iOS, and the web.

Try Dart in your browser today at dart.dev.

Dart is not just a programming language

Dart holds much more than that, It includes

Libraries
Tools
A standalone Dart VM
Compilers to JS

One does not need anything extra to support it, it includes all in one in its SDK.

Dart VM allows code to run in CLI env as language tools included in the Dart SDK are written mostly in Dart itself.

The standalone Dart VM is the critical part of Dart SDK.

If you feel lazy to read more text, you can watch a video on the topic below

YouTube:

Libraries

Dart Ships with the complete standard libraries, allowing developers to write fully functional system apps such as custom web servers, custom mobile apps.

Some of the default libraries provided by Dart are, but other third-party libraries are available too.

dart:core

Provides a small but critical set of built-in complete functionality to dart
Built-in types, collections, and other core functionality.
This library is automatically imported into every Dart program.

dart:async

Support for asynchronous programming with callbacks
Dart also provides other options for asynchronous programming by the support of classes such as Future and Stream.

dart:math

Provides common mathematical and trigonometry functionality within darts such as sine and cosine
Mathematical constants and functions, plus a random number generator.
Most of the functionality in the math library is implemented as a top-level function.

dart:convert

Encoders and decoders for converting between different data representations, including JSON and UTF-8.
As well as support for additional customized converters

dart:html

DOM and other APIs for browser-based apps.
Allows manipulation of OBJECT and DOM
Give access to HTML5 APIs.

dart:io

I/O for programs that can use the Dart VM, including Flutter apps, servers, and command-line scripts.
Provides the support to deal with files, directories, processes, sockets and WebSockets and HTTP Clients and Servers

dart:ui

Exposes the lowest-level services that Flutter use to bootstrap the application
Such as classes for driving the input, graphic text, layouts, and rendering subsystems.

Tools

Dart SDK

Dart SDK is a necessity for web developers, Script developers as well as Server-Side Developers.
For Mobile Developers dart comes as a package within Flutter SDK.
It means setting up Flutter SDK is good enough to start with Dart for Mobile Development.

IDEs and Code Editor

Android Studio, VS Code, and IntelliJ idea - officially supported
Atom, Vim, and Emacs are not supported officially by the Dart team but open-source plugins are available

Dart Pad

Online dart compiler which allows us to play around with dart without installing any dependency,
The link is in the description below, so please go ahead and check it out.

CLI Tools - There are also certain command-line tools in DART

1. Pub Package Manager

A package manager that makes it easy for you to install, use, and share Dart libraries, command-line tools, and other assets.

2. Dartanalyzer

A static analyzer that evaluates and reports any errors or warnings in your code.
The Dart plugin for your IDE should make use of Dart’s analysis engine, but you can also run the analyzer from the command line.

3. Dartdoc

A documentation generator.

4. Dartfmt

An opinionated code formater that follows the recommendations of the Dart style guide
IDEs that support Dart generally allow you to format the code within the IDE.
Or you can run the formater from the command line.

5. Build Runner

A building package that’s used behind-the-scenes by the web dev command.

6. Dartfix

A tool for migrating Dart source code and fixing common issues.

Debugging Tools

1. Dart DevTools

A suite of debugging and performance tools.

Dart VM

To run command-line apps, such as server-side scripts, programs, and servers, Dart VM borrows many Ideas from JavaScript VM used by Chrome called V8. But browsers actively rejected it, the reasons being size and concern similar to Javascript VM.

It is important to know that DART VM works in the background during the process of application building.

It runs in 2 basics forms

JIT

Which is an acronym for Just In Time.
It is a mode that is used for dynamically loading dart source, parsing it, and compiling it to native machine code on the fly to execute this.
This mode is used when you develop your app
It provides features such as debugging, hot reload, etc

AOT

Which is an acronym for Ahead Of Time
It is the mode used to support loading and executing pre-compiled machine code
It does not support dynamic loading, parsing, or compilation
It is mainly used in deployed applications.

Dart VM is included in Dart SDK itself

It also includes observatory options like enable assert which is an assert statement that checks a boolean condition and raises an exception if the condition is false.

An important point to note about dart VM is that it can not be used for mobile applications or web applications

Compiler to JavaScript

Dart code is compiled into javascript using DART2JS or DARTDEVC compiler which are already included in DART

dart2js - User can compiled dart file by converting into javascript file
dartdevc - let you run and debug your web app in any modern browser
And it is for in development by dart
Note that the DartDevC compiler is only for the development
And dart2js is used only for deployment

Originally posted on AnkitKumar.Dev

Top Flutter Advantages and Why You Should Try Flutter on Your Next Project

Ankit Kumar — Wed, 06 Jan 2021 06:53:14 +0000

Flutter is Google’s UI toolkit for building beautiful, native applications from a single codebase for

Mobile - Android and iOS
Desktop - macOS, Chromebook, Windows, and Linux
Web

What Is Flutter?
More than 15 points of Why to use Flutter

What is Flutter?

It belongs to the category of cross-platform development frameworks and tools that allows developers to build and compile native apps for

Android and iOS mobiles,
Desktops including macOS, Chromebook, Windows, and Linux machines
Web

All of this happens from a single code base.

So we can say that Flutter is a Write once and run anywhere framework for developers.

If you feel lazy to read more text, you can watch a video on the topic below

YouTube:

Why Flutter? Let's understand it with more than 15 points

1. Integration of Flutter with existing Android and iOS apps

It’s sometimes not practical to rewrite your entire application in Flutter all at once. For those situations, Flutter can be integrated into your existing application piecemeal, as a library or module. That module can then be imported into your Android or iOS (currently supported platforms) app to render a part of your app’s UI in Flutter. Or, just to run shared Dart logic.

2. Flutter can be developed on multiple IDEs

Including the Android Studio which is backed by JetBrains which build the worlds’ best IDE such as IntelliJ, WebStorm, PyCharm, and many more.
It works perfectly on the VS Code, and those who are not coming from Android Native development, can use the VS Code as the IDE.

3. Flutter has whole suites of web-based tooling of debugging and inspecting Flutter applications

Here are some of the things you can do with DevTools:

Inspect the UI layout and state of a Flutter app.
Diagnose UI jank performance issues in a Flutter app.
CPU profiling for a Flutter or Dart app.
Network profiling for a Flutter app.
Source-level debugging of a Flutter or Dart app.
Debug memory issues in a Flutter or Dart command-line app.
View general log and diagnostics information about a running Flutter or Dart command-line app.
Analyze code and app size.

4. Dart is the programming language for Flutter

Because it is optimized for Client development with HOT RELOAD, powered by the DART VM so that developers can iteratively make changes and instantly see changes or results in the app.

5. Dart compiles to native machine code for mobile and desktop, as well as to JavaScript for the web

Whether you’re creating a mobile app, web app, command-line script, or server-side app, there’s a Dart solution for that.

Flexible compiler technology lets you run Dart code in different ways, depending on your target platform and goals:

Dart Native: For programs targeting devices (mobile, desktop, server, and more), Dart Native includes both a Dart VM with JIT (just-in-time) compilation and an AOT (ahead-of-time) compiler for producing machine code.
Dart Web: For programs targeting the web, Dart Web includes both a development time compiler (dartdevc) and a production time compiler (dart2js).

6. Dart and Flutter has conditional UI features that help developers to render UI based on conditions

A flutter package that enhances conditional rendering supports if-else and switch conditions

if-else example

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Conditional.single(
          context: context,
          conditionBuilder: (BuildContext context) => someCondition == true,
          widgetBuilder: (BuildContext context) => Text('The condition is true!'),
          fallbackBuilder: (BuildContext context) => Text('The condition is false!'),
        ),
      ],
    );
  }
}

switch example

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ConditionalSwitch.single<String>(
          context: context,
          valueBuilder: (BuildContext context) => 'A',
          caseBuilders: {
            'A': (BuildContext context) => Text('The value is A!'),
            'B': (BuildContext context) => Text('The value is B!'),
          },
          fallbackBuilder: (BuildContext context) => Text('None of the cases matched!'),
        ),
      ],
    );
  }
}

7. Compiled code of Flutter is faster than others and it increases performance by 15% for many cases

Flutter is fast. It's powered by the same hardware-accelerated 2D graphics library that underpins Chrome and Android: Skia.

Flutter is architectured to support glitch-free, jank-free graphics at the native speed of your device.

Flutter code is powered by the world-class Dart platform, which enables compilation to 32-bit and 64-bit ARM machine code for iOS and Android, as well as JavaScript for the web and Intel x64 for desktop devices.

8. Flutter is an open-source product

Open Source Community is the major source of feedback, documentation, and code contributions.

Flutter on Github

9. Fastest growing skill among software engineers

And Linked data says that Flutter is the fastest-growing skill among software engineers.

Getting error during saving or publishing new article on Dev.to

Ankit Kumar — Wed, 06 Jan 2021 02:31:07 +0000

Looking for help in publishing my bew article on dev.to.

Cover image is contains the error message what I am getting when trying to publish or save draft.

Error text is

Whoops, something went wrong:

base: undefined method 'any?' for #String:Ox00007f4bfbabc6f8

DEV Community: Ankit Kumar

Understanding React Concurrency

What is concurrency?

Good bye to (Concurrent) Mode, Only Features

startTransition

useTransition

useDeferredValue

Concurrent Features & Suspense

Functional Programming Principles in JavaScript

What is Functional Programming

Why do we need Functional Programming?

Principles

Purity

Immutability

Disciplined state

First class functions and high order functions

Type systems

Referential transparency

Conclusions

How to create custom Decorator for Circuit Breaker in Typescript/Javascript Applications

Let's first read a bit about decorators

Let’s now see what are circuit breakers

Marketing Yourself as a Job Candidate: Key points to Stand Out from the Crowd

How do you handle toxic environment at your work?

What are Arrow functions?

Examples of Arrow Functions

Comparing traditional functions to arrow functions

What's the difference between var, let and const keywords?

JavaScript has three ways to declare variables.

var

let:

const:

Summary

var:

let:

const:

Top 100 JavaScript Interview Questions and Answers - Part 2

Questions

22. How to remove duplicates from an array?

23. How to check if a value is an Array?

24. Implement the Array.prototype.map() method.

25. Implement the Array.prototype.filter() method.

26. Implement the Array.prototype.reduce() method.

27. What is a name function in JavaScript?

28. Can you assign an anonymous function to a variable and pass it as an argument to another function?

29. What is the arguments object?

30. Can you convert arguments object into an array?

31. Does arguments object work on ES6 arrow functions?

32. How to create an object without a prototype?

33. What are the scopes of a variable in JavaScript?

34. What is the purpose of this in JavaScript?

35. What is Callback in JavaScript?

36. How does typeOf Operator work?

37. Explain equality in JavaScript.

38. What is the difference between == and ===?

39. What is ECMAScript?

40. What are the new features in ES6 or ECMAScript 2015?

41. What does use strict do?

Further Reading

Top 100 JavaScript Interview Questions and Answers - Part 1

Questions

1. What is JavaScript?

2. What are the primitive types in JavaScript?

3. What's the difference between undefined and null in JavaScript?

4. What are the Escape Characters in JavaScript?

5. What does the Logical AND operator do?

6. What does the Logical OR operator do?

7. What is the fastest way to convert a string to a number?

8. What are the different types of Error Name values in JavaScript?

9. Please explain Self Invoking Function.

10. Explain difference between function declaration and function expression.

11. What is the DOM?

12. Please explain difference between attributes and property?

13. What are cookies? How will you create, read, and delete a cookie using JavaScript?

14. What is Event Propagation?

15. What is Event Bubbling?

16. What is Event Capturing?

17. Explain difference between event.preventDefault() and event.stopPropagation() methods?

18. How to know if the event.preventDefault() method was used in an element?

19. What is Closure?