JavaScript Fundamentals: A Beginner's Guide to Essential Concepts and Best Practices¶

Introduction¶

Are you new to JavaScript or looking to refresh your understanding of its fundamental concepts?

Dive into this beginner-friendly guide to explore the core principles and best practices in JavaScript!

JavaScript (ES6), short for ECMAScript 6, is a major version of the JavaScript programming language. It introduces new features, syntax enhancements, and advanced programming concepts. This documentation is tailored for beginners and individuals seeking to recall the fundamentals of JavaScript. Let's embark on this learning journey together!

Overview¶

In this comprehensive guide, you will learn:

• Essential JavaScript data types, control structures, and functions
• Error handling techniques and best practices
• The use of classes, objects, arrays, and maps in JavaScript
• Comparison operators and logical operations
• Control structures including if/else, switch/case, for loops, and while loops
• Best practices for variable declaration and scope
• Tips for writing clean and maintainable JavaScript code

Ready to elevate your JavaScript skills? Let's get started!

Variables and Constants¶

Declaration and Initialization¶

• Use let to declare variables whose value can change.
• Use const to declare constants whose value cannot change.

Example:

let numberOfEpisodes = 9;
const pi = 3.14;

Data Types¶

• Data types include number, string, boolean, object, undefined, null, etc.
• Use typeof to check the type of a variable.

Numbers¶

In JavaScript, integers are represented as the number data type. You can declare a variable and assign it an integer value as follows:

let a = 15;
console.log(typeof a);  // Displays "number"

Booleans¶

Booleans represent true or false values in JavaScript. You can declare a variable and assign it a boolean value like this:

let userIsSignedIn = true;
console.log(typeof userIsSignedIn); // Displays "boolean"

Strings¶

Strings are sequences of characters enclosed in single or double quotes. You can concatenate two strings using the + operator. Here's an example:

let nom = 'Ag';
let prenom = 'He';
console.log(typeof nom); // Displays "string"
console.log(nom + prenom); // Displays "AgHe"

Outputs¶

• Use console.log() to display messages in the console.
• Use alert() to display messages in a dialog box.

Example:

console.log(5);
let yyy = "me";
console.log("retdy" + " " + yyy);
alert('some things'); // Display a message in a dialog box

Objects¶

JavaScript objects behave similarly to dictionaries in Python.

Syntax¶

Objects in JavaScript are declared using curly braces {} and consist of key-value pairs. Keys are always strings. Each value can be an instance of any other type.

let mybook = { 
    title: 'Allah is not obliged',
    author: 'Un Mec',
    numberOfPages: 200,
    isAvailable: true
};

Accessing Data¶

You can access data in an object using dot notation (.) or square bracket notation ([]). For example:

let titre = mybook.title;
let auteur = mybook.author;
let isdisponible = mybook.isAvailable;

let titre = mybook["title"];
let auteur = mybook["author"];
let isdisponible = mybook["isAvailable"];

Note that the keys are case-sensitive. So mybook.title is not the same as mybook.Title.

Classes¶

In JavaScript, classes allow you to define blueprints for creating objects with properties and methods.

Class Definition¶

Classes are defined using the class keyword followed by the class name.

class Book {
    constructor(title, author, numberOfPages) {
        this.title = title;
        this.author = author;
        this.numberOfPages = numberOfPages;
    }
}

Creating Instances¶

You can create new instances of a class using the new keyword followed by the class name and passing the required parameters to the constructor.

let aBook = new Book("le moi intérieur", "Hermann", 250);

Methods¶

Methods can be defined within the class using normal function syntax. Here's an example:

class BankAccount {
    constructor(owner, balance) {
        this.owner = owner;
        this.balance = balance;
    }

    showBalance() {
        console.log("Solde: " + this.balance + " EUR");
    }

    deposit(amount) {
        console.log("Dépôt de " + amount + " EUR");
        this.balance += amount;
        this.showBalance();
    }

    withdraw(amount) {
        if (amount > this.balance) {
            console.log("Retrait refusé !");
        } else {
            console.log("Retrait de " + amount + " EUR");
            this.balance -= amount;
            this.showBalance();
        }
    }
}

Instantiation and Method Invocation¶

You can create an instance of a class and then call its methods as shown below:

const newAccount = new BankAccount("Will Alexander", 500);
newAccount.showBalance(); // Prints "Solde: 500 EUR" to the console

