JavaScript Statements

Previous Next

JavaScript Programs

1. Hello World Program

// Program to display "Hello, World!" in the console
console.log("Hello, World!");

Explanation:

This program uses console.log() to output the string "Hello, World!" to the console.
console.log() is a method in JavaScript used for logging messages or data to the browser's console.

2. Variables and Data Types

// Program to demonstrate variables and data types
let name = "John"; // String variable
let age = 30; // Number variable
let isStudent = true; // Boolean variable

console.log("Name:", name);
console.log("Age:", age);
console.log("Is Student:", isStudent);

Explanation:

This program declares variables of different data types: string (name), number (age), and boolean (isStudent).
It assigns values to these variables and then logs their values to the console using console.log().

3. Arithmetic Operations

// Program to perform arithmetic operations
let num1 = 10;
let num2 = 5;

let sum = num1 + num2;
let difference = num1 - num2;
let product = num1 * num2;
let quotient = num1 / num2;

console.log("Sum:", sum);
console.log("Difference:", difference);
console.log("Product:", product);
console.log("Quotient:", quotient);

Explanation:

This program performs basic arithmetic operations (addition, subtraction, multiplication, division) on two numbers (num1 and num2).
It calculates the sum, difference, product, and quotient of these numbers and logs the results to the console.

4. Conditional Statements (If-Else)

// Program to demonstrate if-else statement
let marks = 85;

if (marks >= 90) {
console.log("Grade: A+");
} else if (marks >= 80) {
console.log("Grade: A");
} else if (marks >= 70) {
console.log("Grade: B");
} else if (marks >= 60) {
console.log("Grade: C");
} else {
console.log("Grade: Fail");
}

Explanation:

This program uses an if-else statement to determine the grade based on the value of marks.
Depending on the value of marks, it outputs the corresponding grade using console.log().

5. Looping (For Loop)

// Program to display numbers from 1 to 5 using a for loop
for (let i = 1; i <= 5; i++) {
console.log(i);
}

Explanation:

This program uses a for loop to display numbers from 1 to 5.
The loop initializes a variable i to 1, increments i by 1 in each iteration, and continues as long as i is less than or equal to 5.
It logs the value of i in each iteration, resulting in numbers 1, 2, 3, 4, and 5 being displayed.

6. Functions

// Program to define and call a function
function greet(name) {
return "Hello, " + name + "!";
}

let message = greet("Alice");
console.log(message);

Explanation:

This program defines a function greet that takes a parameter name and returns a greeting message.
It calls the greet function with the argument "Alice" and stores the returned message in the variable message.
Finally, it logs the message to the console.

7. Arrays

// Program to demonstrate arrays
let fruits = ["Apple", "Banana", "Orange"];

console.log("First Fruit:", fruits[0]);
console.log("Total Fruits:", fruits.length);

fruits.push("Mango");
console.log("Updated Fruits:", fruits);

Explanation:

This program creates an array fruits containing three elements: "Apple", "Banana", and "Orange".
It accesses the first element of the array using fruits[0] and logs its value.
It also logs the total number of elements in the array using fruits.length.
The program then adds a new element ("Mango") to the array using the push() method and logs the updated array.

8. Objects

// Program to demonstrate objects
let person = {
name: "John",
age: 30,
isStudent: true
};

console.log("Name:", person.name);
console.log("Age:", person["age"]);
console.log("Is Student:", person.isStudent);

Explanation:

This program defines an object person with properties such as name, age, and isStudent.
It accesses these properties using dot notation (person.name and person.isStudent) as well as bracket notation (person["age"]) and logs their values.

9. String Manipulation

// Program to manipulate strings
let message = "Hello, World!";

console.log("Length:", message.length);
console.log("Uppercase:", message.toUpperCase());
console.log("Substring:", message.substring(7, 12));
console.log("Split:", message.split(","));

Explanation:

This program manipulates a string variable message.
It calculates the length of the string using message.length.
It converts the string to uppercase using message.toUpperCase().
It extracts a substring from the string using message.substring(7, 12) (from index 7 to 11).
It splits the string into an array using message.split(",") based on the comma delimiter.

10. Error Handling (Try-Catch)

// Program to demonstrate try-catch for error handling
try {
let x = 10 / 0; // Division by zero (causes an error)
console.log("Result:", x);
} catch (error) {
console.log("Error:", error.message);
}

Explanation:

This program demonstrates error handling using a try-catch block.
Inside the try block, it attempts to perform a division by zero operation (10 / 0), which causes an error.
The catch block catches the error and logs the error message using error.message.
These JavaScript programs cover a range of fundamental concepts such as variables, data types, conditional statements, loops, functions, arrays, objects, string manipulation, and error handling. Each program includes code snippets with explanations to help you understand how to write and execute JavaScript code.

Practice Excercise Practice now

