Forem: Alex Wentz

Username and Password Validation Using Regex

Alex Wentz — Sat, 24 Jun 2023 15:40:30 +0000

When I was first learning web development, one of the tools that consistently eluded my understanding was regex. It's been about a year and a half since I got my first engineering job, and that level of understanding persisted until very recently.

I hadn't really needed to learn regex before, but a recent work project (mobile app, React Native) required frontend validation on a user registration page for the username and password. The use case was complicated enough to require learning more than I knew, but easy enough to be attainable. By the end, it felt like a great example to talk through in a tutorial, so here we are!

The Problem

Usernames have a minimum number of characters, require at least one number, and so on. Passwords often do the same, usually adding an assessment of password strength.

For our example here, we want the following to be true:

Username: between 6 and 16 characters, alphanumeric only
Valid Password: between 8 and 32 characters, at least one letter and one number
Strong Password: valid, plus a combination of uppercase and lowercase letters and special characters

The Solution

Part A: the regex we need

Username

While some exposure to regex is useful here, the following explanation is intended to be clear enough for anyone to understand.

Let's start with the username. We need it to contain only letters and numbers, and it must be between 6 and 16 characters long. This will do the trick:

/^[0-9A-Za-z]{6,16}$/

Let's break this statement up into its parts.

/.../ wrap/denote a regex statement
^ indicates the start of a string, while $ indicates the end. Basically, this is ensuring that the entire string follows our rules, rather than only a subset of the string.
[...] indicates a particular set of valid characters, otherwise called a character class; 0-9 allows numbers, A-Z allows uppercase letters, a-z allows lowercase. There are other indicators, and you can find a complete list in regex documentation.
{6,16} indicates the allowed number of characters. If you just used {6}, you're testing for a length of exactly 6, while {6,} tests for minimum length.

Password

When we move on to test for a valid password, the requirements change. Instead of being limited to letters and numbers only, now we need at least one each of different kinds of characters. This requires us to implement a specific check for each of them, which looks like:

/^(?=.*?[0-9])(?=.*?[A-Za-z]).{8,32}$/

Let's break down the new symbols here.

(...) is a capture group. You can use them for capturing particular characters in specific orders.
?= is a positive lookahead. The search moves rightward through the string from the location in your regex you make this assertion in.
. signifies any character is possible, while * means 'zero or more' of them.
The extra question mark in ?=.*? makes the search lazy, which essentially means 'stop looking after the first time this requirement is met'.

Translated into plain English, the first part of our statement ^(?=.*?[0-9]) means 'from the start of the string, find a number that is preceded by zero or more of any character'.

Adding (?=.*?[A-Za-z]) means do the same for any letter, or 'from the start of the string, find a letter that is preceded by zero or more of any character'. This allows us to confirm the presence of a specified kind of character within the total set of what is allowed without regard to where it occurs in the string.

The last part of our statement .{8,32}$ builds on our understanding of . usage. We don't want to limit what kinds of characters the actual password is allowed to be. In contrast, if limiting to letters and numbers only, you'd use [0-9A-Za-z]{8,32}$.

In addition to the valid password requirements, a strong password requires at least one uppercase letter, at least one lowercase letter, and at least one special character. We can just build on the same regex statement:

// valid, but not strong
/^(?=.*?[0-9])(?=.*?[A-Za-z]).{8,32}$/
// strong
/^(?=.*?[0-9])(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[^0-9A-Za-z]).{8,32}$/

There's one more new meaning to unpack here. Translating to English first will make the meaning clear:

find one number, (?=.*?[0-9])
one uppercase letter, (?=.*?[A-Z])
one lowercase letter, (?=.*?[a-z])
and one character that is NOT alphanumeric (?=.*?[^0-9A-Za-z])
in a string with any characters between 8 and 32 characters long .{8,32}

When used at the start of a character class ^ means 'NOT', or everything excluding. A basic understanding of sets helps here. A simple example is [^B], which means 'any character except B'.

Part B: testing for valid inputs

