DEV Community: Sajith Pradeep

Understanding the array methods Array.some() and Array.every() in JavaScript

Sajith Pradeep — Thu, 15 Jul 2021 03:43:31 +0000

There are lot of scenarios when we have an array of items and we need to check whether every item in that array satisfy a particular condition.

We might think that, why not use a for loop and flag to check this?

But there is an easier and much cleaner way to achieve this using Array.every().

Similarly, if we need to check if at least some items in an array satisfy a condition, we can use the Array.some() method.

Let us understand this better with some examples -

// We have a sample Array of persons from country ABC
const sampleArray = [
  {
    name: "John",
    occupation: "Doctor",
    age: 31,
    sex: "male",
    country: "ABC"
  },
  {
    name: "Jane",
    occupation: "Doctor",
    age: 26,
    sex: "female",
    country: "ABC"
  },
  {
    name: "Roger",
    occupation: "Engineer",
    age: 28,
    sex: "male",
    country: "ABC"
  },
  {
    name: "Riya",
    occupation: "Engineer",
    age: 32,
    sex: "female",
    country: "ABC"
  }
]

// I want to find out if all of them are from country "ABC"

const countryCheck = sampleArray.every(person => {
  return person.country === "ABC"
})
console.log("All are from the same country? ", countryCheck)

// I want to check if all are engineers
const engineerCheck = sampleArray.every(person => {
    return person.occupation === "Engineer"
})
console.log("All are Engineers? ", engineerCheck)

// I want to check if at least some women are engineers
const womenEngineers = sampleArray.some(person => {
    return person.occupation === "Engineer" && person.sex === "female"
})
console.log("Do we have at least some women engineers?", womenEngineers)

// I want to check if any of them are advocates
const lawyerCheck = sampleArray.some(person => {
return person.occupation === "Lawyer"
})
console.log("Do we have any lawyers?", lawyerCheck)

Output

Syntax of Array.every() and Array.some()

// Syntax
Array.every(callback)

const callback = (currentElement, index, array) => {
  // currentElement - current item in the array that we are iterating over over
  // index - index of the current item - optional
  // array - array that we are iterating over - optional
} 

// example usage
Array.every((currentElement) => {
    return currentElement > 1
})

// Syntax
Array.some(callback)

const callback = (currentElement, index, array) => {
  // currentElement - current item in the array that we are iterating over over
  // index - index of the current item - optional
  // array - array that we are iterating over - optional
} 

// example usage
Array.some((currentElement) => {
    return currentElement > 1
})

Hope you guys learned something new today. Keep coding!!

Understanding the React.Children api with common use cases

Sajith Pradeep — Sat, 19 Jun 2021 00:32:29 +0000

We all might have used {this.props.children} inside the React Components to get hold of the child elements.
The {this.props.children} is what can be called as an opaque data structure. There are very limited operations or manipulations that we can perform on this. That is where the React.Children api comes into picture.

React provides us with a Children api that helps in dealing with this opaque data structure.

Let's take a look at the use cases using an example -

ParentElement.js

import { Component } from "react";

class ParentElement extends Component {
  render() {
    // Inside the Parent component we are directly displaying the props.children
    return <div>{this.props.children}</div>;
  }
}

export default ParentElement;

ChildElement.js

import { Component } from "react";
import Parent from "./ParentElement";

// This is a simple example for using the Parent component
// And accessing the child elements wrapped inside the Parent
class ChildElement extends Component {
  render() {
    return (
      <Parent>
        <div>Child 1</div>
        <div>Child 2</div>
        <div>Child 3</div>
        <div>Child 4</div>
      </Parent>
    );
  }
}

export default ChildElement;

Output to the following code

Now let us look at the scenarios that we might encounter.

1. React.Children.toArray()

Scenario 1 - We need to display only the first Child inside the ParentElement even though we are getting 4 div's as immediate child elements from {this.props.children}

The data that we get from {this.props.children} is called opaque data. This is treated as a single entity and we cannot distribute this in the form of an array. In order to convert this to an array, we can use the toArray method from the React.Children api

This method takes in the this.props.children as argument and converts it to an array with each immediate child forming the elements of the array.

Let us take a look at this implementation and try to solve the issue mentioned in scenario 1.

ParentElement.js

import React, { Component } from "react";

class ParentElement extends Component {
  render() {
    const { children } = this.props;
    // toArray method is called to convert this.props.children to an array
    // We are then referencing the first element using index 0
    return <div>{React.Children.toArray(children)[0]}</div>;
  }
}

export default ParentElement;

Output after implementing the toArray method

2. React.Children.count()

