DEV Community: Dylan Attal

Codewars Get Planet Name By ID JavaScript

Dylan Attal — Tue, 27 Jul 2021 17:09:39 +0000

This article explains how to solve the kata Get Planet Name By ID from Codewars in JavaScript.

Instructions

The function is not returning the correct values. Can you figure out why?
Example (Input --> Output ):
3 --> "Earth"

Provided Code

function getPlanetName(id){
  var name;
  switch(id){
    case 1:
      name = 'Mercury'
    case 2:
      name = 'Venus'
    case 3:
      name = 'Earth'
    case 4:
      name = 'Mars'
    case 5:
      name = 'Jupiter'
    case 6:
      name = 'Saturn'
    case 7:
      name = 'Uranus'
    case 8:
      name = 'Neptune'
  }

  return name;
}

Discussion

This kata is testing our knowledge about switch statements.

Switch statements are cool because they provide an easily readable syntax for times when a condition is checked against many different possible cases. Oftentimes, switch statements can save you from typing out many if statements.

Let's take a look at a series of if statements that can be converted into one switch statement:

const favoriteFood = "pizza";

if (favoriteFood === "ice cream") {
    return "Ice cream is my favorite food!";
} else if (favoriteFood === "potato chips") {
    return "My favorite food is potato chips!";
} else if (favoriteFood === "pizza") {
    return "I love pizza sooooo much!";
} else if (favoriteFood === "gummy bears") {
    return "My favorite food is gummy bears!";
} else {
    return "Name of food not recognized";
}

The above program returns a sentence about your favorite food based on whether it is ice cream, potato chips, gummy bears, pizza, or something else.

Let's see how much more succinct the program appears when we use a switch statement:

const favoriteFood = "pizza";
let sentence = "";

switch (favoriteFood) {
    case "ice cream":
        sentence = "Ice cream is my favorite food!";
        break;
    case "potato chips":
        sentence = "My favorite food is potato chips!";
        break;
    case "pizza":
        sentence = "I love pizza sooooo much!";
        break;
    case "gummy bears":
        sentence = "My favorite food is gummy bears!";
        break;
    default:
        sentence = "Name of food not recognized";
}

return sentence;

We don't even need the local variable sentence in the above code. We can just return the sentence that we want straight from within the switch statement:

const favoriteFood = "pizza";

switch (favoriteFood) {
    case "ice cream":
        return "Ice cream is my favorite food!";
    case "potato chips":
        return "My favorite food is potato chips!";
    case "pizza":
        return "I love pizza sooooo much!";
    case "gummy bears":
        return "My favorite food is gummy bears!";
    default:
        return "Name of food not recognized";
}

Switch statements take an expression and then look for the first case clause whose expression is the same.

In the above example, the switch expression is given the variable favoriteFood which we see is earlier set to "pizza". We would expect that switch statement to return "I love pizza sooooo much!".

Nota Bene: you should end each case clause with break. This tells the program to exit the switch statement because a matching case has been found. If you forget to write break all the cases after the matching case will be run in addition to the correct case. However, break is not necessary if you have a return statement because return will exit the switch statement as well.

One last note: it is optional to add a default clause to the end of your switch statement that will run if no case matches the provided expression. This can useful for catching unexpected values and helping track down bugs.

Solution 1

The crux of the issue in the given code in this kata is that break is missing from each case in the switch statement. Therefore, we can solve this problem by just adding break at the end of each case.

function getPlanetName(id) {
  var name;
  switch(id) {
    case 1:
      name = 'Mercury';
      break;
    case 2:
      name = 'Venus';
      break;
    case 3:
      name = 'Earth';
      break;
    case 4:
      name = 'Mars';
      break;
    case 5:
      name = 'Jupiter';
      break;
    case 6:
      name = 'Saturn';
      break;
    case 7:
      name = 'Uranus';
      break;
    case 8:
      name = 'Neptune';
      break;
  }

  return name;
}

Solution 2

Another solution is to forget about using break altogether and instead just return the name of each planet straight from the switch statement. I like how concise this solution is.

This solution also includes a default clause in case an id passed to our function getPlanetName doesn't match any of the cases we defined, for example, if we called getPlanetName(11) then we'd expect the function to return "Invalid planet id".

function getPlanetName(id) {  
  switch(id) {
    case 1:
      return "Mercury";
    case 2:
      return "Venus";
    case 3:
      return "Earth";
    case 4:
      return "Mars";
    case 5:
      return "Jupiter";
    case 6:
      return "Saturn";
    case 7:
      return "Uranus";
    case 8:
      return "Neptune";
    default:
      return "Invalid planet id";
  }
}

RIP Pluto.

Hope you enjoyed the article!
Follow me on LinkedIn and GitHub!

Codewars Return To Sanity JavaScript

Dylan Attal — Tue, 27 Jul 2021 16:58:17 +0000

This article explains how to solve the kata Return To Sanity from Codewars in JavaScript.

Instructions

This function should return an object, but it's not doing what's intended. What's wrong?

Provided Code

function mystery() {
  var results =
    {sanity: 'Hello'};
  return
    results;
}

Discussion

This kata is testing our understanding of the keyword return.

The return keyword ends function execution and specifies what value the function outputs.

One point to consider: since return stops the function from running, any code after a return statement that is executed will not be run.

Another point to consider: if no value follows the return keyword, the function will return undefined.

A final point to consider: JavaScript has a feature called automatic semicolon insertion. Basically, writing semicolons in some places in JavaScript is optional. The compiler is smart enough to figure out where it needs to insert semicolons into your code so that it runs successfully. For example:

// What you write
const firstName = "Nadia"
const lastName = "Montoya"

// What the compiler converts it to
const firstName = "Nadia";
const lastName = "Montoya";