The JavaScript RegExp class has a very handy method called test() that can be used to test strings against a specified regex statement. For instance,

const validUsername = /^[0-9A-Za-z]{6,16}$/;

console.log(validUsername.test('username')) // valid
// prints true
console.log(validUsername.test('test1')) // too short
// prints false
console.log(validUsername.test('@testing1')) // invalid character
// prints false

You can do the same thing with password, as demonstrated in a replit I created embedded below. Select 'show code' to see the functions you have to work with, then hit run when you want to open the environment and play around with running your own tests.

Wrapping Up

My use case (frontend validation) requires capturing live user input and testing that input by passing it into tests, but there are countless other applications out there.

As I was going through learning, StackOverflow was probably the most useful tool to me. A great collective reference for you can be found here: StackOverflow Regex FAQ

I personally found it much easier to learn regex through the lens of an application, and I hope you found this helpful too. Let me know your thoughts in the comments or if there is anything you'd like to add!

Your Go-To Rails Command Line Cheat Sheet!

Alex Wentz — Mon, 13 Dec 2021 18:37:46 +0000

I've been learning Rails and working in backend development environments for the last few weeks through my coursework at Flatiron school, and I've found there are some commands used more frequently than others when building out Rails applications.

I thought it would be beneficial to myself as well as others to create a 'cheat sheet' that lists all the most commonly used commands while learning Rails and developing a backend/full stack skill set. I've broken them down into the following:

Getting Started
Basic Commands
Db Commands
Generator Commands

Getting Started

# if the gem doesn't yet exist in your ruby application:
gem install rails

# generally run first thing, to install all dependencies
bundle install

# if you modify your gem file and need to update
# your installed dependencies
bundle update

# creates a new rails application in the current
# directory called ingenious_app
rails new ingenious_app

Basic Commands

Some ruby commands can be shortened. If an abbreviated command (or "shortcut alias") exists, it is listed as a comment right below the full command.

# lists the current version of rails being used
rails version
# rails -v

# runs a web server so that you may access the database
# using the default url http://localhost:3000
rails server
# rails s
# to exit, use Ctrl-C

# opens a console session to play/work with the data,
# test various ideas, check your work, etc.
rails console
# rails c
# to exit, use Ctrl-D

# lists all active routes that exist in the rails application
rails routes

# generates new code for you - more on this command in a bit
rails generate
# rails g

# produces an abbreviated list of available commands,
# most lack any description
rails -h

# add -h to any command to learn more about possible options
rails <command> -h
# example:
# rails generate -h

# produces a detailed list of available commands
# with descriptions
rails --tasks

Database (db) Commands

# creates the database for the current environment (ex: development)
rails db:create

# deletes the database for the current environment
rails db:drop

# runs any pending migrations for the current environment
rails db:migrate

# checks the status of all migrations (up, down, or pending)
rails db:migrate:status

# rolls back (undo) the most recent migration
rails db:rollback

# runs the db/seed.rb file, thereby seeding the database
rails db:seed

# truncates all tables in the current database, re-runs the
# seed file (empties the database, replaces with seed data)
rails db:seed:replant

# runs multiple commands (db:drop and db:setup); resets 
# database by deleting database, loading current schema into 
# current environment database, then running seed file
rails db:reset

Generator Commands

Generators were mentioned above in the basic commands section, but due to the robust nature of generators, they merit their own section. For these commands, it will be easier to explain using an example. We'll work with a Users model that requires a name and an age.

# generates a User model where relationships,
# custom methods, and validations can be defined.
# Specify desired columns and their data types. A column's
# data type defaults to string unless otherwise specified
rails g model user name age:integer

# creates the following User model
class User < ApplicationRecord
end

# as well as the following migration file that creates
# the Users table with columns for name and age.
class CreateUsers <ActiveRecord::Migration[6.1]
    def change
        create_table :users do |t|
            t.string :name
            t.integer :age

            t.timestamps
        end
    end
end

# Generates a UsersController where CRUD route methods
# and supporting private methods are defined
rails g controller users index show

