Photo by Alexander Krivitskiy on Unsplash

If you’ve programmed in JavaScript then you know the benefits of using objects. They organize our data structures in a way that allows us to access values directly by looking up their keys.

And working with objects, you are certainly familiar with this appearing in your console…

Uncaught TypeError: Cannot read property '<prop>' of undefined

This often occurs because you’re making an api call and the response has not yet completed which is very normal. To combat this, I’ve seen and handled it myself a few different ways. Using short-circuit evaluation in anif statement works.

Lets use this as our…


Photo by Glenn Carstens-Peters on Unsplash

I thought I’d put together common JavaScript array methods with a small description and examples as a quick guide and easy reference.

Before we get to the array methods, let’s declare an array.

const items = [
{
id: 1,
item: 'Cereal',
price: 4
},
{
id: 2,
item: 'Action Figure',
price: 7
},
{
id: 3,
item: 'Video Game',
price: 50
},
{…


Photo by Ferenc Almasi on Unsplash

Before React 16.8, function components did not have state or lifecycle hooks. With 16.8+, function components can now use hooks to use state and you can implement side-effects on first render and after every update. To take a closer look at this, lets see how a function and class component use state and fire functions on initial and subsequent renders by building a bare-bones To-Do List apptwice — once as a class component and then again as a function component.

Setting up

The first noticeable difference between class and function components is, of course, their syntax. A class component extends…


Load More

Photo by Ian Espinosa on Unsplash

Amazing! We’re now at the final step of building our Unsplash-like app. We’re able to fetch data and render an image gallery on page load, we can click a thumbnail to see a higher resolution version, and we can search for photos by key word. The final feature I’d like to add is a Load More button to add another thirty images to our current gallery. Shall we continue?

Let’s first add a page property to the state in the constructor function initializing it with a value of 1 and then define our loadMore function both in our App component…


Search Feature

Photo by Rubén García on Unsplash

So glad you’ve made it this far. We now have fetched data and rendered the most recent thirty images from Unsplash’s home page editorial feed as an image gallery on page load and we can also view a larger version of each image via a modal on click. We now want to add a search feature.

In our Components folder let’s create a SearchBar component as a functional component passing in props. Let’s also destructure fetchInitialImages as well as two other functions we still have to create — handleChange and handleSubmit. We’ll also return some Bootstrap code to set up…


Launch Modal

Photo by Guilherme Vasconcelos on Unsplash

Welcome back. Let us continue building our Unsplash-like React App. During our last round, we’ve successfully fetched our data from the Unsplash API, set our state with the returned results, and rendered a gallery of thirty images all on page load.

We’ll continue with setting up an onClick function that fires when a user clicks a thumbnail which will then launch a modal that displays a full res version of the image along with a description. In our App component’s constructor function where we initialized the state, let’s add another property called selectedImage like so:

constructor(props) {
super(props)…


Bare-Bones Implementation

Photo by Desola Lanre-Ologun on Unsplash

Unsplash is a great resource for high resolution photographs that can be used for free for commercial and noncommercial purposes. It gives exposure for professional photographers and hobbyists alike. From their license page, “You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible…” I personally post nature photographs from hikes on Unsplash and it is a joy to see how much activity they get. One of my favorite shots that I took is a starry night shot in Red Rock State Park in Sedona, Arizona and has over…


A Secret Bag of Tricks

The idea of a JavaScript Closure can be a bit difficult to wrap your head around. Often closures are used when you have a function that returns another function. The magic behind them is even though a function is returned, thus eliminating the calling function and its local variables, the returned function still retains the ‘memory’ of its deleted environment including the destroyed local variables and can use them as if they still exist 🤯

Lets demystify closures by breaking down the following code:

1:  var add = (function () {
2: var counter = 0;
3…

Press Start to Play

In JavaScript, before any code is executed there is a hoisting phase that occurs which lifts all var variable and function declarations to the top of their functions. This can be quite confusing since JavaScript runs its code line by line. This leads to functions being able to call variables seemingly before they are even declared. To add to the confusion, it is only the declaration of the variable that gets hoisted and not its assigned value. Because of this, it will naturally assign the the value of the variable to beundefined. This is why it’s a best practice to…


Asynchronous Tasks in a Synchronous Language

Photo by The Creative Exchange on Unsplash

JavaScript is often described as a synchronous, single-threaded language. Essentially meaning that it can only perform one function at a time and if a function takes some time to finish, such as an HTTP request, it would literally block the user from interacting with the webpage. Click events would be delayed until the blocking function finally finishes, for example. Of course, this would be a bad user experience. So how exactly does JavaScript work around this? How is it able to perform asynchronous tasks? “Callback functions!” “Promises!” “Async!” Yup, you got it. I guess there is nothing else to say……

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store