Forem: Devcore

How can you remove a specific item from an array?

Leo Cuéllar — Fri, 30 Jul 2021 21:37:37 +0000

Quick summary

This tutorial will cover the .splice() and .indexOf() array methods and their application in removing a specific item from an array in JavaScript.

It's the year 3025. Humanity has finally got out of the solar system and is now exploring new frontiers. Unfortunately, JavaScript still has not got a .remove() method.

Let's start with a simple array. The contents or data types inside of it don't matter.

const numbers = [1, 5, 2, 5, 3, 5]

Now, suppose we need to remove the number 2. Let's see how to do that:

Example 1 - Remove one occurrence

const removeItem = (arr, val) => {
    const index = arr.indexOf(val)
    if (index > -1) {
        arr.splice(index, 1)
    }
    return arr
}

removeItem(numbers, 2)

console.log(numbers)
// [1, 5, 5, 3, 5]

So, as you can see, we have declared a new function called removeItem().

This function takes two parameters:

The array that we want to modify
The value we have to remove

First, we want to see if that value exists in the array. We do that with the .indexOf() array method.

The .indexOf() method applied to any array will return the index of a given value if it exists in the array. If it doesn't, it will return -1.

After that, we create a condition that checks that the index value does exists.

If it exists, we apply the .splice() method to remove it from the array, and once everything is done, we return the resultant array.

.splice()

.splice() is a powerful method that allows us to change the contents of an array by removing and adding elements to it.

Remember. It does so by mutating the original array.

In this case, we passed two parameters:

The start index from where we will start making changes
The delete count

That means that in our use of the .splice() method, we are just telling it to remove the element on the given index.

What if we want to remove all the matching items?

Example 2 - Remove all occurrences V1

Let's see how to do that:

const removeAllItems = (arr, val) => {
    let i = 0
    while (i < arr.length) {
        if (arr[i] === val) {
            arr.splice(i, 1)
        } else {
            ++i
        }
    }
    return arr
}

removeAllItems(numbers, 5)

console.log(numbers)
// [1, 3] notice the missing 2. Remember that .splice() mutates the array and we already removed the number 2.

So, here we are applying .splice() in the same way. The only difference is that we are iterating over the array to work over all the elements and see if they are occurrences of the item we want to delete.

Now, notice that we are not using a for loop. The only reason for that is that we don't want to increment our index if we remove it from the array. That would make our function skip some elements, and we don't want that.

Let me show you another way of removing all the occurrences of an item in an array.

Example 3 - Remove all occurrences V2

const numbers2 = [1, 2, 3, 2, 4]

const removeAllItems2 = (arr, val) => {
    return arr.filter(item => item !== val)
}

const newNumbers = removeAllItems2(numbers2, 2)

console.log(numbers2)
// [1, 2, 3, 2, 4]. No mutation

console.log(newNumbers)
// [1, 3, 4]

This is my personal favorite. We are using the .filter() method to return a new array.

The filter method iterates over all the elements in an array and, in this case, if the element is not equal to the value we want to remove, it will add it to a new array, and after it finishes, it will return the new array.

This is an excellent option if you don't want to mutate the original array.

Wrapping up

So there you go. We just saw three methods to remove a specific item for an array, either to remove one occurrence or all of them. I hope this helps you on your development journey. Thanks for reading!

This article was first published on devcore.io. go check it out!

HOCs vs Hooks. What to use and why?

Leo Cuéllar — Fri, 16 Jul 2021 19:29:21 +0000

Quick summary

In this tutorial, we will see how to refactor a higher order component into a custom hook and the main benefits and caveats of using one over the other.

Recently I published a little tutorial about Higher Order Components. I consider that an important topic since it's widely asked in job interviews and is still used in many applications.

A fellow developer read the article and kindly suggested I talk about the pros and cons of using them and how hooks replace the need for HOCs, so here we go!

A little talk about hooks

On February 16, 2019, React 16.8 was released to the public. The one with hooks was the main description given to that release.

Since then, an extensive discussion has arisen about whether or not hooks will replace common React patterns.

It was a relief for many since we already preferred to use functional components over class components. It allowed for the development of easier to read, easier to write, and easier to test components, and many of us switched to that pattern in no time.

Since then, I haven't touched a class component, and honestly, I'm very glad.

What are higher order components?

A HOC is a component that takes one or more components as props and returns new components.

HOCs can easily allow you to reduce the amount of duplicate logic on your application. Let me show you an example:

If you don't understand what's happening there I really encourage you to check my tutorial about Higher Order Components.

Anyway, let's break out that code to understand it.

You can see that I created a HOC called withData, which accepts a child component.

When the HOC mounts, it fetches data from the pokemon API and returns the child component with an appended prop containing the fetching results.

Then we have the ListResults component, which takes a results prop and renders an unordered list with it.

Refactoring into a custom hook

Look at this code:

So here, you can see that we created a custom hook called useData, which fetches from the API and returns the results.

