Defer Attribute : Starts downloading JS in the background will the HTML is being parsed and hence the parsing is done executes the JS
Async Attribute : Starts downloading JS in the background when HTML is being parsed. Once the JS is download stops HTML parsing and executes the JS and then continues parsing of remaining HTML
Async Vs Defer - JavaScript Loading Explanation
HTML Element Attributes
Allows to interact with the attributes that are applied on the elements
Most of the attributes can be directly accessed on the element using the dot operator
Data attributes can be accessed in JS using using querySelector with the following syntax [<attribute-name>]
New Scope
An new scope can be created any where in JS by wrapping the code in curly brackets
const a = 3;
console.log(3);
{
const a = 5;
console.log(a);
}Template Literal Function
The first parameter to the function is all the strings present in the template string
const custom = (strings, name, age) => {
console.log(strings, name, age);
return `Hi`;
}
let name = 'David';
let age = 23
console.log(custom`My name is ${name}. I am ${age} years old`);Nullish Coalescing
// When 1st term is null or undefined
const name = null ?? "David"
// When 1st term is a falsey value
const name = "" || "Tim"JS Enumerate Function Equivalent
const foobar = ['A', 'B', 'C'];
for (const [index, element] of foobar.entries()) {
console.log(index, element);
}Debugging
// Time a function
console.time("Timer");
for(let i = 0; i <= 10000000; i++);
console.timeEnd("Timer");
// Use CSS in Console
console.log(`%cMy name is %cDavid`, "color:green", "color:red");
// Display Object as Table
console.table(objectName);Immediately Invoked Function Expression (IIFE)
JavaScript’s Immediately Invoked Function Expressions
// Anonymous IIFE
((num) => {
console.log(num);
})(6);
// Named IIFE
(printValue = (num) => {
console.log(num);
})(6);
printValue(10);This function gets executed immediately once the script is run
Named IIFEs can be used as normal functions as well
In ES6 with the introduction of block level variables IIFEs are not used that often
Closure
Closure = Function + Its Environment (Variables used by function)
Can be used to emulate private functions
function makeFunc() {
var name = "JS Nuggets";
function displayName() {
console.log(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc(); // JS NuggetsMaster the JavaScript Interview: What is a Closure? | by Eric Elliott | JavaScript Scene | Medium