Forem: Jason Mei

Reversing A String In Javascript

Jason Mei — Mon, 12 Oct 2020 21:20:41 +0000

I recently started studying data structures and algorithms, and one of the first challenges that came up was reversing a string. Reversing a string is a very common challenge that comes up in Javascript interviews. The interviewer may ask you to solve this challenge in different ways.

Here are 3 ways you can reverse a string in Javascript:

1. Use Javascript built-in methods

In this method, we will use 3 built-in methods in Javascript: String.prototype.split(), Array.prototype.reverse(), and Array.prototype.join().

The .split() method splits a String object into a new array of substrings.
The reverse() method mutates an Array object and reverses it. The last element in the array will become the first, and the first element will become the last.
The join() method takes an Array object and joins the elements together into a new string.

function reverseString(str) {
    // Step 1. Use the split() method to return a new array
    let splitString = str.split(""); // "hello".split("");
    // ["h", "e", "l", "l", "o"]

    // Step 2. Use the reverse() method to reverse the newly created array
    let reverseArray = splitString.reverse(); // ["h", "e", "l", "l", "o"].reverse();
    // ["o", "l", "l", "e", "h"]

    // Step 3. Use the join() method to join all elements of the array into a string
    let joinArray = reverseArray.join(""); // ["o", "l", "l", "e", "h"].join("");
    // "olleh"

    //Step 4. Return the reversed string
    return joinArray; // "olleh"
}

reverseString("hello");

The reverseString function above can be rewritten by chaining all three methods:

function reverseString(str) = {
    return str.split("").reverse().join("") // "olleh"
}

reverseString("hello");

2. Use a reverse (decrementing) for loop

function reverseString(str) {
    // Step 1. Create an empty string that will house the new reversed string
    let newString = "";
    // Step 2. Create the FOR loop
    /* The starting point of the loop will be (str.length - 1) which corresponds to the 
       last character of the string, "o"
       As long as i is greater than or equals 0, the loop will continue
       We decrement i after each iteration 
       Once i is less than 0, the loop stops */
    for (let i = str.length - 1; i >= 0; i--) {
        newString += str[i]; // add the character into the new string
    }
    /* Here hello's length equals 5
        For each iteration: i = str.length - 1 and newString = newString + str[i]
        First iteration:    i = 5 - 1 = 4,         newString = "" + "o" = "o"
        Second iteration:   i = 4 - 1 = 3,         newString = "o" + "l" = "ol"
        Third iteration:    i = 3 - 1 = 2,         newString = "ol" + "l" = "oll"
        Fourth iteration:   i = 2 - 1 = 1,         newString = "oll" + "e" = "olle"
        Fifth iteration:    i = 1 - 1 = 0,         newString = "olle" + "h" = "olleh"
    End of the FOR loop*/
    // Step 3. Return the reversed string
    return newString; // "olleh"
}

reverseString("hello");

3. Use recursion

For this method, we will be using the String.prototype.substr() method:

The .substr() method returns a portion of the string, starting at the specified index and extending for a given number of characters afterwards.

"hello".substr(1); // "ello"

A recursive function is simply a function that calls itself. It consists of a base case and a recursive call where the base case stops the function and the recursive call is where the function calls itself. Without a base case, the function would continue in an infinite loop.

function reverseString(str) {
  if (str === "") { // This is the base case that will end the recursion
    return "";
  } else { 
    return reverseString(str.substr(1)) + str[0]; // This is the recursive call
  }
}
/* 
First Part of the recursive function:
You will have several nested calls to reverseString(), each time passing in a substring of the previous string

Each call: str === "?"             will return   reverseString(str.substr(1))    + str[0]
1st call: reverseString("hello")   will return   reverseString("ello")           + "h"
2nd call: reverseString("ello")    will return   reverseString("llo")            + "e"
3rd call: reverseString("llo")     will return   reverseString("lo")             + "l"
4th call: reverseString("lo")      will return   reverseString("o")              + "l"
5th call: reverseString("o")       will return   reverseString("")               + "o"

Second part of the recursive function:
The function hits the base case and the most highly nested call returns immediately (the 5th call returns first)

5th call will return reverseString("") + "o" = "o"
4th call will return reverseString("o") + "l" = "o" + "l"
3rd call will return reverseString("lo") + "l" = "o" + "l" + "l"
2nd call will return reverserString("llo") + "e" = "o" + "l" + "l" + "e"
1st call will return reverserString("ello") + "h" = "o" + "l" + "l" + "e" + "h" 
*/
}

