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 code breaks because some values are undefined?

let sumFunctionThatMayBreak = (a, b, inconsistentParameter) => a+b+inconsistentParametersumFunctionThatMayBreak(1,39,2) // => 42
sumFunctionThatMayBreak(2,40, undefined) // => NaN

For many folks, the instinctive solution to that problem would be adding an if/else statement:

You could, however, simplify the function above and do away…

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:

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 variables starting from the most local in scope to the most global. Shall we begin?

1. Local variables

these are declared by writing their name, then the = sign and their value, for instance:

favorite_quote = "Don't Panic."

the scope of this variable is exactly where it is declared: if in a method…

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

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. In this little guide, I will explain each of the React 16 lifecycle methods with an analogy.

Background: What are Lifecycle Methods?

Lifecycle methods are events that happen from the moment the component is first called until it disappears from the page (or until the garbage collection has happened). Here’s the full diagram:

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. That’s totally fine…until it’s not.

I’ve noticed new programmers develop a strong habit and preference for either render={this.renderComponent}or component={ComponentName}. Subsequently, they run into trouble. While both work, they behave differently. Let me explain why.

Setup

First, let’s see some code. Let’s assume that we have a class component that gets an array of…

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 to find the index in the array of the object, or where the object is located in the array. You can find the element by any key, id or name, or any other you find useful. We will use its id that e.g. we are getting from the function …

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 — read more on why they are fun on this Wikipedia page. Did you know that the longest palindrome was 58,795 letters long?

Also, you can use this wonderful poem for tests: Dammit I’m Mad by Demetri Martin, where every line is a palindrome, as well as a whole poem…