stuff Flashcards
What are Immediately-invoked Function Expressions (IIFE)?
Immediately-invoked Function Expressions are a way to execute functions immediately, as soon as they are created.
- don’t pollute the global object
- simple way to isolate variables declarations
- Function declarations want a name, while function expressions do not require it.
- An IIFE can also be named regular functions (not arrow functions). This does not change the fact that the function does not “leak” to the global scope, and it cannot be invoked again after its execution
(function() {
/* */
})()
Immediately-invoked Function Expressions (IIFE) syntax
(function() {
/* */
})()
(() => {
/* */
})()
You could also put the invoking parentheses inside the expression parentheses:
(function() {
/* */
}())
(() => {
/* */
}())
We have a function defined inside parentheses, and then we append () to execute that function: (/* function */)().
Why do Immediately-invoked Function Expressions require wrapping parentheses?
Those wrapping parentheses are actually what make our function be considered an expression. Otherwise, the function declaration would be invalid, because we didn’t specify any name
Why IIFEs might start with a semicolon?
;(function() {
/* */
})()
This prevents issues when blindly concatenating two JavaScript files. Since JavaScript does not require semicolons, you might concatenate with a file with some statements in its last line that causes a syntax error.
This problem is essentially solved with code bundlers like webpack.
Closures
Closures are important because they control what is and isn’t in scope in a particular function, along with which variables are shared between sibling functions in the same containing scope.
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
JavaScript variables can belong to the local or global scope.
Global variables can be made local (private) with closures.
A local variable can only be used inside the function where it is defined. It is hidden from other functions and other scripting code.
Global and local variables with the same name are different variables. Modifying one, does not modify the other.
var let const
var: The scope of a variable defined with the keyword “var” is limited to the “function” within which it is defined. If it is defined outside any function, the scope of the variable is global.
var is “function scoped”.
let: The scope of a variable defined with the keyword “let” or “const” is limited to the “block” defined by curly braces i.e. {} .
“let” and “const” are“block scoped”.
const: The scope of a variable defined with the keyword “const” is limited to the block defined by curly braces. However if a variable is defined with keyword const, it cannot be reassigned.
“const” cannot be re-assigned to a new value. However it CAN be mutated.
Module Pattern in JavaScript
It is a commonly used Design Pattern which is used to wrap a set of variables and functions together in a single scope.
Variable “salary” is not exposed outside the “EmployeeDetails” function, making it unavailable for the “newEmployee” Object.
It can now be seen as a private variable that can be accessed only from the function. It is not available outside.
function EmployeeDetails() {
var name: "Mayank";
var age = 30;
var designation = "Developer",
var salary = 10000;
var calculateBonus = function(amount) {
salary = salary + amount;
}
return {
name: name,
age: age,
designation: designation,
calculateBonus: calculateBonus
}
}
var newEmployee = EmployeeDetails()
var userName = newEmployee.calculateBonus(1000);
feature inference
Feature inference checks whether a feature exists first before running another function that depends on the feature.
feature detection
Feature detection is the pattern of running different code depending on whether a browser supports a certain block of code or not.
UA string
UA String is a browser-reported string that allows the network peers to identify the application type, operating system and other information about the request agent.
What is a curry function?
Currying is a process in functional programming in which we can transform a function with multiple arguments into a sequence of nesting functions. It returns a new function that expects the next argument inline.
Currying creates nesting functions according to the number of the arguments of the function. Each function receives an argument. If there is no argument there is no currying.
If function has multiple arguments, that’s partial application.
function volume(l) {
return (w) => {
return (h) => {
return l * w * h
}
}
}
const aCylinder = volume(100)(20)(90) // 180000
When to use currying?
- Write little code modules that can be reused and configured with ease:
function discount(discount) {
return (price) => {
return price * discount;
}
}
const tenPercentDiscount = discount(0.1);
const twentyPercentDiscount = discount(0.2);
- Avoid frequently calling a function with the same argument:
function volume(h) {
return (w) => {
return (l) => {
return l * w * h
}
}
}
General Curry Function
function curry(fn, ...args) {
return (..._arg) => {
return fn(...args, ..._arg);
}
}What is the difference between document load event and document DOMContentLoaded event?
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
document’s load event is only fired after the DOM and all dependent resources and assets have loaded.
What are the disadvantages of using Ajax?
Browser-compatibility and SEO
