DEV Community: Iris Silverman

The Vuex HopTopics: Getters, Mutations, and Actions

Iris Silverman — Sun, 09 Feb 2020 01:38:06 +0000

The Vuex Store

Last week we just brushed the surface of Vuex in my tour de force blog Vuex with Ex-View (cast members). In that blog we set up a very basic Vuex store like so:

// This is in the store.js file
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex); // enable Vuex functionality in our application

export const store = new Vuex.Store({ // create Vuex Store
  state: {  
    exViewHosts: ['Nicolle Wallace','Lisa Ling','Rosie Perez'], 
    // include properties for your global state here
  }  
})

But there is a lot more to the Vuex store than just state. The Vuex store is made up of the global state, as well as Getters, Actions, Mutations, and any Modules you've created to organize the various parts of your store. I won't be covering Modules in this blog, but you can learn more about them in the official Vuex docs Modules section.

Let's now include Getters, Mutations, Actions, and Modules in our Vuex store.

export const store = new Vuex.Store({
  state: {  
    exViewHosts: ['Nicolle Wallace','Lisa Ling','Rosie Perez'], 
  },
  getters: {}, // we'll start filling these out in a moment
  mutations: {},
  actions: {},
  modules: {},
})

Getters

Getters are the go between that get (get it?!) access to the global state for the components in your application. If you have experience with React and Redux it might be useful to think of Getters like the mapStateToProps function. If you have experience with React Hooks think of Getters like useSelector (p.s. I wrote a blog about Hooks awhile back that you might be interested in checking out - Looky Looky, I Wrote About Hook(s)y.

export const store = new Vuex.Store({
  state: {  
    // include properties for your global state here
  },
  getters: {
    getExHosts(state) {
      return state.exViewHosts.map(host => host.toUpperCase());
    },
  },
  mutations: {},
  actions: {},
  modules: {},
})

Actions and Mutations

When a component needs to change the global state, actions and mutations are the middlemen. You technically don't need Actions to update the global state, but Mutations can only run synchronously while Actions can perform asynchronous changes and so it is best practice to first dispatch an action, then commit the change to your state through a mutation. For those of you with React / Redux experience think of Actions like mapDispatchToProps (for all you Hooks-inators think useDispatch) and mutations are the updates/changes that you make to state in the reducer.

export const store = new Vuex.Store({
  state: {  
    // include properties for your global state here
  },
  getters: {
    getExHosts(state) {
      return state.exViewHosts.map(host => host.toUpperCase());
    },
  },
  mutations: {
    retireHost(state, payload) {
      state.exViewHosts.push(payload.hostName);
    },
  },
  actions: {
    retireHost: ({ commit }, name) => {  
       commit('retireHost', { hostName: name });
    // the Action commits the mutation which will then change the state
    // p.p.s commit is destructured from the action's context object
    // you could also write this as 
    // (context, term) => context.commit(stuff here)  
  },
  },
  modules: {},
})

Accessing the Vuex store in your components

There are a couple of helpers for accessing Getters and Actions in your components.

mapGetters -- use the spread operator (...) to access in your computed properties
mapActions -- use the spread operator to access in your methods

<template>
  <div>
    <ul>
      <li :key="exHost" v-for="exHost in getExHosts">{{ exHost }}</li>
    </ul>
    <button @click="retireHost('Raven-Symoné')">
       That is so NOT Raven
    </button>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex';

  export default {
     computed: {
        ...mapGetters([
        'getExHosts'])
        }
     },
     methods: {
        ...mapActions([
        'retireHost'
        ])
     }
  }
</script>

In conclusion...

I've learned a lot about Vuex over the past couple weeks and I hope you have too. I've also learned that I might have an unhealthy obsession with The View, and I hope you do too.

Resources

Here are some great resources that contributed to the growing of my mind grapes:

Vuex with Ex-View Cast Members

Iris Silverman — Sun, 02 Feb 2020 00:26:06 +0000

What is Vuex?

Vuex is state management library for Vue.js. Basically, you have one central area (store) in your app that controls the global state.

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. - Vuex Docs

What is The View?