# Any methods you list after the controllers name pre-build
# them for you. The above creates the following:
class UsersController < ApplicationController
    def index
    end

    def show
    end
end

Note: The following command relies on having the active_model_serializers gem installed. Serializers allow you to define what data gets generated in a JSON using attributes and relationships.

# Generates a UserSerializer
rails g serializer user name age

# creates the following:
class UserSerializer < ActiveModel::Serializer
    attributes :id, :name, :age
end

# creates a migration file that will need filling in
rails g migration create_users name age:integer

# creates the following migration;
# note that including columns does nothing:
class CreateUsers <ActiveRecord::Migration[6.1]
    def change
    end
end

Want something that does (almost) everything? Resource is the command you want!

# creates a migration with create_table and columns
# defined, the users controller, the user model,
# AND the user serializer. Woah!
rails g resource user name age:integer

Seeking Reader Input

Is this cheat sheet missing anything you think should be included? Share out in the discussion below and I'll modify this post as needed!

Working With Tables in React: How to Render and Edit Fetched Data

Alex Wentz — Thu, 18 Nov 2021 20:57:39 +0000

For a recent project, my team and I wanted to build a table in our front end (using React) which would hold the data we pulled from the back end (using Ruby and Sinatra to build the database and API paths).

Another post (linked at the end) was extremely helpful in getting the data into our table, but we wanted to be able to edit the table data and have those edits persist using a PATCH request. Given how state works in React and how the React components were organized, this was a task. I thought it would be worth sharing how we incorporated edit capabilities.

Basic Outline of this Post - Jump to What You Need

Phase 1: Rendering Data to the Table
- how to grab data using a GET fetch request
- how to push data into table rows
Phase 2: Building an Edit Feature
- how to capture the data you want to edit
- how to create an EditForm component; show/hide as needed
- how to build the PATCH request and submit changes

A Simple Component Map

Here you can see how the component relationships are defined and what the primary responsibility is for each one. We'll use customers data as an example.

Phase 1: Rendering Data to the Table

Getting Your Data Using Fetch

Below you'll see the first step to take - getting your data using a fetch and saving it to state.

// App.js
import React, { useEffect, useState } from "react";
import Customers from "./Customers";

function App() {
// set state
  const [customers, setCustomers] = useState([]);

// first data grab
  useEffect(() => {
    fetch("http://localhost:9292/customers") // your url may look different
      .then(resp => resp.json())
      .then(data => setCustomers(data)) // set data to state
  }, []);

return (
    <div>
      {/* pass data down to the Customers component where we'll create the table*/}
      <Customers customers={customers} />
    </div>
  );
}
export default App

Pushing Data Into Your Table

Once we have the data passed down to the Customers component, we need to create a table (HTML tag is table) into which the data gets pushed. Inside, you nest a table header (thead) where the column names go (th), as well as a table body (tbody) where the rows of data will go (tr).

// Customers.js
import React from 'react'
import Customer from './Customer'

function Customers({customers}) {

  return (
        <table>
          <thead>
            <tr>
              <th>Customer ID</th>
              <th>Name</th>
              <th>Email</th>
              <th>Phone</th>
              <th>Modify Customer</th> // where you'll put the edit button
            </tr>
          </thead>
          <tbody>
            {/* iterate through the customers array and render a unique Customer component for each customer object in the array */}
            { customers.map(customer => <Customer key={customer.id} customer={customer} />) }
          </tbody>
        </table>
  )
}

export default Customers

When formatting the Customer component, it is very important that you mind what kinds of HTML tags you use. Since Customer will manifest inside of a table, your top level HTML element needs to be a table row (tr).

// Customer.js
import React from 'react'

// deconstructed props
function Customer({customer:{id, name, email, phone} }) {

  return (
        <tr key={id}>
            <td>{id}</td>
            <td>{name}</td>
            <td>{email}</td>
            <td>{phone}</td>
            <td><button>Edit</button></td>
        </tr>
  )
}
export default Customer

At this point, we successfully have data rendering in a table. Now for the fun part: creating an edit feature!

