JavaScript Basics: Variables, Functions, and Loops

Introduction:

JavaScript is one of the most popular programming languages that is used in the server-side and browser side of the application. With the help of JavaScript, you can easily create dynamic and interactive websites. This language is a cross-platform, lightweight and single-threaded application. This helps to run the node.js on the server side. It supports many frameworks and libraries, such as React.js, Angular Vue.js, etc. JavaScript helps experienced developers to make up the large projects.

Now, if you are beginning to learn JavaScript from basic to advanced, this is an important concept and mandatory for beginner levels of programmers. These concepts are the building blocks of the JavaScript programming language.

Variables in JavaScript:

Variables in JavaScript are also used to collect the value of a variable. It's also used to update the value of the variable. JavaScript variables are declared using the var, let or const.

Before the ES6(ECMAScript 6) version, var was used to store the data. After this version introduced two variables, such as let and const, in 2015.

Var:

This is a function scope and global-scope variable. If you are declaring the variable with the var keyword, you can use it to update its value and also re-declare the value. It is an older way to define a variable.

Example

Code:

var x = 15;

console.log(x);

var x = 50; //re-declare value

console.log(x)

Output:

let:

It is also called a Modern way to declare a variable. This variable is used to block scope variables. If you are saying the variable with the let keyword, you can use it to update its value. This keyword was introduced in the ES6 version.

Example

Code:

let name = “XYZ”;

name=”JavaTpoint”;

console.log(name);

Output:

JavaTpoint

Const:

This keyword was introduced in the ES6 version. If you are declaring the variable with the const keyword, you cannot use it to update its value. It has a blocked-scope variable.

Example

Code:

const grade='A'

grade='B'

Error: cannot update the value

const a = 10;

const b=20;

const sum = a+b;

Output:

Functions in JavaScript:

In JavaScript, it is a set of operations to perform a particular task easily. It allows you to manage, reuse and organize your code. Function only can run when it is called. This is used to provide code reusability. It means writing once and reusing it many times. If you are using the function, you can pass the parameters in a function.

Syntax:

function function_Name (list of all parameters) {

// function body

return result;

}

Example

Code:

function mul(a, b) {

return a * b;

}

console.log(mul(10, 3));

Output:

Function definition:

In JavaScript, a function definition is also referred to as a function declaration. It is a way to declare function and function body. The body of the function is stored within the curly braces {}.

Syntax:

function functionName(parameters) {

// code to be executed

}

Example

Code:

// Function Declaration

function add(a1, a2) {

let sum = a1 + a2;

console.log("The sum of two numbers is: " + sum);

}

add(5, 7);

Output:

The sum of two numbers is: 12

Function expression:

In JavaScript, function expression is a way to define a function by assigning it to a variable. It is used for event handling, callbacks and closures.

Syntax:

const variable_Name = function(parameters) {

// function body

};

Example

Code:

// Addition using Function Expression

const add = function(a, b) {

console.log("Addition: " + (a + b));

};

// Subtraction using Function Expression

const subtract = function(a, b) {

console.log("Subtraction: " + (a - b));

};

// Multiplication using Function Expression

const multiply = function(a, b) {

console.log("Multiplication: " + (a * b));

};

// Division using Function Expression

const divide = function(a, b) {

if (b !== 0) {

console.log("Division: " + (a / b));

} else {

console.log("Cannot divide by zero");

}

};

// Calling all functions

add(10, 5);

subtract(10, 5);

multiply(10, 5);

divide(10, 5);

Output:

Addition: 15

Subtraction: 5

Multiplication: 50

Division: 2

Arrow Function:

The arrow function is a short way to declare a function and was introduced in ES6(ECMAScript 6) in 2015. It allows you to perform more readable and concise code.

Syntax:

const function_Name = (parameters) => {

// function body

};

Example

Code:

const multiply = (x, y) => x * y;

console.log(multiply(4, 5));

Output:

Loops in JavaScript:

In JavaScript, Loops are useful ways to reduce code duplication and perform tasks and easy to manage. It is a block of code that's executed when the condition is true. Loops in JavaScript are too important and can be divided into many parts, such as for loop, while loop, do-while loop, and others.

Example (Without the use of loops)

Code:

console.log("Hello Tpoint Tech");

Output:

Hello Tpoint Tech

Why use loops?

Loops are an important part because if you want to print any statement multiple times, then you write the statement multiple times and then print, but with the help of loops, you can print the statement easily. Picture this: Your boss wants you to print numbers from 1 to 100. Are you going to copy-paste console.log ("1") a hundred breaking times? No, you'll lose your mind before you hit twenty.

