Codewars Basic Variable Assignment JavaScript

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!