DEV Community: Piotr Szponder

JavaScript: Differences Between Using var, let, and const Keywords for Variable Declaration

Piotr Szponder — Thu, 14 Oct 2021 18:18:54 +0000

The var keyword was the original keyword used to declare variables in JavaScript.

Introduced in ES2016, let and const are two new keywords used for declaring variables. This article will explain the differences between how the var, let, and const keywords work.

Before we jump into the differences between let, var and const, it's important to understand how scope and hoisting works.

Scope

Scope is the space where the value of a variable is defined and accessible.

There are 3 types of scope in JavaScript:

Global Scope
Function Scope
Block Scope

Variables defined with the var keyword have either global or function scope.

Variables defined with the let or const keyword have block scope.

For a more in-depth explanation of scope, see my other post titled Scope in JavaScript.

Hoisting

When a JavaScript program runs, it will first parse the script and look for any variable declarations or function declarations. If it finds any variable or function declarations, it will "hoist" those to the top their respective scopes and process them first before proceeding to evaluate the rest of the JavaScript code. This process is called "Hoisting"

Hoisting affects variable declaration but NOT value INITIALIZATION / ASSIGNMENT.

Examples of Hoisting in JS

x = 1; // Assign the variable x a value of 1
console.log(x); // 1;

// Declare a variable x
// This declaration will be "hoisted" by JS when the program runs
var x;

x = 1;
var x; // This gets hoisted

// same as

var x;
x = 1;

Remember, hoisting only applies to variable declarations, not variable initialization. The below example will return "undefined" as x is initialized and not defined in the second line and therefore, it is not hoisted above the console.log() call.

console.log(x); // returns undefined
var x = 1;

The code below will print 2. Since the variable y is declared on line 3, but not initialized, it will be hoisted up to the top of the program, above the y = 2 initialization. So by the time console.log(y) is actually called, a value of 2 will be defined for y.

y = 2;
console.log(y); // Returns 2
var y;

// Same As
var y;
y = 2;
console.log(y);

NOTE: While hoisting applies to variables declared with var, let, or const, hoisting really only helps variables declared with var. Variables declared with the let keyword return ReferenceError if they are un-initialized (see TDZ section further down for more detail). You also cannot declare a variable with the const keyword without also initializing it's value right away. If you try to do this, you will obtain a "SyntaxError: Missing initializer in const declaration".

Differences between var, let, and const

var

A variable which is declared (but not initialized) using the var keyword returns a value of undefined if it is accessed before it is initialized (see section about hoisting).

console.log(x); // Returns undefined
var x = 1; // variable declaration and initialization
console.log(x); // Returns 1

Variables declared with var can be either function or global scoped.

// Variable declared in global scope
var globalVariable = "This variable was declared in the global scope";

function myFunc() {
  // Variable declared in function scope
  var funcVariable = "This variable was declared in the function scope";
}

Variables declared with var can be re-declared.

var x = 1;
console.log(x); // 1

var x = 2;
console.log(x); // 2

let

Variables declared with let are block scoped. We can only declare variables with the same name as long as they are in different block scopes using let.

{
  // This x variable does not exist outside of the current block scope
  let x = 1;
  console.log(x); // 1
}
// Trying to access x outside of its function block
console.log(x); // Uncaught ReferenceError: x is not defined

{
  // Since we are now in a new block scope, we can declare a variable named x (note that this is NOT the same variable as what was declared in the block above)
  let x = 2;
  console.log(x); // 2
}
// Trying to access x outside of its function block (still does not exist)
console.log(x); // Uncaught ReferenceError: x is not defined

Unlike var, variables declared with the let keyword cannot be re-declared within the same scope

let x = 1;
let x = 2; // Uncaught SyntaxError: Identifier 'x' has already been declared

You can however, still redefine (reassign) a variable declared with let.

let x = 1;
console.log(x); // 1

x = 2; // This is ok because you are not trying to redeclare x, just redefine its value
console.log(x); // 2

The Temporal Dead Zone

The Temporal Dead Zone (TDZ) is the area in the current scope between the start of the scope and where the variable is finally initialized. The TDZ applies to variables declared with the let keyword. A variable declared with let cannot be accessed (will return "ReferenceError") within the TDZ.

{
  // Start of Temporal Dead Zone for variable x
  console.log(x); // ReferenceError, still in TDZ for x
  var y = "hi"; // Still in TDZ for x
  let x; // x declared, but not initialized with value, still in TDZ for x
  x = 10; // TDZ for x ended as x is initialized to a value of 10
}

const

Similar to variables declared with let, variables declared with the const keyword are block scoped.

Also similar to let, variables declared with const cannot be redeclared.

Unlike variables declared with let however, variables declared with const MUST be initialized right away. If not, you will end up with a "SyntaxError: Missing initializer in const declaration" error.

Most importantly, variables declared and initialized with the const keyword cannot have their value changed through reassignment (see note below). This is because the const keyword causes the name of the variable to be read-only, preventing write access to the value stored in memory through the assigned variable. If you think about it, it makes sense why this is. If you want to create a variable that can't be changed easily, you need to know it's value, otherwise, you would just end up with a constant variable with an "undefined" value.

NOTE: Notice that variables initialized with the const keyword cannot have their value changed through reassignment. This does not mean that the value of a constant value cannot change, it only means you can't change it using the variable name directly. While there isn't another way to change a string or number variable other than reassignment for example, you can change the properties of an object.

// Create a variable using the const keyword and assign it a value of 1 (number)
const x = 1;
x = 2; // SyntaxError: Missing initializer in const declaration

// Create aa variable using the const keyword
// and assign it to an object
const myObj = {
  favoriteFood: "Pizza",
  favoriteLanguage: "JavaScript",
  favoriteHobby: "coding",
};

// Print out the value of favoriteFood
console.log(myObj.favoriteFood);

// Change the value of favoriteFood
// This works because we are not accessing the value directly through the use of the value name
myObj.favoriteFood = "Brocolli";
console.log(myObj.favoriteFood);

Which variable declaration is best and which should I use?

I read an article from Wes Bos and I like his advice:

Use the const keyword to declare variables by default unless you know that your variable will need to have its value changed (use let in that case).
Use the let keyword to declare a variable if you know its value will change (like an iterator for example).
Unless necessary for a special case, avoid using the var keyword for variable declaration.

Summary: Difference between variables declared with "var", "let", and "const" keywords:

var

Scope:
- Global
- Function
Able to be redeclared?
- Yes
Able to be reinitialized?
- Yes

let

Scope:
- Global
- Block
Able to be redeclared?
- No
Able to be reinitialized?
- Yes

const

Scope:
- Global
- Block
Able to be redeclared?
- No
Able to be reinitialized?
- No

Resources

Scope in JavaScript

Piotr Szponder — Thu, 14 Oct 2021 18:17:10 +0000

What is Scope?

Scope is the area of code where a variable (or function) exists and is accessible. There are a few different types of scopes in JavaScript:

Global Scope
Function Scope
Block Scope

Global Scope

Variables declared outside of functions or blocks (curly braces { }) are considered to have global scope meaning that they can be accessed anywhere in the JavaScript program

// Define Variables in the JavaScript Global Scope
var vGlobal = "I was defined in the global scope using the var keyword";
let lGlobal = "I was defined in the global scope using the let keyword";
const cGlobal = "I was defined in the global scope using the const keyword";

// Access the variables defined in the global scope from the global scope
console.log("Accessing vGlobal from global scope: ", vGlobal);
console.log("Accessing lGlobal from global scope: ", lGlobal);
console.log("Accessing cGlobal from global scope: ", cGlobal);

// Define a function to access the global variables inside a function
function myFunc() {
  // Access global variables from within the function
  console.log("Accessing vGlobal from within function scope: ", vGlobal);
  console.log("Accessing lGlobal from within function scope: ", lGlobal);
  console.log("Accessing cGlobal from within function scope: ", cGlobal);
}

// Call the function
myFunc();

