33 JavaScript Concepts Every Developer Should Know 🤓️💯️

Reference :

33-js-concepts by Leonardo Maldonado on Github

1. Call stack, Heap, Queue, Execution Context, Event Loop

Execution Context
- Where Execution of code takes place
- it has 2 components
  - Memory : where variables and functions are stored as key:value pair
  - Code : where execution of code happens
Call Stack
- Data structure for recording function calls
- Max calls in chrome is 16,000 frames
Heap
- Memory allocation to variables and objects happens in Queue
Queue
- All the callback functions are stored here
Event Loop
- Continuously monitors Call stack and Queue,
- If call stack becomes empty, it push the callback fn from Queue to call stack

2. Data Types

Primitive types

Stored in Stack memory, has fast access time & less storage
- string : "hello"
- number : 12, 3.1415
- boolean : true, false
- undefined
- null
Reference/Non primitive types

Stored in Heap memory, has low access time but more storage
- Objects : const person = { name: "vikas", age: 22 } ;
  - Array : let arr = [1, 2, 3, 4] ;

Variables

let : scope within current execution context i.e block and sub block have different scope

let x = 1;

if (x === 1) {
  let x = 2;

  console.log(x); // 2
}

console.log(x); // 1

var : scope within the function i.e, within entire enclosing function

var x = 1;

function foo() {
  var y = 2;

  console.log(x); // 1 (function `foo` closes over `x`)
  console.log(y); // 2 (`y` is in scope)
}

foo();

console.log(x); // 1 (`x` is in scope)
console.log(y); // ReferenceError, `y` is scoped to `foo`

const : block scope, value can't be changed once it's initiated.
const pi = 3.24;

3. Value Types and Reference Types

Primitives are copied/pass by their value

let number = 10;

function foo(number) {
  number++;
}

foo(number);

console.log(number); // 10;

Objects are copied/pass by their reference

let obj = { value: 10 };

function foo(obj) {
  obj.value = 22;
}

foo(obj);

console.log(obj); // { value: 22 };

4. Coercion (Type Casting)

Javascript attempting to coerce an unexpected value type to the expected type i.e converts value from one type to another.

"5" + 5; // 55 , number `5` in interpreted as a string
"5" - 5; // 0 , string `5` is interpreted as a number, works same for *, /, %
true + 5; // 6 , `true` is interpreted to value `1`
false + 5; // 5 , `false` is interpreted as value `0`

Implicit vs Explicit Coercion

Implicit Coercion	Explicit Coercion
Values are converted between different types automatically	Developer converts between types by writing the appropriate code
Example :`5 + '5' // 55`	Example :`5 + Number('5') // 10`

Only 3 types of conversion can be done in js

to String

String(123); // explicit
123 + ""; // implicit

to boolean

 Boolean(2)          // explicit
 if (2) { ... }      // implicit

to number

Number("123"); // explicit
5 - "5"; // implicit

Type coercion for objects :
- Boolean conversion will always coerced the objects to true
- String conversion can be done using toString()
- Number conversion can be done using valueOf()
Nominal Typing : Compatibility between objects determined based on their explicit type or name, rather than their structure.
Duck typing : Compatibility of objects is determined by whether they possess certain methods or properties, rather than their specific type or class.
Structural typing : A concept where the compatibility between objects is determined by their structure or shape, rather than their explicit type or name.

5. == vs === vs typeof

==	===	typeof
Checks if the values being compared are equal, performing type coercion if necessary. Performs a loose comparison	Checks if the values being compared are equal and of the same type, without performing any type coercion. Performs a strict comparison	Determine the type of a value or expression
Returns boolean value	Returns boolean value	Returns a string representing the type of the operand.
Example : `4 == '4' // true`	Example : `4 === '4' // false`	Example : `typeof 'hi' // 'string'`

6. Scope

scope ~ availability

Global scope	Function scope	Block scope
Variables declared outside of any functions or blocks.	Variables declared within a function	Variables declared within block (defined by curly braces)
accessed from anywhere within the code, including other functions and blocks.	only accessible within that function and any nested functions inside it	only accessible within the block.

7. Expression vs Statement

Expression	Statements
Expressions evaluates to a single value	Statements are the instructions to perform task
Example :`2+3*5` will evaluates to 17	Example :`if (true) console.log("hi")`

Function expression :
- function as part of an expression
- Example : let sum = funciton(){...}

8. IIFE, Modules and Namespaces

IIFE (Immediately Invoked Function Expression)
- It's a self-executing anonymous function.
- Variables & functions inside the IIFE are have local scope.
- Prevents global scope pollution
- Syntax :
```
(function () {
  //code
})();
```
- Example :
```
(function () {
  let value = 10;
})();
```