Scenario 2 - We need to get the count of the immediate child elements.

Again, this is impossible to calculate on this.props.children as it is considered as a single entity.

React.Children gives us the count method to do this.

It takes in this .props.children as argument and returns the count of the immediate child elements.

ParentElement.js

import React, { Component } from "react";

class ParentElement extends Component {
  render() {
    const { children } = this.props;
    // count method is used to count the immediate child elements in this.props.children
    // Even though the count is 4, we are only displaying Child 1
    return (
      <div>
        <p>
          Total Count of Children: {React.Children.count(this.props.children)}
        </p>
        {React.Children.toArray(children)[0]}
      </div>
    );
  }
}

export default ParentElement;

3. React.Children.only()

Scenario - 3 - We need to make sure that the this.props.children is such that it only has 1 element as its immediate child. This one element in turn can have multiple child elements inside it. But on the highest level we need to ensure that there is only one element.

We can use the only method from React.Children api for this.

Let us look at the code below -

ChildElement.js

import { Component } from "react";
import Parent from "./ParentElement";

// This is a simple example for using the Parent component
// And accessing the child elements wrapped inside the Parent
class ChildElement extends Component {
  render() {
    return (
    // There are 4 immediate child elements here
      <Parent>
        <div>Child 1</div>
        <div>Child 2</div>
        <div>Child 3</div>
        <div>Child 4</div>
      </Parent>
    );
  }
}

export default ChildElement;

ParentElement.js

import React, { Component } from "react";

class ParentElement extends Component {
  render() {
    const { children } = this.props;
    // count method is used to count the immediate child elements in this.props.children
    // Even though the count is 4, we are only displaying Child 1
    return (
      <div>
        <p>
          Total Count of Children: {React.Children.count(this.props.children)}
        </p>
        {/* Making use of the only method */}
        {React.Children.only(children)}
      </div>
    );
  }
}

export default ParentElement;

Output when there are 4 child elements

Now, in order to comply with the only method, we will wrap the 4 Child elements in a single div

ChildElement.js


import { Component } from "react";
import Parent from "./ParentElement";

// This is a simple example for using the Parent component
// And accessing the child elements wrapped inside the Parent
class ChildElement extends Component {
  render() {
    return (
      // There are 4 immediate child elements here
      <Parent>
        {/* Wrapping the child elements inside a single element */}
        <div>
          <div>Child 1</div>
          <div>Child 2</div>
          <div>Child 3</div>
          <div>Child 4</div>
        </div>
      </Parent>
    );
  }
}

export default ChildElement;

Now the output will change to -

This is working now as we changed the html structure and added a parent div to the 4 Child elements which will make sure that there is only one immediate child element when using the method React.Children.only

4. React.Children.map()

Scenario 4 - I need to iterate through all the individual child items and then convert this into a button element with a specific style.

This is again not possible directly via this.props.children.

There is a map method provided to us by React.Children which works very similar to the array map method. It returns an array of items as its output.

Let us look at the code below.

ChildElement.js

import { Component } from "react";
import Parent from "./ParentElement";

// This is a simple example for using the Parent component
// And accessing the child elements wrapped inside the Parent
class ChildElement extends Component {
  render() {
    return (
      // There are 4 immediate child elements here
      <Parent>
        {/* Wrapping the child elements inside a single element */}
        <div>
          <div>Child 1</div>
          <div>Child 2</div>
          <div>Child 3</div>
          <div>Child 4</div>
        </div>
      </Parent>
    );
  }
}

export default ChildElement;

ParentElement.js

import React, { Component } from "react";

const btnStyle = {
  background: "green",
  color: "#fff",
  fontSize: "18px",
  fontWeight: "bold",
  border: "1px solid white",
  marginTop: "5px",
  padding: "3px",
};

class ParentElement extends Component {
  render() {
    const { children } = this.props;
    // count method is used to count the immediate child elements in this.props.children
    // Even though the count is 4, we are only displaying Child 1
    return (
      <div>
        <p>
          Total Count of Children: {React.Children.count(this.props.children)}
        </p>
        {/* Making use of the only method */}
        {React.Children.map(children, (child) => {
          return <button style={btnStyle}>{child}</button>;
        })}
      </div>
    );
  }
}

export default ParentElement;

Output of the above code

Now, if you check this output, we can see that all the 4 Child elements are wrapped inside a single button. This is because in the ChildElement.js we have wrapped all the 4 Child element divs under a single parent div. The map method iterates only through the immediate children.

Now let us change the html structure of ChildElement.js and remove the parent div

import { Component } from "react";
import Parent from "./ParentElement";