// Access the global variables from within block scope
{
  console.log("Accessing vGlobal from within block scope: ", vGlobal);
  console.log("Accessing lGlobal from within block scope: ", lGlobal);
  console.log("Accessing cGlobal from within block scope: ", cGlobal);
}

NOTE: When defining variables using the var keyword outside of a function (hence globally scoping it), the variable becomes attached to the window object. Variables defined with let or const do not get attached to the window object. This is because var was designed to be either function or global scoped. let and const are actually created to be block scoped

The window object represents the browser's window and contains all global functions, objects and variables.

So technically, when you declare a variable using let and const outside of a code block in a javascript program, they are only globally scoped to the javascript program, but they are not in the global scope of the window object.

Function Scope

A variable declared within a function is considered to be part of the function's scope. This scope is referred to as function scope. You will sometimes see function scope also reffered to as local scope.

Variables declared inside a function scope can be accessed from within the function but not outside of it.

function myFunc() {
  // Declare a variable inside myFunc's funciton scope
  var x = 1;
  console.log(x);

  if (true) {
    var y = 2;
    console.log(y);
  }
  console.log(y);
}

// Call the function
myFunc();

// Attempt to access x outside of the function scope is not possible
console.log(x); // Uncaught ReferenceError: x is not defined

NOTE: Variables declared with the var keyword have function (a.k.a. local) scope when defined inside a function. Variables declared with let and const technically have block scope (inside curly braces) when declared inside a function (i.e. the variable's scope is bound to the curly braces, and not to the function itself). Since the function uses curly braces to encapsulate the function body, the function scope and the block scope for the function body are essentially the same thing.

The below example demonstrates the differences between function scoping when using var and let

function myFuncVar() {
  // Declare a variable using var inside myFunc's funciton scope
  var x = 1;
  console.log(x);

  if (true) {
    // Since var is function scoped and not block scoped,
    // we are actually overwriting the value of the x variable
    var x = 2;
    console.log(x);
  }
  // Will print out 2 since we overwrote the variable in the if statement
  console.log(x);
}

function myFuncLet() {
  // Declare a variable using var inside myFunc's funciton scope
  let x = 1;
  console.log(x);

  if (true) {
    // Creating a new variable x = 2 inside the block scope
    // (this is not accessible outside of the if statement's curly braces)
    let x = 2;
    console.log(x);
  }
  // 1 since console.log() cannot access x = 2 variable defined
  // in the if statement due to block scope
  console.log(x);
}

// Call the functions
myFuncVar();
myFuncLet();

Block Scope

Block scope was introduced in ES2016 along with the let and const variable declaration keywords. Block scope only applies to variables created with either the let or const keywords.

Block scope is the scope defined within a set of curly brackets { }. The curly brackets define a "block" of code, hence the name, "block scope".

A block scoped variable cannot be accessed outside of the block that it was defined in.

// This is an example of block scope,
// typically, the curly brackets will be attached to something like an if, for, while loop
// and not by themselves as seen in this example
// but this makes it easier to illustrate hw block scope works

// Lets call this block scope A
{
  // Anything defined inside these braces is block scope
  let a = 1;
  console.log(a); // 1
}
//"ReferenceError: a is not defined"
// Can't access a outside of it's block scope
console.log(a);

// Lets call this block scope B
{
  let b = 2;
  console.log(b); // 2

  // Cannot access "a" within block scope B since "a" was defined in block scope A
  console.log(a); // ReferenceError: a is not defined
}

// block scope C
{
  let c = 3;
  console.log(c); // 3

  // block scope D
  // block scope D is part of block scope D
  // Therefore, variables declared in block scope C are also accessible in block scope D
  // However, variables declared in block scope D are NOT part of block scope C
  {
    let d = 4;
    console.log(d); // 4
    console.log(c); // 3
  }
  // "ReferenceError: d is not defined" because "d" is part of block scope D but not block scope C
  console.log(d);
}

More examples of block scope:

// Note, the below if-else...if-else loop would never actually run
// the else-if or else portion of the code due to the if statment always
// evaluating to true first, this is just to give you an idea of the block scope.

// Example of block scope for an if-else...if-else loop
if (true) {
  let x = 1;
  console.log("x is in the if-statement's block scope");
} else if (true) {
  let y = 2;
  console.log("y is in the else...if-statement's block scope");
} else {
  let z = 3;
  console.log("z is in the else-statement's block scope");
}

// Example of block scope within a for loop
for (let i = 0; i < 5; i++) {
  let a = i; // a is in the for loop's block scope
  console.log(a);
}
// Cannot access the variable "a" outside of the block scope
console.log(a); // Uncaught ReferenceError: a is not defined

// Nested loops
// Outer Loop
for (let i = 0; i < 5; i++) {
  // This variable is defined in the outer loop's block scope,
  // it will be accessible by the inner loop
  let a = 5;
  console.log("Running outer for loop:");
  console.log(a); // 5

  // This inner for loop is defined inside the curly brackets of the outer for loop
  // Therefore, the inner for loop is in the block scope of the outer for loop
  // The inner for loop will have access to variables declared
  // in the outer for loop since they are in the same block scope
  // However, variables declared in the inner loop will not be accessible by the outer loop
  for (let j = 0; j < 5; j++) {
    // This variable is defined in the inner loop's block scope,
    // it is not accessible by the outer loop
    let b = 10;
    console.log("Running inner for loop:");
    console.log(a); // Will return 5
    console.log(b); // 10
  }

  console.log("Running outer for loop:");
  console.log(a); // 5
  // "ReferenceError: b is not defined" (because b is not in the block scope of the outer loop)
  console.log(b);
}

NOTE: Variables declared with the var keyword do NOT have block scope, only variables declared with let or const have block scope. Variables declared with var will ignore block scoping rules.

Example of how var does not follow block scoping

// Var does not follow block scoping
{
  var a = 1;
  console.log(a); // 1
}

console.log(a); // 1

{
  {
    var b = 2;
    console.log(b); // 2
  }
  // 2 (if b was declared using let or const, you would get a ReferenceError)
  console.log(b);
}

console.log(b); // 2

Lexical Scope

JavaScript is a lexically scoped language (as opposed to a dynamically scoped language). You will also see Lexical Scoping defined as Static Scoping. So what does lexical scoping mean?

Lexical scoping means that the scope is defined at the location where the variable or function is defined (as opposed to where they are run).

Example of how Lexical Scoping works:

// Define variable x and initialize its value to 1
let x = 1;

// Define function that will console.log the value of x
function myFunc() {
  console.log(x);
}

// Define function that defines a local variable x = 50 and calls myFunc()
function logVariable() {
  let x = 50;
  myFunc();
}

// What will logVariable() return? 1, 50, something else?
logVariable(); // This will log 1 to the javascript console

Let's break down the code snippet above.

When the logVariable() function is called, it creates a local variable x and sets its value equal to 50
In the next line, the myFunc() function is called, let's go up to where the myFunc() function is defined
myFunc() calls the console.log() function on the x variable however, x is not defined in the myFunc() scope. We therefore need to go up one scope to the global scope to get the value of x which is 1. (see section below on scope chaining).

Notice that we never accessed the value of x = 50, even though it appears right above the myFunc() call in the logVariable() function. Again, this is because lexical scoping requires us to go to where the functions are defined, and not where they are run. If JavaScript were a dynamically scoped language, calling logVariable() would result in the value of 50 being logged to the console instead of 1.

Scope Chaining

It is very helpful to understand how JavaScript accesses variables using scope chaining. Understanding the concept of scope chaining will help you understand how to determine the scope of variables / functions.

When a function or method needs to access a variable in JavaScript which is not initialized with a value in the current scope, JavaScript will go up by one scope level to look for the variable's value. It will keep going up scope levels until it finds the function declaration.

NOTE: Notice that scope chaining does not go DOWN scope levels, it will always only go up to look for a variable declaration in the next larger scope

Example of how scope chaining works:

// Defining x in the global scope of the file
let x = 0;

// Defining myFunc, everything inside is in it's function scope
function myFunc() {
  // In order to set a value for y, JavaScript needs to find the value of x
  // Since the value of x is not defined within the funcion scope,
  // we have to go to the next scope outside the function (which happens to be the global scope)
  // In the global scope, we find x = 0 so y will be initialized with a value of 0 as well
  let y = x;
  console.log("Initial value of y is: ", y); // 0

  for (let i = 0; i < 5; i++) {
    // Again, y is not defined in the for loop's scope,
    // need to go up by one level to the function scope to get the value of y
    y = y + i;
    console.log("logging y: ", y);

    // Since x's value is not defined in the for loop's block scope,
    // JavaScript goes up to the function scope
    // The function scope does not contain a value for x either
    // so JavaScript goes up another scope level to the global scope
    console.log(x);
  }
}

myFunc();

Summary

Scope is the area of code where a variable (or function) exists and is accessible
There are several types of scope in JavaScript
- Global Scope
- Function Scope
- Block Scope
Variables declared with let and const inside curly brackets { } have block scope
- These variables cannot be accesssed outside of the curly brackets they were declared in
- Block scoping does not apply to variables defined with the var keyword
Variables declared inside a function have function scope
- These variables cannot be accessed outside of the function they were declared in
- Technically, variables declared with let and var don't have function scope, they have block scope
Variables declared outside of functions and curly brackets have global scope
- These variables can be accessed anywhere in the code
- Only variables declared with the var keyword get attached to the global window object
JavaScript is lexically scoped which means that scope is defined where the function / variable are defined, and not where the function / variable are run.
Scope chaining allows javascript to go up to higher level scopes to look for the value of a variable if it does not exist in the current scope

References

JavaScript: Functions

Piotr Szponder — Thu, 14 Oct 2021 18:14:55 +0000

What is a Function?:

A function is a piece of reusable code. Understanding functions and how they work is essential to writing clean and maintainable code.

If you have a set of statements (lines of code) which you want to be able to run more than once, put that set of statements into a function and then every time you call (execute) that function, you can run those statements. A function allows you to recycle your code.

Function Declarations and the "function" Keyword:

The most basic way to create a function is by declaring the function using the function keyword followed by the name of the function you want to give it, a set of parenthesis ( ) followed by a code block { }. You can optionally put in one or more parameters into the function's parenthesis to be able to use them in the function's code.

Creating a function in this way is called "Function Declaration".

function myFuncName(optionalParam1, optionalParam2, ...) {
  // Code that runs when the function is called / executed.
}

Running a Function:

In order to run or execute the code inside a function, you have to "call" the function (this is also referred to as "invoking" a function).

To invoke a function, type the name of the function followed by parenthesis and any required function arguments. When you put the parenthesis after the function name, this tells JavaScript to execute the function.

// Declare a function without function parameters
function sayHello() {
  console.log("Hello");
}

// Call / Invoke the sayHello function
sayHello(); // prints "Hello" to the console

// Declare a function that takes in a parameter
function sayWord(word) {
  console.log(word);
}

// Call / Invoke the sayWord function
sayWord("Hi"); // prints "Hi" to the console
sayWord(); // returns undefined

Function Scope (Block Scope):

Functions in JavaScript are block scoped, meaning that any variable declared inside the function's blocks is part of the function's block scope and is not accessible outside of the function.

Variables in the global scope can still be accessed and modified by the function.

// define variable in global scope
let word = " World!";

// Declare sayHello function
function sayHello() {
  let greeting = "Hello";
  // Update greeting using variable from global scope
  greeting += word;
  console.log(greeting);
}

// Call the sayHello function
sayHello(); // prints "Hello World!" from the console

// Try to access the greeting variable declared inside the sayHello function
// This will not work as it was declared inside the function's scope and is not
// accessible in the global scope
console.log(greeting); // Returns "ReferenceError: greeting is not defined"

The Return Statement:

The return statement is used in a function to return a value when the function is called.

return also ends execution of the function. Any code below a return statement in a function is not run after the return statement is executed.

To create a return statement, simply use the return keyword, optionally followed by an expression or value.

If return is followed by a variable or expression, the evaluated value of that variable / expression will be returned by the function when it is called.
If return is not followed by a variable or expression, the function will return undefined when it is called.

Example of using the return keyword to return a value when the function is called

// Declare a function that returns the word "Hello"
function sayHello() {
  return "Hello";
}

// Store the return value of the sayHello() function in greeting
let greeting = sayHello();
console.log(greeting); // Hello

Example of using return to break out of a function. Notice in the function that the return statement breaks out of the while loop AND the function so that we don't get an infinite loop.

// Declare function that counts down from input number down to 0
// this function uses a return statement nested in an if statement
// to break out of the function when the function parameter is less than 0
function countDown(n) {
  while (true) {
    console.log(n);
    n--;
    if (n < 0) {
      return;
    }
  }
}

// Call the countDown() function
countDown(10);

/*
10
9
8
7
6
5
4
3
2
1
0
*/

Parameters vs Arguments in Functions:

Parameters are placeholder variables that are specified inside the parentheses of a function. These variables are used inside the function. A function can accept zero or more parameters.

When a user calls a function, if that function was declared with one or more parameters, the user must pass in values to those parameters. The values that the user passes in are referred to as function arguments. When the arguments are passed into the function, JavaScript replaces all instances of the function parameters with the value of the arguments that the user passed in.

NOTE: When a user passes in an argument to the function, the function is actually copying the value of that argument and uses a copy to run its tasks. Keep this in mind because depending on the variable type passed in (primitive or reference), you will either end up making a copy of the value, or a copy of the reference to the value respectively.
Even though parameters and arguments are written in the same location in the function, they are different.

parameters are placeholder variables written during function declaration
arguments are the actual value passed into the function when calling the function.

Setting Default Values for Parameters:

In JavaScript, you can set default values for function parameters. If the user does not specify a particular argument when calling a function, JavaScript will use the default value assigned to the function parameter during function assignment.

To set a default value to a function parameter, set the parameter equal to a value during the function declaration.

// Create a countUp function that will count up from a start point
// up to an end point
// Assign a default value of 10 to the end parameter
function countUp(start, end = 10) {
  while (true) {
    console.log(start);
    start++; // increment start value

    // Return condition
    if (start > end) {
      return;
    }
  }
}

// Call the countUp function with both argument inputs
countUp(1, 5);
/*
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
*/

// Call the countUp function with only one input argument
// CountUp will start from 1 and go all the way up to 10
// which is the default value of the end parameter if not specified as an argument
countUp(1);
/*
countUp with 1 input:
1
2
3
4
5
6
7
8
9
10
*/

NOTE: You cannot use default parameters properly if a parameter to the right of the default parameter is not set to a default as well. In the example below, a sum function is made with the parameter a having a default of 1. Notice that the 2nd parameter to the sum function does not have a default parameter. When the sum function is called with only one input parameter, the function assumes that the single argument (2 in the example) is actually the value for the parameter a. JavaScript assumes that a value for b was never defined and so the resulting input is NaN.

function sum(a = 1, b) {
  return a + b;
}

sum(2); // returns NaN

To avoid this situation, when you assign a default parameter, make sure that anything to the right of that parameter, also has a default parameter, so that the values can be properly assigned if the user does not specify them. Another way to think about this is that parameters that don't have a default assigned ALWAYS need to be to the LEFT of any parameters which are assigned a default value.

Accepting Extra Parameters with the rest (...) Parameter:

In JavaScript, use the rest parameter ... to allow a function to accept an unspecified amount of arguments.

To use the rest parameter, enter the rest parameter directly followed by an array name as the last parameter in the function declaration or argument. When the rest parameter is used, any additional arguments input into the function call will get stored in an array with the same name which was passed into the rest parameter.

// Using the rest operator as the 3rd parameter of the product function expression
const product = (a, b, ...args) => {
  let prod = a * b;

  if (!args) {
    return prod;
  } else {
    args.forEach((element) => (prod *= element));
    return prod;
  }
};

console.log(product(1, 2, 3, 4, 5)); // 120

// Can also simply use ...args as the only parameter input into the function
const product2 = (...args) => {
  return args.reduce((accumulator, currentValue) => accumulator * currentValue);
};

console.log(product2(1, 2, 3, 4, 5)); // 120

Rest vs. Spread Operators:

The rest parameter looks exactly like the spread operator however, they serve two different purposes.

The spread operator is used to "unpack" an array or other iterable so that the values of the iterable can be used as function arguments.
- The spread operator is used when invoking a function.
- The spread operator can also be used to make a copy of the properties of an objects or the elements of an array by unpacking the values and then wrapping the unpacked values in either array or object literals.
The rest operator is used to "pack" comma separated values which are entered as arguments to a function.
- The rest operator is used when creating a function definition or expression.
Basically, the spread and rest operators are opposites of each other
- Spread "unpacks" the values of an array or object into individual elements.
- Rest "packs" individual elements together into a single element (such as an array)

Function Best Practices:

Be specific! Every function that you write should only perform one task. If you find that you wrote a function that performs 2 or more tasks (especially if they are unrelated), strongly consider breaking up the function into smaller functions, each which performs only one task. If you write a function called addTwoNumbers(), it should only add two numbers, if it does anything else, such as multiplying the two numbers, that should go into another function.

Try to give your functions names that give some detail about what the function does. For example, if you write a function called sayHello(), then this probably means that the function will either return or print to the console a greeting such as "Hello".

This will help with code readability and maintenance.

Other Ways to Create a Function:

Function Expressions:

A function expression is simply a function declaration stored in a value.

To create a function expression, write a function declaration and then assign it to a variable name.

// Create a function expression
const myFuncExp = function sayHello() {
  console.log("hello");
};

// Call myFuncExp
myFuncExp(); // prints "hello" to the console

// Call sayHello
sayHello(); // returns "ReferenceError: sayHello is not defined"

In the code above, notice that you no longer can call the function using sayHello(). Instead, we have to call the function expression using the myFuncExp() variable name we defined to the left of the assignment operator.

Anonymous Functions:

In the introduction to Function Expressions, we showed that the function name on the right hand side can no longer be used to invoke the function, and instead, you had to use the variable name assigned to the function expression. You can actually remove the function name to the right of the function keyword and the function expression would still work.

A function without a declared name is referred to as an anonymous function. Anonymous functions are most often seen in conjunction with function expressions as a sort of "shorthand" to writing the function expression.

// Create a function expression
const sayHi = function sayHello() {
  console.log("hello");
};

// Create another function expression but assign it the value of an anonymous function
const sayGoodbye = function () {
  console.log("goodbye");
};

// Call sayHi function expression
sayHi(); // prints "hello" to the console

// Call the sayGoodbye function expression
sayGoodbye(); // prints "goodbye" to the console

NOTE: You can also create anonymous arrow functions using the following syntax () => {}. These can be used as callback functions. See additional information below for more information on callback functions and arrow functions.

Arrow Functions:

Arrow functions (also referred to as arrow function expressions) are further shorthand for anonymous function expressions which omit the use of the function keyword altogether and instead use what is called a "fat arrow" as the trigger to tell JavaScript that the statement is a function. The fat arrow is denoted with an equal sign next to a greater than sign =>.

Arrow Function Syntax:

In general, when creating an arrow function, declare a function name and assign it to parenthesis with 0 or more parameters, add an "fat arrow" after the parenthesis and then add brackets with the function code inside. You should also add a semicolon after the closing bracket.

General Arrow Function Syntax

const myFuncArrow = (param1, param2, param3, ...) => {
  // CODE HERE
};

NOTE: If the arrow function only has 1 parameter, you can omit the parenthesis around the parameter however, some style guides such as the Airbnb JavaScript Style Guide recommend to keep the parenthesis for better clarity.

NOTE 2: If the arrow function does not accept any parameters, you need to use a pair of empty parenthesis as part of the arrow function syntax.

Example of writing an arrow function without parameters

const myFunc = () => {
  return "hello";
};

If you only have one line of code inside your arrow function, you can use an implicit return. This requires you to omit the return keyword as well as the brackets. If the single line is particularly long, you can add parenthesis to wrap around the statement.

// Standard Arrow Function Syntax
const sumNum = (a, b) => {
  return a + b;
};

// Single-statement Arrow Function Syntax
const sumNum2 = (a, b) => a + b;

// Call both functions
console.log("sumNum: ", sumNum(1, 2)); // returns 3
console.log("sumNum2: ", sumNum2(1, 2)); // returns 3

NOTE 3: Be careful when using the single line, implicit return with objects. If you try to return an object in a single line without the return statement ("implicitly"), JS will try to interpret the object's curly braces with the arrow function's braces. A way to work around this is to enclose the whole object in parenthesis.

// BAD
const myArrowFunc = () => {key1: "value1", key2: "value2", key3: "value3"};

// GOOD
const myArrowFunc = () => ({key1: "value1", key2: "value2", key3: "value3"});

Anonymous Arrow Function Syntax:

It is possible to create anonymous arrow functions. These often appear when using the arrow function expression as an input to a function (i.e. a callback function).

Anonymous Arrow Function Syntax

() => {}

Example of using an anonymous arrow function as a callback function to the array method .filter()

// Initialize an array of numbers
let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Call the .filter() method on myArray and use an anonymous arrow function
// as the callback function to help filter the array for even numbers
let evens = myArray.filter((element) => element % 2 === 0);

console.log(evens); // [ 2, 4, 6, 8, 10 ]

Limitations of Arrow Functions:

While arrow function syntax looks clean, it cannot be used in all cases due to some limitations. Here are the most notable limitations:

Arrow functions do not have their own bindings to this or super
- Thus, arrow functions should not be used for object methods (functions associated with an object)
Generally can't be used with call, apply, or bind methods
Cannot be used to create constructor functions

IIFE (Immediately Invoked Function Expression):

As the name implies, use an IIFE (Immediately Invoked Function Expression) to invoke an anonymous function expression as soon as it is defined.

To turn an anonymous function expression into an IIFE, wrap the anonymous function expression in parenthesis, and then add an empty set of parenthesis right afterwards, just like you would use to invoke a regular function.

// IIFE which prints "hi" to the console as soon as code is executed
(function () {
  console.log("hi");
})();

// IIFE which accepts 2 arguments, prints 15 to the console in this case
(function (a, b) {
  console.log(5 + 10);
})(5, 10);

Per the Mozilla Developer Network, IIFEs can be used during program initialization if we just want to temporarily define some variables. As soon as the function finishes running, any variables defined within the function will be garbage collected and will not be part of the global scope helping to reduce the amount of global variables which is generally best practice.

You can also wrap your code in an IIFE to prevent the code from being read as any code inside the IFFE will not be accessible y the user.

Function Hoisting:

In a previous article, I spoke about hoisting which is the process that JavaScript uses to bring variable declarations to the top of the code prior to executing it.

Hoisting also works with function declarations. Any function created using a function declaration is "hoisted" to the top of the code and loaded by JavaScript before the rest of the code is executed. This allows us to write code where we call functions created by function declarations before the function declaration is actually declared.

NOTE: Unlike function declarations, function expressions are NOT hoisted by JavaScript. If you try to call a function expression before it is defined in code, you will get a ReferenceError. Apart from how function declarations and function expressions are written, the fact that function declarations are hoisted and function expressions aren't is really the only major difference between the two function creation methods.

// Call sayHi function expression above where the function is defined
sayHello(); // prints "hello" to the console

// Create a function declaration named sayHello
function sayHello() {
  console.log("hello");
}

// Call the sayGoodbye function expression above where the function is defined
sayGoodbye(); // prints "ReferenceError: Cannot access 'sayGoodbye' before initialization"

// Create a function expression named sayGoodbye
const sayGoodbye = function () {
  console.log("goodbye");
};

Callback Functions

A callback function is an anonymous function which is defined as a parameter of another function.

You will typically find callback functions in built-in JavaScript functions and methods. For example, a common function which accepts a callback function is the addEventListener method in JavaScript.

Lets take an example of the in-built array method filter. filter accepts a callback function which checks a condition for each element that filter is being called on. When JavaScript executes the filter function, the filter function will iterate through each element in the array and for each element, it will invoke the callback function.

// Declare an array of numbers
const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Filter myArray
// create an odds array with just the odd numbers in myArray
// Here, we are using an anonymous arrow function which we
// declare as a parameter to the filter function
const odds = myArray.filter((element) => {
  if (element % 2 !== 0) {
    return element;
  }
});

console.log(odds); // [ 1, 3, 5, 7, 9 ]

// We can also create the callback function outside of the calling function's
// parameters and just reference the callback function's name in the parameter list
// of the calling function
const evenCallback = (element) => {
  if (element % 2 === 0) {
    return element;
  }
};

// call the evenCallback function inside the filter function
// NOTICE THAT WE DID NOT INCLUDE THE PARENTHESIS NEXT TO evenCallback INSIDE THE PARAMETER TO .filter
// THIS IS BECAUSE WE DON'T WANT TO INVOKE THE FUNCTION, THE .filter METHOD WILL INVOKE evenCallback FOR US
const evens = myArray.filter(evenCallback);

console.log(evens); // [ 2, 4, 6, 8, 10 ]

NOTE 1: Notice that I used arrow function syntax to define my callback functions in the above example. You can also use regular function expressions or function declarations to create a callback function.

NOTE 2: It is important to understand that when you pass in the name of a callback function as a parameter, you DO NOT want to include parenthesis with the function name. Including parenthesis with the callback function's name as a parameter will force JavaScript to immediately invoke the function at runtime which is not what you want to happen typically.

References

JavaScript: Declaring and Initializing Variables, How Data is Stored and Accessed in JavaScript

Piotr Szponder — Thu, 14 Oct 2021 18:11:45 +0000

Declaring and initializing variables in JavaScript are two different concepts. In order to better understand these concepts as well as what a variable actually is, let's start with discussing how memory is used to store and access data.

What is a Variable and How does it Work?

A variable, also known as a "binding" connects (or binds) a piece of data in memory to a name which can later be used to retrieve the value from memory. In computer science, every location in memory has a memory address.

A few things happen when a variable is declared:

A location in memory is set aside to store the future value (piece of data) assigned to the variable name.
A memory address which "points" to that location in memory is created. This allows us to access the value stored in memory at a later point.
The variable name is associated with the memory address.

For example, let's say that you create a variable x using the let keyword and set it's value equal to the string "Hello". You then use the console.log() function to log the value of x to the console. What is actually happening under the hood?

let x = "Hello";
console.log(x);

To make this a little easier to explain and understand, we can break down the 1st line into 2 lines of code, a variable declaration and a value assignment.

// Lines 1 and 2 are equivalent to stating:
// let x = "Hello";
let x; // Line 1
x = "Hello"; // Line 2
console.log(x); // Line 3

Line 1: let x;

A variable is declared with a name of "x".
A location in memory is reserved for the value of the variable "x".
A memory address which points to the location in memory is associated with the variable name "x".

Line 2: x = "Hello";

JavaScript looks up the variable named x and uses the associated memory address to access the location in memory which was reserved for the variable "x".
- Basically, the variable "points" to the memory location where the value is (or is going to be) stored.
The value of "Hello" is stored at the specified memory location.

Line 3: console.log(x)

The console.log() function calls the variable x and uses the memory address associated with x to search for the value stored in memory which happens to be "Hello".
The value at the specific memory address is returned by console.log().

As a quick summary, when you try to print out the value of the variable x using console.log(x), what is actually happening is that the variable x contains the memory address where the the value "Hello" is stored. JavaScript uses that memory address to go to the specific location in memory which the memory address points to and retrieves the value, which is "Hello".

So variables "point" to values stored in memory.

Declaring Variables in JavaScript

To declare (create) a variable, we need to use the var, let, or const keyword, followed by the name we want to provide to the variable. The var, let, and const keywords tell JavaScript to set aside a portion of memory so that we may store a specific piece of data to it later.

The name provided to the variable can be later used to access the location in memory assigned to the variable and retrieve the data which is stored in it. To assign a value to the variable (initialize the variable with a value), use the assignment operator = to set the variable name equal to a piece of data (number, boolean, string, array, object, function, etc.)

// Declare a variable named "x" using the var keyword
var x;

// Declare a variable named "y" using the let keyword
let y;

// Declare a variable named "z" using the const keyword
// Assign a value of 2 to the variable "z" using the assignment operator (=)
// Also called initializing "z" with a value of 2 (see section below on initialization)
const z = 2;

Initialization

Initializing is the term used to describe the process of assignment of a value to a variable (i.e. storing the value (piece of data) in the location in memory which the variable "points" to).

// Initialize the variable x to a value of 1
var x = 1;

// Initialize the variable y to a value of 2
let y = 2;

// Initialize the variable z to a value of 3
// Note that variables with the const keywords
// have to be initialized as soon as they are
// declared otherwise, you will get an error.
const z = 3;

Resources

Control Flow in JavaScript: Loops

Piotr Szponder — Thu, 14 Oct 2021 18:07:10 +0000

This article is part of my Control Flow in JavaScript Series.

In this article, we will be discussing loops.

Why do we need loops?

Very often in code, you will find yourself in the situation where you need to perform a particular task or tasks repeatedly.

Let's say that you want to print to the console the numbers 1 though 10. One way to do that would be the following:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

Ok, that's only 10 lines of code, that's not that bad you may say. What if instead of printing the numbers 1 through 10, you were asked to print the number 1 through 1000! Do you really want to type out 1000 console.log() statements? Instead of writing 1000 lines, we can implement the following loop for example:

// Print out the numbers 1 through 1000 to the console
for (let i = 0; i < 1000; i++) {
  console.log(i);
}

Loops enable a program to repeat a piece of code for a specified (or unspecified) amount of time.

Loop Basics

All 3 of the standard loops (for, while, and do-while) need 3 things to run correctly:

An iterator / initial condition.
A condition to evaluate to true or false to determine whether or not the loop should run. Typically, this condition is associated with the iterator / initial condition.
A way to increment the iterator / initial condition.

for loops:

The for loop is the most often used loop out of all 3 of the standard loops.

Here is the syntax:

for (iterator; condition; incrementIterator) {
  // Code in for block goes here
  // This code will only execute if the condition
  // evaluates to true
}

Let's look at an example of a for loop and step though what is happening:

// Initialize an array
let myArray = ["a", "b", "c", "d", "e"];

// Loop through the array and print each element
for (let i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

// The above loop prints out
// a
// b
// c
// d
// e

// This console.log() will run after the for loop has
// completed printing out all of the elements in the
// array
console.log("For loop ended");

When the for loop is run for the 1st time, the iterator is set to 0.
The condition is then checked and since 0 is less than myArray.length (5), the condition evaluates to true.
Since the condition evaluated to true, then the code inside the for loop is run once and the first element in the array is printed to the console.
After the code inside the loop has executed once, the iterator is incremented from 0 to 1 by i++.
After this, the condition is checked again, since 1 is less than the length of the array, the code inside the for loop is run once again and the 2nd value of the array is printed to the console.
After the code runs a second time, the iterator is again increased by 1 so now its value is 2.
The loop of checking the condition, running the code and incrementing the iterator is repeated until the iterator is incremented to the length of the array which is 5. At this point, the condition is no longer true since 5 < 5 is false. This results in the for loop terminating and moving to the next set of code which is console.log("For loop ended");

while loops:

Unlike for loops, while loops have their iterator initialized outside of the while loop declaration. Also different from the for loop, the incrementing of the iterator does not happen automatically, instead it needs to be specifically declared within the while loop code block, otherwise, the iterator will not increment and the while loop will keep looping forever. This is called an infinite loop condition. This should be avoided as once you get into an infinite loop, you cannot break out of it from within the code, you will have to manually close or quit out of your program.

Here is the syntax for a while loop:

let iterator = someValue;
while (condition) {
  // Code goes here

  // If we don't increment the iterator here, our
  // loop will probably keep going to infinity
  iterator++;
}

NOTE: Technically, you don't need an iterator in order to use a while (or a do...while) loop. However, if you don't use an iterator, you need to have some other way of ensuring that the condition in your while loop eventually evaluates to false, otherwise you will end up with an infinite loop. Instead of using an iterator, you can have an if condition inside your loop that checks if a flag is a certain value and if it is, change the condition in the while loop to evaluate to false.

// Initialize variable to be printed (and decremented) in loop
let n = 5;

// Initialize flag to be used in while loop evaluation
let flag = true;

// Loop while flag evaluates to true
while (flag) {
  // Log values to console
  console.log("Flag is true");
  console.log(n);
  n--; // Decrement n

  // Condition that flips flag to false and ends
  // execution of while loop
  if (n < -5) {
    console.log("Flag is false");
    flag = false;
  }
}

/* CODE OUTPUT:
Flag is true
5
Flag is true
4
Flag is true
3
Flag is true
2
Flag is true
1
Flag is true
0
Flag is true
-1
Flag is true
-2
Flag is true
-3
Flag is true
-4
Flag is true
-5
Flag is false
*/

Now let's see an example where we loop through an array and print all it's values:

// Initialize an array
let myArray = ["a", "b", "c", "d", "e"];

// Set an iterator with an initial value
// for the while loop
let i = 0;

// Loop through the array and print each element
while (i < myArray.length) {
  // Log the current element in the array to the console
  console.log(myArray[i]);

  // Increment the iterator
  i++;
}

// The above loop prints out
// a
// b
// c
// d
// e

// This console.log() will run after the loop has
// completed printing out all of the elements in the
// array
console.log("while loop ended");

In the example above, we initialize the iterator outside of the while loop and set it's value to 0.
The while loop checks the condition which is i < myArray.length and since i is currently 0, the loop will run and print the 1st element in the array as well as increment the iterator which is declared outside the loop.
This is then repeated with the condition of the while loop being checked before the code inside runs.
Once the iterator inside the while loop is incremented to a value 5 which is the same as the length of the array,the condition on the while loop will no longer be true and the while loop will exit and move to the next set of instructions which is to console.log("while loop ended").

do...while loops:

Do while loops are very similar to while loops except the checking of the condition happens after the contents inside the loop are executed. This ensures that even if the condition inside the while loop will evaluate to false right away, the contents inside the loop will run once before the loop exits due to the condition evaluating to false.

Syntax of a do...while loop:

// Initialize an iterator which will be used to control
// how many times the loop will run.
let iterator = someValue;

// Run the code inside the do code block
do {
  // Code goes here

  // If we don't increment the iterator here, our
  // loop will probably keep going to infinity
  iterator++;

  // check the condition evaluates to true
  // before going back and running the code again
  // inside the do loop
} while (condition);

Example of do...while loop:

// Initialize an array
let myArray = ["a", "b", "c", "d", "e"];

// Set an iterator with an initial value
// for the do...while loop
let i = 0;

// Loop through the array and print each element
do {
  // Log the current element in the array to the console
  console.log(myArray[i]);

  // Increment the iterator
  i++;
} while (i < myArray.length);

// The above loop prints out
// a
// b
// c
// d
// e

// This console.log() will run after the loop has
// completed printing out all of the elements in the
// array
console.log("do...while loop ended");

Here, the iterator is also declared outside of the loop and initialized to a starting value of 0.
The code inside the do...while loop is run and the iterator is incremented by 1.
The condition in the while loop is then checked. Since 1 is less than the length of the array, the code in the do portion of the loop is run once again.
This cycle of checking the condition and running the code inside the do block is repeated until the condition inside of the while loop is no longer true. At this point, the do...while loop exits and the next section of code is run which is the console.log("do...while loop ended").

Skipping Iterations and Escaping Out of Loops:

break:

The break statement in JavaScript is used inside a loop to prematurely break out of the loop. These are typically found in if statements and used to aid in the control of the loop.

A particularly useful use for the break statement is to break out of an infinite while loop.

If a break statement is found inside a nested (loop within a loop) loop, then the break statement only forces JavaScript to break out of the inner-most loop containing the break statement.

Examples of using the break statement:

for (let i = 0; i < 10; i++) {
  console.log(i);
  if (i === 3) {
    break;
  }
}

console.log("printing outside for loop");

/*
Output of code above
0
1
2
3
printing outside for loop
*/

for (let i = 0; i < 5; i++) {
  console.log("Printing i:", i);
  for (let j = 0; j < 5; j++) {
    if (j > 3) {
      break;
    }
    console.log("Printing j:", j);
  }
}

/*
Output of Nested For Loop:
Printing i: 0
Printing j: 0
Printing j: 1
Printing j: 2
Printing j: 3
Printing i: 1
Printing j: 0
Printing j: 1
Printing j: 2
Printing j: 3
Printing i: 2
Printing j: 0
Printing j: 1
Printing j: 2
Printing j: 3
Printing i: 3
Printing j: 0
Printing j: 1
Printing j: 2
Printing j: 3
Printing i: 4
Printing j: 0
Printing j: 1
Printing j: 2
Printing j: 3
*/

// You can also use the break statement to break out of an infinite while loop

let counter = 0;
while (true) {
  console.log(counter);
  counter++;
  if (counter > 5) {
    break;
  }
}

/*
Output of while loop:
0
1
2
3
4
5
*/

continue:

The continue statement works similarly to to the break statement except that instead of completely breaking out of the loop containing the continue statement, continue just forces the current loop to start its next iteration, while skipping any additional statements below the continue statement.

More specifically, when the continue statement is executed, there are 2 possibilities that occur depending on the type of loop the statement is located in:

For a while loop, continue forces the loop to proceed with its next iteration.
For a for loop, continue forces the loop to update the current iterator and then proceed with the next iteration.

Also similar to the break statement, continue only works on the inner-most loop which contains the continue statement.

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    continue;
  }
  console.log(i);
}