The View is a daytime talk show with various co-hosts. The View has seen its fair share of hosts come and go and we'll be hearing their hot-takes on Vuex throughout this article.

Nicolle Wallace explains to the table, 'If you are familiar with React and Redux you might find this analogy helpful - Vuex is to Vue applications as Redux is to React applications.' She also explains that she used to co-host The View.

Why use Vuex?

Vuex is perfect tool to use when you have lots of components that all depend on the same information - instead of passing props around from parent to child and back again, the components can rely on getting the information they need from the Vuex store. Vuex makes it easy to access global state and update it - with predictable results.

Lisa Ling gives voice to your inner question, 'But what if my app is pretty small? Only a couple components and very little state to manage? Is it really worth it to go through the trouble of setting up state management with Vuex?' She also gives voice to your other inner question, 'Did Lisa Ling used to be a co-host on The View?'. The answer is yes.

Rosie Perez replies, 'Great point, Lisa. If you have a small application it probably isn't worth setting up Vuex to manage global state. However, if you're like me and have ever been 15+ components in with state flying around every which way you'll see what a big difference to your sanity Vuex can make! You are also like me if you used to co-host The View! I'd say if you are building a medium or large sized app you should plan on using Vuex. That being said, if you are looking to practice you can set up Vuex in a smaller app to get a feel for how it works.'.

Setting up Vuex on your Vue project

Rosie O'Donnell addresses you in the audience to break down the steps, 'Okay now I know you are all wondering how to get Vuex working with your application. First things first...'

Navigate to your Vue.js project directory (cd your-project-name) and run npm install vuex --save to install Vuex for your project
Side note: Your project directory should include the following: index.html file containing an element with id="app", src folder that contains the App.vue and main.js files, the main.js file imports your App.vue file and sets up the Vue instance for your app.
Create a new store folder within your project's src folder (mkdir store) and change directory to the new folder (cd store)
Create a file to set up your store (touch store.js) in your store folder
Create your Vuex Store

// This is in the store.js file
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex); // enable Vuex functionality in our application

export const store = new Vuex.Store({ // create Vuex Store
  state: {  
    exViewHosts: ['Nicolle Wallace','Lisa Ling','Rosie Perez'], 
    // include properties for your global state here
  }  
})

Import your Vuex Store in main.js to use in your application

// main.js file
import Vue from 'vue';
import App from 'App.vue';
import { store } from './store/store';

new Vue({   // create Vuex Store
  el: '#app',  
  store,  // es6 syntax --> equivalent to store: store
  render: h => h(App)
})

Access the store from your components

// This is from my App.vue file, you can access the store from any component though
<template>
  <div>
    <ul>
      <li :key="exHost" v-for="exHost in exHosts">{{ exHost }}</li>
    </ul> 
  </div>
</template>

<script>
  export default {
     computed: {
        exHosts() {
          return this.$store.state.exViewHosts; 
          // access the Vuex store with $store
        }
     }
  }
</script>

Star Jones has an important point for the audience, 'Now before everyone gets too carried away, there is actually a lot more to the Vuex store than what Rosie has laid out. Getters, Mutations, and Actions are a big part of managing global state with Vuex and we'll be discussing next week as part of our Hot Topics.'

In conclusion...

This has been a quick introduction to Vuex and I hope you've been inspired to try out Vuex to manage state in your next Vue.js application! For a more detailed look into all that Vuex has to offer, I recommend checking out the official Vuex Docs.

Raven-Symoné is a stand-in for the author of this blog and shouts in triumph, 'I want everyone to know that I spent more time finding primo The View pictures than researching Vuex for this article!'

Resources

Infinite Jest: toBe or not.toBe

Iris Silverman — Sun, 26 Jan 2020 02:49:53 +0000

What is Jest?

Jest is an open source JavaScript testing framework and is used by lots of different companies including Facebook, Twitter, Spotify, and more. Jest is fast and intuitive to learn and set up.

To install using npm, navigate to the directory you want to add tests for (mkdir david-foster-wallace and then cd david-foster-wallace) create a package.json file (npm init -y) and enter npm install --save-dev jest in your terminal.

