DEV Community: Hardik Sharma

substring() vs slice() vs splice()

Hardik Sharma — Mon, 07 Aug 2023 08:59:56 +0000

These functions are used to get a part of an array or a string, with little differences and we will discuss these differences in this post.

Substring

substring() is a function that can only be called on a string data type. This function is supposed to get a portion of a string from starting index to an end index.

substring() takes two parameters: a start index and an end index. But if we only give one parameter then it'll make a substring keeping that parameter as the start index and going till the end of the string like



let str = "hardik";
let newStr = str.substring(2);
console.log(newStr); // "rdik"
console.log(str); // "hardik"

The main thing to notice here is that it doesn't make any changes to the original string. It just returns a new string. Also, if we provide two parameters like



let str = "hardik";
let newStr = str.substring(2, 4);
console.log(newStr); // "rd"

Here it returns a sub-string starting from our start index: 2 till our end index: 4, but it excludes the character at end index.

This function does not support negative indices as arguments, if passed, the function does not execute.

Slice

slice() is similar to substring, but slice() can be used on both string and array. This also takes two parameters like substring() and behaves in a similar fashion. For example if we just provide a single parameter then it'll give us a sub-array or sub-string till the end of the array or string it is applied to.



let str = "hardik"
let arr = [1, 2, 3, 4, 5, 6, 7];

console.log(str.slice(4)); // "ik"
console.log(arr.slice(2, 5)); //  [3, 4, 5]

Unlike substring(), slice() takes in negative parameters as well.



let arr = [1, 2, 3, 4, 5, 6, 7];

console.log(arr.slice(2, -1)); //  [3, 4, 5, 6]

So, what's happening in the above example is that slice calculates negative indices from the end of the array and hence -1 is the last index, so we slice the array till the last index excluding the last index itself. This works for both array and string.

slice() doesn't change anything in the original array or string it is applied to, it just returns a new array or string.

Splice

splice() is a function that can be called only on arrays. This function modifies the contents of an array by removing or replacing existing elements from a certain index. This can be great for replacing elements in an array on a big scale.

This function takes three base parameters splice(start, deleteCount?, item?). The parameter start is where the deletion will begin, deleteCount is how many elements from start we want to delete and the item is what will be added to the array after start. We can add as many items as we want, just pass additional arguments to the function.

For example:



let arr = [1, 2, 3, 4, 5, 6, 7];
let brr = arr.splice(1, 3, 7,7,7);

console.log(arr); // [1, 7, 7, 7, 5, 6, 7]
console.log(brr); // [2, 3, 4]

As seen from the example above it changes the original array and returns us the spliced array ([2, 3, 4]).

What happens if we only pass one parameter:



let arr = [0,1,2,3,4,5];
let brr = arr.splice(2);

console.log(arr); // [0, 1]
console.log(brr); // [2, 3, 4, 5]

It behaves similarly as substring and slice in this case and gives us back an array from start index to the end of the array but it also edits the original one.

Now, what happens if we add more items as parameters than the deletecount we provide:



let arr = [1, 2, 3, 4, 5, 6, 7];
let brr = r.splice(1, 3, 7,7,7,7,7);

console.log(arr); // [1, 7, 7, 7, 7, 7, 5, 6, 7]
console.log(brr); // [2, 3, 4]

It returns us the array of elements that we deleted and adds all the items in the original array, no matter how many items we provide it'll add it to the original array. Here, we removed 3 elements and added 5 in its place.

Conclusion

These functions are quite useful in our day to day coding and can sometimes be a little confusing. I hope this article helped you clear some of your doubts regarding substring(), slice() and splice(). Connect with me if you still have any doubts regarding this.

You can also reach out to me on LinkedIn.

Thank you for reading.

Memoization using React.useMemo()

Hardik Sharma — Wed, 19 Jul 2023 12:39:10 +0000

First we need to understand what memoization is. Memoization is an optimization technique, in which we accelerate our programs by caching the results of heavy function calls for the same inputs.

In simple terms, for example we have an input say '2' and we pass it through our function which takes a lot of time to execute. Now, if we need to calculate the result for input '2' again then we need to perform the function again and it will again take that much time.

But not if we used memoization in the first go, if we memoize the output for '2' of that function then we just need to get that value from our memoized values and don't need to execute that function again for '2', which in term will save us the time it takes for execution, and will make our program much more optimized.

In this post we will understand how to use useMemo React hook

useMemo()

useMemo is a React Hook that lets you cache the result of a calculation between re-renders. It accepts 2 arguments- a function that computes a result, and the depedencies array:


const memoizedValue = useMemo(calculateValue, dependencies)

During initial rendering, useMemo(calculateValue, dependencies) invokes calculateValue, memoizes the calculation result, and returns it to the component.