This code creates a new bank account with an initial balance of 500 EUR and then displays its balance using the showBalance method.

Arrays and Maps¶

In JavaScript, arrays are used to store collections of elements. They are zero-indexed, meaning the index of the first element is 0.

Array Definition¶

Arrays can be defined without initialization, or directly initialized with elements.

// Definition without initialization
let myList;

// Definition with direct initialization
let guests = [];
let invitedPeoples = ["Sarah", "Jean-Pierre", "Claude"];

Accessing Elements¶

You can access elements in an array using square brackets and the index of the element. Remember that array indexing starts from 0.

let guest1 = invitedPeoples[0]; // Accesses the first element
let guest3 = invitedPeoples[2]; // Accesses the third element

Array Length¶

You can determine the length of an array using the length property.

console.log(invitedPeoples.length); // Prints the length of the array

Array Operations¶

Arrays support various operations like adding elements, removing elements, and inserting elements.

• To add an element to the end of an array, you can use the push method.
• To remove the last element from an array, you can use the pop method.
• To add an element to the beginning of an array, you can use the unshift method.

Maps¶

Maps in JavaScript are similar to arrays but are unordered collections. They do not allow duplicates, and you can check if an element exists in a map.

These are some basic operations you can perform with arrays in JavaScript.

Comparison Operators¶

Comparison operators in JavaScript allow you to compare values and determine the relationship between them. These operators are commonly used in conditional statements like if and loops.

Common Comparison Operators¶

• < Less than
• <= Less than or equal to
• > Greater than
• >= Greater than or equal to
• == Equal to (checks value only)
• != Not equal to (checks value only)
• === Equal to (checks value and type)
• !== Not equal to (checks value and type)

Logical Operators¶

Logical operators allow you to combine multiple conditions in a single statement.

• && Logical AND: Returns true if both conditions are true
• || Logical OR: Returns true if at least one condition is true
• ! Logical NOT: Negates the result, returns true if the condition is false

let a = 5;
let b = 10;

if (a < b) {
    console.log("a is less than b");
} else {
    console.log("a is greater than or equal to b");
}

Control Structures¶

If/else¶

In JavaScript, if, else if, and else statements are used to execute blocks of code based on conditions.

Basic Structure¶

The basic structure of an if statement is as follows:

if (condition) {
    // Code to execute if the condition is true
} else {
    // Code to execute if the condition is false
}

let userLoggedIn = true;

if (userLoggedIn) {
    console.log("User logged in!");
} else {
    console.log("Alert, intruder!");
}

if (numberOfGuests == numberOfSeats) {
    // All seats are occupied
} else if (numberOfGuests < numberOfSeats) {
    // Allow more guests
} else {
    // Do not allow new guests
}

Conditions Evaluated as True or False¶

Switch/Case¶

The switch statement in JavaScript allows you to execute different blocks of code based on different conditions. It's particularly useful when you have a single value that you want to compare to multiple possible variants.

Basic Structure¶

The basic structure of a switch statement looks like this:

switch (expression) {
    case value1:
        // Code to execute if expression === value1
        break;
    case value2:
        // Code to execute if expression === value2
        break;
    default:
        // Code to execute if expression doesn't match any case
}

let guestType = "star";
let vipStatus;

switch (guestType) {
    case "artist":
        vipStatus = "Normal";
        break;
    case "star":
        vipStatus = "Important";
        break;
    default:
        vipStatus = "None";
}

console.log("VIP status:", vipStatus);

Handling Unknown Values¶

The default case is used to handle values that don't match any of the specified cases. This is useful for providing a fallback option or handling unexpected input.

let vipStatus = "";
let guest = {
    name: "Sarah Kate",
    age: 21,
    ticket: true,
    guestType: "artist"
};

switch (guest.guestType) {
    case "artist":
        vipStatus = "Normal";
    case "star":
        vipStatus = "Important";
        break;
    case "presidential":
        vipStatus = "Mega-important";
        break;
    default:
        vipStatus = "None";
}

For Loops¶

In JavaScript, for loops are used to iterate over elements in an array or perform a specific action a certain number of times.

Basic Structure¶

The basic structure of a for loop is as follows:

for (initialization; condition; increment/decrement) {
    // Code to execute for each iteration
}

for (let i = 0; i < numberOfPassengers; i++) {
    console.log("Passenger boarded!");
}

For Loop on Arrays¶

