Forem: The Huferr

How to create your own custom array methods in JavaScript

The Huferr — Thu, 26 Oct 2023 00:49:10 +0000

Hey, it's Huferr.

Today, you will learn how to create your own custom array methods in Javascript.

To understand the process of creating a new method, you must first know what prototype is.

Before continuing, you must know that is not a good practice to change/add methods into natives objects! BUT, understanding how it works is a great way to learn more about the language itself!

🔎 What is `prototype` in JavaScript?

Every object in JavaScript has a built-in property, which is called its prototype (or __proto__ in most browsers).

The prototype is an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.

Simplifying, It keeps the current object methods and allows you to add new properties and methods to objects.

For example, if you console.log(Object.prototype), you'll see something like this:

These are basically object methods that you can use in a common object in JavaScript!

📜 Array object

As you may know, almost everything in Javascript is an object.

It means that we also have an object called Array. Every array is an object in JavaScript:



const myArray = [0,1,2]

console.log(typeof myArray) // 'object'

✅ New array method

Let's create our new custom array method called duplicate().

This method will be responsible for duplicating the current array.

Example:



const numbers = [1,2,3]

const duplicatedNumbers = numbers.duplicate()

console.log(duplicatedNumbers) // [1,2,3,1,2,3]

To add this new method, we need to add our function in the Array object prototype:



Array.prototype.duplicate = ...

Now, we can simply create our function with the needed logic and assign it into this new property we added: duplicate.

To do that, we're going to use the function statement.

You can't use an arrow function in this scenario, since we need the function's this keyword, and it's only available for functions statements.

So, let's create it:



Array.prototype.duplicate = function() {
  const array = this // Just for readability purposes

  return [...array, ...array] // Duplicating the array
}

In this case, the this keyword refers to the array you are using the method.

So, if you do myArray.duplicate(), myArray will be exactly the this inside our function.

🥳 Congratulations! I've created your first custom array method, here's the full code:



Array.prototype.duplicate = function () {
  const array = this // Just for readability purposes

  return [...array, ...array] // Duplicating the array
}

const myArray = [1,2,3]

const duplicatedArray = myArray.duplicate()

console.log(duplicatedArray) // [1,2,3,1,2,3]

Thanks for reading this article! Help spreading knowledge!

Follow me on:

📹 Youtube => https://www.youtube.com/@thehuferr
🧵 X/Twitter => https://twitter.com/the_huferr

How create a recursive function using Javascript

The Huferr — Thu, 19 Oct 2023 18:50:16 +0000

Hey, it’s Huferr.

Today, you’re gonna learn what is a recursive function and how to create one using Javascript.

🔎 What does recursion mean?

“In computer science, recursion is a method of solving a problem where the solution depends on solutions to smaller instances of the same problem. Recursion solves such problems by using functions that call themselves from within their own code.” - Wikipedia

Well, let's make it simpler to understand.

Basically, it means that you’re going call the function that you’re creating inside the function itself, at the same time of its creation.

To declare a recursive function, you need to use the function inside its own block of code:

const func = () => {
  func() // Whaaaat???
}

⚠️ WARNING: You need to be careful, because you can easily create an infinite loop.

⚙️ Coding

Time to practice!

Let’s create a simple recursive function called countDown.

It will be responsible for displaying a count down in the console, starting from a given number.

Let’s set its argument as fromNumber. Then, console.log() it.

const countDown = (fromNumber) => {
  console.log(fromNumber)
}

Now, we need to decrease that number. So we can console.log() it again with a smaller one.

To achieve that, let’s create a constant called nextNumber, which has fromNumber, decreased by 1.

const countDown = (fromNumber) => {
  console.log(fromNumber)

  const nextNumber = fromNumber - 1
}

Great, now we’re going to create a simple condition: If nextNumber is greater than 0, let’s keep decreasing and displaying it in the console.

To do that, we can simply call this exact function (countDown) inside itself, passing nextNumber as its parameter.

And here we create the recursion:

const countDown = (fromNumber) => {
  console.log(fromNumber)

  const nextNumber = fromNumber - 1

  if (nextNumber > 0) {
    countDown(nextNumber)
  }
}

That’s it! You’ve created your first recursive function.

To test it, Let’s call the function, passing the number 5 as the argument and reload the console.

Great, here are the results:

You can see that we have a controller for the Loop (or recursion), which is the condition:

if (nextNumber > 0) {
  countDown(nextNumber)
}

Here, we’re telling the function to only call itself when nextNumber is greater than 0. Other than that, It won’t be called.