Modules

Allows to organize code in separate files.
helps in writing reusable & maintainable code.
a module may contain variable, function or classes
Exporting Module
- export keyword is used for named export
- export default keyword is used to default export
- Example :
```
//module.js

export default name = "vikas";

export function greet() {
  console.log("Hi everyone");
}
```

Importing Module

import keyword can be used for importing

Example :

//main.js

import guestName from "/module.js"; //imports default export. i.e, name variable

import { greet } from "/module.js"; //imports greet from module

console.log(guestName + "says " + greet());

Namespaces

Containers uses to group & organize the related variables, functions and objects.
Helps in avoiding naming conflicts.
Namespaces are not built into js. but it can be achieved using objects
It can be accessed using the dot operator.

Example :

var marksNamespace = {
  mark1: 34,
  mark2: 45,
  avg: function () {
    return (this.mark1 + this.mark2) / 2;
  },
};

console.log(marksNamespace.mark1); //accessing the mark1 namespace
console.log(marksNamespace.avg()); //accessing the avg namespace, which calls the associated function

9. Message Queue and Event Loop

When asynchronous operations such as netwwork request or timer is encountered, it's associated callback is placed in the queue in a fifo fashion,
After the execution of synchronous code, the event loop process the queue.
Event loop looks for pending task in queue, if yes then puts that task inside the stack.
Asynchronous operations may include eventlisteners , setTimeout or any api request etc

10. setTimeout, setInterval and requestAnimationFrame

setTimeout vs setInterval

setTimeout	setInterval
Executes a specified piece of code or a function once after a given delay.	Executes a specified piece of code or a function repeatedly at a given interval.
Syntax :`setTimeout(callback_fn, delay, ...parameters)`	Syntax :`setInterval(callback_fn, delay, ...parameters)`
Example :`setTimeout(function(){console.log("hello");},1000)` will print `hello` once after 1 second of program execution	Example :`setInterval(function(){console.log("hello");},1000)` will print `hello` every 1 second
Execution can be terminated with `clearTimeout()`	Execution can be terminated with `clearInterval()`

requestAnimationFrame
- used to schedule a function to execute before updating visual elements in the webpage (called repainting)
- Syntax : requestAnimationFrame(callback_fn)

11. JavaScript Engines

for running Js, we need a Js runtime environment.
Js runtime environment consist of JS Engine, API, event loop, queues....
v8 engine (written in c++) is most famously used js engine, in chrome & node js
3 process happens inside the js engine
- PARSING : code -> token -> abstract syntax tree,
- COMPILATION (JIT) : AST-> byte code & optimize
- EXECUTION : uses memory heap & call stack in the process
Mark & sweep algorithm is used for garbage collection

12. Bitwise Operators

performs operations on bits (0's and 1's)
NOT ~ :
- works on single bit, replaces 0 with 1 and 1 with 0
- Example : ~5 -> ~ (101)->010
OR | :
- either of the bit is 1 => result 1
- Example : 5 | 6 -> 101 | 110 -> 111 -> 7
AND & :
- both bits are 1 =>result 1
- Example : 7 & 6->111 & 110->110->6
XOR ^ :
- one bit is 1 & other bit is 0 -> result 1
- Exmple : 5 ^ 6 -> 101 ^ 110 -> 011 ->3
Leftshift << :
- shifts the number to left by specified number, works on single bit
- Example : 5<<2 -> 0000 0101 -> 0001 0100 ->20
Rightshift >> :
- shifts the number to left by specified number, works on single bit
- Example 20>>2 -> 001 0100 -> 0000 0101 ->5

13. DOM

Document Object Model is a tree like representation of html document
Each element is a node. HTML element is the root of the DOM
console.dir(document) will print all the element & their properties

Selectors

Selector	CSS	Js	JQuery
Id	`#id`	`document.getElementById('id')` `document.querySelector('#id')`	`$('#id')`
Class name	`.className`	`document.getElementsByClassName('className')` `document.querySelectorAll('className')`	`$('.className')`
Tag name	`tagName`	`document.getElementsByTagName(tagName)` `document.querySelectorAll(tagName)`	`$('tagName')`

querySelector() returns the first element
querySelectorAll() returns NodeList of elements
pseudo classes like :nth-child() , ::before , ::placeholder can also be used with selectors for selecting the html elements

Node methods

parentNode() , parentElement() , childNodes() , children() , firstChild() , firstElementChild() , lastChild() , lastElementChild() , nextSibling() , nextElementSibling() , previousSibling() , previousElementSibling()
- methods that have the keyword Element returns only Element nodes,
- methods without keyword Element returns all kind of nodes i.e Element node, text node, comment node etc.
Create Element : createElement(tagName)
Create text node : createTextNode('text')
Add element to the document : appendChild() , prependChild()