JavaScript Statements

1. Variable Declaration and Assignment Statements

Variable declaration statements are used to create variables, while assignment statements are used to assign values to variables.

Example:

// Variable Declaration
let name;

// Assignment Statement
name = "John";

2. Expression Statements

Expression statements are used to perform an action or calculation and can include variables, operators, and values.

Example:

let result = 5 * (10 + 3);
console.log(result); // Outputs: 65

3. Conditional Statements (if, else if, else)

Conditional statements allow you to execute different code based on specified conditions.

Example:

let age = 25;

if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}

4. Switch Statement

The switch statement allows you to choose one of many blocks of code to be executed.

Example:

let day = 3;
let dayName;

switch (day) {
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
// More cases...
default:
dayName = "Unknown";
}
console.log(dayName); // Outputs: Tuesday

5. Looping Statements (for, while, do-while)

Looping statements are used to repeat a block of code until a specified condition is met.

For Loop

for (let i = 0; i < 5; i++) {
console.log(i);
}
// Outputs: 0, 1, 2, 3, 4

While Loop

let count = 0;
while (count < 3) {
console.log(count);
count++;
}
// Outputs: 0, 1, 2

Do-While Loop

let num = 1;
do {
console.log(num);
num++;
} while (num <= 3);
// Outputs: 1, 2, 3

6. Break and Continue Statements

The break statement terminates the current loop, while the continue statement skips the current iteration and proceeds to the next one.

Example:

for (let i = 0; i < 5; i++) {
if (i === 3) {
break; // Exits the loop when i equals 3
}
console.log(i);
}
// Outputs: 0, 1, 2

for (let i = 0; i < 5; i++) {
if (i === 2) {
continue; // Skips iteration when i equals 2
}
console.log(i);
}
// Outputs: 0, 1, 3, 4

7. Function Declaration and Invocation Statements

Function declaration statements define reusable blocks of code, while function invocation statements execute those functions.

Example:

function greet(name) {
console.log(`Hello, ${name}!`);
}

greet("Alice"); // Outputs: Hello, Alice!

8. Try-Catch Statement

The try-catch statement is used for error handling to execute code and handle potential errors.

Example:

try {
// Code that may throw an error
let result = 10 / 0;
console.log(result);
} catch (error) {
console.log("An error occurred:", error.message);
}
// Outputs: An error occurred: Division by zero

9. Return Statement

The return statement is used inside functions to return a value and exit the function.

Example:

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

let sum = add(5, 3);
console.log(sum); // Outputs: 8

Practice Excercise Practice now

JavaScript White Space

White space in JavaScript refers to any space character, tab character, or line break in your code. While white space doesn't affect the functionality of JavaScript code directly, it plays a crucial role in code readability, organization, and maintenance. In this explanation, we'll delve into the significance of white space in JavaScript, its impact on code structure, best practices, and provide examples to illustrate its usage.

Importance of White Space:

Readability: White space helps in making your code more readable by adding visual separation between different parts of the code. It improves the code's clarity, making it easier for developers to understand and maintain.

Organization: Properly using white space can organize code blocks, statements, and elements in a structured manner. It enhances the overall layout of your codebase, contributing to better code organization and management.

Debugging: White space can aid in debugging code by making it easier to identify syntax errors, misplaced elements, or missing characters. It helps in visually distinguishing different code segments.

Documentation: White space can be strategically used to create space for comments and documentation within your code. Comments are essential for explaining the code's purpose, functionality, and usage, and white space provides room for clear and concise documentation.

Types of White Space:

Space Character ( ): The space character is the most common type of white space used in JavaScript. It is used for creating space between words, operators, and identifiers in code.

Tab Character (\t): Tabs are often used for indentation purposes in JavaScript code. Indentation improves code readability and helps in visually organizing code blocks, loops, conditionals, etc.

Line Breaks (\n, \r, \r\n): Line breaks are used to separate lines of code. They are crucial for defining the structure of code blocks, functions, and logical segments within your

JavaScript code.

Examples of White Space Usage:
Indentation:

function calculateTotal(price, quantity) {
let total = price * quantity;
return total;
}

In this example, indentation using tabs or spaces helps in visually representing the structure of the calculateTotal function. It improves readability and highlights the function's code block.

Space for Readability:

let fullName = firstName + ' ' + lastName;

Adding spaces around operators (+ in this case) enhances code readability by clearly separating different elements.

Line Breaks:

let message = 'Hello,';
message += '\nWelcome to JavaScript!';
console.log(message);

Line breaks (\n in this case) are used to create multiline strings, which are helpful for formatting output or messages.

Comments and Documentation:

// This function calculates the area of a rectangle
function calculateArea(length, width) {
return length * width;
}

White space is used to create room for comments, providing valuable insights into the code's purpose and functionality.

Best Practices for Using White Space:

Consistency: Maintain consistency in white space usage throughout your codebase. Use the same indentation style, spacing around operators, and line break conventions.
Use Indentation: Always use indentation (tabs or spaces) to visually represent code blocks, loops, conditionals, and function bodies. This improves code readability significantly.
Avoid Excessive White Space: While white space is beneficial, avoid excessive usage that might clutter the code unnecessarily. Use white space judiciously to enhance readability without overdoing it.
Whitespace in Strings: Be cautious with white space within strings, as extra spaces or line breaks can affect string comparisons and formatting.
Consider Code Minification: In production environments, consider code minification techniques to remove unnecessary white space, comments, and reduce file size for optimized performance.

Practice Excercise Practice now

JavaScript Line Length And Line Breaks

1. Line Length in JavaScript:

The line length in JavaScript, like in most programming languages, is a matter of convention and readability. While JavaScript doesn't impose a strict limit on line length, adhering to certain guidelines can improve code readability and maintainability.
Recommended Line Length: Generally, a maximum line length of around 80-120 characters is recommended. This guideline promotes readability by reducing the need for horizontal scrolling and allows for easier code review.
Breaking Long Lines: When a line exceeds the recommended length, it's advisable to break it into multiple lines for better readability. JavaScript provides several techniques to achieve this without affecting code functionality.

2. Techniques for Line Breaks:

Here are some common techniques to break long lines in JavaScript:

Concatenation Operator (+):

let longString = 'This is a long string that exceeds the recommended line length ' +
'and needs to be broken into multiple lines for readability.';
Template Literals (Template Strings):

let longString = `This is a long string that exceeds the recommended line length
and needs to be broken into multiple lines for readability.`;
Array Join Method:

let longString = [
'This is a long string that exceeds the recommended line length',
'and needs to be broken into multiple lines for readability.'
].join(' ');
String Concatenation with Line Breaks:

let longString = 'This is a long string that exceeds the recommended line length\n' +
'and needs to be broken into multiple lines for readability.';
String Concatenation with Backticks (ES6):

let longString = `This is a long string that exceeds the recommended line length
and needs to be broken into multiple lines for readability.`;

3. Example Scenarios:

Let's explore some real-world scenarios where line breaks and line length considerations are crucial:

Function Calls with Multiple Arguments:

someFunction(argument1, argument2, argument3, argument4, argument5,
argument6, argument7, argument8);
Long Conditional Statements:

if (condition1 && condition2 && condition3 && condition4 &&
condition5 && condition6 && condition7) {
// Do something
}
Array or Object Initializations:

let longArray = [
'item1', 'item2', 'item3', 'item4', 'item5',
'item6', 'item7', 'item8', 'item9', 'item10'
];
Complex Expressions:

let result = (value1 + value2 - value3 * value4 + value5) /
(value6 + value7 - value8);

4. Best Practices:

When managing line breaks and line length in JavaScript code, consider the following best practices:

Consistency: Maintain consistent line lengths and break patterns throughout your codebase to enhance readability and maintainability.
Use Descriptive Variable Names: Meaningful variable and function names can reduce the need for excessively long lines by conveying intent more clearly.
Code Formatting Tools: Utilize code formatting tools like Prettier or ESLint with appropriate configurations to automate line break and line length management.

Practice Excercise Practice now

JavaScript Code Blocks

What are JavaScript Code Blocks?

A code block in JavaScript is a set of statements enclosed within curly braces {}. These blocks are used to group multiple statements together, creating a single compound statement. Code blocks are often associated with control flow structures like loops (for, while, do-while), conditionals (if, else if, else), and function definitions. They help in organizing and controlling the flow of code execution.

Syntax of Code Blocks

The syntax for a code block in JavaScript is straightforward:

{
// Statements go here
}

The opening curly brace { signifies the start of the code block, while the closing curly brace } marks its end. Any statements placed within these braces are considered part of the code block.

Examples of JavaScript Code Blocks

1. Using Code Blocks with Control Flow Statements

Let's start with a simple example using a for loop:

for (let i = 0; i < 5; i++) {
console.log("Current value of i:", i);
}

In this code snippet, the statements within the curly braces {} form a code block. The console.log statement is executed repeatedly as long as the loop condition i < 5 is true.

2. Code Blocks in Conditional Statements

Code blocks are commonly used with if, else if, and else statements for conditional execution:

let num = 10;

if (num > 0) {
console.log("Number is positive.");
} else if (num < 0) {
console.log("Number is negative.");
} else {
console.log("Number is zero.");
}

Here, each block within the if, else if, and else conditions contains specific statements that execute based on the condition's evaluation.

3. Using Code Blocks in Functions

Functions in JavaScript often utilize code blocks to define the function body:

function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Alice");
greet("Bob");

The code block { ... } after the function declaration contains the statements defining the function's behavior.