If we remove that condition, we will be creating an infinite loop. A situation where your function continues calling itself without stopping.

🧠 Overview

Recursive functions are those that call themselves within their own block of code;
Need to be careful not to create infinite loops (function being called without stopping. Always add a validation;

Thanks for reading this article.

-- The Huferr!

Follow me on:

📹 Youtube => https://www.youtube.com/@thehuferr
🧵 X/Twitter => https://twitter.com/the_huferr

Reusable Button with ReactJS + Typescript + Styled-components

The Huferr — Mon, 02 Aug 2021 15:29:41 +0000

Welcome, here's a guide teaching you how to create a simple and powerful reusable button component using ReactJS, Typescript and Styled-components.

Observation: I created this post considering that you know the basics of ReactJS, typescript and styled-components. If you see anything wrong, please tell me!

Let's start creating two files, index.tsx and styles.ts.

Inside index.tsx let's create a functional component called Button and pass the styled-component <Container> inside it:

import React from "react";
import { Container } from "./styles";

export const Button = () => {
  return (
    <Container>
    </Container>
  )
};

In order to make this component reusable in different situations, we have to create some properties for it. In this case, let's create a type called ButtonProps, and pass these props:

export type ButtonProps = {
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void; // to handle onClick functions
  children?: React.ReactNode; // make the component able to receive children elements
  color?: 'primary' | 'secondary'; // two styling options (you can create as many as you want)
  disabled?: boolean; // make the button disabled or not
};

Then, let's call these props in our Button component, using props destructuring and see what we've done so far:

import React from "react";
import { Container } from "./styles";

export type ButtonProps = {
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void; // to handle onClick functions
  children?: React.ReactNode; // make the component able to receive children elements
  color?: "primary" | "secondary"; // two styling options
  disabled?: boolean; // make the button disabled or not
};

export const Button = ({
  onClick,
  children,
  color = "primary",
  disabled,
}: ButtonProps) => {
  return (
    <Container onClick={onClick} color={color} disabled={disabled}>
      {children}
    </Container>
  );
};

Now, it's time to set the styles properties, let's go to our file styles.ts, import styled and { css } from styled-components and { ButtonProps } from index.tsx:

import styled, { css } from "styled-components";
import { ButtonProps } from ".";

To set different styles to our Button component, let's create a const called COLOR and pass some styles with the css we imported to encapsulate it, using the same name we put on the color property in ButtonProps:

const COLOR = {
  primary: css`
    color: #fff;
    background: linear-gradient(#3f3cfe, #e943d5);
  `,
  secondary: css`
    color: #000;
    background: linear-gradient(#c7c7d2, #bcbaba);
  `,
};

And a const called DISABLED, to style the Button when it's disabled:

const DISABLED = css`
  cursor: not-allowed;
  background: #d4d4d4;
  color: #f5f5f5;
`;

Now, let's pass some default styles to the Button Container and call the ButtonProps type, in order to use the properties:

export const Container = styled.button<ButtonProps>`
  padding: 10px 15px;
  cursor: pointer;
  border: none;
  border-radius: 50px;
  font-weight: 500;
  outline: none;
  transition: all 0.2s;

  ${(props) => props.color && COLOR[props.color]}
  ${(props) => props.disabled && DISABLED}
`;

As you can see above, we have to pass some arrow functions to call the properties and match it with our encapsulated css (const COLOR and const DISABLED).

Now, we have a powerful reusable button component!

You can see the results at the beginning of the article!

Thanks for reading this content, I hope it helps you in some way and, if you notice something wrong, feel free to help me leaving a comment bellow or find me on twitter !

You can also find me at:

Github
Linkedin

Reusable Collapsible Component with ReactJS

The Huferr — Fri, 09 Jul 2021 10:35:04 +0000

Welcome, here's a guide teaching you how to create a simple and useful Reusable Collapsible Component, with ReactJS.

Observation: I created this post considering that you know the basics of ReactJS. If you see anything wrong, please tell me!

You can see it working at CodePen: https://codepen.io/huferr/pen/NWjNLMy

Let's start by creating a functional component and call it Collapsible. It will return some HTML elements, which will structure our layout.

For this case, let's set:

A div element, which will keep all the elements bellow;
A button element, responsible for toggling the content visibility;
A div element, which will handle our content.

Now, to make this component reusable, we have to pass some properties to it, to make this component accept data from outside, not having to change its structure every time.

For this we'll set the props: children and label, by doing props destructuring, it means you don't have to call "props.children" or "props.label" every time you want to use these props. You only have to pass the prop names inside a curly brackets in the function.

Let's see what we've done so far:



import React from "react";
import "./styles.css";

const Collapsible = ({ children, label }) => {
  return (
    <div className="container">
      <button className='toggle'>{label}</button>

      <div>{children}</div>
    </div>
  );
};

export default Collapsible;

OK, we have our button, that will make the content appear and disappear and we have our div with that content.

First thing, to make the content toggle, we'll need to set a CSS class (.show) to style how it's going to appear on our screen, and an other class (.content) to make it disappear:



.content {
    width: auto;
    height: auto;
    margin-top: 10px;
    border: 1px solid #686868;
    display: none;
    justify-content: center;
    border-radius: 10px;
}

.show {
    display: flex;
}

As you can see, the magic is on the display property. When the div has the .show class, the content will be displayed!

Now, to make the toggle effect when click on the button, let's use the useState Hook! With this, let's set isOpen and setIsOpen, initializing with false.

Obs.: Do it in the same Collapsible component.



import React, {useState} from 'react'
import './styles.css'

const Collapsible = ({children, label}) => {

    const [isOpen, setIsOpen] = useState(false)

Good! Now, with the onClick event in the button, let's pass a simple arrow function, setting the isOpen true or false, according to its previous state (if isOpen === false, set to true and vice-versa), using !, the logical "not" operator in javascript. See it:



<button className='toggle' onClick={() => setIsOpen(!isOpen)}>{label}</button>

After that, to bind this event with the content, let's use a ternary operator in the content div class. So, isOpen === true ? use 'content and show' classes (content appears), isOpen === false ? use only 'content' (content disappears). See it:



<div className={isOpen ? 'content show' : 'content'}>{children}</div>

Now, we have a Reusable Collapsible Component! You can change the label and children (content) prop, where the component will stay:

Example 1



  <span class="p">&lt;</span><span class="nc">Collapsible</span> <span class="na">label</span><span class="p">=</span><span class="s">'Click Here'</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Profile<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Dashboard<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Logout<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nc">Collapsible</span><span class="p">&gt;</span>

Example 2



 <span class="p">&lt;</span><span class="nc">Collapsible</span> <span class="na">label</span><span class="p">=</span><span class="s">'Animals'</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Cat<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Dog<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Cow<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
  <span class="p">&lt;/</span><span class="nc">Collapsible</span><span class="p">&gt;</span>

Results

OTHER OBSERVATION: The purpose of this post was to show the functionality, so, sorry for the bad styling haha!

Done! Thanks for reading this content, I hope it helps you in some way and, if you notice something wrong, feel free to help me leaving a comment bellow or find me on twitter !

You can also find me at:

Github
Linkedin

TAB Component with ReactJS

The Huferr — Wed, 07 Jul 2021 22:59:40 +0000

Welcome, my name is Hugo Ferreira! Today, I'm here to teach you how to create a TAB component with ReactJS!

Observation: I created this post considering that you know the basics of ReactJS. If you see anything wrong, please tell me!

You can see it working at CodePen: https://codepen.io/huferr/pen/GRmZJJx

To do this, we will use a functional component called Tab. This component will return the HTML content. Let's define it:

const Tab = () => {
  return (
    <div className="container">
      <ul className="tab-list">
        <li className="tabs active-tabs">Tab 1</li>
        <li className="tabs">Tab 2</li>
        <li className="tabs">Tab 3</li>
      </ul>
      <div className="content-container">
        <div className="content active-content"><h2>Lorem</h2></div>
        <div className="content"><h2>Ipsum</h2></div>
        <div className="content"><h2>Dolor</h2></div>
      </div>
    </div>
  );
};

Observe the classes called active-tabs and active-content in our first tab and content elements. These classes will define which component should or should not be shown, and we'll use CSS to make this happen.

What will make the tab change effect is the active-tabs class. When called, the style of the tab will change, making it "visible". Look the example:

Here's the CSS file:

.container {
  width: 400px;
  height: 250px;
  background-color: #eeeded;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.tab-list {
  height: 50px;
  display: flex;
  list-style: none;
  font-size: 18px;
  padding: 0;
  margin: 0;
}

.tabs {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #80808013;
  position: relative;
  cursor: pointer;
}

.tabs:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.active-tabs {
  background: #eeeded;
}

.active-tabs::before {
  content: "";
  display: block;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 2px);
  height: 4px;
  background: #5893f1;
}

.content {
    display: none;
    background-color: #eeeded;
    padding: 10px;
}

.active-content {
    display: flex;
}

As you can see, the tabs class has a background to represent that it has not been selected. So, when we put the active-tabs class, the tab style looks like it's selected.

Looking at the content class, we can see display: none, which will "hide" the content from the screen, and it will only show when we call active-content, which has display: flex. This will make the content appear.

What we have to do now is create a way to control these classes when we click on each tab, binding the element that has the active-tabs class with the element that has the active-content class.

To do that, let's import useState Hook and set our toggleState, which will handle the index of each tab we have.

Obs.: Do it in the same Tab component.

import React, { useState } from "react";

const Tab = () => {

    const [toggleState, setToggleState] = useState(1)

  return (

Now, let's define an Index for each tab we have (3).

// Tab 1 = index 1
// Tab 2 = index 2, and so on...

To make it easier to understand, let's create a function that will set the index every time we click in each tab:

const toggleTab = (index) = {
        setToggleState(index)
    }

Then, create an onClick event on each tab. Call an anonymous function with our toggleTab function. So, for each tab, let's define an index:

<ul className="tab-list">
        <li className="tabs active-tabs" onClick={() => toggleTab(1)}>Tab 1</li>
        <li className="tabs"onClick={() => toggleTab(2)}>Tab 2</li>
        <li className="tabs"onClick={() => toggleTab(3)}>Tab 3</li>
      </ul>

Finally, let's control the classes! For this, let's use a ternary operator inside className="":

 <ul className="tab-list">
        <li className={toggleState === 1 ? 'tabs active-tabs' : "tabs"} onClick={() => toggleTab(1)}>Tab 1</li>
        <li className={toggleState === 2 ? 'tabs active-tabs' : "tabs"} onClick={() => toggleTab(2)}>Tab 2</li>
        <li className={toggleState === 3 ? 'tabs active-tabs' : "tabs"} onClick={() => toggleTab(3)}>Tab 3</li>
      </ul>

Now, let's do it for the content:

<div className="content-container">
        <div className={toggleState === 1 ? 'content active-content' : "content"}><h2>Lorem</h2></div>
        <div className={toggleState === 2 ? 'content active-content' : "content"}><h2>Ipsum</h2></div>
        <div className={toggleState === 3 ? 'content active-content' : "content"}><h2>Dolor</h2></div>
      </div>

Basically, we are saying that if toggleState is 1, put the class tabs and active-tabs in the Tab 1. if toggleState is 2, put the class tabs and active-tabs in the Tab 2. If not, put only tabs Same for the content classes.

In order to make it better, let's create a function to do this comparison:

const getActiveClass = (index, className) =>
    toggleState === index ? className : "";

Overview:

import React, { useState } from "react";
import "./styles.css";

const Tab = () => {
  const [toggleState, setToggleState] = useState(1);

  const toggleTab = (index) => {
    setToggleState(index);
  };

  const getActiveClass = (index, className) =>
    toggleState === index ? className : "";

  return (
    <div className="container">
      <ul className="tab-list">
        <li
          className={`tabs ${getActiveClass(1, "active-tabs")}`}
          onClick={() => toggleTab(1)}
        >
          Tab 1
        </li>
        <li
          className={`tabs ${getActiveClass(2, "active-tabs")}`}
          onClick={() => toggleTab(2)}
        >
          Tab 2
        </li>
        <li
          className={`tabs ${getActiveClass(3, "active-tabs")}`}
          onClick={() => toggleTab(3)}
        >
          Tab 3
        </li>
      </ul>
      <div className="content-container">
        <div className={`content ${getActiveClass(1, "active-content")}`}>
          <h2>Lorem</h2>
        </div>
        <div className={`content ${getActiveClass(2, "active-content")}`}>
          <h2>Ipsum</h2>
        </div>
        <div className={`content ${getActiveClass(3, "active-content")}`}>
          <h2>Dolor</h2>
        </div>
      </div>
    </div>
  );
};

export default Tab;

Results

Done! Thanks for reading this content, I hope it helps you in some way and, if you notice something wrong, feel free to help me leaving a comment bellow or find me on twitter !

You can also find me at:

Github
Linkedin

Forem: The Huferr

How to create your own custom array methods in JavaScript

🔎 What is prototype in JavaScript?

📜 Array object

✅ New array method

How create a recursive function using Javascript

🔎 What does recursion mean?

⚙️ Coding

🧠 Overview

Reusable Button with ReactJS + Typescript + Styled-components

Reusable Collapsible Component with ReactJS

Example 1

Example 2

Results

TAB Component with ReactJS

Overview:

Results

🔎 What is `prototype` in JavaScript?