console.log("printing outside for loop");

/*
Notice how the value of 3 is not printed. This is because
the if statement triggers and the continue causes
the console.log(i) to get skipped and the next iteration
proceeds.
Output of code above:
0
1
2
4
printing outside for loop
*/

for (let i = 0; i < 5; i++) {
  console.log("Printing i:", i);
  for (let j = 0; j < 5; j++) {
    if (j === 2) {
      continue;
    }
    console.log("Printing j:", j);
  }
}

/*
NOTE: Notice how the number 2 is not being printed
inside the nested for loop. This is because of the
continue statement.
Output of Nested For Loop:
Printing i: 0
Printing j: 0
Printing j: 1
Printing j: 3
Printing j: 4
Printing i: 1
Printing j: 0
Printing j: 1
Printing j: 3
Printing j: 4
Printing i: 2
Printing j: 0
Printing j: 1
Printing j: 3
Printing j: 4
Printing i: 3
Printing j: 0
Printing j: 1
Printing j: 3
Printing j: 4
Printing i: 4
Printing j: 0
Printing j: 1
Printing j: 3
Printing j: 4
*/

Looping through Iterables and Objects in JS with for...of and for...in loops:

for...of loops:

for...of loops are a shorthand way to write a for loop to iterate over all elements in an iterable object. strings, arrays, maps and sets are examples of iterable objects in JavaScript. Elements in an array-like object such as a NodeList can also be accessed using for...of.