Phase 2: Building an Edit Feature

In order to edit our table data in a way that persists to the database, we have to build a few new functions across multiple components.

Our concerns include:

capturing the customer data we want to edit
creating the EditCustomer component; show/hide as needed
passing captured customer data to the edit form
building the PATCH request to submit the changes
auto-updating the customer data in the browser

Due to the complexity of the task, I'll start with a simple description of each. Then, I'll include fully updated code blocks for each component. It is possible some of the code could be written more efficiently, but I tried to aim more for clarity.

Capture the customer's data

We'll need input fields in which to make changes, but it will need to happen outside of the table. Input tabs cause errors inside of a table, so we need to pass the data captured in Customer up to Customers where it will then get passed back down to the EditCustomer component.

Create the EditCustomer component; conditionally render

Keeping with React best practices, EditCustomer should be a separate component. The component will hold a form, as well as the PATCH request function.

You can conditionally render this component using state. See more about this skill in a previous post of mine here.

Pass captured customer to EditCustomer

Using state defined in Customers, you can save the customer data captured, then pass it down to the edit form. This is doubly helpful when submitting the PATCH request.

Build the PATCH request to ensure persistence

The PATCH request will live in the EditCustomer component and will submit the state that holds the captured customer's data (as well as any changes we've made to it).

Automatically render the updated data

We'll need a function in the same component where customer state is defined (in App), then pass that function down as props to the needed components and dependent functions. This function will automatically render the updated data to the page.

Component Code Blocks

App

import React, { useEffect, useState } from "react";
import Customers from "./Customers";

function App() {
// set state
  const [customers, setCustomers] = useState([]);

// first data grab
  useEffect(() => {
    fetch("http://localhost:9292/customers")
      .then((resp) => resp.json())
      .then((data) => {
        setCustomers(data)
      });
  }, []);

// update customers on page after edit
  function onUpdateCustomer(updatedCustomer) {
    const updatedCustomers = customers.map(
      customer => {
        if (customer.id === updatedCustomer.id) {
          return updatedCustomer
        } else {return customer}
      }
    )
    setCustomers(updatedCustomers)
  }

  return (
    <div>
      <Customers
        customers={customers}
        onUpdateCustomer={onUpdateCustomer}
      />
    </div>
  );
}
export default App;

Customers

import React, {useState} from 'react'
import Customer from './Customer'
import EditCustomer from './EditCustomer'

function Customers({customers, onUpdateCustomer}) {
// state for conditional render of edit form
  const [isEditing, setIsEditing] = useState(false);
// state for edit form inputs
  const [editForm, setEditForm] = useState({
    id: "",
    name: "",
    email: "",
    phone: ""
  })

// when PATCH request happens; auto-hides the form, pushes changes to display
  function handleCustomerUpdate(updatedCustomer) {
      setIsEditing(false);
      onUpdateCustomer(updatedCustomer);
    }

// capture user input in edit form inputs
  function handleChange(e) {
    setEditForm({
    ...editForm,
    [e.target.name]: e.target.value
    })
  }

// needed logic for conditional rendering of the form - shows the customer you want when you want them, and hides it when you don't
  function changeEditState(customer) {
    if (customer.id === editForm.id) {
      setIsEditing(isEditing => !isEditing) // hides the form
    } else if (isEditing === false) {
      setIsEditing(isEditing => !isEditing) // shows the form
    }
  }

// capture the customer you wish to edit, set to state
  function captureEdit(clickedCustomer) {
    let filtered = customers.filter(customer => customer.id === clickedCustomer.id)
    setEditForm(filtered[0])
  }

  return (
      <div>
        {isEditing?
          (<EditCustomer
            editForm={editForm}
            handleChange={handleChange}
            handleCustomerUpdate={handleCustomerUpdate}
          />) : null}
        <table>
          <thead>
            <tr>
              <th>Customer ID</th>
              <th>Name</th>
              <th>Email</th>
              <th>Phone</th>
              <th>Modify Customer</th>
            </tr>
          </thead>
          <tbody>
              { customers.map(customer =>
                <Customer
                  key={customer.id}
                  customer={customer}
                  captureEdit={captureEdit}
                  changeEditState={changeEditState}
                />) }
          </tbody>
        </table>
      </div>
   )
}
export default Customers

