DEV Community: Jeffrin Mathew Benny

Short Circuiting in JavaScript

Jeffrin Mathew Benny — Mon, 13 Sep 2021 12:39:01 +0000

In JavaScript short circuiting, an expression is evaluated from left to right and each of the section is evaluated before moving to the next. If any of the section in the expression provides the desired output, the evaluation will be stopped and it won't check the rest of the expression.

Before going to short circuiting, we can go through the concept of truthy and falsy values.

Falsy values

Falsy values are values that are not false, but become false if we convert it to Boolean.
There are mainly 5 falsy values in JavaScript. They are 0, '' (empty string), undefined, null, NaN.

console.log(Boolean(0)) // false
console.log(Boolean('')) // false
console.log(Boolean(undefined)) // false
console.log(Boolean(null)) // false
console.log(Boolean(NaN)) // false

Truthy values

The values that are not falsy are truthy values. They will become true if we convert them to Boolean.

console.log(Boolean(1)) // true
console.log(Boolean('Sample')) // true
console.log(Boolean([])) // true
console.log(Boolean({})) // true
console.log(Boolean(-1)) // true

Logical OR (||)

In the Logical OR expression, the sections in the expression is divided using || symbol. In the OR expression, if the first value is a truthy value. It will return the first value and do not evaluate the next values.
And, if the first value is a falsy value, it will look the second part of expression and if it is also a falsy one , it goes to the next and goes on like that. If every value in the expression is a falsy one, it will return the last section.

console.log(true || "Sample") // true
console.log(false || "Sample") // Sample
console.log(undefined || null) // null
console.log(1 || '') // 1
console.log(undefined || 0|| '' || "Hello" || 23 || null) // Hello

This can be used in various scenarios in code. A sample situation is given below. Consider we have to check whether a particular variable exists, and if it exists, we have to move the value to another variable. If not, we have to assign a default value to the new variable.
This can be done with conditional operator.

// Conditional Operator
const newVar = oldVar ? oldVar : 10;

// Short Circuiting
const newVar = oldVar || 10;

Logical AND (&&)

In Logical AND expression, each of the section is separated by the && symbol.
In Logical AND, if the first value is falsy, it immediately returns that value and do not validate the rest of the expression. If the first value is truthy, it goes to the second one and if it is also truthy, it goes to next and so on. If all the values are truthy, it will return the last value.
We can consider it like this, for an AND expression to be true, all the values in that expression should be true. If any of the value is false, the entire expression is false and we don't need to evaluate further.

console.log(true && "Sample") // Sample
console.log(false && "Sample") // false
console.log(undefined && null) // undefined
console.log(1 && '') // ''
console.log(1 && true && -1 && 0 && 23 && null) // 0

Let us consider the below practical example. Consider invoking a function based on a variable value.

// Normal Method
if (isValid){
   sampleFunction();
}

// Short Circuiting
isValid && sampleFunction();

The Nullish Coalescing Operator (??)

There is a condition in the Logical OR operator short circuiting which doesn't provide the desired output. Consider the below code snippet

const a = 0;
const val = a || 10; // val => 10

Here in this condition, even though the variable exists, it is not fetching the value of a to val, since 0 is a falsy value.
This can be corrected by using the Nullish Coalescing operator.
It will check for the nullish values (null and undefined) for short circuiting and not zero or empty string.

const a = 0;
const val = a ?? 10; // val => 0

Basic Function Types in JavaScript

Jeffrin Mathew Benny — Sun, 29 Aug 2021 07:58:04 +0000

A function is a piece of code to perform a specific task. Function is a important concept in programming as it allows modularity in programming and it enables the reusability of code.
In order to execute a function, it should be called or invoked.

Functions in JavaScript

JavaScript has multiple ways to define functions. The most commonly used among them are:

Function Declaration
Function Expression
Arrow Functions

Function Declaration

Syntax

function functionName(parameters){
   ...functionBody
}

Example

function addNumber(a,b){
   return a+b;
}

The above example is a function to add two numbers. And it can be invoked by providing the function name followed by parenthesis. Inside the parenthesis, we will provide the argument values to be passed to the function.

addNumber(2,3); // Returns 5

The parameters are optional for a function, we will be able to create functions without giving any parameter.

function logger(){
   console.log('This is a logger function');
}

logger();

Optional Parameter

While defining the function, it is possible to set default values to the parameters, in such cases, while invoking, if the user doesn't provide any arguments the default value will considered.

function addNumber(a=2,b=2){
   return a+b;
}
addNumber(3,3); // Returns 6
addNumber(3);   // Returns 5
addNumber();    // Returns 4

Function Expression

In this type, function is written as an expression and the value generated by that expression is stored in a variable. In function declaration, the function can be invoked even before it is defined. But this is not possible in the case of function expression. This is will be explained in detail in Hoisting.

Syntax

const functionName = function(parameters){
   ...functionBody
}

Example

const addNumber = function(a,b){
   return a+b;
}

Arrow Function

An Arrow Function expression has a shorter syntax. It is written similar to the function expression but instead of the function key word, it uses an arrow symbol(=>).

Syntax

const functionName = (parameters)=>{
   ...functionBody
}

If the arrow function body is having only one line of code, it will return the value implicitly. And, the braces can be omitted too.
Also, if it having only one parameter, parenthesis can also be avoided.

const addNumber= a => a + 100

addNumber(2); // Returns 102

If the function has multiple parameters, the parameters should be enclosed in parenthesis.

const addNumber = (a,b) =>  a + b

addNumber(2,3); // Returns 5

If the arrow function is body is having multiple lines of code, the code should be wrapped in braces and for returning data, the return keyword has to be explicitly provided.

const addNumber = a => { 
   const sum = a + 100;
   return sum;
}

addNumber(2); // Returns 102

const addNumber = (a,b) => { 
   const sum = a + b;
   return sum;
}

addNumber(2,3); // Returns 5

And if there is no parameter, the empty parenthesis or underscore should be provided.

const greet = () => console.log('Hi!')

greet(); // Prints 'Hi!' in the console

const greet = _ => console.log('Hi!')

greet(); // Prints 'Hi!' in the console

PS: There are some more types of function in JavaScript like Function constructor, Getter and Setter Function, Generator Function etc. We will continue on them in our next post