Image for post
Image for post

Solve the following challenges using functional programming techniques.

Union

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…


Image for post
Image for post

In this article, we are going to learn how to create and communicate between components in Svelte by building a mini Todo application.

Requirements

Let’s first define the functionalities of the Todo app.

  • The user can see the list of to-dos
  • The user can add a new to-do using a form
  • The user can delete a to-do

Here is how the app looks like.


Image for post
Image for post

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.

Function List Component

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

Image for post
Image for post

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. …


Image for post
Image for post

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.

Primitives

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…


Image for post
Image for post

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…


Image for post
Image for post

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.

List Function Component

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…


Image for post
Image for post

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.

Classes

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…


Image for post
Image for post

In this post, you can find a few milestones for starting out with React and some helping materials.

JavaScript Fundamentals

  • Fundamentals: primitives, objects, functions, arrays, this keyword

Learn these JavaScript fundamentals and become a better developer

  • ES6 features: let, const, modules, spread operator, rest parameter, property short-hands, destructuring assignment, default parameters, template string literals, promises, classes, arrow functions

These are the features in ES6 that you should know

  • list operations: filter, map, reduce

Make your code easier to read with Functional Programming

Functional Concepts

  • first-class functions. Functions as values.
  • pure functions
  • immutable data

Learn immutability with JavaScript

  • pipeline
  • higher-order functions

React

  • Function component
  • Props —…


Image for post
Image for post

In this article, we will take a look at some simple but powerful concepts in JavaScript: values, arrays, objects, functions, and variables.

Primitive Values

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…

Cristian Salcescu

Author of Functional JavaScript and Functional React book series. 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