JavaScript Arrays — Finding The Minimum, Maximum, Sum, & Average Values

  • Math.min() , as expected, returns the smallest of any set of given numbers.
  • The problem with Math.min() is it expects each parameter to be input separately and cannot take an array of multiple numbers as input.
  • min([1,2,3,4])// NaNAs you can see, Math.min() only works when each number is input as a separate parameter.Because of this, we need to make use of the …spread operator.
  • The spread operator allows an expression to be expanded in places where multiple elements/variables/arguments are expected.When we use the spread operator within Math.min() it will expand, or spread out, our array and insert each variable as a separate parameter into Math.min()!
  • In other words: Math.min(…[1,2,3,4]) is the same as Math.min(1,2,3,4)Finally, all I’ve done with the code above is turned it into a function expression utilizing arrow functions.

In this article we’ll explore four plug and play functions that allow you to easily find certain values in an arrays of numbers. Specifically we’ll explore the following: Math is a built in object in…
Continue reading “JavaScript Arrays — Finding The Minimum, Maximum, Sum, & Average Values”

The most unknown redux performance trick – Julien De Luca – Medium

  • The most unknown redux performance trickRegarding optimizing redux, there are some well known techniques: memoizing, using reselect for example.But there is one that remains unknown to many, although it’s simple and very efficient: The connect’s areStatesEqual option.When state changes, all connect functions will be called, props mapped from state and…
  • Imagine something like this :Considering action addTodo adds a todo item in the todo reducer, when this action will be called, both connect will then be called and mapStateToProps computed.Using areStatesEqual option, you can tell when not to bother to call mapStateToProps at all.The docs say :[areStatesEqual] (Function): When pure, compares incoming…
  • This function is passed 2 arguments: the previous state, and the next state.
  • You return a boolean telling whether the two states have changed, regarding the state slice you’re interested in, and if the function returns true, mapStateToProps will not even be called.Let’s update our example to use this function :Now, when state.users.all changes, the TodoContainer’s areStatesEqual option will be called, it will return…
  • It makes much more sense when using more complex mapStateToProps.Memoization remains useful when using props in mapStateToProps and methods that return new objects or arrays.Perfs gain can be really impressive only using this simple trick.Enjoy !

Regarding optimizing redux, there are some well known techniques: memoizing, using reselect for example. But there is one that remains unknown to many, although it’s simple and very efficient: The…
Continue reading “The most unknown redux performance trick – Julien De Luca – Medium”

The most unknown redux performance trick – Julien De Luca – Medium

  • The most unknown redux performance trickRegarding optimizing redux, there are some well known techniques: memoizing, using reselect for example.But there is one that remains unknown to many, although it’s simple and very efficient: The connect’s areStatesEqual option.When state changes, all connect functions will be called, props mapped from state and…
  • Imagine something like this :Considering action addTodo adds a todo item in the todo reducer, when this action will be called, both connect will then be called and mapStateToProps computed.Using areStatesEqual option, you can tell when not to bother to call mapStateToProps at all.The docs say :[areStatesEqual] (Function): When pure, compares incoming…
  • This function is passed 2 arguments: the previous state, and the next state.
  • You return a boolean telling whether the two states have changed, regarding the state slice you’re interested in, and if the function returns true, mapStateToProps will not even be called.Let’s update our example to use this function :Now, when state.users.all changes, the TodoContainer’s areStatesEqual option will be called, it will return…
  • It makes much more sense when using more complex mapStateToProps.Memoization remains useful when using props in mapStateToProps and methods that return new objects or arrays.Perfs gain can be really impressive only using this simple trick.Enjoy !

Regarding optimizing redux, there are some well known techniques: memoizing, using reselect for example. But there is one that remains unknown to many, although it’s simple and very efficient: The…
Continue reading “The most unknown redux performance trick – Julien De Luca – Medium”

Array Methods Explained : Filter vs Map vs Reduce vs Foreach

  • we all know why this method is used for and even you don’t know about this method the name pretty much explains everything.Foreach takes a callback function and run that callback function on each element of array one by one.var sample = [1, 2, 3];// es5sample.forEach(function (elem, index){ console.log(elem + ‘ comes at ‘ + index);})// es6sample.forEach((elem, index) = `${elem} comes at ${index}`)/*output1 comes at 02 comes at 13 comes at 2*/For every element on the array we are calling a callback which gets element its index provided by foreach.Basically forEach works as a traditional for loop looping over the array and providing you array elements to do operations on them.okay!
  • If the value is true element remains in the resulting array but if the return value is false the element will be removed for the resulting array.var sample = [1, 2, 3] // yeah same array// es5var result = sample.filter(function(elem){ return elem !
  • As a ReactJS developer I use map a lot inside my application UI.Map like filter foreach takes a callback and run it against every element on the array but whats makes it unique is it generate a new array based on your existing array.Let’s understand map with an examplevar sample = [1, 2, 3] // i am never gonna change Boo!
  • Yeah// es5var mapped = sample.map(function(elem) { return elem * 10;})// es6let mapped = sample.map(elem = elem * 10)console.log(mapped);/* output */[10, 20, 30]Map ran through every element of the array, multiplied it to 10 and returned the element which will be going to store inside our resulting array.Like filter, map also returns an array.
  • ReduceAs the name already suggest reduce method of the array object is used to reduce the array to one single value.For example if you have to add all the elements of an array you can do something like this.var sample = [1, 2, 3] // here we meet again// es5var sum = sample.reduce(function(sum, elem){ return sum + elem;})// es6var sum = sample.reduce((sum, elem) = sum + elem)console.log(sum)reduce takes a callback ( like every function we talked about ).

Okay so yeah we know they are different they have different purpose and goals still we don’t bother to understand them. We use arrays. A lot of arrays. We use arrays to show search lists, items added…
Continue reading “Array Methods Explained : Filter vs Map vs Reduce vs Foreach”