JavaScript: Variables, Values, Types, and Operators

In this article, we’re going to explore how programs remember values, as well as explain what exactly values are. We’ll also explore some logical operators.

Variables

A program needs to “remember” values. For instance, if you sign up for a newsletter, the program needs to retain your email address.

To simplify things, lets pretend it looks something like this:

var email = 'user@gmail.com';

We declare a variable as per the above, with the var keyword (there are also let and const keywords, but for the sake of this article, we’ll use var). We then name it something, which could be anything, but by convention, they’re typically named in a way which makes them easy to understand, and read. In the example above, we used email.

You’ll see variables usually being declared in camel case such as emailAddress. The first letter is lowercase, and the words that follow are uppercase. People have different preferences, and you can choose whichever one you like more, but it’d be wise to stick with it! JavaScript developers tend to prefer to camel case.

Next, we have an assignment operator: which is just an equals sign (=): the variable email is equal to; it’s essentially the same thing we learned in school, only that we can have different values. To the right of the operator, we have the value. In our case, the value is of type string. Strings are identified by quotation marks, “”. They can be single, like above, or double quotes: "use@gmail.com". (It doesn’t matter which quotations you use, but to maintain clean-code, you should use the same style of quotes throughout your code base.) The semicolon is similar to a period in English; that line of code is finished, move onto the next.

Values

Aside from the type string, there are three more we’ll discuss:

• Numbers
• Booleans
• undefined

Numbers don’t need much explaining; we’re all familiar with them. Nonetheless, there are a few things worth mentioning. First, let’s create a variable with a number value:

var five = 5;
console.log(five);
// Output: 5

That’s all there is to it, really – we declared a variable with a number value. However, there are some strange behaviors in JavaScript when dealing with numbers, such as some weird behavior we get when working with floating point values. For example, consider the arithmetic below:

0.1 + 0.2;
// Output: 0.30000000000000004

What’s going on here? Well, internally, computers use a binary floating-point format that can’t accurately represent a number like 0.1, 0.2 or 0.3. We’re not going to dig too deep into this subject for this article, but do be aware that this exists. If you’d like to explore more, visit the floating point guide.

We also have NaN, which means “not a number”. However, if you were to ask JavaScript the type of NaN, it would tell you it’s of type number. You can test this with typeof, like so:

typeof NaN;
// Output: 'number'

Boolean Values

Boolean values are either true or false.

var truthy = true;
var falsy = false;

Undefined

Undefined is a value that is unassigned.

var x;
console.log(x);
// Output: undefined

Operators

We’ve already been familiarized with two operators above, the assignment operator: =, and the typeof operator. There’s no need for us to go through all of the operators, as that would fill an entire article on it’s own; we will go over those which are fundamental, and simple enough for anyone to understand.

Arithmetic Operators

In JavaScript, like all other languages, we can perform arithmetic operations:

// Addition:
5 + 5;
// Output: 10

// Subtraction:
10 - 5;
// Output: 5

// Division:
25 / 5;
// Output: 5

// Multiplication:
5 * 5;
// Output: 25

We can also compare numbers with comparison operators. You might remember these from elementary school, where we learned that the alligator eats the bigger number.

10 > 5;
// Output: true

5 > 10;
// Output: false

Simple enough. Though there’s more!

// Less than or equal to:
5 <= 10;
// Output: true

// Greater than or equal to:
5 >= 10;
// Output: false

// Equal to
5 === 10;
// Output: false

NOTE: These comparison operators also work with strings: 'apple' === 'apple'; // true. Further, when we use ===, we’re strictly checking for a match. There’s also double-equals, ==, but it’s recommended not to use to check for equality, as you might face some type coercion issues.

// Type Coercion Example
const value1 = "5";
const value2 = 5;

console.log(value1 == value2);
// Output: true

We know value1 is of type string, and value2 is of type number, but when we compare them with double-equals, rather than strict-equals, we get some weird results. If you try it now with ===, you will see the result is false, which is what we desire it to be.

Logical Operators

Logical operators are similar to comparison operators, only we add some conditions to them. They return true or false.

// This reads: 5 is equal 10, OR 5 is less than 10:
5 === 10 || 5 < 10;
// Output: true

// This reads: 5 is less than 10, AND 5 is greater than 1:
5 < 10 && 5 > 1;
// Output: true

// This reads: 5 is NOT equal to 10:
5 !== 10;
// Output: true

Conclusion

This article is meant to refresh your knowledge, or teach you something new. We hope you enjoyed it. Let us know what you think in the comments below!