// This is a simple example for using the Parent component
// And accessing the child elements wrapped inside the Parent
class ChildElement extends Component {
  render() {
    return (
      // There are 4 immediate child elements here
      <Parent>
        {/* Removed the parent div from here */}
        <div>Child 1</div>
        <div>Child 2</div>
        <div>Child 3</div>
        <div>Child 4</div>
      </Parent>
    );
  }
}

export default ChildElement;

Output for the above code -

As we can see in the image, now we get 4 distinct buttons with style applied.

5. React.Children.forEach()

This method is also very similar to the map method. The only difference is that it does not return an array. It simply allows the user to iterate over all the immediate child elements.

// This is used to print the values inside the individual child elements 
    React.Children.forEach(children, (child) => {
      console.log(child.props.children);
    });

Output

I hope this helped to give you a fair understanding of the Children api in react and the common methods available to us and their use cases.

Happy Coding!

Understanding the use of useRef hook & forwardRef in React

Sajith Pradeep — Thu, 17 Jun 2021 20:43:45 +0000

The useRef hook in react is used to create a reference to an HTML element. Most widely used scenario is when we have form elements and we need to reference these form elements to either print their value or focus these elements etc.

So the {useRef} hook is imported from "react" like other react hooks and we use them inside functional components to create references and this can be assigned to an html element in the jsx by using the "ref" attribute.

An example for using the useRef hook is shown below-



import React, { useEffect, useRef } from "react";

const UseRefHookExplained = (props) => {
  // Creating refs for username and password
  const userNameRef = useRef(null);
  const passwordRef = useRef(null);

  // We are also creating a reference to the Login button
  const submitBtnRef = useRef(null);

  // useEffect to set the initial focus to the user name input
  useEffect(() => {
    userNameRef.current.focus();
  }, []);

  // This function is used to handle the key press.
  // Whenever user hits enter it moves to the next element
  const handleKeyPress = (e, inputType) => {
    if (e.key === "Enter") {
      switch (inputType) {
        // Checks if Enter pressed from the username field?
        case "username":
          // Moves the focus to the password input field
          passwordRef.current.focus();
          break;
        // Checks if Enter pressed from the password field?
        case "password":
          // Moves the focus to the submit button
          submitBtnRef.current.focus();
          e.preventDefault();
          break;
        default:
          break;
      }
    }
  };

  // Function to handle the submit click from the button
  const handleSubmit = () => {
    alert("submitted");
  };

  // getting the style as prop from the parent.
  // Basic style to center the element and apply a bg color
  const { style } = props;
  return (
    <div style={style}>
      <h2>Example for using useRef Hook</h2>
      <h3>Login</h3>
      <input
        type="text"
        name="username"
        ref={userNameRef}
        onKeyDown={(e) => handleKeyPress(e, "username")}
      />
      <input
        type="password"
        name="password"
        ref={passwordRef}
        onKeyDown={(e) => handleKeyPress(e, "password")}
      />
      <button ref={submitBtnRef} onClick={handleSubmit}>
        Login
      </button>
    </div>
  );
};

export default UseRefHookExplained;

So the concept of useRef hook is straight forward as you can see in the above code. Follow the following steps -

We import useRef hook from react
We initialize this hook (eg: const inputRef = useRef(null))
The reference created is attached to an html element using the "ref" attribute.

Now we will have a reference to this element readily available to be used to make changes like getting the value, focusing etc

Output
Initial state when the page loads -

Focus State after entering user name and pressing enter -

Focus state moving to the button after entering the password and clicking on Enter

So, this much should be pretty clear by now. Now let us look at a scenario when we will be using another React component for input.

In this case it becomes a little difficult to pass on the reference that we have defined in the parent component as a property to the child (Input component).

React provides us a way to handle this scenario and forward the refs to the child component using React.forwardRef

Let us check the example code to see the changes -
( I have added a comment "//new" to identify the newly added lines)



import React, { useEffect, useRef } from "react";
import Input from "./Input"; // new