Customer

import React from 'react'

function Customer({customer, customer:{id, name, email, phone}, captureEdit, changeEditState}) {

    return (
        <tr key={id}>
            <td>{id}</td>
            <td>{name}</td>
            <td>{email}</td>
            <td>{phone}</td>
            <td>
                <button
                  onClick={() => {
                    captureEdit(customer);
                    changeEditState(customer)
                  }}
                >
                  Edit
                </button>
            </td>
        </tr>
    )
}
export default Customer

EditCustomer

import React from 'react'

function EditCustomer({ editForm, handleCustomerUpdate, handleChange }) {
    let {id, name, email, phone} = editForm

// PATCH request; calls handleCustomerUpdate to push changes to the page
    function handleEditForm(e) {
        e.preventDefault();
        fetch(`http://localhost:9292/customers/${id}`, {
            method: "PATCH",
            headers: {
                "Content-Type" : "application/json"
            },
            body: JSON.stringify(editForm),
        })
            .then(resp => resp.json())
            .then(updatedCustomer => {
                handleCustomerUpdate(updatedCustomer)})
    }

    return (
        <div>
            <h4>Edit Customer</h4>
            <form onSubmit={handleEditForm}>
                <input type="text" name="name" value={name} onChange={handleChange}/>
                <input type="text" name="email" value={email} onChange={handleChange}/>
                <input type="text" name="phone" value={phone} onChange={handleChange}/>
                <button type="submit">Submit Changes</button>
            </form>
        </div>
    )
}
export default EditCustomer

Conclusion

And there we have it! You can now push data into a table when using React, as well as edit the data in the page.

Reader feedback: Was there a better way? Did I put state in the wrong place? Have some advice to pass down to an early career engineer? Share out in the discussion below!

Did you find this tutorial helpful? Like and follow for more great posts to come!

Resources

An Easy Way to Create a Customized Dynamic Table in React

Conditional Rendering in React: A Quick Introduction

Alex Wentz — Wed, 27 Oct 2021 20:15:02 +0000

What is Conditional Rendering?

Many websites want users to create an account that requires you to sign in when using the site. Any social media, blogging platform, or e-commerce site will often even require you to have that account.

When you go to sign in, you will often click on a button that says something like 'Login' but what happens to that button after you're logged in? It usually changes to 'Logout' until you sign out, after which it says 'Login' again. This is a common example of conditional rendering.

Conditional rendering is when you set conditions in your code that impacts what gets displayed for a user. Some examples could be single html elements on the page (like a login/logout button) or even entire React components (like navigating to a Contact Us form for customers). Some defined condition must be met for a certain kind of display to present for the user.

How to Implement Conditional Rendering in Your React App

While there are several ways to implement conditional rendering, today I'm only going to talk through my go-to method: ternary operators. They rely on requiring only two possible displays, but other methods could give more than two possible paths; switch allows for three or more conditions.

We'll talk through a like button, which is a common use case, and use that as the base of our example.

Ternary Operator - A Like Button

As a reminder, a ternary operator takes three arguments. The first will return a Boolean value of either true or false. If true, the ternary will implicitly return the second argument; if false, it will return the third.

In the code below, we have some Boolean value 'liked' associated with a certain post in some social media platform for a particular user. If they haven't liked it yet, the button will display "Like"; if they have, the button will display "Liked". While not included here, typically there would also be click events located in the button tag to allow the user to toggle between displaying "Like" and "Liked" in the browser.

// Example #1
<button>{ liked ? "Liked" : "Like" }</button>

// Example #2
{ liked ? <button>Liked</button> : <button>Like</button> }

Either example above will produce the same display.

In example #1, we have a single ternary located inside the button tag. When the element itself doesn't change and either display will use the same click events, this can be a clean and efficient way to structure the code.