This feature can have unintended consequences if you're not cognizant of it. For example in the below code, the compiler will insert a semicolon after return because nothing follows it on the same line.

// What you write
function createAPersonObject() {
    return 
    {
        age: 28,
        name: "Dylan",
        hairColor: "brown",
        likesPineappleOnPizza: false
    }
}

// What the compiler converts it to (which will return undefined)
function createAPersonObject() {
    return;
    {
        age: 28,
        name: "Dylan",
        hairColor: "brown",
        likesPineappleOnPizza: false
    }
}

There are a lot of nuances when it comes to where you can omit semicolons in your code and count on automatic semicolon insertion to help you out. If you want to dive into the nitty gritty, I enjoyed reading this article.

Solution

So the whole crux of the issue in this kata is that the return keyword is on a line by itself. We need to make sure automatic semicolon insertion doesn't make the function return undefined instead of results.

function mystery() {
  var results =
    {sanity: 'Hello'};
  return results;
}

Hope you enjoyed the article!
Follow me on LinkedIn and GitHub!

Codewars Mr. Freeze JavaScript

Dylan Attal — Thu, 22 Jul 2021 01:25:24 +0000

This article explains how to solve the kata Mr. Freeze from Codewars in JavaScript

Instructions

There is an object/class already created called MrFreeze. Mark this object as frozen so that no other changes can be made to it.

Provided Code

// mark the MrFreeze object instance as frozen

Discussion

This kata is testing our knowledge about objects and how to freeze them.

First things first: what is an object?

An object is basically a collection of key-value pairs. Objects can have properties and methods.

Properties store data. Methods are functions that can be performed as actions on an object.

Let's see what an object looks like before we talk more about them:

const person = {
    firstName: "Michael",
    lastName: "Smith",
    createFullName() {
        console.log(firstName + ' ' + lastName)
    }
};

The person object above has two properties, firstName and lastName. It has one method createFullName.

You can access the value of firstName through dot notation like this:

console.log(person.firstName);
// Michael

You can call methods from an object in the same way:

person.createFullName();
// Michael Smith

One cool sidenote is that you can add properties to an object easily using dot notation, too. Just make a new property name and assign it a value:

person.hairColor = "brown";

Now our person object has three properties:

const person = {
    firstName: "Michael",
    lastName: "Smith",
    hairColor: "brown",
    createFullName() {
        console.log(this.firstName + ' ' + this.lastName)
    }
};

Whew! That was quite a setup. Now let's get back to the original point of the kata: freezing an object.

When you freeze an object, you prevent the object from being changed. That means you can't add new properties or change existing properties. If you try to change the object a TypeError will be thrown:

Object.freeze(person);

person.eyeColor = "blue"; // this line throws a TypeError

Solution 1

Object.freeze(MrFreeze);

Hope you enjoyed this article! You can follow me on LinkedIn and GitHub!

Codewars Basic Variable Assignment JavaScript

Dylan Attal — Thu, 22 Jul 2021 01:20:48 +0000

This article explains how to solve the kata Basic Variable Assignment from Codewars in JavaScript.

Instructions

This code should store "codewa.rs" as a variable called name but it's not working. Can you figure out why?

Provided Code

var a == "code";
var b == "wa.rs";
var name == a + b;

Discussion

This kata tests your ability to figure out why the given code isn't working as expected. The goal of the code is to save the string "codewa.rs" to the variable name. So we need to figure out why the given code isn't doing that properly.

Don't get distracted by the period in the middle of the string; it doesn't matter and it is not making the tests fail. It's perfectly fine to have a period in the middle of a string, and the tests are expecting the period to be there in between the "a" and the "r".

The key issue at play in this kata is the assignment operator vs the equality operator.

The assignment operator is the equals sign =.

The equality operator is the double equals sign ==. In JavaScript, there is more than one way to check for equality, but that is a story for another post.

When we want to save a value to a variable, we use the equals sign. When we want to check if two things are equal, we use the double equals sign.

That's what's going wrong! The given code tries to use == to assign values to all three variables when it should be using =.

Sidenote

You might be wondering why it's okay to literally add two strings together.

The given code uses the plus sign + to concatenate--meaning put together--two strings. It's as simple as that. In JavaScript we can use the plus sign as a shortcut to put strings together.

For example:

const greeting = "Hello, ";
const myName = "Dylan";
const sentence = greeting + myName + ".";

console.log(sentence);
// "Hello, Dylan."

Solution 1

In this solution, I chose to replace the var keyword with the const keyword.

Before ES6, var was the only way to declare a variable in JavaScript.

Now, we can use two other keywords const and let.
const is used for variables that are not allowed to be reassigned.

let is used for variables that are allowed to be reassigned.

Since none of the variables in this solution are reassigned (meaning given another value using the equals sign) I used const to declare them.

I changed all the == to =, which is the crux of the problem.

const a = "code";
const b = "wa.rs";
const name = a + b;

Solution 2

In case you don't feel like concatenating strings directly, you can put together the variables a and b in this problem with another technique called string interpolation.

Instead of putting two strings together using the plus sign, we can make a template string and embed a JavaScript expression inside the template string.

How do you make a template string? You use backticks instead of quotes. For example:

const regularString = "This is a regular string.";
const templateString = `This is a template string.`;

Template strings are really useful when you want to insert variables into them. In order to do that, you wrap the variable in curly braces and put a dollar sign in front of it, like this:

const myName = "Dylan";
const templateStringWithVariable = `My name is ${myName}.`;

console.log(templateStringWithVariable);
// "My name is Dylan."

So we can solve our problem like this:

const a = "code";
const b = "wa.rs";
const name = `${a}${b}`;

Hope you enjoyed this article! You can follow me on LinkedIn and GitHub!