nehasharma.dev

#JSBytes

This started with sharing quick javascript tips ( #JSTips) on my Twitter. So, this is the place where I collected all the JavaScript Bytes for quick learning/revising.

20 🔥

19 🔥 map vs for-loop

TBA...

18 🔥 fat arrow function

TBA...

17 🔥 Garbage collection in JavaScript

TBA...

16 🔥 Perf: removing array elements & objects

TBA...

15 🔥 new keyword

TBA...

14 🔥 Promise.all

TBA...

13 🔥 for...in vs 'for..of'

for of: iterative values

for..in: iteratable on enumerable. properties

TBA...

12 🔥 Symbols

It is a new data type introduced in ES6. It will always give a unique key of object.

  • unique value
  • cannot be created with new keyword
  • if there is no Symobil then one will be created
  • can be iteratated by using .iterator ,for..of
  • can be created by using an object wrapper
  • Symbol.keyFor(sym): retrieve from global symbol registry
  • The Symbol.for(key) method searches for existing symbols in a runtime-wide symbol registry with the given key and returns it if found. Otherwise, a new symbol gets created in the global symbol registry with this key.
  • symbols are not enumerable in for..in
JAVASCRIPT
let s = Symbol();

let a = s('one');
let b = s('one');

a === b;  // false

11 🔥 how to get the translate value from JavaScript

const elm = document.getElementById('box');
const s = window.getComputedStyle(elm);
const transform = s.getPropertyValue('transform'); 
//matrix(1, 0, 0, 1, 100, 0)

`

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

10 🔥 requestFrameAnimation()

An optimized & efficient way to handle animations by JavaScript.

Right pointing backhand index The browser will pause the animation when the tab is not active

Right pointing backhand index It will avoid the 'missing the frame' issue

Right pointing backhand index Request browser to update the animation before next repaint

#jstips

9 🔥 splice() vs slice()

splice(): returns the removed element as an array and modified the original array

slice(): returns the selected element as array and do not modify the original array

const a = [1,2,3,4];
let a1 = a.splice(0,1); 

console.log(a); // [2,3,4]
console.log(a1); // [1]

const a = [1,2,3,4];
let a1 = a.slice(0,1); 

console.log(a); // [1,2,3,4]
console.log(a1); // [1]

8 🔥 Set

Set will return the unique values always it is the new data-type introduced in ES2016 Syntax :

usecases:

7 🔥 Objects:.freeze() vs seal()

TBA...

6 🔥 Arrays & Objects: Loop over the Object and Array

TBA...

5. 🔥 Arrays: 2 ways to make an array from a given string

  1. Array.from();

  2. split()

#jstips

4. 🔥 DOM: nodeType, nodeName, and nodeValue

If you know DOM, then you must be aware DOM is made up of Nodes. While creating interactive UI accessing these nodes is very common.

nodeType: What is the type of node. There are more than 8 nodes ( document, HTML, text, comment, etc). It will return you numeric value always.

nodeName: What is the node name? If an HTML node then it will return you the name in the uppercase

nodeValue: returns the value of the node (text node only).

#jstips

3. 🔥 String: substr vs substring

Both returns the substring from a given string accept 2 arguments, the end or 2nd argument is optional. But the difference comes:

substr: given a start index it returns the string of number of characters as per the end arguments

substring: given a start index it returns the string between the start to end (end not included)

#jstips

2. 🔥 DOM: nodes vs elements

The 1st thing to learn DOM is to learn the difference between nodes and elements.

Nodes: Everything in DOM is nodes and it has types (very useful). eg: text, comment, etc

Elements: Node's type that can be written by HTML. eg: <HTML>, <p>, etc.

#jstips

1. 🔥 Perf: innerHTML vs appendChild()

innerHTML is expensive than appendHTML();

innerHTML leads to the re-layout but appendHTML() doesn't as it accepts objects only.

However, innerHTML is better when there are a bunch of updates to push in the DOM.

Well, better solution?

insertAdjacentElement()

#jstips