Our ListResults component can then use it to get some data and render it in a list.

Wrapping Up

I like to keep my articles simple to help new developers understand concepts like this. This could involve deeper topics, patterns, and principles that we can cover if you want, but for the sake of simplicity, allow me to conclude.

HOC is just a pattern, which means that it's not written in stone that you have to use class components to write them.

Hooks give us the ability to handle state and side effects in our functional components and our functional-based HOCs, but if you're like me and prefer to use functional components and your HOC uses hooks to work, why not create a custom hook instead?

This will not be the case every time, but hopefully, this tutorial gives more clarity when deciding if you need a HOC or a custom hook.

This article was first published on devcore.io. go check it out!

Using String.Replace() with RegEx

Leo Cuéllar — Thu, 08 Jul 2021 23:10:11 +0000

The replace() method is often used in JavaScript to replace parts of a string. You may have been using it as follows:

const str = 'I like cats'
const newStr = str.replace('I', 'We')
console.log(newStr)
//We like cats

As you can see, the method basically accepts two parameters: the string to be replaced and the replacement.

In reality, that's actually a little more complicated. The first parameter accepts two options:

A string to be replaced, as mentioned above
A RegEx object or literal. The match will be replaced with the second parameter

The second parameter also accepts two options:

The replacement string
A function that will be invoked to create the replacement string

In most real-world cases you will be looking for patterns instead of fixed strings, so using a RegEx as the first parameter will be the solution to our problems.

Using Regex with replace()

Let's start with an example and then explain how it works:

const reg = / \((.*?)\)/
const str = 'The quick brown (some unwanted string) fox jumps over the (another unwanted string) lazy dog.'
const newStr = str.replace(reg, '')
console.log(newStr)
//The quick brown fox jumps over the (another unwanted string) lazy dog.

So what's happening? Well, in our case, anything between parenthesis (including the parenthesis) will match with our RegEx, so the replace() method will replace that with our replacement string ''.

There's still one flaw with our code. It's just replacing the first match, so in the case that we want to replace everything that matches our RegEx, we would just have to use the g flag in our RegEx:

const reg = / \((.*?)\)/g //<-- notice the flag
const str = 'The quick brown (some unwanted string) fox jumps over the (another unwanted string) lazy dog.'
const newStr = str.replace(reg, '')
console.log(newStr)
//The quick brown fox jumps over the lazy dog.

Wrapping Up

RegEx is a POWERFUL tool and it makes replacing strings in JavaScript a more effective task, to say the least.

This article was first published on devcore.io. go check it out!

What is the difference between let and var?

Leo Cuéllar — Thu, 08 Jul 2021 23:06:20 +0000

To understand the answer to this question, it's better if we first understand the "scope" in JavaScript.

The scope can be defined as "The current context of execution," meaning that when a script is running, there is only so much stuff that can be referenced or used, based on what part of our code is running at any given time.

If a variable is not in the "current scope," then it will be unavailable for use.

For example, in general terms, if you declare a variable inside a function, then that variable will be unavailable outside that function. In fact, if you try to do it, it will generate a nasty reference error, as shown below:

const myFunction = () => {
    var x = "this is declared inside myFunction"
    console.log(x)
}

myFunction()
//this is declared inside myFunction

console.log(x)
//error: Uncaught ReferenceError: x is not defined

var

ES6 introduced a new type of scope called "block scope," which is the scope of if or for statements. Basically, anything between brackets is a block.

var variables exist since way before block scope was introduced, so they have no block scope. var declarations are either function-scoped or global-scoped, which were the only two scope types available before ES6.

This means that var declarations will see through blocks and take the scope of the parent element. For example:

if (true) {
    var x = "this is inside a block"
}

console.log(x)
//this is inside a block (is it?)

In the case above, the variable turned into a global variable since we used var to declare it, and the block itself wasn't inside a function.

Take this other example:

const myOtherFunction = () => {
    if (true) {
        var x = "this is inside a block"
    }

    console.log(x)
}

myOtherFunction()
//this is inside a block

console.log(x)
//error: Uncaught ReferenceError: x is not defined

So, as you can see, the variable saw through the block, as expected, but this time it took the scope of the wrapping function. When we tried to reference the variable outside the function, it gave us another error.

So that's basically how var works. Let's see what's the difference with let.

let

let was introduced in ES6 along with const as a new way to declare variables.

let works similarly to var, but this one is block-scoped.

Let's see it in action:

if (true) {
    let x = "this is inside a block"
    console.log(x)
    //this is inside a block (now it is)
}

console.log(x)
//error: Uncaught ReferenceError: x is not defined

Pretty straightforward, isn't it? This time the let declaration helped us keep it inside the block.

Wrapping Up

In general, you should avoid the declaration of global variables, and using var can lead to that without you even noticing.

Today you will find that let is used almost everywhere, and it does have its benefits 👌. It can particularly help you avoid bugs in your applications caused by the use of global variables.

