JavaScript Tutorial Basics: Variables, Loops, and Functions

JavaScript Basics: Variables, Loops, and Functions

JavaScript is a versatile programming language used mainly in web development. This guide covers the essential concepts of variables, loops, and functions, providing step-by-step explanations and examples.

---

1. Variables in JavaScript

What are Variables?

Variables are containers for storing data values. In JavaScript, variables can be created using var, let, or const.

Variable Declaration and Initialization

• var: Old way of declaring variables (mostly avoided now due to scoping issues).
• let: Used for block-scoped variables, the modern way of declaring variables.
• const: Used to declare constants that cannot be reassigned.

Syntax

javascriptCopy code// Using let to declare a variable let myVariable = 10; // This is a number // Using const to declare a constant const PI = 3.14; // Value cannot be changed // Using var (older way, not recommended in modern code) var globalVar = "I am global";

Example

javascriptCopy codelet name = "John"; // String let age = 25; // Number const isStudent = true; // Boolean console.log(name); // Output: John console.log(age); // Output: 25 console.log(isStudent); // Output: true

Rules for Variables

• Variable names cannot start with a number.
• They are case-sensitive (e.g., myVar and myvar are different).
• Use descriptive names for better code readability.

---

2. Loops in JavaScript

What are Loops?

Loops allow you to execute a block of code multiple times. JavaScript supports several types of loops: for, while, and do…while.

Types of Loops

2.1 For Loop

A for loop is used when you know the number of times you want to iterate.

Syntax

javascriptCopy codefor (initialization; condition; increment/decrement) { // Code to be executed }

Example

javascriptCopy codefor (let i = 0; i < 5; i++) { console.log(i); // Output: 0 1 2 3 4 }

In this example:

• i = 0 initializes the loop variable.
• i < 5 is the condition.
• i++ increments i after each iteration.

2.2 While Loop

A while loop runs as long as the condition is true.

Syntax

javascriptCopy codewhile (condition) { // Code to be executed }

Example

javascriptCopy codelet count = 0; while (count < 3) { console.log(count); // Output: 0 1 2 count++; }

2.3 Do…While Loop

A do...while loop ensures that the code runs at least once, even if the condition is initially false.

Syntax

javascriptCopy codedo { // Code to be executed } while (condition);

Example

javascriptCopy codelet x = 5; do { console.log(x); // Output: 5 x++; } while (x < 5); // Runs the code once, even though the condition is false.

---

3. Functions in JavaScript

What are Functions?

Functions are blocks of reusable code that perform a specific task. They are used to structure code and avoid repetition.

Function Declaration

Functions are defined using the function keyword, followed by a name, parentheses (), and a code block {}.

Syntax

javascriptCopy codefunction functionName(parameters) { // Code to be executed }

Example

javascriptCopy codefunction greet() { console.log("Hello, World!"); } // Call the function greet(); // Output: Hello, World!

3.1 Functions with Parameters

Functions can accept parameters (input values).

javascriptCopy codefunction greetPerson(name) { console.log("Hello, " + name); } greetPerson("Alice"); // Output: Hello, Alice

3.2 Functions with Return Values

Functions can also return values using the return statement.

javascriptCopy codefunction add(a, b) { return a + b; } let sum = add(5, 3); // sum is now 8 console.log(sum); // Output: 8

3.3 Arrow Functions (ES6)

Arrow functions provide a concise way to write functions.

Syntax

javascriptCopy codeconst functionName = (parameters) => { // Code to be executed };

Example

javascriptCopy codeconst multiply = (x, y) => x * y; console.log(multiply(4, 5)); // Output: 20

---

Putting It All Together: Example Combining Variables, Loops, and Functions

javascriptCopy code// Function to calculate the square of numbers from 1 to 5 function squareNumbers() { for (let i = 1; i <= 5; i++) { let square = i * i; console.log(`Square of ${i} is ${square}`); } } // Call the function squareNumbers();

Output:

csharpCopy codeSquare of 1 is 1 Square of 2 is 4 Square of 3 is 9 Square of 4 is 16 Square of 5 is 25

Summary of Key Points

• Variables store values and can be declared with let, const, or var.
• Loops like for, while, and do...while allow code repetition.
• Functions encapsulate reusable code, making it easier to organize and execute logic.

These concepts are the building blocks of JavaScript and will help you write more efficient and maintainable code