Skip to main content

Variables & Operators

Resources

I. Variables​

Variables are “named storage containers” for data in your code. To create a variable in JavaScript, we use let keyword. We can assign values/data to a variable by using the assignment operator =.

let message;
message = "Hello World" // store a string value into the "mesage" variable

alert(message); // a pop-up show up on the page, saying "Hello World"
  • We can declare multiple variables in one line or separately:
let user = "James", age = 25, message = "Hello everyone, I'm James John!";

// this may have better code readability
let user = "James"; 
let age = 25;
let message = "Hello everyone, I'm James John!"
  • We can change the value of a variable by reassigning a new value to it. When the value is changed, the old data is removed from the variable:
let message; 
message = "Hello!";
message = "World!"; // value has changed from Hello -> World
console.log("message"); // Output: World!
  • We can assign a variable to be a value of a variable:
let greeting = "Hello!";
let message = greeting; 
console.log(message); // Output: Hello!

1. Variable Naming​

There are two limitations on variable names in JavaScript:

  1. The name must contain only letters, digits, or the symbols $ and _.
  2. The first character must not be a digit.
let id; // valid
let firstName; // valid
let $ = 1; // valid
let _ = 2; // valid

let 1a; // invalid
let my-name; //invalid
  • When the name contains multiple words, camelCase is commonly used. That is: words go one after another, each word except first starting with a capital letter: myVeryLongName.
  • Casing in variables’ names matters so a variable named apple is a different variable from Apple or APPLE.
  • There is a list of reserved words, which cannot be used as variable names because they are used by the language itself. For example: let, class, return, and function are reserved.

2. Constants​

To declare a constant (unchanging) variable, use const instead of let. Variables declared using const are called “constants”. They cannot be reassigned. An attempt to do so would cause an error:

const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // error, can't reassign the constant!

When a programmer is sure that a variable will never change, they can declare it with const to guarantee and communicate that fact to everyone.

  • There is a widespread practice to use constants as aliases for difficult-to-remember values that are known before execution. Such constants are named using capital letters and underscores.
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...when we need to pick a color

let color = COLOR_ORANGE;

console.log(color); // #FF7F00

Some constants are known before execution (like a hexadecimal value for red) and some constants are calculated in run-time, during the execution, but do not change after their initial assignment: → Capital-named constants are only used as aliases for “hard-coded” values.

II. Operators​

There are many types of operators in JavaScript, the two covered in this section are assignment and comparison operators. Another type of operator that will be covered in [[05. Conditionals]] is the logical operator.

1. Assignment Operators​

Assignment operators are operators that assign a value to a variable. We have already used the most basic one, = to assign values to a variable in the examples above. We have other assignment operators such as:

  • +=: addition assignment. Example: x += 4 equals x = x + 4.
  • -=: subtraction assignment. Example: x -= 3 equals x = x -3.
  • *=: multiplication assignment. Example: x *= 3 equals x = x * 3.
  • /=: division assignment. Example: x /= 5 equals x = x /5.

2. Comparison Operators​

Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use comparison operators.

  • ===: strict equality. This tests whether the left and right values are identical to each other. Example: 5 === "5" → returns false, because they’re not the same data type. ^e47ca1
  • !==: strict-non-equality. This tests whether the left and right values are not identical to each other. Example: 5 !== "5" → true
  • ==: equality. This is similar to strict equality but does not check whether the values’ datatypes are the same. Example: 5 == "5" → returns true.
  • !=: non-quality. This is similar to strict non-equality but again, doesn’t consider the values’ datatypes. Example: 5 != "5" → false.
  • <: less than.
  • >: greater than.
  • <=: less than or equal to.
  • >=: greater than or equal to.

Common Terminology:

  • An operand – is what operators are applied to. For instance, in the multiplication of 5 * 2, there are two operands: the left operand is 5 and the right operand is 2. Sometimes, people call these “arguments” instead of “operands”.
  • An operator is unary if it has a single operand. For example, the unary negation - reverses the sign of a number: x = -x.
  • An operator is binary if it has two operands:
    x + y.
Last updated on