This article was first published on devcore.io. go check it out!

How to use Lodash debounce method?

Leo Cuéllar — Thu, 08 Jul 2021 23:01:29 +0000

Recently I was applying for a react developer position at some company. In the process, I had to solve three tasks, which, surprisingly, were not so hard as people implied in some reviews I read.

For a React dev position, in almost every interview you may take for any company, you will be asked to fetch data from an API and use it somehow, which was no exception on this occasion.

The catch for me was that I was required to use the debounce() method from the lodash library, and to be honest, I’ve heard of the library, but I’ve never used it before.

Let me tell you what I learned from this interview.

What is lodash?

So, basically, lodash is a utility library that simplifies common programming tasks and gives us more capabilities when executing them.

I would love to give you a lot of examples but let me save that for future articles.

What is a debounced function?

A debounced function is a function that delays its execution a certain amount of milliseconds after the last call was received.

Let’s separate the three types of functions involved in this:

Your normal function: this is the function that you want to debounce
The debounced function: your same function but debounced, which means that it will work as the definition above says.
The debounce function: a function that will receive two parameters, a function to debounce and some time in milliseconds. This function will return the debounced function.

Lodash debounce() method is that debounce function mentioned in point 3.

Let’s see it with a simple example:

const logHi = () => console.log('Hi')

const debouncedLogHi = _.debounce(logHi, 1500)

debouncedLogHi()
debouncedLogHi()
debouncedLogHi()

//console: Hi

In this case, the timer will start running from the last call of the debouncedLogHi() function. After 1500 milliseconds, the function will run.

Passing parameters to a debounced function
You can also pass parameters to a debounced function:

const logMessage = message => console.log(message)

const debouncedLogMessage = _.debounce(logMessage, 1500)

debouncedLogMessage('first message')
debouncedLogMessage('second message')
debouncedLogMessage('third message')

//console: third message

As you can see, once the timer ends after the last call to the debounced function, the invoked function will be the last.

Wrapping Up

So yeah, lodash is awesome, and I'll definitely write more about it in the future. Subscribe to my newsletter if you want to be posted about future posts.

This article was first published on devcore.io. go check it out!

What is a Higher Order Component?

Leo Cuéllar — Thu, 08 Jul 2021 22:57:45 +0000

Quick summary

In this tutorial we will talk about Higher-Order Components (HOC), a widely used react concept and a topic that is commonly discussed in front-end developer interviews. We will discuss what they are and how to write them.

You may have heard about the don’t-repeat-yourself (DRY) programming principle, where we look to reduce the amount of duplicate logic on our applications.

Well, this principle has evolved as a pattern that you can see on higher-order functions on JavaScript, or as Higher-Order Components in React.

Higher-Order Functions

Let’s first understand what are higher-order functions, since I think you may have been using them a lot without knowing their higher-order nature.

A higher-order function is a function that takes a function as a parameter, returns another function, or both.

Let’s take the map() array method as an example. This method takes a function as a parameter which means that it is a higher-order function, but how are we recycling logic with this method? well, the map() method does the following:

iterates over every element of an array
applies the passed function to every element
the returned values will be added to a new array
returns the resulting array

Look at this example:

const arr = [1, 2, 3]

const mappedArr = arr.map(number => number * 2)

console.log(mappedArr)
//[2, 4, 6]

So as you can see, we are recycling that logic over and over again, every time we call the map() method.

Let’s see another example, this time building a higher-order function that returns another function:

const add = (num1) => (num2) => num1 + num2

const addFive = add(5)
// addFive = (num2) => 5 + num2

console.log(addFive(12)) // 5 + 12 = 17
// 17

As you can see in the last example our ‘add’ function serves the purpose of building ‘adder’ functions. You pass a number as a parameter and it will return a function that adds that number to any other number.

Passing 5 as a parameter will return this function (num2) => 5 + num2 so we basically used our higher-order function to build another function that adds 5 to any number.

Higher-order components

Now that you better understand the concept, let's define a higher-order component. A HOC is a component that takes one or more components as props and returns new components.

It’s important to mention that HOC’s don’t modify the components passed, they just return new components.

Let’s see a very basic implementation of a HOC:

const withComponent = Component => () => <Component />

const someComponent = () => (
    <div>
        Hi
    </div>
)

const sameComponent = withComponent(someComponent)

As you can see we are passing a component to our HOC and then returning it again. In reality, you would implement some logic, pass some props, style it, etc…

Let's see another example:

In this example you can see how I created a simple component that return some text. Then I created a HOC that accepts any component and then returns it inside a span tag that has some style. Im sharing this with you through codesandbox so you can see the result. Try and experiment with it.

Wrapping Up

Hope this gave you at least a basic understanding of HOC’s and how to write them. It’s a widely used concept in React that you will encounter in a lot of libraries such as Redux, for example.

This article was first published on devcore.io. go check it out!