reverseString("hello");

Javascript Closures - A Quick Digest

Jason Mei — Tue, 06 Oct 2020 03:11:55 +0000

A while ago during a mock technical interview I was asked to explain closures. At first, I thought I knew the answer: "Closures are functions that returns another function". But when I tried to explain it a bit further, I realized that I didn't really understand them. Fortunately my interviewer was very cool about it and went over them briefly with me. Afterwards I went back to basics and read articles, documentation, and watched some Youtube videos to get a better grasp of the topic.

So What Are Closures?

In JavaScript, a closure is the combination of a function and its surrounding scope (lexical environment) within which the function was declared. In fact, a closure is created every time a function is declared. With the help of closures, functions can have local (private) variables that can be accessed even after the parent function was invoked and closed.

Let's take a look at a simple example:

function outer() { // parent function
  const message = "Hello"; // local variable

  function inner() { // child function
    return message;
  }

  return inner;
}

const greeting = outer();

greeting() // will return a message "Hello"

We have a message variable inside the outer function. It is a local variable and cannot be accessed outside the parent function. By declaring the inner function within the parent function, inner has access to all local variables in its surrounding scope, which in this case is the message variable in outer.

When we assign function outer to the variable greeting, a few things happen:

outer function runs once and returns child function inner;
outer function closes itself
greeting variable became function declaration, and now has access to the closure inner and the message variable.

Now that greeting function became a function declaration, it can be invoked, and the returned result will be a message from the outer function.

This might seem a bit weird because in some programming languages, local variables within a function only exists for just the duration of the function's execution. But not in JavaScript. In Javascript, functions create closures with all surrounding environment, like variables that are in scope, at the moment they are created.

The greeting function has a reference to the function inner. The latter was created during the outer function execution and holds its environment, in which the variable message exists.

How I Set Up Context in React

Jason Mei — Tue, 29 Sep 2020 02:55:52 +0000

The Context API is a feature in React that allows your application to have app-level state without the use of a state management library like Redux. It's a neat feature that I highly recommend everyone try out if you're going to be working with React. Setting it up however, can be a bit confusing for beginners. Here, I'm going to outline how I go about setting up Context. This is by no means the "best way" of doing things, so if you have a more efficient way of implementing Context, I'd love to hear it.

First, create a new React app using the npx create-react-app command and open up the new project in your code editor. If you did, your file structure should look something like this:

Setting Up Context

Step 1: Create a "context" folder in the "src/" directory.
Step 2: Create a "type.js" file in the context folder - this will hold your reducer action types.

// src/context/types.js
export const ADD_CONTACT = "ADD_CONTACT"; // this will eventually be passed to the reducer

Step 3: In the "context" folder, create a folder and name it after the state you will be managing. In this example, I'm making an app that keeps track of a user's contacts, so I named this folder "contact".

Step 4: In the "contact" folder, create 3 files for the Context, Reducer, and State. In this example, my files are contactContext, contactReducer, and ContactState:

Step 5: In the contactContext file:

// src/context/contact/contactContext.js
import { createContext } from "react"; 

const contactContext = createContext(); // declare your context variable and set it to a new context using createContext()

export default contactContext;

Here we simply initialize a new context and export it. This will be imported into our ContactState.

Step 6: In the contactReducer file:

// src/context/contact/contactReducer.js
import {
  ADD_CONTACT
} from "../types"; // import the action types you will be using in this reducer

// export your switch case statement to handle the actions dispatched to the reducer
export default (state, action) => {
  switch (action.type) {
    case ADD_CONTACT:
      return {
        ...state,
        contacts: [...state.contacts, action.payload],
      };
    default:
      return state;
  }
};

Step 7: In the ContactState file:

// src/context/contact/ContactState.js
import React, { useReducer } from "react"; // import useReducer hook
import { v4 as uuid } from "uuid"; // using uuid to create random ID for a new contact

// import contactContext and contactReducer
import ContactContext from "./contactContext"; 
import ContactReducer from "./contactReducer";

// import types from types.js to be dispatched to ContactReducer vis the useReducer hook
import {
  ADD_CONTACT
} from "../types";

