Quick start with the useState hook

Photo by Filipe Gomes on Unsplash

This article looks at how to manage the state associated with a checkbox in React. The main idea is to reflect the state in the UI checkbox, and the status of the checkbox in the associated state.

useState

The useState hook is a special function that lets us add state to a function component.

The useState hook takes an initial value and returns a stateful value and a function to update it.

const [state, setState] = useState(initialValue);

In our case, the state we want to be reflected in the UI is a boolean. When the state is false, the checkbox is…


Quick start with filter and find. Improve search speed by creating and using maps.

Photo by the author

Have you ever got into the situation of searching for an element in a large list while doing a loop over another collection?

This article will discuss how to find an element in a list of objects and especially how to improve the search in larger lists. Let’s start.

Filter

One of the first methods we can think of for finding elements in a list is filter.

The filter method creates a new array with all elements that pass the test performed by the predicate function.

A predicate is a function that takes an element and returns a boolean (true or…


Quick start with the useState and useEffect hooks

Photo by Ocean Ng on Unsplash

This article looks at how to create a simple digital clock with React Hooks. In the process of building the Clock component displaying the current time, we are going to discuss the role of the useState and useEffect hooks in this case.


Extending arrays, freezing objects, redefining the impure array methods, and more

Photo by the author

In this article, we will look at how the extend the standard array and discuss what we need to do to make it immutable.

Extending the Array

Let’s start by extending the Array class and adding a simple new method.

The extends keyword in class declarations creates a class that is a child of another one. In the next example, we are extending the default Array class.

The first method returns the first element from the array.

Behind the scene, the ExtendedArray.prototype object is created and it contains the new method and inherits from the Array.prototype object.

The Array.of method creates a…


Defining the algorithm, using the slice string method, the modulo operator and more.

Photo by Mikael Kristenson on Unsplash

This article describes how to write a simple algorithm rotating a string. It also deals with the case of special characters taking two code units.

To understand how to compute the new string, check a few examples.

  • Rotating the string ABCDE to the left by 1 character results in BCDEA
  • Trying to rotate the same text by 2 characters results in CDEAB.

It is important to note what happens when trying to rotate with a number of characters greater than the string size. For example, rotating by 6 characters result in BCDEA, and rotating by 7 characters gives CDEAB

Rotating to Left

Now…


map array method, mapping function, higher-order functions, and more

Photo by Tabrez Syed on Unsplash

There are cases when we work with an array of objects and want to create a new one containing objects with fewer properties. This article first looks at how to accomplish this for a specific case and then generalizes the solution.

Consider the following array of objects. Each episode has four properties and we want to extract only the id and the name.

const episodes = [{
id: 1,
title: "The One Where Ross Finds Out",
season: 2,
episode: 7
},
{
id…


The bracket notation, conditional method invocation, and more

Photo by Hakan Tas on Unsplash

Functions stored on objects are called methods. This article looks at how to invoke such methods in a dynamic way.

The Bracket Notation

Objects allow accessing properties in a dynamic way using the bracket notation and providing an expression that is computed and used as the property name.

Here is an example of accessing a numeric property using the bracket notation.

const obj = {
value: 1
}
const propName = 'value';
console.log(obj[propName]);
//1

We can access any kind of property using the bracket notations even functions. Once we have access to a function property we can invoke it.

const obj = {…


Encapsulation with the module pattern, modules, and factory functions

Photo by the author

In this article, first, we will look at how to achieve encapsulation using the module pattern, then with the modules available in the language, and last with factory functions which are actually based on the module pattern.

Module Pattern

In the beginning when modules were not part of the JavaScript languages, “modules” were implemented using the module pattern. It was the primary way to achieve encapsulation.

Encapsulation means hiding data and behavior.

The main idea was to hide the state. We cannot really say we are dealing with the module pattern if we are not hiding the state.

Here is an example…


Quick start with converting array-like objects to arrays

Photo by Adrien Olichon on Unsplash

Some objects look like arrays but they aren’t such.

An array-like object has a length property and index-like properties.

Here is an example.

const obj = {
0: 'A',
1: 'B',
2: 'C',
length : 3
}

Numeric keys are converted to strings so the previous object can be very well written using the string representation of the numbers. We get practically the same object.

const obj = {
'0': 'A',
'1': 'B',
'2': 'C',
length : 3
}

We are able to use the for statement on such an object.

for(let i = 0; i < obj.length; i++){…


Object literal syntax, destructuring assignment, bracket notation, and more

Photo by Filipe Gomes on Unsplash

When working with objects in most cases we can simply use the dot notation to access and changes those properties.

This article looks at the ability to access and modify a property in a dynamic way, which means that we detect the name of the property using an expression. We are going to consider the simple expression made of a single string value representing the name of the property.

Accessing Using the Bracket Notation

Consider the following object.

const movie = {
name: 'Star Wars',
genre : 'Fantasy'
}

We can access its properties using the bracket notation and providing an expression that is evaluated…

Cristian Salcescu

Author of Functional Programming in JavaScript. Enthusiastic about sharing ideas. https://www.amazon.com/gp/product/B08X3TPCQ8

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store