When using a for...of loop, the iterator which is declared inside the conditional statement of the loop takes on the value of the current element in the iterable being evaluated.

let myArray = ["a", "b", "c", "d", "e"];

for (let letter of myArray) {
  console.log(letter);
}

/*
Output from for...of array
a
b
c
d
e
*/

for...in loops:

for...in loops iterate through properties in an object, specifically their keys.

let myObject = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
};

for (let property in myObject) {
  console.log(`${property}: ${myObject[property]}`);
}

/*
Output from the for...in loop
firstName: John
lastName: Doe
age: 50
*/

NOTE: While it is possible to use the for...in loop to iterate over an array, please only use for...in loops to iterate over object properties. for...in loops will not necessarily iterate over the array in a specific order.

References

Control Flow in JavaScript: Conditional Statements

Piotr Szponder — Thu, 14 Oct 2021 18:02:51 +0000

This article is part of my Control Flow in JavaScript Series.

In this article, we will be discussing conditional statements.

What is Control Flow and why do we need it?

"In computer science, control flow is the order in which individual statements, instructions, or function calls are executed / evaluated."

Instead of always executing instructions linearly, often times in programming, there will be more than one possible option that can be executed, depending on the current conditions.

This results in the need to have ways to be able to branch a decision into 2 or more options, and even loop back in certain cases.