If the dependencies don't change during the next renderings, then useMemo() doesn't invoke calculateValue, but returns the memoized value.

But if the dependencies change during re-rendering, then useMemo() invokes calculateValue, memoizes the new value, and returns it.


const memoizedResult = useMemo(() => {
  return heavyFunction(A, B);
}, [A, B]);

In this case we have two dependencies A and B, so for the first render it will let the heavyFunction run to get the output, but in the re-renders if the dependencies don't change then it'll not execute the function and will return the memoized value.

Example

Let's take example of a classic recursion problem of calculating a factorial.

In factorial we often have the same input and without memoization the function always keeps on going to calculate the result, but if we memoize the output for a value and return that then we will save a lot of recursion cycles and will just return the memoized value at that point only.


function fact(n) {
  if(n <= 0){
    return 1;
  }
  return n * fact(n - 1);
}

So this is a simple implementation of factorial of a number n using recursion.

Now, if we have a whole component for this:


import { useState, useMemo } from 'react';

export function CalculateFactorial() {
  const [number, setNumber] = useState(5);

  const factorial = useMemo(() => fact(number), [number]);

  const onChange = event => {
    setNumber(Number(event.target.value));
  };

  return (
    <div>
      Factorial of 
      <input type="number" value={number} onChange={onChange} />
      is {factorial}
    </div>
  );
}

function fact(n) {
  console.log('factorial called!');
  if(n <= 0){
    return 1;
  }
  return n * fact(n - 1);
}

Every time you change the value of the number, factorial called! is logged to console. That's expected.

However, if we Re-render without changing the number, factorial called! isn't logged to console because useMemo(() => fact(number), [number]) returns the memoized factorial calculation. And hence saving us from calling the function again and recalculating.

useMemo() is a Hook, so you can only call it at the top level of your component or your own Hooks. You can’t call it inside loops or conditions.

I hope now you understand how useMemo works in React.
Thanks for reading.

Compose( ) and Pipe( ) in JavaScript

Hardik Sharma — Mon, 17 Jul 2023 11:39:40 +0000

Composeand Pipe are among the most powerful concepts in functional programming in JavaScript. And, can be very helpful while programming in JavaScript. This article will help you understand them better

Compose

Let us assume we want to get the name of a person. So we have to write a function that extracts the name:


const person = { name: 'Hardik', age: 25};
const getName = (person) => person.name;
getName(person);
// 'Hardik'

We want the name in uppercase, we write a function for that also:


const upperCase = (string) => string.toUpperCase();
upperCase('Hardik');
// 'HARDIK'

If we want both the actions being taken on our person, then we need to nest the functions


upperCase(getName(person));

Now we can compose the two functions to have just one function that executes both actions: Get the name and uppercase it.

So we implement compose like:


const getNameInUpperCase = compose(upperCase, getUserName)
getNameInUpperCase(person); 
//'HARDIK'

It executes them from right to left.

But the problem with this implementation of compose is that it only takes two functions as parameters.

Let's say we want more than two functions, this is when we need to use Pipe.

Pipe

Pipe is exactly like compose but it goes from left to right and can have multiple functions as parameters.

We already have two functions to get the name and uppercase a string. Now, let's say we have a function to get only 4 characters of a string.


const getSubString = (string) => string.substring(0, 4);
getSubString('Hardik');
// 'Hard'

And then let's say we have a function to reverse strings.


reverseString = (string) => string.split('').reverse().join('');
reverseString('Hardik');
// 'kidraH'

Now, if we want to apply all this on a single object by nesting


reverseString(getSubString(getNameInUpperCase(getName({ name: 'Hardik' }))));
// 'DRAH'

But this is too much and can get more crowded if we have more functions.

This is where Pipe comes into play


pipe(
  getName,
  getNameInUpperCase,
  getSubString,
  reverseString
)({ name: 'Hardik' })
// 'DRAH'

Works wonderfully from left to right and applies the next function to the response of the previous one. Will go to every function in sequence and in a much cleaner way.

Usage in JavaScript

Both Pipe and Compose are not native to JavaScript and can be used with the help of some utility libraries like lodash, ramda and so on.

But we can also use a simple implementation ourselves to use both the functions in JavaScript without importing any libraries.

For Pipe:


const pipe = (...fns) => (accValue) => 
   fns.reduce((currentValue, currentFunction) => 
      currentFunction(currentValue), accValue);

In this implementation we provide our list of functions and our input to our custom pipe which uses reduce to implement each function and return its result and keeps an accumulated value to be used by the function that's next in line.

similarly for Compose:


const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);

Conclusion

Hopefully, this article clarified some of your doubts and helped you understand how Compose and Pipe work.

You can now create functions working as factory conveyor belts that receive data, and these data go through all these different functions until we finally obtain our output.