What is Infinite Jest?

Infinite Jest is a book by David Foster Wallace I have never read but have decided to reference numerous times to make this blog vaguely themed.

Let's write a Jest test

Once you've installed Jest you'll need to make a quick change to your package.json file and then you can start writing your first test.

1) Change the "test": value in the "scripts": object to "jest"

{
  "name": "david-foster-wallace",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest" // <-- this line!
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^25.1.0"
  }
}

2) Create a new file named pageCount.js
3) Write a function pageCount in this file

const pageCount = () => {
  return 1079 + ' pages';
// try this with 'pages' and the test in step 7 will fail!
}

module.exports = pageCount; 
// export your function to access from your test file

4) Create a new file named pageCount.test.js or pageCount.spec.js

Tests should be written in files ending in .test.js or .spec.js.

5) Make sure to require your pageCount.js file in your test file

const pageCount = require('./pageCount');

6) Write the test (we'll cover the terms and syntax in Anatomy of a test below)

describe('these tests are all about the page count of Infinite Jest', () => {
    test('pageCount should return the page count of Infinite Jest', () => {
        expect(pageCount()).toBe('1079 pages');
    })
})

7) Run your tests with npm run test in your terminal

Did npm run test get stuck for you? (more like Infinite Test, am I right??) It happened to me too! I was able to solve it by running brew uninstall watchman in my terminal. Checkout this GitHub issue for more information on npm run test hangs.

Anatomy of a test

We'll briefly cover the following terms from the test we wrote above:

Describe -- logically group your tests together
Test -- this will hold your test
Expect -- this is your assertion that checks to see if your test passes or fails

Describe is used to group tests together. If we wanted to write a few more tests all about the page count of Infinite Jest we could add them under the describe we wrote above. Describe takes 2 arguments, your summary of the tests included in describe and a function that holds the tests.

describe('these tests are all about the page count of Infinite Jest', () => {
    test('pageCount should return the page count of Infinite Jest', () => {
        expect(pageCount()).toBe('1079 pages');
    })
    test('endnotesPageCount should return the page count of the endnotes in Infinite Jest', () => {
        expect(endnotesPageCount()).toBe('too many...');
    })
    test('tooLong should return a boolean indicating if Infinite Jest is too long', () => {
        expect(tooLong()).toBe(true);
    })
})

Test takes 3 arguments, your summary of conditions to test, a function that holds your "expect", and an optional timeout. For the purposes of this tutorial I won't cover the optional timeout argument. A test does not need to be written inside a describe method.

test('timeToReadThisBook returns how long it takes to read I.J. based on reading speed', () => {
    expect(timeToReadThisBook('medium speed')).toBe('~50 hours');
})

Expect is where you write what should happen when you test for different scenarios. Expect is where you can think about different scenarios and edge cases that could arise for your code and how you want to handle them. For example, for our timeToReadThisBook function you could write an expect for when 'null' is provided as the reading speed.

test('timetoReadThisBook...', () => {
    expect(timeToReadThisBook(null).toBe(
      'You will haunt your local public library.
       Your unfinished business is to read Infinite Jest.
       Ghosts do not have ghost library cards. Sad!'
    );
})

The expect function is used every time you want to test a value. You will rarely call expect by itself. Instead, you will use expect along with a "matcher" function to assert something about a value. - Jest Docs

Jest matchers

Matchers are used to check the values in your expect methods. I've listed some of the most common matches below:

.toBe -- used for checking strict equality
.toEqual -- used for checking objects and arrays
.not -- expect(pageCount()).not.toBe('1 page')
.toContain -- used to check if an array contains an item
.toMatch -- used to check for regex matches

Complete list of matchers

.toBe vs .toEqual

The distinction between .toBe and .toEqual methods is that .toBe checks for strict equality (works for primitive types like strings and numbers) whereas 'toEqual recursively checks every field of an object or array' (thanks Jest Docs!).

In conclusion...

The novel Infinite Jest by David Foster Wallace was named for a line from Shakespeare's Hamlet and that is a fact I definitely knew before today.

Alas, poor Yorick! I knew him, Horatio: a fellow of infinite jest, of most excellent fancy: he hath borne me on his back a thousand times; and now, how abhorred in my imagination it is! - Straight outta Hamlet's mouth

.toBe and not.toBe are methods for Jest. Coincidence? I think not.

To be, or not to be, that is the question - Also straight outta Hamlet's mouth

I hope my blog has inspired you to learn how to write tests with Jest and maybe even read Inifinite Jest or at least read one paragraph of the Infinite Jest Wikipedia page like I did.

Sources

JWT Stands For...

Iris Silverman — Mon, 07 Oct 2019 15:47:05 +0000

Intro to JWT

JWT stands for JSON Web Token*. JWTs are JSON objects that allow for secure transmission of information.

JWTs are made up of 3 components that are separated by periods. The 3 components are:

Header
Payload
Signature

Each component in the JWT is encoded using Base64Url (check out this article for more information on Base64Url encoding). An example of a Base64Url encoded JWT is shown below.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

//note the dots separating each string of characters

The header of a JWT contains the type of token (JWT) and the algorithm used for signing the token. Below is an example of the type of information contained in the header.

{ "typ": "JWT", "alg": "HS256" }
//HS256 is short for HMAC-SHA256

There are 3 types of signing algorithms that you might see:

HMAC (Hash-based Message Authentication Code)
- Uses cryptographic hash function and a secret cryptographic key - Wikipedia Article on HMAC
RSA (Rivest–Shamir–Adleman)
- Asymmetric (there are two different keys) cryptographic algorithm - Wikipedia Article on RSA
ECDSA (Elliptic Curve Digital Signature Algorithm)
- Variant of DSA (Digital Signature Algorithm) - Wikipedia Article on ECDSA

The payload of a JWT is where you might find information about a user.

The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional data. - JWT Docs

Be careful not to include any unencrypted secret information in the payload! You can use a gem like BCrpyt (Wikipedia Article on BCrypt) to encode password information.

The signature of the JWT verifies that the token hasn't been changed and looks at any private claims in the payload to verify that the sender of the token is who it claims to be. The signature is calculated using the header and the payload.

Check out JWT's Debugger Tool to "decode, verify, and generate JWT"

JWT in Action

JWT is commonly used for authorization. After a successful login the server returns a JWT that can be used to verify the user when they want to access protected routes. You can store the token in browser storage or cookies and there are trade-offs with either.

If you want to read more about why you might choose to store JWTs in one place versus the other, you can read this article on where to store JWTs by Tom Abbott and this blurb about local storage from OWASP.

When a user wants to access a protected route the JWT can be sent for verification using an authorization header using the "bearer schema".

'Authorization': 'Bearer <token>'

Bearer authentication (also called token authentication) is an HTTP authentication scheme that involves security tokens called bearer tokens. The name “Bearer authentication” can be understood as “give access to the bearer of this token.”Swagger.io Docs - Bearer Authentication

Once the token is sent back to the server it can be validated - if the token is valid the user will be able to access the protected route.

In Conclusion...

JWT is a great option for implementing authorization. Using JWT you can authorize a user and be certain that their credentials haven't been tampered with (thanks to the header, payload, signature combination!). This was just a quick introduction to JWT and there is so much more to cover, but don't you worry, there's plenty more great places all over this internet. I'll be looking for you next time, on Desktops, Dev.to's, and Drives!

Resources:

*If you made it this far, then I have to tell you something. I lied. JWT does not stand for JSON Web Token. JWT stands for Jonathan Webtaylor Thomas.

Looky Looky, I Wrote About Hook(s)y

Iris Silverman — Mon, 23 Sep 2019 20:21:41 +0000

React Hooks

React Hooks were introduced with React 16.8.0 in 2018. Steven Spielberg's "Hook" was introduced in 1991. What do they have in common? Little to nothing, except for this vaguely Hook themed blog post!

Hooks allows developers to use React features without writing classes. With Hooks a functional component can have state!

State is a JavaScript object that stores information that is managed within the React component. - React Docs - State vs Props

So what is a Hook? A Hook is a special function that lets you “hook into” React features. - React Docs - What is a Hook?

Here is an example of a bare bones React class component followed by a React functional component that stores state using Hooks.

Class Component

import React, {Component} from 'react'

class ExampleReactClassComponent extends Component {
    constructor() {
      super()
      this.state = {
         exampleState: "Bangarang"
      }

    render() {
       return ( <div>{this.state.exampleState}</div> )
    }
}

Functional Component with Hooks

import React, { useState } from 'react'

function ExampleReactFunctionalComponent () {
    const [exampleState, setExampleState] = useState("this is my state")
} 

return ( <div>{exampleState}</div> )

Why Write Components Using Hooks?

Just take a look at the examples above - Hooks makes for cleaner, easier to read code. Hooks allow react developers to write components without creating a class every time. With Hooks you can use state and other react features in functional components. Now the "Stateless" functional component is only stateless if you want it to be.

This picture of Rufio from the 1991 smash hit "Hook" is super related to React Hooks.

There are some rules governing Hooks that you'll need to keep in mind. I've called out a couple from the React Docs below, but I recommend reading their full doc for more information.

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions. Only call Hooks from React function components. React Docs - Hooks Rules

useState

In the functional component example above, the import statement read import React, { useState } from 'react'. The React Hook useState is how you can add state to a functional component.

useState returns 2 values - the state value and a function that allows you to update state. You'll see useState commonly written using destructuring like so:

const [bangarang, setBangarang] = useState("Bangarang!!!!")

Let's break the above statement down. We are setting two variables (the first variable is your state, the second is the function to update state) equal to the returned result of calling useState with an argument. The variable names are arbitrary so choose your own banging variable names. The argument you enter with useState is what you are initializing your state to. This can be anything (null, "RU-FI-O", whatever).

Below is an example of how to set and update state using the useState React Hook.

import React, { useState } from 'react'

function LostBoys() {
    const [marbles, setMarbles] = useState("lost")


    return (
       <div>
           <p>Marble status: {marbles}</p>
           <button onClick={() => setMarbles("found")}>Look For Marbles</button>
       </div>
    )
}

This Gif of Lost Boy Tootles from the beloved 1991 blockbuster "Hook" is not a thinly veiled attempt at giving this blog post a theme.

useEffect

useEffect runs after the component is rendered to the DOM. It is great for side effects that can be run asynchronously (like a fetch request!).

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined. - React Docs - useEffect

useEffect accepts an array as it's second argument. The array represents what useEffect uses to decide when to fire. If you pass an empty array then useEffect only fires after the first render.

import React, { useState, useEffect } from 'react'

function LostBoys() {
    const [marbles, setMarbles] = useState(null)

    useEffect(() => {
        fetch('gofindmarbles')  //pretend this is an API endpoint with lots of marble data
        .then(response => response.json())
        .then(marbleData => {
            setMarbles(marbleData)           
        })
    }, [])

    return (
       <div>
           <p>Marble status: {marbles}</p>
       </div>
    )

Even More Hooks

I only covered the bare essentials for getting started with Hooks. Check out the React Docs for information about all of the available Hooks and how to create custom hooks.

One last note: Hooks are backwards compatible -- this means React applications can be written with both functional components using Hooks and class components

You are probably thinking to yourself, "Wow, this Hook theme thing really worked. It made sense, it was seamlessly woven with the subject matter." And you are right.

Resources Used:

*ASYNC / Await - This I Promise You

Iris Silverman — Tue, 10 Sep 2019 19:41:06 +0000

Async and Await: Making Promises Easier Since 2017

The async and await features were introduced in Javascript as part of ECMAScript 2017.

Async and await provide a simple and intuitive syntax for interacting with promises. Among the many perks of using async/await for your asynchronous code are their improved error handling, less nutty nesting with conditionals and .then()s, and that they are easier to use with debuggers.

Async

The async keyword can be used to turn any function into an async function.

Async functions always return a promise.

Just place the async keyword at the beginning of any function expression or declaration. Take a look at the async function syntax examples from MDN below:

function tearingUp() {
   return "It's tearin' up my heart when I'm with you. But when we are apart, I feel it too"
}
async function myHeart()  {
   return "And no matter what I do, I feel the pain. With or without you"
}
console.log(tearingUp()) // "It's tearin' up my heart when I'm with you. But when we are apart, I feel it too"
console.log(myHeart()) // Promise { <state>: "fulfilled", <value>: "And no matter what I do, I feel the pain. With or without you" }

You can interact with the returned promise from an async function using the .then() method, but there's another way: await.

Await

The await keyword can only be used inside async functions. Await literally waits for the promise to resolve before continuing on the current line of code.

async function digitalDigital()  {
   let firstPart = Promise.resolve(`Digital, digital get down`)
   let nextPart = await firstPart + ` (get down) just you and me`
   console.log(nextPart) // "Digital, digital get down (get down) just you and me"
}

Note - if you await a lot of promises all in a row you may slow down your run time significantly

In Conclusion...

Async and await make reading and writing asynchronous code much easier. You can save space by decluttering all your old .then()s, turn any function into a promise, and halt your code while waiting for a promise to resolve.

async function byeByeBye() {
   let amazingLyric = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Baby bye bye bye"), 2000)
  });
  let dunzo = await amazingLyric;
  alert(dunzo)
}
byeByeBye() // "Baby bye bye bye"

Here are some of the handy resources I used in researching this post:

Start trying to make Fetch happen

Iris Silverman — Fri, 06 Sep 2019 16:50:10 +0000

Once upon a time (1998) in the land of JavaScript, clever coders created XMLHttpRequest objects to exchange information between a website and a server. These special objects allow for asynchronous requests, meaning the browser can continue to run and interact with the server while the request is being made. No page reloads necessary!

Check out the great docs at MDN to learn more about Asynchronous JavaScript and XML aka AJAX.

But there was a cost…

The code to construct XMLHttpRequest objects and handle the server requests and responses was…not simple.

That’s right, it was complicated.

Take a look at this simple example from MDN's AJAX resource guide:

Fetch (and other things) to the Rescue!

Queue some trumpets and music swells because valiant libraries from across the world swept in to save the day. Libraries like jQuery used helper functions to make AJAX a little less complicated.

Then Gretchen got her wish and Fetch happened. The Fetch API burst onto the scene (around the time of Chrome 40 ~ 2015).

Fetch is supported across most major browsers, except IE.

The noble quest of Fetch:

To unify fetching across the web platform — Fetch Living Standard

Fetch made things much simpler.

Promises

Promises are the result of calling an asynchronous function.

Promise objects represent the eventual completion (or failure) of an asynchronous operation, and its resulting value. - MDN

Because the program can’t say for sure if your asynchronous function will work out, it returns a promise that you can then interact with.

A promise is like a box of chocolates, you never know what you are going to get. -FGM

Then and Catch

If you've seen Fetch in the wild, chances are you've seen two methods chained with it - .then() and .catch()
The then() method is typically where you handle a successfully resolved promise. Catch() is where you handle failures.

    fetch(URL)
    .then(response => response.json())  // parse response with json
    .then(jsonStuff => doStuff(jsonStuff)) 
//calling another function to do stuff with our json parsed response!
    .catch(errors => console.log(errors)) //handle your errors!

Fetch uses the GET method by default (see above), to POST, PATCH, DELETE add an object to your Fetch request like so:

  fetch(URL, { 
    method: 'POST', 
    headers: {  "Content-Type": "application/json" }, 
    body: JSON.stringify({
      stuff: "hi",
      number: 0 
    })
   })

DELETE only requires the "method" in the request object.

Async, await, and the end…

Wait there’s more! In 2017 Async and Await were introduced with ES2017. They simplify and interact with promises. But that’s a story for another day...

const theEnd = () => {
return Promise.resolve("And they lived") } 
const theEnd2 = async () => { const phrase = await theEnd() 
    return phrase + " happily ever"  }
theEnd2().then(response => console.log(response + " after."))
// "And they lived happily ever after."

Resources used during the making of this post:

Live with Regex and /K(athie Lee|elly)/

Iris Silverman — Mon, 26 Aug 2019 20:10:22 +0000

"Somebody once told me the world of Regex is gonna roll me...I ain't the sharpest tool in the shed." - Steve Jobs

I'm writing about regex because I hate regex. I've been coding for a little over a year and each time I've encountered regex the same thing happens - I leave the situation feeling cold and shamed, lying naked on the floor. I kept telling myself that I would study regex and get better, but I never did...

Until now.

First things first -

Don't be like me.

Don't wait a year to tackle something that you are struggling with.

Second things second -

Don't beat yourself up for not grasping a concept right away.

I personally learn through repetition - I shouldn't have run away from regex, I should have sought it out and practiced until it made sense.

Okay so now, let's talk about regex, baby.

Regex

This post is meant to be a brief introduction to the major concepts of regex.

Regex AKA regular expression AKA regexp are search patterns used to find and replace matches in text. For the purposes of this article/blog/masterpiece, we'll specifically deal with regex and JavaScript. JavaScript regular expressions can be declared literally using forward slashes -
let my_regex = /aaa/
or using the RegExp constructor -
let my_regex = new Regexp('aaa')

Regex search patterns are made up of literal characters (example: the letter "a") and characters with special meaning (example: the asterisk symbol *). By combining literal characters and with special characters, regex can be used to find just about anything in a piece of text. Throw in regex's optional flags and you are on your way to Flavor Town.

Literal characters + special characters + regex flags = FLAVOR TOWN

Regex Flags

Regex has 6 flags... I decided that for the dignity of this post I am not going to make the obvious theme park jokes. This is a serious scholarly thing I'm doing here.

Flag	Search type
g	global
i	case-insensitive
m	multi-line
s	match newline characters with "."
u	unicode
y	sticky - matches at the current position

Regex flags are always listed at the end of a regex pattern like so - /matchymatch/i. Of these flags, global search (looks for all matches in a string instead of just the first match) and case-insensitive search (looks for matches regardless of capitalization) are the most common.

Special Characters

Let's go through some of these special characters and their uses. This is not included in the table below, but you can also use a pipe | to indicate OR.

Make sure to escape special characters in your regexes (except in character sets)!

Quantifiers

Quantifiers allow you to specify the number of matches with your regex.

Special Character	Use
*	matches 0 or more times (/a*b/ matches "aaab", "b", "ab")
+	matches 1 or more times
{n}	match exactly n times (modify to {n, m} to match between n and m times)
?	modify other quantifiers from matching the max number of times to matching the minimum number of times

Character Classes and Boundaries

Special Character	Use
^	matches the beginning of a string/line
$	matches the end of a string/line
.	matches any single character (except newline character)
x(?=y)	look ahead assertion (only matches x if followed by y)
(?!w)	negated look ahead
[xyz]	character set - match any character in the set
\b	matches a word boundary
\B	matches a non-word boundary
\d	matches a digit character
\D	matches a non-digit character
\s	matches a white space character
\S	matches non-white space
\w	matches any alpha-numeric character (includes underscore)
\W	matches any non-word character

A complete table can be found on MDN

Regex Methods

Here are a few methods that can be used with regex.

Method	Description
.match	returns an array of matches
.test	returns true or false if the regex matches
.split	splits a string using a matched regex
.replace	replaces matches with a new substring

my_regex = /K(athie Lee|elly)/
morning_show_one = "Live! with Regis and Kathie Lee"
morning_show_two = "Live! with Regis and Kelly"
my_regex.test(morning_show_one) // true
morning_show_two.match(my_regex) // ["Kelly", "elly"]
splitter = /and k./
morning_show_one.split(splitter) // ["Live! with Regis ", "lly"]
morning_show_two.replace(my_regex, "Michael/Ryan") // "Live! with Regis and Michael/Ryan"

In Conclusion...

There is a lot to learn about regex and this is just the tip of the iceberg.

I used some great resources in my research for this post that I highly recommend checking out:

That's all for this trip but don't you worry, there's plenty more great places all over this internet. I'll be looking for you next time, on Desktops, Dev.to's, and Drives!