javascript for cats and its repo
Learn ES6 from the online version of Exploring ES6 book by Dr. Axel Rauschmayer.
- React Cheatsheet
- about React portals
- and hooks
Typescript Deep Dive (I linked template literals)
spread operator / rest operator for constructing or destructuring arrays or objects
Spread synthax ... is a syntactic sugar for handling iterable objects. Its main functionality is to respond with the content of a given array or object and pass it on to an action like an array merge, object merge etc.
It is simply picking out elements of an array or an object and handles them as function arguments:
function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }
It can be used as the parameter list of unknown number of parameters too:
let howMany = (...args) => "You have passed " + args.length + " arguments.";
console.log(howMany(0, 1, 2, 23)); // You have passed 4 arguments
Read more about how three dots changed JavaScript
Destructuring assignment syntax is a synthactic sugar for array-to-variables operations like splitting text to array and copy an element to a variable, or copy array elements to specific variables. It may result pretty weird code.
var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
see this article about how three dots changed javascript
sitepoint article on arrow functions
For example we use an arrow function here to multiply numbers:
var timesTwo = params => params * 2
timesTwo(4); // 8
A smarter solution may be to not write a timesTwo function but to create a customizable multiplier with two arrow functions:
const adder = x => y => x + y; // create a universal adder function
add5 = adder(5); // define an adder function to add 5
add5(1); // 6
you can see details below about these terms
- lambda: it is the general name of arrow functions. In JS we mostly call them arrow functions. Lambda is also used in other situations for function-like entities with a very simple, limited task to do.
- first-class function: the names of first-class-functions do not have any special status; they are treated like ordinary variables with a function type.
for deeper dive, I can recommend you to read this article: 6 fundamental terms in functional JavaScript by Martin Novák. You will read about: lambda, first class functions, higher order functions, unary functions, pure functions, currying.
First class functions are functions that are treated like an object (or are assignable to a variable). Higher order functions are functions that take at least one first class function as a parameter. (AshleyS)
const firstclass = () => console.log ('Some text!');
const higherOrder = functionAsArgument => functionAsArgument ();
higherOrder(firstclass); // Hello World! is printed outCurrying is widely used in React-Redux environments. Currying is the process of taking a function with multiple arguments and turning it into a sequence of functions each with only a single argument.
These sum functions do exactly the same below. Check function expressions, arrow functions and nesting: they are all adding two numbers, 2 and 1 and return with the result: 3.
function simple(x,y) { return x + y; }
const arrow = (x,y) => x + y;
const curry = x => y => x + y;
function nested(x) {
return function(y) {
return x+y;
}
}
const data = {
m1: simple(1,2),
m2: arrow(1,2),
m3: curry(1)(2),
m4: nested(1)(2),
}
console.log(data) // results { m1:3, m2:3, m3:3, m4:3}While normal functions keep their variables' scope inside,
Handling arrays, see more details and examples here or this graphic represantation to understand superfast the concept
Takes a function and a default value and iterates the function through an array
arr = [1,2,3,5]
function sum(a,b) {return a+b}
arr.reduce(sum, 0)
>> result: 11
Of course its beauty comes if we use the reducer with arrow functions
arr = [1,2,3,5]
arr.reduce((a,b) => a+b, 0)
>> result: 11
Default value is not mandatory, so you can simply omit it like arr.reduce((a,b) => a+b) or leverage it with a start value like arr.reduce((a,b) => a+b, 500) => result:511.
more: History of loops started with while loop: repeat something until the changes fulfil a special condition. It turned out that usually we use it for iterations and the standard steps (go to next element, go to the last one, have an iterator) are usually the same, so language engineers invented for loop. As usually it was a simple array iteration, foreach was added.
And here comes Javascript and ES6: they collected typical usage patterns and increased their speed performance. That's why while, for and foreach loops mostly disappeared from Javascript code and got replaced by map, reduce and filter.
-
Wallaby.js - Wallaby.js runs your JavaScript tests immediately as you type and displays execution results in Code. It also provides beautiful test and code coverage reports updated in realtime.
-
Winston.js - A logger for just about everything.
const util = require('util');
console.log(util.inspect(response, { showHidden: false, depth: null }));