Forem: Nawaz Mujawar

map, reduce, filter, sort, slice ...etc

Nawaz Mujawar — Mon, 16 Oct 2023 17:50:16 +0000

We are going to look into methods that are used to modify an Array in JavaScript.

Here are the methods which are we going to look at in

push()
pop()
shift()
unshift()
filter()
map()
reduce()
indexOf()
includes()
find()
sort()
splice()
slice()

push()

const animals =["cat","dog"];
animals.push("tiger");
console.log(animals)// ["cat","dog","tiger"]

push() inserts the argument/value passed in push("tiger") to the last position in the animals array.

pop()

const animals =["cat","dog","tiger","cow","elephant"];
animals.pop();
console.log(animals)// ["cat","dog","tiger","cow"]

pop()removes the last item of an array.

shift()

const animals =["cat","dog"];
animals.shift("zebra");
console.log(animals)// ["zebra","cat","dog"]

shift() inserts the argument/value passed in shift("zebra") to the first position in the animals array.

unshift()

const animals =["cat","dog","tiger"];
animals.unshift();
console.log(animals)// ["dog","tiger"]

unshift() removes the first item of an array.

filter()

const numbersArray =[12,34,312,67,98];

const newNumbersArray = filter((num)=>{
    if(num >50){
       return num;
    }
})
console.log(newNumbersArray) // [312,67,98]
console.log(numbersArray) //[12,34,312,67,98]

filter() takes the first argument as a callback function.
filter() do not change the original array, it returns a new copy of an array.
As per the given condition it returns a new filtered array.

map()

const users =[{name:"john",age:34},{name:"steve",age:40}];

const newUsersArray = filter((user)=>{
   return{
   detail :`${user.name} is ${user.age} years old`
   }
})
console.log(newUsersArray) 
// [
//   {detail:"john is 34 years old"},
//   {detail:"steve is 40 years old"}
// ]
console.log(users) 
//[{name:"john",age:34},{name:"steve",age:40}]

map() loops over the each array item.
map() do not change the original array, it returns a new copy of an array.
In the above code snippet we have looped over users array and returned a new array with concatenating of name and age value.

reduce()

Let's check with an example.

Get the sum of all array items. i.e if an array is like [1,2,3] then result should be 6.

first will try with forEach()

let sum =0;
const nums =[1,2,3];
nums.forEach((num)=>{
   sum = sum + num;
})
console.log(total) //6

Now using reduce()

const nums =[1,2,3];
const total = nums.reduce((acc ,num)=>{
   acc = acc + num;
  return acc
},0)

Here the reduce() it takes callback function as the first argument and the initial value of the accumulator acc. And callback function provides two parameters first is accumulator acc and second is array item num

reduce() do not change the original array.

Returns single accumulated value.

indexOf()

indexOf() returns the index of item.

const admins =[1,2,4];
const user ={name:"raj",id:4}
console.log(admins.indexOf(user.id)) //2

includes()

includes() returns a boolean depending upon whether the item is present or not in the array.

const admins =[1,2,4];
const user ={name:"raj",id:4}
console.log(admins.indexOf(user.id)) // true

find()

find() searches for the item in an array and returns that item.

If the item is not present then return -1.

const users =[{name:"john",age:34},{name:"steve",age:40}]
const searchedUser = users.find((user)=>{
      if(user.name === "steve") return user;
})
console.log(searchedUser) // {name:"steve",age:40}

sort()

sort() sorts the given array.

const nums =[2,8,4,3]
nums.sort()
console.log(nums) //[2,3,4,8]

splice()

splice() changes the original array.

Let's check an example for that.

Deletion

const arr =[2,3,5,1,6,8];
arr.splice(2,1)
console.log(arr)// [2,3,1,6,8]

In the above example splice() first argument is the index of items that needs to be deleted. And second argument is number of times.

Lets check another example for that

const arr =[2,3,5,1,6,8];
arr.splice(2,2)
console.log(arr)// [2,3,6,8]

Here it deletes two items i.e 5 and 1 from index 2.

Insertion

const arr =[2,3,5,1,6,8];
arr.splice(3,0,9,7)
console.log(arr)// [2,3,5,9,7,1,6,8]

In the above example splice() first argument is index where new items need to be inserted. the second argument is 0 because we don't want to delete any item. The third argument is the items 9,7 that need to be added to the array.

slice()

slice() returns new array with selected items.

slice() do not change original array.

const fruits =["apple","mango","banana","orange","watermelon"];

const favoriteFruits = fruits.slice(1,3);
console.log(favoriteFruits) // ["mango","banana"]

slice() first argument is starting index and second argument is ending index.

How to match the backslash \ in Regular Expression?

Nawaz Mujawar — Fri, 05 Feb 2021 12:55:43 +0000

I want to match <>/\":;=|*? these characters in the string, I tried this expression
<>/\":;=|*?
But It didn't work for me.
Please help me out.

🥢Selector in Redux

Nawaz Mujawar — Thu, 28 Jan 2021 08:46:19 +0000

A “selector” is simply a function that accepts Redux state as an argument and returns data that is derived from that state.

A selector is a small function you write that can take the entire Redux state, and pick out a value from it.

You know how mapStateToProps works? How it takes the entire state and picks out values? Selectors basically do that. And, bonus, they improve performance too, by caching the values until state changes. Well – they can improve performance.