const ContactState = (props) => {
  const initialState = {
    contacts: [
      {
        id: 1,
        name: "John Doe",
        email: "john@gmail.com",
        phone: "111-111-1111",
      }
  };

// pass ContactReducer and initial state to useReducer hook in order to mutate app-level state
  const [state, dispatch] = useReducer(ContactReducer, initialState); 

  // Add Contact
  const addContact = (contact) => {
    contact.id = uuid();
    dispatch({ type: ADD_CONTACT, payload: contact });
  };

  return (
    {/* Return the Context Provider with the value prop set as an object of the state and props we want all components to have access to  */}
    <ContactContext.Provider
      value={{
        contacts: state.contacts, {/* passing down contact state*/}
        addContact {/* passing down a function*/}
      }}
    >
      {props.children}
    </ContactContext.Provider>
  );
};

export default ContactState;

Step 8: Finally, simply import the ContactState into your App.js and wrap your entire app in the Provider:

// src/App.js
import React from 'react';
import Contacts from './components/Contacts';
import './App.css';

import ContactState from "./context/contact/ContactState";

const App = () => {
  return (
    {/* Wrap entire app in ContactState, which returns the Provider. This will allow all components in the app to have access to the state in ContactState */}
    <ContactState>
      <Contacts />
    </ContactState>
  );
}

export default App;

By wrapping the entire App in ContactState, all the components of App become children of ContactState and can now access the state via the useContext hook.

//src/components/Contacts.js
import React, { useContext } from "react"; // importing useContext hook
import ContactContext from "../../context/contact/contactContext";

const Contacts = () => {
  // declare a context variable with the useContext hook and now the Context component has access to the state from ContactContext
  const contactContext = useContext(ContactContext);

  // destructure out contacts from our contactContext
  const { contacts } = contactContext;

  return (
    <div>
      {contacts.map(contact => <h1>{contact.name}</h1>)}
    </div>
  );
};

export default Contacts;

Refactoring ES6 Fetch with Async/Await

Jason Mei — Tue, 22 Sep 2020 01:03:17 +0000

ES6 Fetch

Whether you've been using Javascript for a while, or a beginner just learning the basics of asynchronous functions in Javascript, you've most likely used the ES6 Fetch API to retrieve data from a URI. Here is an example of using fetch() to get user information from the Github API:

const getUser = name => {
 fetch(`https://api.github.com/users/${name}`)
  .then(response => response.json())
  .then(data => console.log(data))
};

//get user data
getUser('yourUsernameHere');

The above code isn't bad. It is fairly readable and it does function correctly. However, notice the .then() function, which supports a callback function for resolving the fetch function. You can imagine that as you start chaining more .then()'s, the code will get increasingly harder to read. This can lead into what is often referred to as "callback hell", or nested callbacks, and can easily lead to bad performance or bugs.

Refactor with async/await

ES8 brought about the async function and await keyword. Using async and await doesn't change how asynchronous functions operate. These features are just syntactical sugar that makes things more readable, and in turn makes handling the return of a Promise object more seamless. They also make asynchronous code look more like synchronous code. Below is the same fetch() call using async and await:

const getUser = async (name) => {
  let response = await fetch(`https://api.github.com/users/${name}`);
  let data = await response.json();
  return data;
}

//get user data
getUser('yourUsernameHere')
  .then(console.log(data));

Overall, this syntax is much easier to read and there is no longer a need for large .then() blocks. Keep in mind though, that in order to call a function using the await keyword, it must be within the async function. There's a lot more that can be covered in this topic, but I thought this would be a simple explanation to implementing async and await in your Javascript code.

Making a Simple Image Slider in React.js

Jason Mei — Tue, 15 Sep 2020 01:18:55 +0000

Hello there! Today I’m going to walk through how to build a simple image slider in React without using any external packages. When I was working on my React project for Flatiron School, I wanted to include an image slider but didn’t know where to begin. Googling only led me to tutorials that involved installing external dependencies to your application. As someone who was new to React, I wanted to build an image slider from scratch. As a disclaimer, I will not be going over any styling in this tutorial, this is just meant to get you started with a React component that can cycle through images. If this is something you’re interested in, read on!

Setup

Let's start off by creating a new React app. In your terminal/command line enter:

npx create-react-app image-slider

Then navigate to the image-slider directory and open it up in your favorite text editor (I use VSCode).

cd image-slider
code .

I also recommend running the app in a development server while you're coding so you can see the changes in the browser. You can do this by entering npm start in the terminal. This will open up a new tab or window in your browser with the url of http://localhost:3000. I also recommend installing the React Developer Tools extension if you're using Chrome as your browser.

Next, open up the App.js file located in the src folder. You should see this:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

To simplify things, let's remove a lot of the unneeded code for this tutorial and simply return a header of "Image Slider". I'll also refactor the App component to be an arrow function.

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

const App = () => {
  return (
    <div className="App">
      <h1>Image Slider</h1>
    </div>
  );
}

export default App;

Okay, now we're ready to start building our application.

App Component

We will be building a simple app where the user can enter text into a search form and then the app will return an image slider where the user can click through images of the query. We will be grabbing images from the Pixabay API in this tutorial, but feel free to use any image API you'd like.

First, we will create a form with one text input field and a submit button:

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

const App = () => {
  return (
    <div className="App">
      <h1>Image Slider</h1>
      <form>
        <input type="text" />
        <input type="submit" value="Search" />
      </form>
    </div>
  );
};

export default App;

Next, we will use the useState React hook to manage the state of the input field. We will also set up the event listeners onChange to the input field and onSubmit to the form. See the comments below:

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

const App = () => {
  const [query, setQuery] = useState(""); // declaring state variable "query" and "setQuery" method to update query state

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(query); // logging the value of query to test that the form is working
  };

  return (
    <div className="App">
      <h1>Image Slider</h1>

      <form onSubmit={handleSubmit}> {/* handleSubmit function will be called on form submit */}
        <input type="text" onChange={(e) => setQuery(e.target.value)} /> {/* onChange event listener will call setQuery to update query state variable */}
        <input type="submit" value="Search" />
      </form>
    </div>
  );
};