Conditional statements enable a program to select one out of 2 or more possible execution paths depending on the current conditions.

Loops on the other hand enable the program to repeat a piece of code for a specified (or unspecified) amount of time.

Truthy and Falsy

Before diving into conditional statements, let's understand "truthyness" and "falsyness" of values in JavaScript.

Just like how a bit in memory either only evaluates to 1 or 0 (true or false), each value in JavaScript evaluates to either true or false in a boolean context.

A value which evaluates to true in a boolean context is considered truthy. Most values in JavaScript are truthy. Per the Mozilla Developer Network, "all values are truthy unless they are defined as falsy."

A value which evaluates to false in a boolean context is considered falsy.

List of all values in JavaScript which are falsy (evaluate to false):

false
0
-0
0n
""
null
undefined
NaN

NOTE: See the MDN Falsy webpage for more information.

Comparison Operators

Comparison operators are in boolean statements which evaluate to either true or false depending on the conditions that are on both sides of the comparison operator.

Types of Comparison Operators:

== (loose equality)
!= (negation of loose equality)
=== (strict equality)
!== (negation of strict equality)
> (greater than)
< (less than)
>= (greater than or equal to)
<= (less than or equal to)

Examples of Comparison Operators:

let x = 1;
let y = 2;
console.log(x == y); // false
console.log(x != y); // true
console.log(x === y); // false
console.log(x !== y); // true
console.log(x > y); // false
console.log(x < y); // true
console.log(x >= y); // false
console.log(x <= y); // true

