A cheat sheet for JavaScript developers

person sitting in front of computer writing in a notebook

In this article, I am explaining the differences between the four for loops in JavaScript.

tl;dr

The best use for these loops is as follows:

  • For arrays, use for...of (or forEach).
  • For objects, use for...in.
  • If you work with arrays and need access to indexes, use for or forEach.

for...in loop

This loop…


Make your code run faster and look cleaner

Plant on a desk

In this article, I will present five ways to declutter your code by getting rid of unnecessary if-else statements. I will talk about default parameters, the OR (||) operator, nullish coalescing, optional chaining, no-else-returns, and guard clauses.

1. Default Parameters

You know that feeling when you’re working with an inconsistent API and your…


Cancel all subscriptions and asynchronous tasks in the componentWillUnmount method

In this article, I will cover the following React lifecycle methods: ComponentDidMount, ComponentDidUpdate, and ComponentWillUnmount. If you need a refresher on what they are, read this story.

What We’ll Build

We will build a simple application, a countdown, that will look as follows:


Learn fast how to play with data and scopes in Ruby.

There are a few variable types in Ruby and that, I see, in the beginning confuses people a great deal. Welcome to my guide — I will use examples that refer to “The Hitchhiker’s Guide to the Galaxy” by Douglas Adams because it turned 42 this week. I’ll explain different…


Increase your page’s SEO and accessibility with one quick trick

Have you noticed that many beginners’ projects created with create-react-app have the title of React App forever? Like, for instance, here:


Code construction through real-life construction

Time and again I see students struggle with React lifecycle methods, or not using them to their full power. While some of them are obscure, it’s still good to learn how to use them. …


Be worry-free and enjoy React Router like a pro

React Router (DOM) is an amazing NPM package that allows you to escape the hell of SPA. In my teaching experience, I see that people don’t often dig into the docs. Instead, they see a few code examples and just pattern match their way through creating their app. …


How to update just one value in an array of objects in a state

Say we have a component with an array of to-do’s, just like this:

state = {
todos: [
{id: 1,
title: "Eat breakfast",
completed: false},
{id: 2,
title: "Make bed",
completed: false}
]
}

How could we change the value of just key in just one object?

Step 1: Find the element

We first want…


“A man, a plan, a canal — Panama!” palindrome // true

Today, I woke up quite satisfied as I realized it’s a palindrome date: 02-02-2020.

A palindrome is a word, number, or a phrase that reads the same forwards as well as backward, for instance “kayak”, “1001”, “Was it a car or a cat I saw?”, or “ABBA”.

I love palindromes…


Organize your process, write clean code, and test like a boss

In this tutorial, I will cover how to write clean, organized, and easily-readable code when building a CRUD app in JavaScript using fetch.

We will build a simple app that allows us to browse animals in a fictional zoo and toggle their profiles with a click. …

Sylwia Vargas

I teach React, Redux, JavaScript, Ruby, Rails at Flatiron School and Yale University | Follow me: https://twitter.com/sylwiavargas

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