Expressions in programming are used to combine and interpret new values after compiling and you end up getting new values on the go. They along with statements are fundamental for any software code be that a code snippet or or a thousand lines of code. We have explained statements and expressions in JavaScript with code examples in this tutorial.
They both are different and can be differentiated but while at the beginning they become quite ambiguous unless you have raw code examples of each. On the other hand, expressions and statements, like I said earlier, are the fundamental to your codebase you need to master them.
What are Expressions in JavaScript?
The expressions in JavaScript are code-parts that return new vales after evaluation. The best relatable example is 2+5 = 7, here ‘7’ is the expression. In JavaScript they are more like that. So the new value that we get is an expression.
What are JavaScript Statements?
The JavaScript statements are line/lines of code that evoke actions. See this code example for instance:
// first example
let name = "John" + "Smith";
console.log(name);
// second example
let age = 12 + 4;
console.log(age);
// third example
function myFunction(a, b) {
if (a == "Brad" && b == "Angelina") {
console.log("Welcome, Brangelina's Home!");
} else {
console.log("Identification failed.");
}
}
myFunction("Jose", "Butler");In this code snippet we are going to address declaration, expression and statement distinctively. We know that all three combine make important parts of a script in any code piece. It’s easy to spot a declaration which is bit trying for the other two.
// first example
let name = "John" + "Smith";
// this is declaration of variable name (we declared what the variable name is)
console.log(name);
// second example
let age = 12 + 4;
// we declared what the variable age is
console.log(age);
// third example
function myFunction(a, b) {
// here we declare a function with two parameters
if (a == "Brad" && b == "Angelina") {
console.log("Welcome, Brangelina's Home!");
} else {
console.log("Identification failed.");
}
}
myFunction("Jose", "Butler");
Can you see the expression where the value is returned?
// first example
let name = "John" + "Smith";
// The above declaration also has variable name and string concentration expression
console.log(name);
// second example
let age = 12 + 4;
// you can see we declared a variable age with integer added expression
console.log(age);
// third example
function myFunction(a, b) {
// you can see there are two parameters added to the function here a typical function definiton expression
if (a == "Brad" && b == "Angelina") {
// a logical expression is driven with the values of a and b
console.log("Welcome, Brangelina's Home!");
} else {
console.log("Identification failed.");
}
}
myFunction("Jose", "Butler");
// we have made a function call but it's an expressionNow let’s define all these examples. The first one is a string expression, second example has an arithematic expression, while the third onr s function definition expression and the fourth a logical expression and the last one is used to make a function call.
The next we have to see which ones are statement.
// first example
let name = "John" + "Smith";
console.log(name); // statement
// second example
let age = 12 + 4;
console.log(age); // statement
// third example
function myFunction(a, b) {
// this entire if else block is a statement
if (a == "Brad" && b == "Angelina") {
console.log("Welcome, Brangelina's Home!");
} else {
console.log("Identification failed.");
}
}
myFunction("Jose", "Butler");In the code we need to look for the semi colons in JavaScript to spot statements. Well does not it make all our examples statements, then? Yes they are, all those lines of codes which have declaration + expression are statements.
// first example
let name = "John" + "Smith";
// this line of code states that variable name's value is "John" + "Smith"
console.log(name); // statement
// second example
let age = 12 + 4; // this code states that variable age's value is 12+4
console.log(age); // statement
// third example
function myFunction(a, b) {
// this entire if else block is a statement
if (a == "Brad" && b == "Angelina") {
console.log("Welcome, Brangelina's Home!");
} else {
console.log("Identification failed.");
}
}
myFunction("Jose", "Butler");
// this is also a statement that has function call expressionYou’d know that js statements can also contain expressions this one is an expression statement. While the same cannot be said for expressions or the condition cannot be same for expressions and also we cannot add an statement where just an expression is required. In the same way, an If statement cannot become a arguement of a function:
myFunction (“Jose”, if (true){return “Butler”} ); // unexpected token error
We have shown below how easily you can identify declaration, statement or an expression, you should develop it as your habit to practice this thing. It can entirely change your code experienece.
Arithmetic Expressions
Expressions which are evaluating a number. See the example:
9 / 3;
i++;
i -= 1;
i * 8;
String Expressions
Expressions which are evaluating a string:
“Johny ” + “Bairstow”;
name += “Cricketer”; // equal to name = name + “Cricketer”;
Primary Expressions
Expressions which are evaluating a variable reference, literal value:
10 // integer value
‘this is a string’ // here it’s string value
true // boolean value
this // the current object
undefined // undefined value
name // variable reference
// we can also add keywords to add expressions
function
class
function* //is a function generator
yield //the generator pauser/resumer
yield* //when we delegate to another generator or iterator
async function* //async function expression
await //async function pause/resume/wait for completion
/pattern/i //regex
() // grouping
Array and Object Expressions
So when we are discussing array and object expressions we need to know that here these expressions and return array or object data type:
[]
{}
[1,2,3]
{a: “Software”, b: “Hardware”}
Logical Expressions
These expressions return boolean data type
a && b;
a || !b;
!a;
Logical Expressions
These expressions return boolean data type
a && b;
a || !b;
!a;
Object Creation Expressions
The following expressions return an object:
new object();
new myObject(1);
new mySecondObject(‘name’, 2, {a: 4});
Object Property Expressions
These expressions return an object property:
object.property; //reference object property
object[property];
object[“property”];
Function Definition Expressions
These expressions return a function:
function() {}
function(a, b) { return a * b }
(a, b) => a + b
a => a / 2
That’s all for Statements and expressions in JavaScript.