In example #2, you are returning two separate elements. While the example we're working with doesn't appear to require writing out that much code, it can be very useful if you are choosing between two different html elements or whether or not to be able to hide/show that element on the page.

Toggle Between Showing/Hiding Elements

Say we are scrolling through a catalog of images with any details hidden on load, but a user can click a "Show Details" button below any image to display them. In React, we could create a separate component for those details.

This might require code that looks something closer to the following (albeit with some details like click events and state missing - more on that below):

import ItemDetails from './ItemDetails.js'

function ItemContainer({item}) {
    return (
        <div>
            <img src={item.image} alt={item.description}></img>
            <button>{ showDetails ? "Hide Details" : "Show Details" }</button>
            { showDetails ? <ItemDetails item={item} /> : null }
        </div>
    )
}

An image displays along with a button that allows you to show/hide details. When showDetails is false, nothing will display. When it is true, you'll display the ItemDetails component along with the image right there on the page.

When to Leverage State

The previous example is a great segue into how state can be leveraged in conditional rendering. Showing and hiding details does not rely on static data, but rather on the behavior of the user in that particular instance.

Using state is a very easy way to accomplish what we need. Building upon our example, we can do the following:

import ItemDetails from './ItemDetails.js'
import {useState} from 'react' // don't forget to import!

function ItemContainer({item}) {
// set state you'll use in click event
const [showDetails, setShowDetails] = useState(false)

//define your click event function
function handleClick() {
    setShowDetails(!setShowDetails) // toggle between true/false on click
}
    return (
        <div>
            <img src={item.image} alt={item.description}></img>
            <button onClick={handleClick}>{ showDetails ? "Hide Details" : "Show Details" }</button>
            { showDetails ? <ItemDetails item={item} /> : null }
        </div>
    )
}

Wrapping Up

This post is only a brief introduction to conditional rendering and how we use ternary operators to implement them. There are many other methods to explore that may be more useful in different contexts. We also touched on how state can be a useful tool in conditional rendering.

If you found this tutorial helpful, like and follow for more posts to come!

I do declare [a function]!

Alex Wentz — Mon, 04 Oct 2021 22:37:38 +0000

Working with functions is one of the most fundamental skills one needs to develop when learning how to code. When I first started learning about functions in JavaScript, my mathematics background made the concept fairly easy to understand. However, some of the nuances of the syntax took a little time to learn; in particular, I had to focus on the different ways functions could be created and used. I've written this post to help others navigate those same nuances with ease. In particular, this post will help you:

distinguish between function declarations and function expressions
learn the pros and cons of each

What is a function? A brief review

Harken back to your high school algebra days, when you were first exposed to the concept of a function. A function is, simply, a defined set of actions to take upon some 'input' such that you end up with a transformed 'output.' Functions are predictable; if you put the same input in, you'll always get the same output out.

// name        
//  |  variable
//  |   |     set of actions
//  |   |        |
    f ( x ) =  x + 6  // "f of x is equal to x plus 6"
    f ( 2 ) =  8  // "f of 2 is equal to 8"
//      |      |
//    input  output

Function notation helped us talk about them. Anytime we referred to the function called f (or any other name), we knew we were supposed to perform the defined set of operations upon the input. In coding, it works exactly the same way.

Functions are extremely useful in helping us organize complex sets of actions to take, especially when we need to perform those actions over and over again on different inputs. This idea is fairly straightforward; implementing the concept in JavaScript is perhaps a little less so, but it's a double-edged sword. You have more to learn, but you also have more functionality.

While the complete ins and outs of JS functions would make for a very long post indeed, what follows is a strong introduction to some of the core concepts.

Ways to Create Functions in JavaScript

1. Declaring functions

One way you can create a function in JavaScript is by using function declaration. The syntax is as follows:

function name(parameter1) {
     "action(s) the function takes";
}

We start by declaring that we're making a function, then we name it. Next to the name, you put any parameters in parentheses; if you have more than one, you separate using commas.

Function declaration is easy to read and understand when sharing code, especially if you use intuitive naming. For example:

function addNumbers(a, b) {
   console.log(a + b);
}

When you actually go to use addNumbers, you give the function arguments, in this case 3 and 5.

addNumbers(3, 5)
//LOG: 8

The primary benefit of using function declaration is that the function is hoisted, which means it can be referenced anywhere in the code (properly accounting for scope, of course), whether the function is called before or after its declaration.

2.a. Function expressions

Another way you can create a function is by using a function expression. Some more harkening back and you'll remember a mathematical expression was like an incomplete sentence. You could write 3x + 4, but without a relational statement (=, <, >, etc) or a value for x, there was nothing you could do with it.

A common way to create a function expression is to assign the function expression to a variable.

const variable = function(parameter) {
     actions the function takes;
}
// example
const doubling = function(num1) {
     return num1 * 2;
}

Notice there is no 'name' listed like with function declaration; the variable we assign acts much like the name of the function when you wish to use it.

The primary drawback of using a function expression is that the function will not be hoisted; you won't be able to use the function in your code anywhere before you create it. This might not seem like a big deal at first, but it quickly becomes a drawback as your projects get more complex.

There are some benefits to using function expressions, particularly when you need to use nested functions, callback functions, and/or immediately invoked functions, but I haven't seen use cases where function expressions make the most sense unless you are using an arrow function expression. If you have found specific ways in which you believe variable assignment is the better strategy (over function declaration or using an arrow function), I'd love to hear from you about it in the comments.

This gives us a good segue to talk about arrow functions.

2.b. Arrow functions [are function expressions]

Arrow function expressions were added to the JavaScript language in 2015, and personally, I love them. They can have a very clean and easy to read aesthetic, and they work great when you need to use a function inside another function, either as a nested function or callback function.

// could assign to a variable
const variable = (parameter) => {actions the function takes}

// you can also eliminate parenthesis and/or brackets if you only have one parameter and/or one action to take, respectively
const variable = parameter => action to take;

// use anonymously as a nested function
function addThenMultiply(a, b, c) => {
     let sum = a + b;
     return sum => sum * c;
}

Another benefit to a function expression is that they don't need to be named; they can be anonymous, and in fact, arrow functions are always anonymous. This is useful if you're immediately invoking the function as a callback or nested function and don't also need to use it elsewhere.

Conclusion

I hope you now have a better understanding of the biggest differences between function declaration and function expressions. But I only scratched the surface of many related topics, such as using anonymous functions or the difference between nested and callback. Arrow function syntax has more nuance regarding implicit versus explicit returns. We also didn't spend much time delving into various use cases and what strategy is best in different situations.

I'm excited to talk about all these topics and more in future posts, so follow me for more great content!

Forem: Alex Wentz

Username and Password Validation Using Regex

The Problem

The Solution

Part A: the regex we need

Username

Password

Part B: testing for valid inputs

Wrapping Up

Your Go-To Rails Command Line Cheat Sheet!

Getting Started

Basic Commands

Database (db) Commands

Generator Commands

Seeking Reader Input

Working With Tables in React: How to Render and Edit Fetched Data

Basic Outline of this Post - Jump to What You Need

A Simple Component Map

Phase 1: Rendering Data to the Table

Getting Your Data Using Fetch

Pushing Data Into Your Table

Phase 2: Building an Edit Feature

Capture the customer's data

Create the EditCustomer component; conditionally render

Pass captured customer to EditCustomer

Build the PATCH request to ensure persistence

Automatically render the updated data

Component Code Blocks

App

Customers

Customer

EditCustomer

Conclusion

Resources

Conditional Rendering in React: A Quick Introduction

What is Conditional Rendering?

How to Implement Conditional Rendering in Your React App

Ternary Operator - A Like Button

Toggle Between Showing/Hiding Elements

When to Leverage State

Wrapping Up

I do declare [a function]!

What is a function? A brief review

Ways to Create Functions in JavaScript

1. Declaring functions

2.a. Function expressions

2.b. Arrow functions [are function expressions]

Conclusion

Curious to learn more? Try these resources: