JavaScript Expressions

JavaScript Expressions

In this article, we are going to check out what are expressions and Operators in JavaScript.

Let’s consider one simple example, If I am writing this article, I am expressing my knowledge to generate output as a written article. This could help other people to gain more knowledge.

In this example writing an article is an expression that produces some output(optional).

An Expression is a phrase of JavaScript that can be evaluated to produce value.

1. Primary Expression

Primary expressions are those that stand alone and don’t need anything else to represent themselves.
Primary Expressions in JavaScript are constant or literals, certain language keywords, and variable references

1.23    // Number literal
“Hello Everyone!!!!”    // String literal
// Reserved keyword literals
true 
false
null
this

2. Objects and Array Initializers

Object and Array Initializers are the expressions that produce value as a newly created object or array.
These are not primary expressions, because they include multiple subexpressions that specify property and element values.
An array initializer is a comma-separated list of expressions(which may or may not evaluate to a single value) combined within square brackets. The value returned by the array initializer will be a new Array.
The undefined element can be included in the array literal by simply omitting a value between commas.

let arr = [‘a’,,,,,,,‘k’];

Object initializer expressions are the same as array initializer expressions, but the square brackets are replaced by curly brackets and each subexpression is prefixed with a property name and colon.

[]    // Empty array with no expression to represent elements.
[‘a’ + ‘b’, 2 + 4]    // Array with 2 expressions => [‘ab’, 6]

let obj1 = {a: 1, b: 2};    // Object with 2 properties
let obj2 = {};        // Empty object
obj2.x = 1.0;
obj2.y = 2.0;

3. Function Definition Expression

Function definition expression defines the JavaScript function. The value of this expression is a newly defined function.

This expression consists of the keyword function followed by a comma-separated list of zero or more identifiers enclosed within parentheses(the parameter names) and a block of JavaScript code (function body) in curly braces.

// This function checks if the number is even or odd
let isEven = function(num) {
    return num % 2 === 0;
}

4. Property Access Expression

A property access expression evaluates the value of an object property or an array element.

expression . identifier
expression [ expression ]

In the first statement property access is an expression followed by a period and identifier. The expression specifies the object and the identifier specifies the name of the desired property.

In the second statement, property access follows the first expression with another expression in square brackets. The first expression is an array or object and the second expression specifies the name of the desired property or the index of the desired array element.

let obj = {a: 10, b: 20, c: {x: 0, y: 1}};
let arr = [1, 2, obj, 4];
obj.a;
obj.c.x;
arr[0];
arr[2].b;

The expression before. or [ is first evaluated. If the value is null or undefined then the expression throws TypeError.

4.1 Conditional Property Access

ES2020 adds two new kinds of property access expressions:

expression ?. identifier 
Expression ?.[ identifier ]

In JavaScript, the values null and undefined are the only two values that do not have properties. If we try to access the property of these values with regular property access expression then we get TypeError. We can use ?. or ?.[] Syntax to guard against error.

Consider expression a?.b. If a is null or undefined then the expression evaluates to undefined without any attempt to access property b.

This is one of the newest features of JavaScript. As of early 2020, this new syntax is supported in the current versions of major browsers.

5. Invocation Expression

An invocation expression is the javascript syntax that is used to execute the javascript function or method.

foo(0)
Math.min(20, 2, 1)
str.split(',')

If the function uses the return keyword to return any value, then that value becomes the value of an expression. Or else the value of the expression will be undefined. Syntax of the invocation expression uses a pair of parentheses and an expression before the open parentheses. And if an expression is a property access expression, then invocation is known as a method invocation.

5.1 Conditional Invocation

ES2020 allows us to check if a function is a valid function before calling that function. To do so we need to use conditional invocation syntax ( ?.() )

foo?.(arg1, arg2, ...);

If foo is not defined in the above example, then JavaScript will not execute the function and there will not be any TypeError thrown.

6. Object creation expression

Object creation expression is used to create a new object and invoke a constructor, to initialize the properties of that object. To invoke this type of expression we need to use the new keyword.

new Object()
new Point(2, 3)

If there is no argument to be passed to the expression we can omit the empty pair of parentheses.

new Object
new Date

7. Arithmetic expression

Arithmetic expressions are the expressions that are used to evaluate any mathematical equation. There are many Arithmetic operators that can be used to generate Arithmetic expressions, I will cover those in the next article.

1 + 1
2 * 2
4 / 2
4**5

8. Relational expression

Relational expressions are used to check the relationship (such as “equal”, “less than”, “not equal”, or “greater than or equal”) between two values. Once the checking is done this expression returns true or false depending on whether that relationship exists. The relational expression always evaluates to a boolean value, and that value is often used to control the flow of program execution in if, while, and for statement

I hope you liked this article. In the next article of this series, I will be covering Javascript Expressions.

Hope you like it, If yes **like & share.**

Thanks for your time.

Happy coding….

← JavaScript Strings JavaScript Operators