Binary Search with JavaScript

Kazi Md. Mehedi Hasan — Thu, 10 Mar 2022 05:32:00 +0000

Binary Search is one of the most intuitive and optimal algorithms for finding an element in a sorted array.

A quick look at binary search

To implement binary search, the array must be sorted
Much Faster than linear search.
Has a time complexity of O(logN).
Rather than eliminating one element at a time, it can eliminate half of the remaining elements at a time.

Execution Methodology :
Binary search algorithm makes use of the "Divide and Conquer" approach.

Binary Search pseudocode:

This function accepts a sorted array and a value.
Create a left pointer at the start of the array, and a right *pointer at the end of the array.
0 index is the left pointer and the end of the array is the right pointer.
Pick a middle pointer. Typically, an average of the left and right pointer. If the middle point is a fraction number, we round it up or floor it down.
While the left pointer comes before the right pointer:
a) Create a pointer in the middle.
b) If you find the value you want, return the index.
c) If the value is too small, move the left pointer up.
d) If the value is too large, move the right pointer down.
If you never find the value, return -1

Code in JavaScript :

function binarySearch(arr, value) {
  // setting the lest pointer at the start of the array
  let left = 0;
  // setting the left pointer at the end of the array
  let right = arr.length - 1;
  // picking the middle of the array for even and odd number of elements
  let mid = Math.floor((left + right) / 2);
  while (left <= right) {
    //   If the value is too small, move the left pointer up.
    if (arr[mid] < value) {
      left = mid + 1;
      mid = Math.floor((left + right) / 2);
    }
    // If the value is too large, move the right pointer down.
    else if (arr[mid] > value) {
      right = mid - 1;
      mid = Math.floor((left + right) / 2);
    } else {
      return mid;
    }
  }

  // If you never find the value , return -1
  return -1;
}

console.log(binarySearch( [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,], 15)); // returns 14

console.log(binarySearch([2,6,25,89,100,110,120,127,150],2)); //returns 0

Context API

Kazi Md. Mehedi Hasan — Thu, 23 Dec 2021 16:22:36 +0000

The notion of Context API was first introduced in React with the release of version 16.3 .
By this React applications have become easier in terms of the global state concept.

What is Context API?
Context API is an idea to produce global variables. These variables then can be passed around within the application. Any component that requires to access the variables AKA “state” can easily be done with the help of Context API. One can say that Context API is a lightweight version of Redux.

How does it work?
There’s a built-in function in react called createContext(). This function is required to incorporate Context API in any React application.
createContext() returns a Provider and a Consumer. Provider serves the children components with state. If you have any idea about redux store provider kind of acts like that. If you’re not familiar with redux that’s absolutely fine. Think Context API as a Jug of Juice and to all the components it supplies juice via the Provider. Take the components as mugs to which you’re going to pour juice. Juice here represents the passable state, Provider as a funnel through which juice doesn’t go outside the mugs.
Consumers are the component which takes in the states and uses them. In terms of our analogy The “Mugs” are the Consumers.

Why use Context API?
We often need to pass our state across components. Sometimes what happens is that we need to pass state in multiple components in the application. And those happen to be in multiple level. In those scenarios, we need to do some improvisations. Either we do lift up state or we have to drill the props. Which is repetitive. We may have to pass a prop to a component where we are never going to use that prop. It just acts as a corridor for that prop to pass. It makes the application unorganized. To get rid of this inconvenience, Context API was introduced in React V16.3. Which eliminates code repetition and makes the process satisfactory.

How to use Context API?
No hanky panky! We’ll go straight down to the example to understand the Context API better.

Create a folder called contexts(convention) in your root app directory.
Create a file with a name you like , i.e customContext.js
Create context with the help of “createContext()” function and import it in your custom context file.

import React, { createContext } from "react";
const CustomContext = createContext();

Create a component that will wrap the child components with provider.

const CustomProvider = ({ children }) => {
  const [name, setName] = useState("Kamaluddin Jaffory");
  const [age, setAge] = useState(1);
  const happyBirthday = () => setAge(age++);
  return (
    <CustomContext.Provider value={{ name, age, happyBirthday }}>
      {children}
    </CustomContext.Provider>
  );
};

5.Create a higher order component to receive the context. The standard naming convention starts with “with”.

const withUser = (Child) => (props) => (
  <CustomContext.Consumer>
    {(context) => <Child {...props} {...context} />}
    {/* Another option is:  {context => <Child {...props} context={context}/>}*/}
  </CustomContext.Consumer>
);

Then export them

export { CustomProvider, withUser };

And finally use them however you like the most.

return(
<CustomProvider>
  <App/>
</CustomProvider>
)

Forem: Kazi Md. Mehedi Hasan

Binary Search with JavaScript

Context API