This section provides an overview of for loops in JavaScript, including examples of both for...in and for...of loops and their respective use cases

const passengers = [
    "Will Alexander",
    "Sarah Kate",
    "Audrey Simon",
    "Tao Perkington"
]

for (let i in passengers) {
    console.log("Boarding passenger: " + passengers[i]);
}

const passengers = [
    "Will Alexander",
    "Sarah Kate",
    "Audrey Simon",
    "Tao Perkington"
]

for (let passenger of passengers) {
    console.log("Boarding passenger: " + passenger);
}

In both examples, each passenger's name is logged to the console, indicating that they are boarding the vehicle or entering some other context.

While Loops¶

In JavaScript, while loops are used to execute a block of code repeatedly as long as a specified condition is true.

Basic Structure¶

The basic structure of a while loop is as follows:

while (condition) {
    // Code to execute as long as the condition is true
}

let seatsLeft = 10;
let passengersStillToBoard = 8;
let passengersBoarded = 0;

while (seatsLeft > 0 && passengersStillToBoard > 0) {
    passengersBoarded++; // A passenger boards
    passengersStillToBoard--; // Decrease the number of passengers still to board
    seatsLeft--; // Decrease the number of seats left
}

console.log(passengersBoarded); // Logs the total number of passengers boarded

Error Handling¶

In JavaScript, error handling is crucial for managing unexpected situations or errors that may occur during code execution. There are various types of errors, and JavaScript provides mechanisms like try and catch to handle them gracefully.

Exception Handling with Try/Catch¶

JavaScript provides the try and catch blocks for handling exceptions and managing errors effectively.

Basic Structure¶

try {
    // Code that may cause an error
} catch (error) {
    // Handling the error
}

In this structure:

• The try block contains the code that might throw an error.
• If an error occurs within the try block, control is transferred to the catch block.
• The catch block is responsible for handling the error. It receives the error object as a parameter, which can be used to identify and respond to the error appropriately.

try {
    // Attempting to execute code that may throw an error
    let result = 10 / 0; // This will cause a division by zero error
    console.log(result); // This line will not execute due to the error
} catch (error) {
    // Handling the error
    console.error("An error occurred:", error.message);
}

Error handling with try and catch is an essential aspect of writing robust JavaScript code, ensuring that your applications can gracefully handle unexpected errors and provide a better user experience.

Functions¶

In JavaScript, functions are blocks of reusable code that can be invoked (called) to perform a specific task. They play a crucial role in organizing and structuring code, making it easier to manage and maintain.

Basic Syntax¶

Functions in JavaScript can be defined using different syntaxes, including arrow functions and traditional function declarations.

const sum = (a, b) => {
    return a + b;
};

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

Function Invocation¶

Once a function is defined, it can be invoked (called) by its name, followed by parentheses containing any arguments required by the function.

Example¶

const result = sum(3, 4);
console.log(result); // Output: 7

const sum = (number1, number2) => {
    const result = number1 + number2;
    return result;
}

console.log(sum(4, 7)); // Output: 11

const calculateAverageRating = (ratings) => {
    if (ratings.length === 0) {
        return 0;
    }

    let sum = 0;
    for (let rating of ratings) {
        sum += rating;
    }

    return sum / ratings.length;
}

const tauRatings = [5, 4, 5, 5, 1, 2];
const colinRatings = [5, 5, 5, 4, 5];

const tauAverage = calculateAverageRating(tauRatings);
const colinAverage = calculateAverageRating(colinRatings);

console.log(tauAverage); // Output: 3.6666666666666665
console.log(colinAverage); // Output: 4.8

Scope of Variables¶

In JavaScript, the scope of a variable determines where the variable is accessible within the code. Understanding variable scope is essential for writing maintainable and bug-free code.

Variable Declaration¶

When declaring variables in JavaScript, it's recommended to use let or const to define variables.

• let: Variables declared with let have block scope, meaning they are only accessible within the block (enclosed by {}) in which they are defined, as well as any nested blocks (e.g., inside an if statement or loop) within that block.

• const: Constants declared with const also have block scope and cannot be reassigned. They follow the same scoping rules as variables declared with let.

• var: Variables declared with var have function scope. This means they are accessible throughout the entire function in which they are defined, regardless of block boundaries.

{
    let localVar = 'I am a local variable';
    console.log(localVar); // Output: 'I am a local variable'
}

console.log(localVar); // Throws ReferenceError: localVar is not defined