export default App;

We will be passing down the images from App to our ImageSlider component (not built yet) as a prop, so let's set up our images state with the useState hook and also add our fetch call to the Pixabay API to our handleSubmit function:

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

const App = () => {
  const [query, setQuery] = useState("");
  const [images, setImages] = useState([]); // declare state variable "images" to an empty array and "setImages" method to update images state

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch(
      `https://pixabay.com/api/?key=[api-key]&q=${query}`
    )  // fetch to API by passing in query state
      .then((response) => response.json())
      .then(({ hits }) => hits.map(({ webformatURL }) => webformatURL)) // use object destructuring to grab image urls from json response
      .then(setImages); // call setImages to update images state with image urls
  };

  return (
    <div className="App">
      <h1>Image Slider</h1>

      <form onSubmit={handleSubmit}>
        <input type="text" onChange={(e) => setQuery(e.target.value)} />
        <input type="submit" value="Search" />
      </form>
    {/* Will import ImageSlider component here */}
    </div>
  );
};

export default App;

Now that our App component is set up, we can now build our ImageSlider component which will be imported into App.

ImageSlider Component

In the src folder, lets create a new folder called components, and in it create a new file called ImageSlider.js. This is where we will be creating our image slider.

Our ImageSlider component takes in images (an array of image urls) from App as a prop and returns the first image in the array along with "left" and "right" buttons. When the user clicks on a button, our ImageSlider will return either the next or previous image in the array, thus creating the ability to cycle through images:

import React, { useState } from "react";

const ImageSlider = ({ images }) => { // takes in images as props
  const [index, setIndex] = useState(0); // create state to keep track of images index, set the default index to 0

  const slideRight = () => {
    setIndex((index + 1) % images.length); // increases index by 1
  };

  const slideLeft = () => {
    const nextIndex = index - 1;
    if (nextIndex < 0) {
      setIndex(images.length - 1); // returns last index of images array if index is less than 0
    } else {
      setIndex(nextIndex);
    }
  };

  return (
    images.length > 0 && (
      <div>
        <button onClick={slideLeft}>{"<"}</button>
        <img src={images[index]} alt={index} />
        <button onClick={slideRight}>{">"}</button>
      </div>
    )
  );
};

export default ImageSlider;

Finally, the last thing we have to do is simply import our ImageSlider into App:

import React, { useState } from "react";
import ImageSlider from "./components/ImageSlider"; // import ImageSlider
import "./App.css";

const App = () => {
  const [query, setQuery] = useState("");
  const [images, setImages] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch(
      `https://pixabay.com/api/?key=[api-key]&q=${query}`
    )
      .then((response) => response.json())
      .then(({ hits }) => hits.map(({ webformatURL }) => webformatURL))
      .then(setImages);
  };

  return (
    <div className="App">
      <h1>Image Slider</h1>

      <form onSubmit={handleSubmit}>
        <input type="text" onChange={(e) => setQuery(e.target.value)} />
        <input type="submit" value="Search" />
      </form>

      <ImageSlider images={images} /> {/* return ImageSlider and pass images as a prop */}
    </div>
  );
};