14. Factory functions

Functions that create & return object, Always use camel case

Syntax :

function fnName( <params> ) {
  return { obj };
}

Example

function createCircle(radius) {
  return {
    radius: radius,
    circumference: () => {
      return 2 * 3.14 * radius;
    },
  };
}

const circle1 = createCircle(2); // creates a circle object
console.log(circle1.circumference()); //12.56

14. this, call(), apply(), bind()

this

references an object in the current execution context

current execution context refers to,

global environment of the browser or nodejs

console.log(this); //prints the global object

when used inside a function, the object thats calling the function

function getObj() {
  console.log(this);
}

const user = {
  name: "thewecas",
  getObj,
};

user.getObj(); // prints user object

bind

used to explicitly set the reference of this

function getObj() {
  console.log(this);
}

const user = {
  name: "thewecas",
};

const myUser = getObj.bind(user);

myUser(); //prints {name : "thewecas" }

call

call a function with different this context/value
can pass additional arguments separated by comma

fn.call( obj, param1, param2...)

function getObj() {
  console.log(this);
}

const user = {
  name: "thewecas",
};

getObj.call(user); //prints {name : "thewecas" }

apply

similar to call ,but the second argument should be an array

fn.apply( obj, [param1, param2 .... ] )

function getObj() {
  console.log(this);
}

const user = {
  name: "thewecas",
};

getObj.apply(user); //prints {name : "thewecas" }

arguments is a collection of arguments that are being passed to the function
function fn() {
  console.log(arguments);
}
fn(1, 2, 3); // [Arguments] { '0': 1, '1': 2, '2': 3 }

16. new, constructor, instanceof and Instances

constructor is used for creating & initializing the object

new keyword is used to invoke the constructor & create instance of a class

class Circle {
  constructor(radius) {
    this.radius = radius;
    this.draw = function () {
      console.log("Draw");
    };
  }
}
const myCircle = new Circle(5);

use Pascal notation for naming constructor functions

function Circle(radius) {
  this.radius = radius;
  this.draw = function () {
    console.log("Draw");
  };
}

const myCircle = new Circle(1);

instance is a unique object created from a class or constructor function
instanceof keyword is used to check whether the object is an instance of a class or a constructor function
```
const name = new String("thewecas");
console.log(name instanceof String); // true
```

17. Prototype Inheritance and Prototype Chain

A prototype is a template for the object
Every object has the property prototype
Every instance of the object has the property __proto__
instance can inherit any property or method from the prototype.
each object has a private property that holds a link to another object called its prototype & so on until an object reached with null as its prototype. these makes up the prototype chain

Object.create() is used to create instance of an object from a prototype.

Example

// Create a prototype object
var personPrototype = {
  greet: function () {
    console.log("Hi everyone");
  },
};

//create object from the prototype
var john = Object.create(personPrototype);

john.greet(); // Output : Hi everyone
john.name = "John";
john.age = 24;

we can also add method to the prototype

// Add a new function to the prototype
personPrototype.introduce = function () {
  console.log("I am " + this.name + ", and I am " + this.age + " years old.");
};

// Access the introduce method added to the prototype
john.introduce(); // Output: I am john, and I am 24 years old.

18. Object.create and Object.assign

Object.create() used to creates a new object, using an existing object as the prototype of the newly created object.
```
var mile = Object.Create(personPrototype);

mile.greet(); // Output : Hi everyone
```

Object.assign() copies the properties from one or more source objects to a target object.

var jane = { age: 24 };
Object.assign(jane, personPrototype);

jane.greet(); // Output : Hi everyone

19. map, reduce, filter, forEach

map

Syntax : arrayName.map(callbackFn())

calls the callbackFn() for each element of the array, & creates the new array with each element being the result of callback function

const array = [1, 2, 3];

const squareArray = array.map((item) => item * 2);

console.log(array); // Output : [ 1, 2, 3 ]
console.log(squareArray); // Output: [ 2, 4, 6 ]

reduce

Syntax : arrayName.reduce(callbackFn(), initialVal)
Accumulates array elements into single value by performing the reducer callbackFn(),

return value from the callbackFn() from one iteration is passed to next iteration.

const array = [1, 2, 3, 4];

const initialVal = 0;
const sum = array.reduce(
  (accumulator, currentVal) => accumulator + currentVal,
  initialVal
);

console.log(sum); // Output: 10

filter

Syntax : arrayName.filter(callbackfn())
The callbackFn() should return a truthy value (i.e, true or false)