Logical Operators

Logical operators are most commonly used to link multiple boolean comparison statements and return either true or false depending on the conditions.

The 3 most common logical operators are logical AND (&&), logical OR (||) and logical NOT (!).

Logical AND (`&&`)

Logical AND (&&) is used in a boolean statement and evaluates to true only when both sides of the statement evaluate to true.

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

Logical OR (`||`)

Logical OR (||) is used in a boolean statement and evaluates to true as long as one side of the statement evaluates to true.

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

Short Circuit Evaluation

So what is actually happening "under the hood" when either && or || are called to evaluate a boolean expression?

When given an expression to evaluate, both && and || will evaluate the left side of the expression to either true or false. After this, depending if the operator was a Logical AND or OR, either the original left side of the expression is returned or the original right side will be returned. This is referred to short-circuit evaluation

&& returns the first falsy value / evaluation. If all expressions evaluate to truthy, then the right most value is returned.

// 0 (0 is falsy, everything else is ignored)
console.log(0 && 1 && 2); // 0

// 0 (1 is truthy, so we look at the next value which is 0,
// since 0 is falsy, it is returned, and everything else
// is skipped)
console.log(1 && 0 && 2); // 0

// 0 (1 is truthy, and so is 2, so the next value to the right is 0, which is falsy, it is therefore returned)
console.log(1 && 2 && 0); // 0

