JavaScript Fundamentals

Introduction to JavaScript

JavaScript is a powerful, versatile programming language that is the cornerstone of modern web development. It enables dynamic and interactive content on websites, making them engaging for users. Unlike HTML (which structures content) and CSS (which styles content), JavaScript adds behavior.

This tutorial will cover the essential building blocks of JavaScript that every developer should know.

Variables and Data Types

Variables are containers for storing data values. In JavaScript, you can declare variables using var, let, and const.

• var: Function-scoped or globally scoped.
• let: Block-scoped, can be reassigned.
• const: Block-scoped, cannot be reassigned (though the contents of an object or array can be mutated).

Common Data Types:

• String: Textual data (e.g., "Hello, World!").
• Number: Numeric data, including integers and floating-point numbers (e.g., 42, 3.14).
• Boolean: Represents truth values, either true or false.
• Array: An ordered list of values (e.g., [1, 2, 3]).
• Object: A collection of key-value pairs (e.g., { name: "Alice", age: 30 }).
• Null: Represents the intentional absence of any object value.
• Undefined: Indicates that a variable has been declared but has not been assigned a value.

let greeting = "Hello";
const pi = 3.14159;
let isLearning = true;
let numbers = [10, 20, 30];
let person = {
    firstName: "John",
    lastName: "Doe"
};
            

Operators

Operators are symbols that perform operations on values (operands).

• Arithmetic Operators: +, -, *, /, % (remainder), ++ (increment), -- (decrement).
• Assignment Operators: =, +=, -=, *=, /=.
• Comparison Operators: == (equal value), === (equal value and type), !=, !==, >, <, >=, <=.
• Logical Operators: && (AND), || (OR), ! (NOT).

let x = 10;
let y = 5;
let sum = x + y; // 15
let isEqual = (x === 10); // true
let isGreater = (x > y); // true
let condition = (x > 0 && y < 10); // true
            

Control Flow Statements

Control flow statements allow you to control the execution of your code based on certain conditions.

Conditional Statements:

• if...else: Executes a block of code if a condition is true, and another block if it's false.
• switch: Selects one of many code blocks to be executed.

let hour = 14;
if (hour < 12) {
    console.log("Good morning!");
} else if (hour < 18) {
    console.log("Good afternoon!");
} else {
    console.log("Good evening!");
}

let day = 3;
switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    default:
        console.log("Another day");
}
            

Loops:

• for: Executes a block of code a specified number of times.
• while: Executes a block of code as long as a condition is true.
• do...while: Executes a block of code once, and then repeats the execution as long as a condition is true.
• for...in: Iterates over the properties of an object.
• for...of: Iterates over the values in an iterable object (like arrays).

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

let j = 0;
while (j < 3) {
    console.log("While loop: " + j);
    j++;
}

const colors = ["red", "green", "blue"];
for (const color of colors) {
    console.log(color);
}
            

Functions

Functions are blocks of reusable code designed to perform a particular task. They help in organizing code and reducing redundancy.

// Function declaration
function greet(name) {
    return "Hello, " + name + "!";
}

// Function expression
const add = function(a, b) {
    return a + b;
};

// Arrow function (ES6+)
const multiply = (a, b) => a * b;

console.log(greet("Alice"));      // Output: Hello, Alice!
console.log(add(5, 3));           // Output: 8
console.log(multiply(4, 6));      // Output: 24
            

Objects and Arrays

These are fundamental data structures in JavaScript.

Objects:

Objects are collections of properties, where each property has a key (name) and a value.

const car = {
    make: "Toyota",
    model: "Camry",
    year: 2022,
    isElectric: false,
    start: function() {
        console.log("Engine started!");
    }
};

console.log(car.make);       // Output: Toyota
console.log(car["model"]);   // Output: Camry
car.start();                 // Output: Engine started!
            

Arrays:

Arrays are ordered lists that can hold various data types.

const fruits = ["Apple", "Banana", "Orange"];
console.log(fruits.length);      // Output: 3
fruits.push("Mango");            // Add to the end
console.log(fruits);             // ["Apple", "Banana", "Orange", "Mango"]
fruits.shift();                  // Remove from the beginning
console.log(fruits);             // ["Banana", "Orange", "Mango"]

fruits.forEach(function(fruit) {
    console.log("I like " + fruit);
});