The JavaScript spread operator () allows us to spread out elements of an iterable such as an array. The spread operator is represented with three dots (). This is operator is introduced in ES6. The main use cases of the spread operator are to copy array elements, concatenate arrays or objects with rest parameters, etc.
Let’s take an example to expand the elements of an array
let x =["Tutorials","Point"];
console.log(x);// [ 'Tutorials', 'Point' ]
console.log(...x);// Tutorials Point
Spread Operator to Concatenate Arrays
The JavaScript spread operator can be used to concatenate the arrays.
Example
In the below example, we have defined two different arrays. After that, we used the spread operator to concatenate these arrays.
<html><body><div id ="output"></div><script>const nums1 =[10,20,30];const nums2 =[40,50,60];const res =[...nums1,...nums2];
document.getElementById("output").innerHTML = res;</script></body></html>
It will produce the following result −
10,20,30,40,50,60
You can also change the concatenation order of the array.
Spread Operator to Clone an Array
In JavaScript, when we assign one array (object) to another array, it assigns the reference rather than cloning the array. So, whenever you update the original array, it also updates the cloned array. The assignement operator creates a deep copy of the array.
Example: Without Using Spread Operator
In this example, we defined an array named nums1. We defiend another array named nums2 and assigned the array nums1 to array nums2. Here, you can see that when you change nums1, it also updates the nums2.
<html><body><div id ="result1"></div><div id ="result2"></div><script>const nums1 =[10,20,30];const nums2 = nums1;
document.getElementById("result1").innerHTML = nums2;
nums1.push(40);
document.getElementById("result2").innerHTML = nums2;</script></body></html>
It will produce the following result −
10,20,30
10,20,30,40
Example: Using Spread Operator to Clone Arrays
Using the spread operator to clone the array creates an actual copy of the array, and the cloned array doesn’t change when you make changes to the original array. Here, you can see that nums3 doesn’t get updated even if you change the nums1.
<html><body><div id ="result1"></div><div id ="result2"></div><script>const nums1 =[10,20,30];const nums3 =[...nums1];
document.getElementById("result1").innerHTML = nums3;
nums1.push(50);
document.getElementById("result2").innerHTML = nums1 +"<br>";
document.getElementById("result2").innerHTML += nums3;</script></body></html>
It will produce the following result −
10,20,30
10,20,30,50
10,20,30
Spread Operator to Concatenate Objects
You can use the spread operator to copy object properties into another object. Here, consider the ‘car’ object as a parent object containing similar properties to all cars. After that, created the ‘BMW’ object, representing the particular car, and concatenated all properties of the ‘car’ object with the ‘BMW’ object’s property.
<html><body><div id ="result1"></div><div id ="result2"></div><script>const car ={
gears:6,
color:"Black"}
document.getElementById("result1").innerHTML =JSON.stringify(car);constBMW={
model:"X5",
year:2019,...car,}
document.getElementById("result2").innerHTML =JSON.stringify(BMW);</script></body></html>
When you need to pass an unknown number of arguments to the function, you can use the spread operator with the function parameters, called the rest parameter.
Here, you can see that we have passed multiple numbers as a function argument and collected all arguments in the nums[] array using the spread operator except the first argument.
<html><body><div id ="result"></div><script>functionsum(a, ...nums){let sum = a;for(let i =0; i < nums.length; i++){
sum += nums[i];}
document.getElementById("result").innerHTML = sum;}sum(3,6,9,8,6,5,3,3,2,1);</script></body></html>
It will produce the following result −
46
You can also use the spread operator to expand the string into the array of characters, clone the string, or concatenate the string. Also, set, map, etc., are iterable objects in JavaScript. So, you can use the spread operator with them.
The yield operator in JavaScript is used to pause and resume the generator function asynchronously. In JavaScript, generator functions are the special functions that you can pause or resume while executing. The generator functions are defined with the ‘function*’ syntax. The yield keyword can only be used within the generator function that contains it.
The yield operator pauses the execution of generator function and returns its operand (expression) to the generator’s caller.
Syntax
The syntax of the yield operator in JavaScript is as follows −
yield expression;
Paramter
expression − The value to yield from the generator function via the iterator protocol. ‘undefined’ is yielded, if expression is omitted.
Return value
It returns the optional value passed to the generator’s next() method to resume its execution.
Yield Operator in Genrator Function
To understand the yield operator, let’s understand fist the working of the generator function.
When a generator function is called, it returns a generator object. When the next() method this generator object is called it resumes the execution of the generator function. When a yield expression is encountered, it pauses the execution and returns the expression after yield keyword to the object’s caller (the next() method).
The next() method of the generator object returns an iterator object with two properties value and done. The value is the actual value of the expression and the done is a boolean value. The done property is true if the execution of the generator function is completely executed, else it if false.
Below is a complete example code of generator function with yield keyword (operator).
function*test(){// function codeyield expression;}const genObj =test();
genObj.next();
In the above syntax, ‘function*’ is used to create a generator function named test, and the yield keyword is used to return ‘expression’ from the function.
The generator function test is called and assigned the returned generator object to the variable genObj. The next() method resumes the execution of the function and returns iterator object when encounters yield expression.
Let’s execute the below JavaScript code snippet
function*test(){
console.log("I'm before yield expression");yield20;}const genObj =test();
console.log(genObj.next());
Notice when we call next() method, it display the message in the console first and then display the iterator object.
I'm before yield expression
{ value:20, done:false}
Example: Returning a value
In the example below, we have defined the test() generator function. We used the yield operator 3 times in the function to return a number, an array, and a string, respectively.
After that, we used the next() method four times to resume the execution of the function. Whenever the control flow finds the yield operator, it will stop execution and return the value.
In the output, you can observe that it returns the object containing the operand of the yield operator and boolean value.
function*test(){yield20;yield[1,2,3];yield"Hello World";}let res =test();
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
We can also pass a value to the next() method. In the below example, we have passed 30 to the second next() method. It evaluates yield to 30. The variable result is assigned the value of yield which is evaluated as 30.
function*test(){let result =yield20;
console.log("default value paased to next() method "+ result);}let res =test();
console.log(res.next());
console.log(res.next(30));
Output
{ value: 20, done: false }
default value paased to next() method 30
{ value: undefined, done: true }
Example
In the below code, we used the loop, and in each operation, we stop the execution of the function using the yield operator. Afterward, we use the next() method to start the execution of the generator function.
// Generator functionfunction*test(){for(let p =0; p <6; p +=2){yield p;}}let res =test();
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
In real-time development, programmers use the ‘yield’ operator for asynchronous operations, lazy evaluations, task scheduling, iterating through large datasets, creating custom iterators, etc.
The grouping operator in JavaScript controls the precedence of the evaluation in expressions. It is denoted by parenthesis (), and you can put the expression inside that to change the expression evaluation order. It helps to evaluate an expression with lower precedence before an expression with higher precedence.
Syntax
You can follow the syntax below to use the grouping operator
( exp )
In the above syntax, the ‘exp’ is an expression to change the precedence of evaluation.
The multiplication (*) operator in JavaScript has higher precedence than the addition (+) operator. So, when the above code evaluates the first expression, it will multiply 5 and 6 and add the resultant value to 4.
In the second expression, we grouped the (4 + 5) expression using the grouping operator to provide it with higher precedence than the normal operator. So, it adds 4 and 5 first and multiplies the resultant value with 6.
To define an immediately invoked function in JavaScript, we use the grouping operator. The anonymous function definition is put inside the grouping operator. These functions are also called self-executing functions.
(function(){return5;})();
In the above example, the function definition “function () { return 5;}” in put inside the grouping operator.
Example
In the example below, we have defined the self-executing function statement using the grouping operator.
The first expression divides 10 by 5 (returned value from the function) and adds the resultant value, which is 2 to 5.
The second expression adds 5 and 10 first and divides the resultant value with the value returned from the function.
In simple terms, the grouping operator is used to group the sub-expressions to change its evaluation precedence over the normal precedence.
Grouping Operator with Logical Operators
The grouping operator in JavaScript can also be used to group expressions with logical operators. For example, in the following expression, the && operator has a higher precedence than the ||operator. So, the expression will be evaluated as follows:
false&&false||true;// true
However, if we add parentheses around the ||operator, the expression will be evaluated as follows:
false&&(false||true);//false
This is because the grouping operator overrides the normal operator precedence, so that the ||operator is evaluated first.
Example
This example demonstrates that how a grouping operator changes the precedence of OR operator to be evaluated before AND operator. The expression uses the logical operators.
<html><body><div id="output"></div><script>let res1 =false&&false||true// truelet res2 =false&&(false||true)//false
document.getElementById("output").innerHTML ="Result without grouping operator: "+ res1 +"<br>"+"Result with grouping operator: "+ res2;</script></body></html>
It will produce the following result −
Result without grouping operator: true
Result with grouping operator: false
The comma operator (,) in JavaScript evaluates the multiple expression from left to right. You can use the resultant value of the left expression as an input of the right expression. After evaluating all expressions, it returns the resultant value of the rightmost expression.
However, the comma operator is also used in the ‘for’ loop, array, object, etc. In this chapter, you will learn all the use cases of the comma operator.
Syntax
You should follow the below syntax to use the comma expression to evaluate multiple expressions.
var answer =(exp1, exp2, exp3, ex4,...);
Return value
It returns the resultant value of the last expression only.
Examples
Let’s understand the JavaScript comma operator in details with the help of some exmaples
Example: The Comma Operator with Strings
In the example below, we have added the 4 comma seprated strings in the braces. Here, each string works as an expression. The code will evaluate the string and return the last string. In the output, you can see that it prints the ‘CSS’ as it is the rightmost string.
<html><body><p id ="output"></p><script>let output = document.getElementById("output");let ans =("JavaScript","Python","HTML","CSS");
output.innerHTML ="The value of the ans variable is: "+ ans;</script></body></html>
Example: The Comma Operator with Expressions
In the example below, we have defined the variable ‘a’ and initialized it with 5. In the ‘ans’ variable, we store the resultant value the comma operator returns. The first expression updates the value of a to 8, the second expression increments the value of a by 1, and the third expression adds 2 to the updated value of the variable ‘a’.
The value of the ‘ans’ is 11, which is returned by the rightmost expression of the comma operator.
<html><body><p id ="output"></p><script>let output = document.getElementById("output");let a =5;let ans =(a =8, a++, a +=2);
output.innerHTML ="The value of the ans variable is: "+ ans;</script></body></html>
Example: The comma operator with functions
In the example below, we have defined the first() and second() functions. Also, it prints the message and returns the value from the function according to the function name.
We use the comma operator to execute the multiple functions. In the output, you can see that it invokes both functions but prints the returned value from the second() function only.
<html><body><p id="output"></p><script>let output = document.getElementById("output");functionfirst(){
output.innerHTML +="The first function is called! <br/>";return1;}functionsecond(){
output.innerHTML +="The second function is called! <br/>";return2;}let ans =(first(),second());
output.innerHTML +="The value of the ans variable is: "+ ans;</script></body></html>
Other Use Cases of The Comma Operator
For defining the multiple variables in a single row.
let m =1, n =2, x =3;
To initialize the array with multiple elements.
const arr =[10,20,30,40,50,60];
For defining the object with multiple properties.
const obj ={
name:"tutorialspoint",
age:10,... other properties
}
You can use the comma operator for loop to initialize or update multiple variables in each iteration.
for(let p =0, q =1; p < n; p++, q++){// Code for the loop}
To pass multiple parameters of arguments into the functions.
functionfunc(param1, param2, ...){// function code}ORfunc(10,20,30,...);
The JavaScript delete operator deletes/ removes a property from an object. It removes the property as well as value of the property from the object. It works only with the objects not with the variables or functions.
In JavaScript, an array is an object, so you can use the ‘delete’ operator to delete an element from the particular index. However, there are methods like pop(), slice(), or shift() available to delete the element from the array.
Syntax
Follow the below syntax to delete the object property using the ‘delete’ operator.
delete obj.property;ORdelete obj["property"];
Return value − The ‘delete’ operator returns true if the operand (specified property) is deleted successfully, otherwise returns false if the property is not deleted.
If you try to delete a property that doesn’t exist, it will return true but will not affect the object.
Follow the below syntax to delete the array element using the ‘delete’ operator.
delete arr[index];
Deleting Object Properties
The JavaScript delete operator can be used to delete a property of an object. To delete the property we write the delelte operator followed by the property of the object.
delete obj.propertyName;
or
delete obj["propertyNmae"];
In the above syntas, object property named propertyName is being deleted from the object called obj.
Example: Deleting an Object Property
The ‘obj’ object in the example below contains the product, price, and color properties. We used the delete’ operator to delete the price property from the object.
<html><body><div id="output"></div><script>const obj ={
product:"Mobile",
price:20000,
color:"Blue",}delete obj.price;// deleting price
document.getElementById("output").innerHTML ="The Mobile price is "+ obj.price +" and color is "+ obj.color;</script></body></html>
It will produce the following result −
The Mobile price is undefined and color is Blue
Notice that when we access the deleted property, it returns undefined.
Example: Deleting a Nonexistent object Property
Try to delete a property that doesn’t exit. It will return true but doesn’t affect the original object.
The above program will produce the following result −
true
Deleting Array Elements
We can use the delete operator to remove or delete an element from an array. To delete an element, we use delete keyword followed by array element. We can use square brackets ([]) to access the elements from the array.
Example
The below code contains the array of numbers. We used the ‘delete’ operator to delete the element from the 1st index of the array. In the output, you can observe that element from the array gets deleted, but the position of the other elements remains as it is. The array length also remains the same.
<html><body><div id="output"></div><script>const arr =[10,20,30,40,50,60];delete arr[1];// deleting 2nd element from array
document.getElementById("output").innerHTML =
arr +"<br>"+
arr[1];</script></body></html>
It will produce the following result −
10,,30,40,50,60
undefined
Deleting Predefined Object
The JavaScript ‘delete’ operator can delete the predifiend object such as Math, Date, etc. It is not advisable to delete predefined objects. Once deleted, you can’t access the properties of these objects.
Example: Deleting Built-in Math Object
In the example below, we try delete Math object so we get the above error.
<html><body><div id="output"></div><script>var x =10varfun=function(){return20;};
document.getElementById("output").innerHTML ="delete Math.PI :"+delete Math.PI+"<br>"+"delete Math :"+delete Math +"<br>";try{
document.getElementById("output").innerHTML += Math.PI;}catch(e){
document.getElementById("output").innerHTML += e;}</script></body></html>
It will produce the following output −
delete Math.PI :false
delete Math :true
ReferenceError: Math is not defined
Can’t Delete Variables and Functions
The delete operator can’t delete the variables or functions.
JavaScript Safe Assignment Operator (?=) is a suggested new feature for JavaScript that makes it easier to handle errors in code. This operator helps developers deal with errors more simply, without having to use complicated try/catch blocks.
It is denoted by (?=) symbol. It is currently under development and not yet part of the official ECMAScript specification.
Syntax
The syntax for using the Safe Assignment Operator is as follows.
variable ?= value;
Examples
Here are the simple and examples of using safe assignment operator that will help to better understand it:
Using Safe Assignment Operator
This example demonstrates how to use the operator to assign a value only if the variable is currently null or undefined.
// Initial variable set to nulllet username =null;// Using the Safe Assignment Operator// to assign a default value
username ?="Guest";// Alerting the resultalert(username);// This will alert "Guest"
Output
The variable username is set as null. The line username ?= “Guest”; checks if it’s null or undefined and sets it to “Guest”. Finally, alert(username); shows that username is now “Guest”.
Guest
Assign a Calculated Value
This example demonstrates how to use the operator to assign a calculated value only if the variable is currently null or undefined.
// Function to perform a simple calculationfunctioncalculate(value){return value *2;// Simple calculation: double the input}// Initial variable set to nulllet result =null;// Using the Safe Assignment Operator to assign the calculated value
result ?=calculate(5);// Assigns 10 if result is null// Alerting the resultalert(result);// This will alert "10"
Output
The calculate function takes a number and returns its double. The variable result is set as null. The line result ?= calculate(5); checks if result is “null”, and since it is, it calls calculate(5), which returns 10 and assigns it to result. Finally, alert(result); shows that result is now 10.
10
This operator is supported by modern browsers (Chrome 91+, Firefox 89+, Edge 91+, Safari 15+) and Node.js (14.17.0+)
The Nullish Coalescing operator in JavaScript is represented by two question marks (??). It takes two operands and returns the first operand if it is not null or undefined. Otherwise, it returns the second operand. It is a logical operator introduced in ES2020.
In many cases, we can have the null or empty values stored in the variables, which can change the behavior of the code or generate errors. So, we can use the Nullish Coalescing operator to use the default values when a variable contains falsy values.
Syntax
We can follow the syntax below to use the Nullish Coalescing operator.
op1 ?? op2
The nullish coalescing operator (??) returns the second operand (op2) if the first operand (op1) is null or undefined. Otherwise, the ‘res’ variable will contain ‘op2’.
The above syntax is similar to the below code.
let res;if(op1 !=null|| op1 !=undefined){
res = op1;}else{
res = op2;}
Examples
Let’s undersand the nullish coalescing operator in details with the help of some examples.
Example: Handling null or undefined
In the example below, the value of the x is null. We used the x as the first operand and 5 as the second. You can see in the output that the value of y is 5, as x is null. You can assign undefined to the variable.
<html><body><div id ="output"></div><script>let x =null;let y = x ??5;
document.getElementById("output").innerHTML ="The value of y is: "+ y;</script></body></html>
It will produce the following result −
The value of y is: 5
Example: Handling null or undefined in Arrays
In the example below, we have defined an array containing numbers. We used the empty array ([]) as a second operand. So, if arr is null or undefined, we assign an empty array to the arr1 variable.
<html><body><div id ="output"></div><script>const arr =[65,2,56,2,3,12];const arr1 = arr ??[];
document.getElementById("output").innerHTML ="The value of arr1 is: "+ arr1;</script></body></html>
It will produce the following result
The value of arr1 is: 65,2,56,2,3,12
Example: Accessing Object Properties
In the example below, we created the object containing the mobile-related properties. After that, we access the properties of the object and initialize the variables with value. The object doesn’t contain the ‘brand’ property, so the code initializes the ‘brand’ variable with the ‘Apple’, which you can see in the output.
In this way, we can use the Nullish Coalescing operator while accessing the properties of objects having different properties.
<html><body><div id ="output"></div><script>const obj ={
product:"Mobile",
price:20000,
color:"Blue",}let product = obj.product ??"Watch";let brand = obj.brand ??"Apple";
document.getElementById("output").innerHTML ="The product is "+ product +" of the brand "+ brand;</script></body></html>
It will produce the following result
The product is Mobile of the brand Apple
Short-Circuiting
Like Logical AND, and OR operators, the Nullish Coalescing operator doesn’t evaluate the right-hand operand if the left-hand operand is neither null nor undefined.
Using ?? with && or ||
When we use the ?? operator with logical AND or OR operators, we should use the parenthesis to explicitly specify the precedence.
let x =5||7??9;// Syntax Errorlet x =(5||7)??9;// works
Example
In the example below, we have used nullish coalescing operator with OR operator (||) and AND operator (&&).
<html><body><div id ="output"></div><script>let x =(5||7)??9;let y =(5&&7)??9;
document.getElementById("output").innerHTML ="The value of x is : "+ x +"<br>"+"The value of y is : "+ y;</script></body></html>
The above program will produce the following result −
The typeof operator in JavaScript is a unary operator used to get the data type of a particular variable. It is placed before its single operand, which can be of any type. Its returns a string value indicating the data type of its operand. JavaScript contains primitive and non-primitive data types.
There are seven primitive or basic in JavaScript data types number, string, boolean, undefined, null, symbol, and bigint. There is also a composite data type called object. The object data type contains three sub data type Object, Array and Date.
Syntax
Following is the syntax of the typeof operator −
typeof(operand);
We can write the operand without parenthesis as follows −
typeof operand;
Parameter
operand − It can be a value, variable or expression representing the object or primitive. In JavaScript, primitives are data that are not object and have no methods or properties.
Return Value
It returns the string value representing the data type of the operand.
Datatypes Returned by typeof Operator
Here is a list of the return values for the typeof Operator.
Type
String Returned by typeof
Number
“number”
String
“string”
Boolean
“boolean”
Object
“object”
Function
“function”
Undefined
“undefined”
Null
“object”
Symbol
“symbol”
Bigint
“bigint”
There are seven primitive datatypes in JavaScript number, string, boolean, bigint, undefined, null, and symbol. The typeof operator is useful to identify these primitive or basic datatypes.
The typeof operator returns same datatype of the all primitive values except the null. It returns “object” for the null values.
For object, date and array it returns “object” as datatype.
For functions and classes, it returns “function” as datatype.
Let’s use the typeof operator to identify these datatypes one by one.
In JavaScript, number type represents numeric values. JavaScript uses a floating-point representation for all numbers. The JavaScript typeof operator returns ‘number’ for all types of numbers such as integers, floating points, zero, Infinity, NaN etc.
The example below demonstrates how to use the typeof operator to check number data types.
<html><body><p> Using typeof operator to check number data type </p><div id="output"></div><script>
let num = 42;
document.getElementById("output").innerHTML = typeof num;
</script><p>Set the variable to different value and then try...</p></body></html>
Output
Using typeof operator to check number data type
number
Set the variable to different value and then try...
JavaScript typeof Operator to Check String Type
Strings represent sequences of characters. The typeof operator helps identify string variables. The JavaScript typeof operator returns “string” for all type of strings, such as empty string, string of characters, string words, multiline string etc.
In the example below we use typeof operator to check string datatype.
<html><body><div id="output"></div><script>
let str = "Hello World";
document.getElementById("output").innerHTML = typeof str;
</script><p>Set the variable to different value and then try...</p></body></html>
Output
string
Set the variable to different value and then try...
JavaScript typeof Operator to Check Boolean Type
The boolean values represent true or false. The tyepof operand returns boolean for boolean variables.
In the example below, we use typeof operator to check boolean datatype.
<html><body><div id="output"></div><script>
let bool = true;
document.getElementById("output").innerHTML = typeof bool;
</script><p>Set the variable to different value and then try...</p></body></html>
Output
boolean
Set the variable to different value and then try...
JavaScript typeof Operator to Check Symbol Type
Symbols were introduced in ES6 and provide a way to create unique identifiers. Using typeof operator with symbols returns “symbol”.
In the example below, we use typeof operator to check Symbol datatype.
<html><body><div id="output"></div><script>
let sym = Symbol("Hello");
document.getElementById("output").innerHTML = typeof sym;
</script><p>Set the variable to different value and then try...</p></body></html>
Output
symbol
Set the variable to different value and then try...
JavaScript typeof Operator to Check Undefined and Null
The “undefined” type represents a lack of a value. The “null” type represents the absence of any object value. When using typeof operator with an undefined variable, it returns ‘undefined’. Surprisingly, using typeof operator with null also returns “object”, which is a known quirk in JavaScript.
Please note typeof operator will return “undefined” for both undeclared variable and declared but unassigned variables.
Example
In the example below, we use typeof operator to check undefined datatype.
<html><body><div id="output"></div><script>
let x;
document.getElementById("output").innerHTML = typeof x;
</script><p>Set the variable to different value and then try...</p></body></html>
Output
undefined
Set the variable to different value and then try...
JavaScript typeof Operator to Check Object Type
The JavaScript typeof operator returns “object” for all types of object such as JavaScript objects, arrays, dates, regex, etc.
In the example below, we use typeof operator to check object datatype.
<html><body><div id="output"></div><script>
const person = {name: "John", age: 34};
document.getElementById("output").innerHTML = typeof person;
</script><p>Set the variable to different value and then try...</p></body></html>
Output
object
Set the variable to different value and then try...
JavaScript typeof Operator to Check Function Type
Functions are first class citizens in JavaScript. The JavaScript typeof operator returns “function” for all types of functions. Interestingly it returns “function” for classes also.
In the example below, we use typeof operator to check function datatype.
<html><body><div id="output"></div><script>
const myFunc = function(){return "Hello world"};
document.getElementById("output").innerHTML = typeof myFunc;
</script><p>Set the variable to different value and then try...</p></body></html>
Output
function
Set the variable to different value and then try...
JavaScript typeof Operator to Check BigInt Type
The typeof operator returns “bigint” for BigInt numbers. BigInt values are the numeric values that are too big to be represented by the number primitive.
typeof100n;// returns "bigint"
JavaScript typeof Operator in Real-Time Development
For example, the developer gets the data from API. If there is only a single string, API returns the string response, and for multiple strings, API returns the array of strings. In this scenario, developers require to check whether the type of the response is string or array, and if it is an array, they need to traverse each string of the array.
Example
In the example below, we check the type of the response variable and print its value accordingly.
<html><body><script>
const response = ["Hello", "World!", "How", "are", "you?"];
if (typeof response == "string") {
document.write("The response is - ", response);
} else {
document.write("The response values are : ");
// Traversing the array
for (let val of response) {
document.write(val, " ");
}
}
</script></body></html>
Output
The response values are : Hello World! How are you?
JavaScript Arrays and typeof Operator
Arrays, despite being a type of object in JavaScript, have a distinct behavior with the typeof operator.
let numbers =[1,2,3];
typeof numbers;// Output: 'object'
Arrays return “object” when using typeof operator, so for precise array detection, it’s often better to use Array.isArray().
Example
<html><body><div id="output"></div><script>
let numbers = [1, 2, 3];
document.getElementById("output").innerHTML = Array.isArray(numbers);
</script><p>Set the variable to different value and then try...</p></body></html>
Output
true
Set the variable to different value and then try..
The conditional operator in JavaScript first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation. The conditional operator is also known as the ternary operator.
The JavaScript conditional (ternary) operator is only operator that takes three operands a condition followed by a question mark (?), then the first expression to be executed if the condition is truthy followed by a colon (:), and finally the second expression to be executed if the condition is falsy.
There are six falsy values in JavaScript. These are − 0 (zero), false, empty string (” or “”), null, undefined, and NaN. All other values are treated as truthy in JavaScript.
Syntax
Following is the syntax of conditional (ternary) operator in JavaScript −
var variable = condition ? exp1 : exp2;
Parameters
Here, we have explained the parameters in the above statement.
condition − It is a conditional statement.
exp1 − If the conditional statement evaluates truthy, control flow executes the exp1 expression.
exp2 − If the conditional statement evaluates falsy, control flow executes the exp2 expression.
If the value of the condition is any falsy value, the result of the expression will be the value of exp2; otherwise, it will be the value of exp1.
Example
In the example below, we compare the value of the num1 and num2 variables in the conditional statement. Here, the conditional statement evaluates true, so the result variable contains the value of the first expression.
<html><body><div id="output"></div><script>var num1 =90;var num2 =67;var res = num1 > num2 ?"num1 is greater than num2":"num2 is greater than num1";
document.getElementById("output").innerHTML = res;</script></body></html>
It will produce the following result −
num1 is greater than num2
Example
In the example below, we assign the value to the object property according to the conditional statements result.
Now, imagine what if you need to write the if-else statement to assign value to each property conditionally. The code will become complex, but with the ternary operator, you can easily do it with a single line of code.
<html><body><div id="output"></div><script>const year =2004;const obj ={
name:"John",
age: year <2005?"adult":"minor",
city:"New York"};
document.getElementById("output").innerHTML =
obj.name +" is "+ obj.age +" and lives in "+ obj.city;</script></body></html>
It will produce the following result −
John is adult and lives in New York
Example
This example demonstrates that you can also use the expression instead of values. According to the conditional statement, control flow evaluates the first or second expression and assigns the resultant value to the ‘result’ variable.
<html><body><div id="output"></div><script>let operator ='-';let res = operator =='+'?10+20:10-20;
document.getElementById("output").innerHTML ="The result is: "+ res;</script></body></html>
It will produce the following result −
The result is: -10
In short, you can use the ternary or conditional operator to shorten the code, which uses the if-else statement.
Handling null values
We can use the JavaScript conational operator to handle null value to set a default value if the user passes a null value.
The assignment operators in JavaScript are used to assign values to the variables. These are binary operators. An assignment operator takes two operands, assigns a value to the left operand based on the value of right operand. The left operand is always a variable and the right operand may be literal, variable or expression.
let x =10;// right operand is a literallet y = x;// right operand is a variablelet z = x +10;// right operand is an expression
An assignment operator first evaluates the expression and then assign the value to the variable (left operand).
A simple assignment operator is equal (=) operator. In the JavaScript statement “let x = 10;”, the = operator assigns 10 to the variable x.
We can combine a simple assignment operator with other type of operators such as arithmetic, logical, etc. to get compound assignment operators. Some arithmetic assignment operators are +=, -=, *=, /=, etc. The += operator performs addition operation on the operands and assign the result to the left hand operand.
Arithmetic Assignment Operators
In this section, we will cover simple assignment and arithmetic assignment operators. An arithmetic assignment operator performs arithmetic operation and assign the result to a variable. Following is the list of operators with example −
Assignment Operator
Example
Equivalent To
= (Assignment)
a = b
a = b
+= (Addition Assignment)
a += b
a = a + b
-= (Subtraction Assignment)
a -= b
a = a b
*= (Multiplication Assignment)
a *= b
a = a * b
/= (Division Assignment)
a /= b
a = a / b
%= (Remainder Assignment)
a %= b
a = a % b
**= (Exponentiation Assignment)
a **= b
a = a ** b
Simple Assignment (=) Operator
A simple assignment (=) operator assigns a value to a variable. We can assign a single value to multiple variables. This is known as assignment chaining.
<html><body><div id="output"></div><script>let x =5;let y = x +10;
document.getElementById("output").innerHTML ="Value of x : "+ x +"<br>"+"Value of y : "+ y;</script></body></html>
Below is an example of assignment chaining −
<html><body><div id="output"></div><script>let x = y =5;
document.getElementById("output").innerHTML ="Value of x : "+ x +"<br>"+"Value of y : "+ y;</script></body></html>
Addition Assignment (+=) Operator
The JavaScript addition assignment operator performs addition on the two operands and assigns the result to the left operand. Here addition may be numeric addition or string concatenation.
x += b;
In the above statement, it adds values of b and x and assigns the result to x.
Example: Numeric Addition Assignment
<html><body><div id="output"></div><script>let x =5;
x +=7;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
Example: String Concatenation Assignment
<html><body><div id="output"></div><script>let x ="Hello";
x +=" World";
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
Subtraction Assignment (-=) Operator
The subtraction assignment operator in JavaScript subtracts the value of right operand from the left operand and assigns the result to left operand (variable).
let x -=b;
In the above statement, it subtracts b from x and assigns the result to x.
<html><body><div id="output"></div><script>let x =15;
x -=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
Multiplication Assignment (*=) Operator
The multiplication assignment operator in JavaScript multiplies the both operands and assign the result to the left operand.
let x *= b;
In the above statement, it multiplies x and b and assigns the result to x.
<html><body><div id="output"></div><script>let x =10;
x *=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
Division Assignment (/=) Operator
This operator divides left operand by the right operand and assigns the result to left operand.
let x /= b;
In the above statement, it divides x by b and assigns the result (quotient) to x.
<html><body><div id="output"></div><script>let x =10;
x /=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
Remainder Assignment (%=) Operator
The JavaScript remainder assignment operator performs the remainder operation on the operands and assigns the result to left operand.
let x %= b;
In the above statement, it divides x by b and assigns the result (remainder) to x.
<html><body><div id="output"></div><script>let x =12;
x %=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
Exponentiation Assignment (**=) Operator
This operator performs exponentiation operation on the operands and assigns the result to left operand.
let x **= b;
In the above statement, it computes x**b and assigns the result to x.
<html><body><div id="output"></div><script>let x =5;
x **=3;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
JavaScript Bitwise Assignment operators
A bitwise assignment operator performs bitwise operation on the operands and assign the result to a variable. These operations perform two operations, first a bitwise operation and second the simple assignment operation. Bitwise operation is done on bit-level. A bitwise operator treats both operands as 32-bit signed integers and perform the operation on corresponding bits of the operands. The simple assignment operator assigns result is to the variable (left operand).
Following is the list of operators with example −
Assignment Operator
Example
Equivalent To
&= (Bitwise AND Assignment)
a &= b
a = a & b
|= (Bitwise OR Assignment)
a |= b
a = a | b
^= (Bitwise XOR Assignment)
a ^= b
a = a ^ b
Bitwise AND Assignment Operator
The JavaScript bitwise AND assignment (&=) operator performs bitwise AND operation on the operands and assigns the result to the left operand (variable).
let x &= b;
In the above statement, it performs bitwise AND on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x &=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
Bitwise OR Assignment Operator
The JavaScript bitwise OR assignment (|=) operator performs bitwise OR operation on the operands and assigns the result to the left operand (variable).
let x |= b;
In the above statement, it performs bitwise OR on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x |=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
Bitwise XOR Assignment Operator
The JavaScript bitwise XOR assignment (^=) operator performs bitwise XOR operation on the operands and assigns the result to the left operand (variable).
let x ^= b;
In the above statement, it performs bitwise XOR on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x ^=5;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
JavaScript Shift Assignment Operators
A shift assignment operator performs bitwise shift operation on the operands and assign the result to a variable (left operand). These are a combinations two operators, the first bitwise shift operator and second the simple assignment operator.
Following is the list of the shift assignment operators with example −
Assignment Operator
Example
Equivalent To
<<= (Left Shift Assignment)
a <<= b
a = a << b
>>= (Right Shift Assignment)
a >>= b
a = a >> b
>>>= (Unsigned Right Shift Assignment)
a >>>= b
a = a >>> b
Left Shift Assignment Operator
The JavaScript left shift assignment (<<=) operator performs left shift operation on the operands and assigns the result to the left operand (variable).
let x <<= b;
In the above statement, it performs left shift on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x <<=2;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
Right Shift Assignment Operator
The JavaScript right shift assignment (>>=) operator performs right shift operation on the operands and assigns the result to the left operand (variable).
let x >>= b;
In the above statement, it performs right shift on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x >>=1;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
Unsigned Right Shift Assignment Operator
The JavaScript unsigned right shift assignment (>>>=) operator performs unsigned right shift operation on the operands and assigns the result to the left operand (variable).
let x >>>= b;
In the above statement, it performs unsigned right shift on x and b and assigns the result to the variable x.
<html><body><div id="output"></div><script>let x =7;
x >>>=2;
document.getElementById("output").innerHTML ="Value of x : "+ x;</script></body></html>
JavaScript Logical Assignment operators
In JavaScript, a logical assignment operator performs a logical operation on the operands and assign the result to a variable (left operand). Each logical assignment operator is a combinations two operators, the first logical operator and second the simple assignment operator.
Following is the list of the logical assignment operators with example −
Assignment Operator
Example
Equivalent To
&&= (Logical AND Assignment)
a &&= b
a = a && b
||= (Logical OR Assignment)
a ||= b
a = a || b
??= (Nullish Coalescing Assignment)
a ??= b
a = a ?? b
Example
<html><body><div id="output"></div><script>var a =5;var b =10;var result =(a &&= b);
document.getElementById("output").innerHTML ="Value of (a &&= b) => "+ result +"<br/>";
result =(a ||= b);
document.getElementById("output").innerHTML +="Value of (a ||= b) => "+ result;</script></body></html>