// 3 (everything is truthy, return right most item)
console.log(1 && 2 && 3); // 3

// true, (both left and right sides of && first evaluate to
// true, since true on both sides of &&, return true
// (nothing is falsy))
console.log(1 < 2 && 4 > 3); // true

|| returns the first truthy value / evaluation. If expressions evaluate to falsy, then the right most value is returned.

// 1 (0 is falsy, so 1 is evaluated next,
// since 1 is truthy, it is returned and everything else
// is ignored)
console.log(0 || 1 || 2); // 1

// 1 (1 is truthy, so it is returned,
// everything else is ignored)
console.log(1 || 0 || 2); // 1

// 1 (1 is truthy, and so is 2, but since 1 was the 1st
// truthy value, it is returned, and everything is skipped)
console.log(1 || 2 || 0); // 1

// 3 (0 and undefined are both falsy, and 3 is truthy, so
// 3 is returned)
console.log(0 || undefined || 3); // 3

// undefined (since 0, false, and undefined are falsy,
// the right-most falsy value is returned)
console.log(0 || false || undefined); // undefined

NOTE: Keep in mind, that the way that short circuit evaluation works is that boolean expressions which use comparison operators are first evaluated, then the short circuit evaluation kicks in and takes over. So anything with a comparison operator will evaluate to either true or false and that is what the logical AND or OR will return.

// returns true (1 < 2 evaluates to true,
// so the value of true is returned)
console.log(1 < 2 || 0); // true

// returns 0 (1 > 2 evaluates to false, so || returns
// the right hand side by default, which is 0)
console.log(1 > 2 || 0); // 0

Logical NOT (`!`)

Logical NOT (!) reverses the truthyness or falsyness of the operand that it is in front of. Basically, if something evaluates to true, the logical NOT changes that to false and vice versa.

console.log(!true); // false
console.log(!false); // true

if statement:

The if statement evaluates a condition (what's in the parenthesis). When the condition is evaluated to be truthy, the if statement will run the block of code inside its curly braces.

If the condition is evaluated to be falsy, the if statement and the contents inside its curly braces are not evaluated and JavaScript moves on with the next statement in the code after the if statement's closing curly braces..

// The stuff inside the parenthesis is the condition that
// is used to determine if the contents inside the
// curly braces {} will run or not.
// The condition will either evaluate to be truthy or falsy
if (true) {
  console.log("the if statement has run");
}

if (false) {
  // this code is skipped since the condition in the if
  // statement is false
  console.log("this code will not run");
}

if...else statement:

The else portion of the if...else statement is an addition to the if statement.

Basically, when the if statement evaluates to false, then the block of code which is part of the if statement is skipped an the code in the else block will run instead.

Since the else statement doesn't have a condition to evaluate, it will always run as long as all of the if and else if statements above it fail (i.e. their conditions evaluate to false);

Notice

if (true) {
  // code in if loop will run since it evaluates to true
  console.log("this code will run");
} else {
  // this code will not run when the if statement runs
  // it will only run when the condition in the if
  // statement evaluates to false
  console.log("this code will not run");
}

if (false) {
  // code inside if statement will not run as the condition
  // evaluates to false
  console.log("this code will not run");
} else {
  // code inside else statement will run since the
  // the condition in the if statement is false
  console.log("this code will run");
}

else if statement:

The else if statement sits in between the if and the else statement. You can have as many else if statements as you like sandwiched in between the if and else statement.

The code block for each else if statement will only run when the condition inside the else if statement evaluates to true AND any if or else if statements above if also evaluated to false.

When an else if statement runs, any additional else if and else statements below the current else if statements will not run.

const x = 1;
const y = 2;
const z = 3;

if (x < 1) {
  // The condition in this if statement is false,
  // so this if statement will not run
  console.log(x, "< 1");
} else if (x === y) {
  // The condition in this else if evaluates to false
  // so this else if statement will not run
  console.log(x + "=" + y);
} else if (x === 1) {
  // This is the first condition that evaluates to true
  // it will run
  console.log("x = 1");
} else if (y === 2) {
  // while the condition in this else if statement is true
  // the else if statement above was also true and was
  // evaluated first. Since there was already a statement
  // which evaluated to true and ran, no other statements
  // below it will run, including this else if statement.
  console.log(
    "this code will not run because the else if block above ran first"
  );
} else {
  console.log(
    "this code will not run because a previous else if statement executed successfully"
  );
}

switch Statements:

Switch statements work a little differently than if loops. Instead of evaluating a condition to either true or false, the switch statement accepts an expression and then looks for the value of that expression in one of its case.

You can have as many case conditions as you want inside a switch statement.

When a switch statement identifies a matching case, the switch statement will run all of the contents inside that case as well as any other code below it, including other case conditions.

If a matching case is not identified, then the default case is run (assuming it is the last condition in the switch expression).

To avoid running more than one case, it is best practice to add a break statement as the last line in each of the case statements. This will cause the switch expression to exit once it runs into the break statement.

Here is the syntax used to write a switch statement, provided by MDN:

switch (expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    [break;]
  case value2:
    //Statements executed when the
    //result of expression matches value2
    [break;]
  ... // you can have as many cases as you want
  case valueN:
    //Statements executed when the
    //result of expression matches valueN
    [break;]
  [default:
    //Statements executed when none of
    //the values match the value of the expression
    [break;]]
}

Here is an example of a switch statement, also provided by MDN. Depending on the value of expr, there are a few different things that could happen.

If expr is Oranges:

"Oranges are $0.59 a pound." will print out to the console.
The break statement will trigger and prevent anything else below the current case from executing.

If expr is Apples:

"Apples are $0.32 a pound." will print out to the console.
The break statement will trigger and prevent anything else below the current case from executing.

If expr is Bananas:

"Bananas are $0.48 a pound." will print out to the console.
The break statement will trigger and prevent anything else below the current case from executing.

If expr is Cherries:

"Cherries are $3.00 a pound." will print out to the console.
The break statement will trigger and prevent anything else below the current case from executing.

If expr is Mangoes:

The case in Mangoes will run, there actually isn't anything inside this case, however, there also isn't a break statement, so everything below the Mangoes case will also run (the Papayas case in this case)

If expr is Papayas:

"Mangoes and papayas are $2.79 a pound." will print out to the console.
The break statement will trigger and prevent anything else below the current case from executing.

If expr is none of these:

The default case will run
'Sorry, we are out of ' + expr + '.' will run in the console, replacing expr to whatever you had it set to.

const expr = "Apples";

switch (expr) {
  case "Oranges":
    console.log("Oranges are $0.59 a pound.");
    break;
  case "Apples":
    console.log("Apples are $0.32 a pound.");
    break;
  case "Bananas":
    console.log("Bananas are $0.48 a pound.");
    break;
  case "Cherries":
    console.log("Cherries are $3.00 a pound.");
    break;
  case "Mangoes":
  case "Papayas":
    console.log("Mangoes and papayas are $2.79 a pound.");
    break;
  default:
    console.log("Sorry, we are out of " + expr + ".");
}

console.log("Is there anything else you'd like?");

To see what happens for all of the cases above, I modified the above code to loop through an array that contains all of the case options.

const expr = [
  "Oranges",
  "Apples",
  "Bananas",
  "Cherries",
  "Mangoes",
  "Papayas",
  "Steak",
];

for (const item of expr) {
  switch (item) {
    case "Oranges":
      console.log("Printing results of 'Oranges' case:");
      console.log("Oranges are $0.59 a pound.");
      break;
    case "Apples":
      console.log("Printing results of 'Apples' case:");
      console.log("Apples are $0.32 a pound.");
      break;
    case "Bananas":
      console.log("Printing results of 'Bananas' case:");
      console.log("Bananas are $0.48 a pound.");
      break;
    case "Cherries":
      console.log("Printing results of 'Cherries' case:");
      console.log("Cherries are $3.00 a pound.");
      break;
    case "Mangoes":
      console.log("Printing results of 'Mangoes' case:");
    case "Papayas":
      console.log("Printing results of 'Papayas' case:");
      console.log("Mangoes and papayas are $2.79 a pound.");
      break;
    default:
      console.log("Printing results of 'default' case:");
      console.log("Sorry, we are out of " + item + ".");
  }
}

console.log("Is there anything else you'd like?");

Here is what gets printed to the console:

Printing results of 'Oranges' case:
Oranges are $0.59 a pound.
Printing results of 'Apples' case:
Apples are $0.32 a pound.
Printing results of 'Bananas' case:
Bananas are $0.48 a pound.
Printing results of 'Cherries' case:
Cherries are $3.00 a pound.
Printing results of 'Mangoes' case:
Printing results of 'Papayas' case:
Mangoes and papayas are $2.79 a pound.
Printing results of 'Papayas' case:
Mangoes and papayas are $2.79 a pound.
Printing results of 'default' case:
Sorry, we are out of Steak.
Is there anything else you'd like?

The Conditional Operator

The Conditional Operator is essentially a shortcut to performing an if...else loop. You will also see the conditional operator called a ternary operator.

Instead of writing the if else loop, what you do is write the condition to be used to evaluate the truthyness (or falsyness), then add a questions mark followed by an expression to run if the condition is true, a colon (:), and then another expression to run if the condition evaluates to false.

Below is the syntax used by the conditional operator:

(condition) ? expressionIfTrue : expressionIfFalse

Basically, if the condition in parenthesis (to the left of the question mark) evaluate to true, then the expression to the left of the colon is returned. If the condition evaluates to false, then the expression to the right of the colon is returned.

let x = 1;
let y = 2;

let a = true ? x : y;
console.log(a); // 1

let b = false ? x : y;
console.log(b); // 2

// Logs "Hi" to the console
let c = 30 < 60 ? console.log("Hi") : console.log("Goodbye");

// Logs "Goodbye" to the console
let d = 30 > 60 ? console.log("Hi") : console.log("Goodbye");

DEV Community: Piotr Szponder

JavaScript: Differences Between Using var, let, and const Keywords for Variable Declaration

Scope

Hoisting

Differences between var, let, and const

var

let

The Temporal Dead Zone

const

Which variable declaration is best and which should I use?

Summary: Difference between variables declared with "var", "let", and "const" keywords:

Resources

Scope in JavaScript

What is Scope?

Global Scope

Function Scope

Block Scope

Lexical Scope

Scope Chaining

Summary

References

JavaScript: Functions

What is a Function?:

Function Declarations and the "function" Keyword:

Running a Function:

Function Scope (Block Scope):

The Return Statement:

Parameters vs Arguments in Functions:

Setting Default Values for Parameters:

Accepting Extra Parameters with the rest (...) Parameter:

Rest vs. Spread Operators:

Function Best Practices:

Other Ways to Create a Function:

Function Expressions:

Anonymous Functions:

Arrow Functions:

Arrow Function Syntax:

Anonymous Arrow Function Syntax:

Limitations of Arrow Functions:

IIFE (Immediately Invoked Function Expression):

Function Hoisting:

Callback Functions

References

JavaScript: Declaring and Initializing Variables, How Data is Stored and Accessed in JavaScript

What is a Variable and How does it Work?

Declaring Variables in JavaScript

Initialization

Resources

Control Flow in JavaScript: Loops

Why do we need loops?

Loop Basics

for loops:

while loops:

do...while loops:

Skipping Iterations and Escaping Out of Loops:

break:

continue:

Looping through Iterables and Objects in JS with for...of and for...in loops:

for...of loops:

for...in loops:

References

Control Flow in JavaScript: Conditional Statements

What is Control Flow and why do we need it?

Truthy and Falsy

Comparison Operators

Logical Operators

Logical AND (&&)

Logical OR (||)

Short Circuit Evaluation

Logical NOT (!)

if statement:

if...else statement:

else if statement:

switch Statements:

The Conditional Operator

Resources:

Logical AND (`&&`)

Logical OR (`||`)

Logical NOT (`!`)