export default App;

Congrats, you've successfully created an image slider in React from scratch! Now that you have a functioning image slider, the next thing to do would be to add your own unique styles to it (CSS transitions, animations, custom icons, etc). I hope you found this tutorial helpful in some way. Happy coding! :)

An Intro to React Hooks

Jason Mei — Tue, 08 Sep 2020 02:03:38 +0000

Introduction

React is an open-source Javascript library that is created and maintained by Facebook. Released in 2013, React is designed for building dynamic user interfaces and front-end applications composed of components, meaning that each piece of the application’s front-end interface is its own individual component. A component is able to receive inputs (called “props”) and return React elements describing how and what should be rendered to the DOM. Understanding the different types of components and how they work is integral to using React hooks.

React Components and Lifecycle

There are two types of components in React - class components and functional components. Class components go through a three-part lifecycle: mounting (the component is initialized and rendered with its props and initial state), updating (the component is changed and re-rendered), and unmounting (the component gets deleted and cleared out of the page). Class components also have access to special “lifecycle” methods that allow you to run code during a particular phase of its lifecycle.

class Clock extends React.Component {
  constructor(props) {
  // initialize component with props and initial state
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
  // run code after component has been rendered to the DOM
  // data fetching requests are usually here
  }

  componentWillUnmount() {
  // run code after component is removed from the DOM
  // cancel data fetching, clear a counter, etc
  }

  render() {
  // outputs component to the DOM (required lifecycle method)
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date}.</h2>
      </div>
    );
  }
}

Traditionally, only class components have access to these lifecycle methods and the ability to manage state, but this changed with the introduction of hooks.

Hooks Explained

Released in February 2019 with React version 16.8, hooks are functions that allow you to "hook into" React state and lifecycle features from a functional component. This largely eliminates the need for classes and leads to more concise and easy-to-read code.

// Class component
import React, { Component } from "react"

class Example extends Component {
   constructor() {
      super();
      this.state = {
         name: "Jason"
      }
   }

   render() {
      return (
        <div>
         <p>Hi, my name is {this.state.name}!</p>
       </div>
      )
   }
}

export default Example

// Functional component with useState hook
import React, { useState } from 'react';

const Example = () => {
  const [name] = useState("Jason");

  return (
    <div>
      <p>Hi, my name is {name}!</p>
    </div>
  );
}

export default Example

Hooks are also "opt-in", meaning that they are completely compatible with existing React apps that use classes. This allows developers to easily experiment and implement hooks into older codebases without fear of breaking anything. React includes many built-in hooks, but the most commonly used hooks are useState and useEffect.

useState

The useState hook declares a "state variable" using array destructuring. The first value is what you're assigning as state, and the second is a function that changes that state. When declaring a state variable, you pass in the initial value of the state into useState().

// you must import hooks at the top of your component
import React, { useState } from 'react';

const Example = () => {
  // declaring a new state variable called "count", and "setCount" is a function that increments the state "count"
  const [count, setCount] = useState(0); // setting the initial state to 0

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Example

useEffect

The useEffect hook replaces the lifecycle methods from class components by allowing us to perform side effects (operations outside of the component like data fetching, event listening, or DOM manipulation) from functional components. useEffect() takes in a callback function and an optional array in which you can specify which variable changes will trigger the effect.

// with no second argument, runs the function on every component render
useEffect(() => {
   functionCall()
},)

// replaces componentDidMount by putting an empty array as second arg, side effect runs once
useEffect(() => {
   functionCall()
}, [])

// by adding variables into the second arg, React will only run the side effect if those variables changed
useEffect(() => {
   functionCall()
}, [watch, these, variables])

//replaces componentWillUnmount when returning a function to clean up side effects within callback
useEffect(() => {
   function doStuff() {
     //effect
   }
   return function cleanup() {
     //remove effect
   }
})

Conclusion

By using React hooks, you no longer need to use classes to manage state and access lifecycle methods within your React components. Everything can be done using functional components. Your code will become cleaner, more concise, and easier to navigate. And best of all, hooks are 100% backwards compatible and do not contain any breaking changes. So go ahead and try implementing hooks in your new or existing React applications. Happy coding!