Solve the following challenges using functional programming techniques.
Compute the union of two arrays.
For example the union of [1,2,3]
and [2,3,5]
is [1,2,3,5]
.
You may say that we can compute the union using the spread operator and spreading the values of both arrays into a new one.
const arrA = [1,2,3];
const arrB = [2,3,5];const union = [...arrA, ...arrB];
console.log(union);
//[1,2,3,2,3,5]
As you can see this approach creates duplicates.
Sets are collections of values. A value in the Set
may only occur once. A value is unique in the Set
's collection.
As we can see values are unique…
In this article, we are going to learn how to create and communicate between components in Svelte by building a mini Todo application.
Let’s first define the functionalities of the Todo app.
Here is how the app looks like.
Fetching data inside a React function component may be a common task we have to do. Let’s see how we can achieve that and also handle the three possible states of the request: Loading, Success, and Error.
Let’s start by building a function List
component displaying a list of todos.
function List(){
const [list, setList] = useState([]);
return (
<div>
{list.map(todo =>
<div key={todo.id}>{todo.title}</div>)}
</div>
);
}
The List
components stores a list of todos and displays it on the screen. The list is initially empty.
The useState
hook allows us to define the state inside a function component. The…
From Object-Oriented to Functional
Nowadays state management has become a common challenge when developing web applications. The time when we directly changed the UI for display data is long gone. All major UI libraries come with a new approach, changing the UI means actually changing the state.
The obvious question now is what state actually is.
State is data basically.
Is any data used in the application state?
The answer is “No”. Only the data that is stored becomes state. If the data doesn’t change then is just a configuration object used inside the application. …
In this article, we are going to look at how to remove duplicates from an array. We will analyze two kinds of values: primitives and objects.
Consider an array of strings like the following.
const arr = ['one', 'two', 'two', 'three'];
We want to create a new array without duplicates.
Sets are collections of values. A value in the Set
may only occur once. A value is unique in the Set
's collection.
As we can see values are unique in a Set
collection, so if we transform the array into a Set
collection and then back into a new array…
When you make a quick google search for currying these are the first kind of examples you will find.
You will see a function sum
adding two numbers.
function sum(a, b) {
return a + b;
}
And then the curried version that looks like this.
function sum(a) {
return function(b){
return a + b;
}
}
Or you can see the same sum
curried function written using the arrow function.
const sum = a => b => a + b;
Instead of invoking the function and passing the two arguments sum(1,2)
, the curried function requires passing the arguments in…
In this article, we are going to take a look at how to retrieve and display a list of objects using React Hooks, GraphQL, and Apollo client.
Let’s start by displaying a list of objects using a React function component.
import React from 'react';function List({posts}) {
return (
<div>
{posts.map(post =>
<div key={post.id}>
{post.title}
</div>
)}
</div>
);
}export default List;
The List function component takes a list of post objects and displays the title of each post in a div
element.
In the App
parent component, a hardcoded list is created and sent to the List
function…
Encapsulation is about data-hiding. That’s it, we have private data behind public methods working with that data.
The main idea is to expose as little as possible to the outside world. Minimizing the connections with the external environment reduces unexpected changes. What we can hide, we can change.
Let’s look at how to achieve it.
A new option for achieving encapsulation is to use the hash #
symbol to declare a private variable inside a class
. This feature is part of ES2020.
It is great that classes will support encapsulation, but there are still some annoying things that we…
In this post, you can find a few milestones for starting out with React and some helping materials.
Learn these JavaScript fundamentals and become a better developer
These are the features in ES6 that you should know
Make your code easier to read with Functional Programming
Learn immutability with JavaScript
In this article, we will take a look at some simple but powerful concepts in JavaScript: values, arrays, objects, functions, and variables.
Values represent how data is handled in JavaScript. Every value has a type. The basic types of primitive values are number, string, boolean, undefined, and null.
We don’t need to specify the type. It can be automatically detected. For example here is how we can log in to the console a number.
console.log(1);
The value 1
is a primitive number literal.
Below is an example of a string literal.
console.log("Hello");
Strings are surrounded by single-quotes, double-quotes, or the…
Author of Functional JavaScript and Functional React book series. Enthusiastic about sharing ideas. https://www.amazon.com/gp/product/B08X3TPCQ8