Why should you use a selector?

It is a best practice to keep your Redux store state minimal and derive data from the state as needed. Selectors help with that. They can compute derived data, allowing Redux to store the minimal possible state. Selectors are also very efficient. A selector is not recomputed unless one of its arguments changes.

Some examples of Selectors:

Basic :

selectUsers = state => state.users;

Slightly Complex using ID:

selectUserIds = state => state.users.map(user => user.id);

More Complex:

selectUserIdsOfName = (state, name) => state.users.filter(user => user.name === name);

An Example

Redux gives you a store where you can put state. In a larger app, that state is usually an object, where each key of the object is managed by a separate reducer.

{
  currentUser: {
    token,
    userId,
    username
  },
  shoppingCart: {
    itemIds,
    loading,
    error
  },
  products: {
    itemsById,
    loading,
    error
  }
}

First, without a selector

When it comes time to get data out of the Redux state and into your React components, you’ll write a mapStateToProps function that takes the entire state and cherry-picks the parts you need.
Let’s say you want to show the items in the shopping cart. To do that, you need the items. Buuut the shoppingCart doesn’t have items. It only has item IDs. You have to take each ID and look it up in the products.items array. Here’s how you might do that:

function mapStateToProps(state) {
  return {
    items: state.shoppingCart.itemIds.map(id => 
      state.products.itemsById[id]
    )
  }
}

Changing the state shape breaks `mapStateToProps`

Now – what happens if you decide “You know… shoppingCart should really be a property of the currentUser instead of a standalone thing.” And then they reorganize the state to look like this:

currentUser: {
    token,
    userId,
    username,
    shoppingCart: {
      itemIds,
      loading,
      error
    },
  },
  products: {
    itemsById,
    loading,
    error
  }
}

Well, now your previous mapStateToProps function is broken. It refers to state.shoppingCart which is now held at state.currentUser.shoppingCart.
If you had a bunch of places in your app that referred to state.shoppingCart, it’ll be a pain to update all of them. Fear or avoidance of that annoying update process might even prevent you from reorganizing the state when you know you should.

If only we had a way to centralize the knowledge of the shape of the state… some kind of function we could call that knew how to find the data we wanted…

Well, that’s exactly what a selector is for :)

Refactor: Write a simple selector

Let’s rewrite the broken mapStateToProps and pull out the state access into a selector.

// put this in some global-ish place,
// like selectors.js,
// and import it when you need to access this bit of state
function selectShoppingCartItems(state) {
  return state.currentUser.shoppingCart.itemIds.map(id => 
    state.products.itemsById[id]
  );
}

function mapStateToProps(state) {
  return {
    items: selectShoppingCartItems(state)
  }
}

Next time the state shape changes, you can update that one selector and you’re done.

Memoization

The use of selectors in your application can also provide performance optimizations. Let’s say you have a component that needs to run an intensive sorting operation on the store’s state in order to get the data it needs. If you were to perform the operation in your mapStateToProps() function, without the use of a selector, the operation would run every time a dispatched action caused the state to update!
It would be great if we could only run the expensive sorting operation only when the data we are running the operation on changes. This is where the concept of memoization comes to the rescue.
Memoization is a form of caching. It involves tracking inputs to a function, and storing the inputs and the results for later reference. If a function is called with the same inputs as before, the function can skip doing the actual work, and return the same result it generated the last time it received those input values.

Conclusion

A selector is a function that accepts Redux state as an argument and returns data that is derived from that state. Selectors can provide performance optimizations to your application and can also help you encapsulate your global state tree.

🚀Closure in Javascript👨‍💻

Nawaz Mujawar — Sun, 11 Oct 2020 10:22:47 +0000

Hello World!

What is Closure?

A closure is the combination of a function and the lexical environment within which that function was declared.

Closure is an inner function that has access to outer(enclosing) function variables.

Closure has 3 scope chains:

has access to Own scope
has access to Outer function variables
has access to Global variables

we can access variables which are outside of function

Using closure

Closure are used for data privacy. When you use closures for data privacy, the enclosed variables are only in scope within the containing (outer) function. You can’t get at the data from an outside scope except through the object’s privileged methods.

let see example of closure :

  function User(name){ 
     let displayAge = function(age){
        console.log(name + " is "+age+" year old.");
        }
      return  displayAge;
     }

  let user1 = User("John");
  user1("22") // Output : John is 22 year old.

In above example , User() is the outer function that returns inner function displayAge(). Inner function has access to outer scope variable even though outer function is returned.

Conclusion

Closure are nothing but the inner or nested function that has access to variable that are in outer scope.

Forem: Nawaz Mujawar

map, reduce, filter, sort, slice ...etc

push()

pop()

shift()

unshift()

filter()

map()

reduce()

indexOf()

includes()

find()

sort()

splice()

slice()

How to match the backslash \ in Regular Expression?

🥢Selector in Redux

Why should you use a selector?

Some examples of Selectors:

An Example

First, without a selector

Changing the state shape breaks mapStateToProps

Refactor: Write a simple selector

Memoization

Conclusion

🚀Closure in Javascript👨‍💻

What is Closure?

Using closure

Conclusion

Changing the state shape breaks `mapStateToProps`