19 🔥 map vs for-loop
18 🔥 fat arrow function
16 🔥 Perf: removing array elements & objects
15 🔥 new keyword
14 🔥 Promise.all
for...in vs 'for..of'
for of: iterative values
for..in: iteratable on enumerable. properties
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
- if there is no Symobil then one will be created
- can be iteratated by using
- 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
const elm = document.getElementById('box'); const s = window.getComputedStyle(elm); const transform = s.getPropertyValue('transform'); //matrix(1, 0, 0, 1, 100, 0) `
10 🔥 requestFrameAnimation()
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
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); // 
const a = [1,2,3,4]; let a1 = a.slice(0,1); console.log(a); // [1,2,3,4] console.log(a1); // 
8 🔥 Set
Set will return the unique values always it is the new data-type introduced in ES2016 Syntax :
7 🔥 Objects:.freeze() vs seal()
6 🔥 Arrays & Objects: Loop over the Object and Array
5. 🔥 Arrays: 2 ways to make an array from a given string
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).
3. 🔥 String:
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)
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:
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?