const UseRefHookExplained = (props) => {
  // Creating refs for username and password
  const userNameRef = useRef(null);
  const passwordRef = useRef(null);

  // We are also creating a reference to the Login button
  const submitBtnRef = useRef(null);

  // useEffect to set the initial focus to the user name input
  useEffect(() => {
    userNameRef.current.focus();
  }, []);

  // This function is used to handle the key press.
  // Whenever user hits enter it moves to the next element
  const handleKeyPress = (e, inputType) => {
    if (e.key === "Enter") {
      switch (inputType) {
        // Checks if Enter pressed from the username field?
        case "username":
          // Moves the focus to the password input field
          passwordRef.current.focus();
          break;
        // Checks if Enter pressed from the password field?
        case "password":
          // Moves the focus to the submit button
          submitBtnRef.current.focus();
          e.preventDefault();
          break;
        default:
          break;
      }
    }
  };

  // Function to handle the submit click from the button
  const handleSubmit = () => {
    alert("submitted");
  };

  // getting the style as prop from the parent.
  // Basic style to center the element and apply a bg color
  const { style } = props;
  return (
    <div style={style}>
      <h2>Example for using useRef Hook</h2>
      <h3>Login</h3>
      {/* New. Using the Component instead of input element */}
      <Input
        type="text"
        name="username"
        ref={userNameRef}
        onKeyDown={(e) => handleKeyPress(e, "username")}
      />
      {/* New. Using the Component instead of input element */}
      <Input
        type="password"
        name="password"
        ref={passwordRef}
        onKeyDown={(e) => handleKeyPress(e, "password")}
      />
      <button ref={submitBtnRef} onClick={handleSubmit}>
        Login
      </button>
    </div>
  );
};

export default UseRefHookExplained;

Now let us look at the Input.js component



import React from "react";

/* In the functional component, a second argument 
is passed called ref, which will have access to 
the refs being forwarded from the parent */
const Input = (props, ref) => {
  /* assigning the ref attribute in input and spreading 
the other props which will contain type, name, onkeydown etc */
  return <input {...props} ref={ref} />;
};

// wrapping the Input component with forwardRef
const forwardedRef = React.forwardRef(Input);

// Exporting the wrapped component
export default forwardedRef;

So, React.forwardRed provides us a way with which we can still pass on or forward the refs defined in the parent component to the child component.

Hope you learned something new today!

Let's try to understand the concept of JavaScript Closures in depth

Sajith Pradeep — Wed, 16 Jun 2021 05:28:17 +0000

Definition

The inner function preserves the scope chain of the enclosing function or the outer function at the time when the outer function was created. Thus the inner function will have access to the variables and arguments of the outer function in its scope chain even after the outer function completes execution.

This is an important concept in JavaScript because in JavaScript, variables are only in scope during the lifetime of the function or when the function is being executed.

So Closures provides us a way to still have access to the variables inside the function that has completed its execution.

Let's look at this concept with an example.

In the above piece of code the inner function that is returned from the outer function forms a closure with its parent. So, essentially the inner function will have access to the following when it is executed-

Variables and Arguments within the scope of the inner function.
Variables and Arguments of the outer function to which the inner function forms a closure
Global variables

Closures gives us a way to preserve the scope chain of outer functions even after it completes its execution. One use case of this is Data hiding/ Data Privacy.

So in other words, we can say that closures are functions that have access to all the variables in scope when it was declared.

Disadvantages of Closures

A major disadvantage of closure is that proper garbage collection does not occur if there are closures. The variable environment of the outer function will not be cleared if there is an inner function forming a closure with the outer function. This can lead to memory leaks.

Common use cases of Closure

Case 1 - Higher Order Functions (HOCs)

HOCs are functions that take one function as an argument or returns a function.

HOC to create different multiplier functions

One example of HOCs which can be seen below is creating different multiplier functions that uses closures to create functions that can multiply a number with different values.

HOC to round numbers to a certain number of decimal places

Same way, we can also use closures to create functions that returns numbers fixed to different decimal places as shown below.

Case 2 - Creating a function for keeping track of old DOM styles and also updating the value

If there is a use case to change the style properties dynamically and later if the user wants to return to the initial style, we can keep the initial style state saved and access it using closures.

Example given below -

Fig shows a simple html file with a div with sampleText class being assigned font-size and color properties

Fig shows the JS file that explains how the DOM style state can be kept in memory even after updating it, using closures

Fig shows that the font-size and color has changed in the app, but the closure still has access to the initial styles

In the above example we can see that font-size and color property for the sampleText class is being set manually in the beginning. Afterwards the font-size is updated using the updateStyleProp closure function. But even after updating the styles manually, the getInitialState closure function which has access to the intialState variable in the outer function is able to print the initial values.

Case 3 - Singletons

Singletons are a type of JavaScript design pattern in which one class is instantiated only once and only that one class is made available publicly.

As shown in the code above, the maleGreeting and femaleGreeting variables are accessible within the greetMale() and greetFemale() functions which form a closure with the singleton function greeting().

Case 4 - Data Hiding

Closures are the means for creating private variables in JavaScript as shown below -

Conclusion

We have understood the concept of closure and seen some examples of how and where they are used in the JavaScript programming language.

Closures are cornerstone to functional programming!