Scoping in JavaScript Code Blocks

One crucial aspect of code blocks in JavaScript is scoping. Variables declared within a code block using let or const have block-level scope, meaning they are only accessible within that block and not outside it. This scoping behavior helps in preventing variable name clashes and improves code readability.

{
let x = 10;
console.log("Inside block, x:", x); // Output: Inside block, x: 10
}

console.log("Outside block, x:", typeof x); // Output: Outside block, x: undefined
In this example, x is accessible only within the code block where it is defined.

Benefits of Using Code Blocks

Encapsulation: Code blocks help encapsulate related code, making it easier to understand and maintain.
Scope Isolation: Variables declared within code blocks have limited scope, reducing the risk of unintended side effects.
Readability: By visually grouping statements, code blocks improve code readability and organization.
Control Flow: Code blocks are integral to control flow structures like loops and conditionals, enabling precise control over program execution.

Practice Excercise Practice now

JavaScript Keywords

Keywords in JavaScript are reserved words that have predefined meanings and purposes within the language. They cannot be used as identifiers (such as variable names, function names, etc.) because they are reserved for specific functionalities in JavaScript. Understanding keywords is essential for writing correct and efficient JavaScript code. In this explanation, we'll cover various JavaScript keywords, categorize them, and provide examples to illustrate their usage.

1. Types of Keywords

JavaScript keywords can be categorized into several groups based on their

functionalities:

Primitive Types Keywords: These keywords represent primitive data types in JavaScript, such as numbers, strings, booleans, null, undefined, etc.
Control Flow Keywords: Keywords used to control the flow of execution in JavaScript, such as if, else, switch, for, while, break, continue, return, etc.
Declaration Keywords: Keywords used to declare variables (var, let, const) and functions (function) in JavaScript.
Object Keywords: Keywords related to objects in JavaScript, such as new, this, super, class, etc.
Error Handling Keywords: Keywords used for error handling, such as try, catch, throw, finally.
Miscellaneous Keywords: Keywords that don't fit into the above categories, such as delete, typeof, instanceof, etc.

2. Examples of JavaScript Keywords

Let's explore each category with examples:

Primitive Types Keywords

1. true, false: Boolean values representing true and false.

let isTrue = true;
let isFalse = false;

2.null: Represents a null value.

let myVar = null;

3.undefined: Represents an undefined value.

let undefinedVar;
console.log(undefinedVar); // Output: undefined

Control Flow Keywords

1. if, else: Conditional statements.

let age = 25;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}

2. switch, case, break: Switch statement for multiple conditions.

let day = 3;
switch (day) {
case 1:
console.log("Sunday");
break;
case 2:
console.log("Monday");
break;
// More cases...
default:
console.log("Invalid day");
}

3. for, while, do-while: Looping constructs.

for (let i = 0; i < 5; i++) {
console.log(i);
}

let j = 0;
while (j < 5) {
console.log(j);
j++;
}

let k = 0;
do {
console.log(k);
k++;
} while (k < 5);

Declaration Keywords

1. var, let, const: Variable declaration keywords.

var a = 10; // Function-scoped (avoid using var in modern JavaScript)
let b = 20; // Block-scoped
const PI = 3.14; // Constant

2. function: Keyword to declare functions.

function greet(name) {
console.log("Hello, " + name + "!");
}

Object Keywords

1. new: Creates instances of objects.

let myObj = new Object();

2. this: Refers to the current object.

let person = {
name: "Alice",
greet: function() {
console.log("Hello, " + this.name + "!");
}
};
person.greet(); // Output: Hello, Alice!

3. class, constructor: Keywords for defining classes and constructors.

class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}

area() {
return this.width * this.height;
}
}

let rect = new Rectangle(5, 10);
console.log(rect.area()); // Output: 50

Error Handling Keywords

1. try, catch, throw, finally: Keywords for error handling.

try {
// Code that may throw an error
throw "An error occurred";
} catch (error) {
console.log("Caught an error:", error);
} finally {
console.log("Finally block always executes.");
}

Miscellaneous Keywords

1. delete: Removes a property from an object.

let obj = { name: "John", age: 30 };
delete obj.age;
console.log(obj); // Output: { name: "John" }

2. typeof: Returns the data type of a variable or expression.

let num = 10;
console.log(typeof num); // Output: "number"

let str = "Hello";
console.log(typeof str); // Output: "string"

3.instanceof: Checks if an object is an instance of a specific class.

class Car {}
let myCar = new Car();
console.log(myCar instanceof Car); // Output: true

Practice Excercise Practice now

Previous Next

JavaScript Statements

JavaScript Programs

JavaScript Statements

JavaScript White Space

JavaScript Line Length And Line Breaks

JavaScript Code Blocks

JavaScript Keywords

COMPANY

Products

OTHERS

Partner