🔍 What do you find here?

Deep JavaScript's concepts

<aside> 💡 ❯ JavaScript is based on Functional Programming ❯ "Class": it is fake, it is function ❯ "this": refers to where function has been called, not where it was defined ❯ The functions always return something, the undefined if this one is not defined ❯ Call: calls function with given value and argument ❯ Apply: same as calls, but the arguments must be into an array ❯ Bind: same as calls, but it returns a function and sends the context ❯ Prototype keyword: delegate the access, ex: array has filter and map as a prototype ❯ new keyword: create an object > set prototype > execute constructor with this > return the created object ❯ Null x undefined: setted value x no value ❯ Params nomination x arguments: send all in object and destructure it x send several args ❯ for...of x for...in: iterate into arrays x iterate into objects ❯ Debouncing: executes the function only after some cooling period ❯ Throttling: executes the function at a regular interval

</aside>

Useful packages and projects

<aside> 💡 ❯ Babel converts all JS code into some codes that all browsers can understand ❯ Webpack: creates the bundle (file with all app's code), the loaders (shows to JS how import files) and is responsible for hot reload (with dev server) ❯ Webpack Dev Server: enable hot reload. ❯ react-refresh-webpack-plugin: refresh the page but keep the states ❯ Mirage JS: an API mocking library that lets you build, test and share a complete working JavaScript application without having to rely on any backend services. ❯ React Query: fetch, cache and update data in your React and React Native applications all without touching any "global state".

</aside>

Coding Tips

**// Export/Import modules (old and new Node)**
module.export = {..} || function/const: const a = require(...)
export default {...} || import Module from '../' (you can export any name)
export Name || import { Name } from '../' (nominated exportation)

**// Formatting values in JavaScript**
new Intl.NumberFormat('pt-BR', 
	{ style: 'currency', currency: 'BRL' }).format(value); // currency
new Intl.DateTimeFormat('pt-BR').format(new Date (value)); // date
JSON.stringify(response, null, 2) // console log objects

// Enforce delay on code
await new Promise(resolve => setTimeout(resolve, 2000));

// **Debouncing**
const myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
  clearInterval(myVar);
}

// **Throttling**
var myVar;

function myFunction() {
  myVar = setTimeout(function(){ alert("Hello") }, 3000);
}

function myStopFunction() {
  clearTimeout(myVar);
}