Example

Code:

for (let i = 0; i < 5; i++) {

console.log ("Hello Tpoint Tech");

}

Output:

Hello Tpoint Tech

JavaScript supports many types of loops, such as for loop, while loop and do-while loop, as detailed below:

For loop:

For loop is also called an entry-controlled loop. It allows a block of code to be executed based on the given condition. It contains three parts such as initialization, condition and updation.

Syntax:

for (initialization; condition; updation) {

// Write your code here

}

Initialization:

Before the loop starts, this variable is executed. This works when you declare and initialize a loop counter variable.

Condition:

It is evaluated before each iteration. If the condition is true, the loop body is executed, but if the condition is false, the loop automatically terminates

Updation:

This variable is used to update the condition and executed after each iteration.

Example

Code:

let sum = 0;

for (let i = 1; i <= 20; i++) {

if (i % 2 == 0) {

console.log("Even number from 1 to 20: " + i);

sum += i;

}

console.log("The sum of even numbers from 1 to 20 is: " + sum);

Output:

Even number: 2

Even number: 4

Even number: 6

Even number: 8

Even number: 10

Even number: 12

Even number: 14

Even number: 16

Even number: 18

Even number: 20

The sum of even numbers from 1 to 20 is: 110

While loop:

This is also called the entry-controlled loop. This works as you first initialize your variable and then update the condition. If you do not know the number of iterations, you can use this loop.

Syntax:

while (condition) {

// Code to be executed repeatedly

}

Example

Code:

let i = 1;

while (i <= 10) {

console.log("Number is: " + i);

i++;

}

Output:

Number is: 1

Number is: 2

Number is: 3

Number is: 4

Number is: 5

Number is: 6

Number is: 7

Number is: 8

Number is: 9

Number is: 10

do while Loop:

This loop is also called an exit-controlled loop. It executes a block of code at least when a given condition remains true. This loop is an extension of the while loop.

Syntax:

do {

// Write your code here to be executed

}

while (condition);

Example

Code:

let count = 1;

do {

console.log("Hello Tpoint Tech");

count++;

} while (count <= 5);

Output:

Hello Tpoint Tech

For…of loop:

This loop is a modern way of iteration, which was introduced in ES6(ECMAScript 6) version 2015. It works for objects such as arrays, maps, strings, etc. This loop is used to access the value of elements directly.

Syntax:

for (variable_name of iterable) {

// Write your code here to be executed

}

Example

Code:

let user = {

name:"Tpoint Tech",

id:"123",

Address:"Noida"

}

for (let t of Object.keys(user)) {

console.log(`${t}: ${user[t]} `)

}

Output:

Tpoint Tech

123

Noida

for…in loop:

This loop works as key-value pairs. It is managed to iterate over the properties of an object.

Syntax:

for (key in Object) {

// Write your code here to be executed

}

Example

Code:

const salaries = {

Alice: 12000,

John: 25000,

Bob: 65000

};

for (let sal in salaries) {

let salary = "$" + salaries[sal];

console.log(`${sal}: ${salary}`);

};

Output:

Alice: $12000

John: $25000

Bob: $65000

Nested loops (Loops in Loops):

Nested loops contain one loop inside another loop, such as an inner loop and an outer loop. The inner loop is completely executed for each iteration of the outer loop. This can be done in two levels or three levels, which means that it is used for multi-dimensional data like pattern printing and matrices.

Syntax:

for (initialization; condition; updation) {

for (initialization; condition; updation) {

// statement of inside loop

}

// statement of outer loop

}

Example

Code:

let n = 5;

for (let i = 1; i <= n; i++) {

let p = "";

for (let j = 1; j <= n-i ; j++) {

p += "* ";

}

console.log(p);

}

Output:

* * * *

* * *

* *

Conclusion:

In the article "JavaScript Basics: Variables, Functions, and Loops", JavaScript is one of the most popular programming languages that is used in browser-side and server-side applications. If you master these three concepts, you can easily create large projects. Variable in JavaScript is used for storing the data, and it allows you to collect the information within a program. Knowing how to define the variables using var, let, and const. functions helps to reduce code redundancy and allows for to execution of particular tasks. Loops are very important because they let you execute a code block repeatedly based on some conditions. Loops help decrease duplicate code, improve performance, and give flexibility depending on how they operate.

I suggest you learn JavaScript programming from the Tpoint tech website, as it provides JavaScript Tutorials, interview questions and all its related topics of the JavaScript programming language.