Creates a new array with elements for which the callbackFn() returns true

const array = [1, 2, 3, 4];

const evenNoArray = array.filter((item) => item % 2 == 0);

console.log(array); // Output: [1, 2, 3, 4];
console.log(evenNoArray); // Output: [ 2, 4 ]

forEach

Syntax : arrayName.forEach(callbackFn())

performs the callbackFn() once for each array element

const array = [1, 2, 3, 4];

const evenNoArray = array.filter((item) => console.log(item));

// Output : 1  2  3  4

20. Pure Functions, Side Effects, State Mutation and Event Propagation

Deterministic Function

for a given input, the output will be same irrespective of how many times the function is called.

//deterministic function
const square = (num) => num * 2;

//non-deterministic function
const getRandom = (num) => Math.floor(Math.random() * 10 + 1) * num;

Side effect

when functions alter the variables outside its scope

const animalArr = ["zebra", "dog", "cat"];

const addAnimal = (array, animal) => {
  array.push(animal);
};

addAnimal(array, "elephant");

Pure Functions

function that is deterministic and has no side effects.

State Mutation

Direct modification of a state or data structure.
changing value or properties of an object or variable without creating a new object or variable.
to avoid mutation we can use spread operator & create new object

Event Propagation

when an event occurs on an element, it can trigger event handlers not only on that element but also ont its parent elements or ancestors
2 phases
- Capture phase : event is captured by outermost element and then propagated downwards to the target element
- Bubbling phase :after target phase,the event starts bubbling up from target element to its ancestor element.
Target phase starts once the event reaches the target element.
we can stop propagation by using event.stopPropagation() method within an event handler.
Default behavior of event propagation is Bubbling phase.
We can change this behavior explicitly to capture phase by setting the useCapture parameter to true.
element.addEventListener(eventType, handler, true)

21. Closures

Functions can access the values outside their scope.
Functions combined with lexical scope forms the closure.

function x() {
  const a = 10;
  return function () {
    console.log(a);
  };
}
const z = x();
z(); // Output : 10

22. High Order Functions

Takes function as a parameter or returns a function.
Example:

//takes function as a parameter
array.map(() => {...});
//or
setTimeout(() = {...});
//returns a function
function x() {
  return function () {
    console.log("hello");
  };
}

23. Recursion

function calls itself.

const countDown = (num) => {
  if (num == 0) return;

  console.log(num);

  countDown(num - 1);
};

countDown(5);

// Output : 5 4 3 2 1

24. Collections and Generators

Collections

Data structures to store and organize values

Array :

ordered, indexed ,duplicates.
represented using square brackets.
few inbuilt methods are : push, pop, shift, unshift, splice ...

const numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // Output: 1
console.log(numbers.length); // Output: 5
numbers.push(6); // Add 6 to the end
console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]

Sets:

ordered, no duplicates
few inbuilt methods are : add, delete, has, clear...

const set = new Set();
set.add(1);
set.add(2);
set.add(3);
console.log(set.size); // Output: 3
console.log(set.has(2)); // Output: true
set.delete(3);
console.log(set); // Output: Set {1, 2}

Maps:

key-value pairs where each value can be accessed using its corresponding key.
random access
few inbuilt methods are : set, get, has, delete...

const map = new Map();
map.set("name", "John");
map.set("age", 30);
console.log(map.get("name")); // Output: John
console.log(map.has("age")); // Output: true
map.delete("age");
console.log(map); // Output: Map(1) { 'name' => 'John' }

Stack, Queue, Deque:
- ordered, One way reading, one way adding
- allowed operations are : add, remove, peek
- Stack : lifo
- Queue : fifo
- Deque : combo of stack and queue, double ended queue

Generators

functions that can be paused and resumed during execution
* is postfixed to function keyword
yield is used to pause execution and return a value;
next() used to start/continue executing the code
return() used to exit the execution
throw() to throw new error

function* simpleGenerator() {
  console.log("before yield 1");
  yield 1;
  console.log("before yield 2");
  yield 2;
  console.log("after yield 2");
}

const obj = simpleGenerator();
console.log(obj.next()); // Output : before yield 1 \n {value: 1, done: false}
console.log(obj.next()); // Output : before yield 2 \n {value: 2, done: false}
console.log(obj.next()); // Output : after yield 2 \n {value: undefined, done: true}

25. Promises

let prom = new Promise((resolve, reject) => {
  let flag = true;
  if (flag) {
    resolve("success");
  } else {
    reject("Failed");
  }
});

prom
  .then((message) => {
    console.log("✔️", message);
  })
  .catch((message) => {
    console.log("❌", message);
  });```