Frontend Engineering | VoidX Academy

3. JavaScript Core: The Logic Layer

JavaScript: Making the Web Think

HTML is the skeleton. CSS is the skin. JavaScript is the brain. It is a full programming language that runs directly inside the browser, allowing you to manipulate data, react to user clicks, and fetch information from servers. In this massive module, we break down every core building block of the language.

Variables: The `const` Keyword

Variables are containers for storing data. Modern JavaScript relies heavily on const. You use const when you declare a variable that should NEVER be reassigned to a completely new value later in the code.

// Declaring a constant variable
const agencyName = "Voidx";

// If we try to reassign it, JavaScript will crash with an error
// agencyName = "Google"; // ERROR: Assignment to constant variable.

Variables: The `let` Keyword

Use let when you know the variable's value will need to change over time (like a score in a game, or a counter).

let tasksCompleted = 0;

// We can safely update variables declared with let
tasksCompleted = 1;
tasksCompleted = tasksCompleted + 1; // Now it is 2

Data Types: Strings & Template Literals

Strings represent text. While you can use single or double quotes, modern JS favors Template Literals (using backticks `). They allow you to easily inject variables directly into the text.

const founder = "Prince";
const university = "UCC";

// The ${} syntax allows us to execute JavaScript inside the string
const greeting = `Hello, my name is ${founder} and I attend ${university}.`;
console.log(greeting); // Output: Hello, my name is Prince and I attend UCC.

Data Types: Numbers & Booleans

Numbers handle all math. Booleans are strict binary values: exactly true or exactly false. They are the core of decision-making logic.

const currentLevel = 200;
const isGraduated = false;
const hasAdminAccess = true;

// An 'if' statement evaluates a Boolean
if (hasAdminAccess) {
  console.log("Welcome to the admin dashboard.");
}

Data Types: Arrays

An Array is a single variable used to store an ordered list of multiple items. Arrays are zero-indexed, meaning the first item is at position 0.

// Creating an array of strings
const traditionalHalls = ["Casford", "Valco", "Ognaa", "KNH"];

// Accessing data using the index
console.log(traditionalHalls[0]); // Output: "Casford"

// Adding a new item to the end of the list
traditionalHalls.push("Adehye");

Data Types: Objects

Objects are used to store collections of data in key-value pairs. They represent real-world entities much better than isolated variables.

const userProfile = {
  firstName: "Prince",
  role: "Web Developer",
  company: "Voidx",
  isActive: true
};

// Accessing properties using dot notation
console.log(userProfile.company); // Output: "Voidx"

// Modifying a property
userProfile.role = "CEO";

Functions: Traditional Declarations

A function is a block of code designed to perform a particular task. It is reusable. You define it once, and "call" it whenever you need it.

// Defining the function. 'price' and 'discount' are parameters.
function calculateTotal(price, discount) {
  const savings = price * discount;
  return price - savings;
}

// Calling the function. 100 and 0.20 are arguments.
const finalPrice = calculateTotal(100, 0.20);
console.log(finalPrice); // Output: 80

Functions: Arrow Functions

Introduced in ES6, Arrow Functions provide a shorter, cleaner syntax for writing functions. They are used extensively in modern libraries like React.

// The same function written as an Arrow Function
const calculateTotalArrow = (price, discount) => {
  const savings = price * discount;
  return price - savings;
};

// If the function is just one line, you can omit the {} and the 'return' keyword!
const doubleNumber = (num) => num * 2;

DOM Manipulation: Selecting Elements

The Document Object Model (DOM) is JavaScript's representation of your HTML. To change the HTML with JavaScript, you first have to find the specific element.

// Finds the exact HTML element with id="theme-button"
const themeBtn = document.querySelector("#theme-button");

// Finds the first HTML element with the class ".news-article"
const firstArticle = document.querySelector(".news-article");

// Now we can modify it directly
firstArticle.style.backgroundColor = "#f4f4f4";

DOM Manipulation: Event Listeners

JavaScript sits and waits for things to happen. These things are called Events (clicks, scrolling, typing). You attach an Event Listener to an element to run a function when the event occurs.

const loginBtn = document.querySelector("#login-btn");

// We listen for a 'click', and then run an arrow function
loginBtn.addEventListener("click", () => {
  console.log("The user clicked the login button!");
  // We could add code here to show a loading spinner
});

3. JavaScript Core: The Logic Layer

JavaScript: Making the Web Think

Variables: The `const` Keyword

// Declaring a constant variable
const agencyName = "Voidx";

// If we try to reassign it, JavaScript will crash with an error
// agencyName = "Google"; // ERROR: Assignment to constant variable.

Variables: The `let` Keyword

Use let when you know the variable's value will need to change over time (like a score in a game, or a counter).

let tasksCompleted = 0;

// We can safely update variables declared with let
tasksCompleted = 1;
tasksCompleted = tasksCompleted + 1; // Now it is 2

Data Types: Strings & Template Literals

Strings represent text. While you can use single or double quotes, modern JS favors Template Literals (using backticks `). They allow you to easily inject variables directly into the text.

const founder = "Prince";
const university = "UCC";

// The ${} syntax allows us to execute JavaScript inside the string
const greeting = `Hello, my name is ${founder} and I attend ${university}.`;
console.log(greeting); // Output: Hello, my name is Prince and I attend UCC.

Data Types: Numbers & Booleans

Numbers handle all math. Booleans are strict binary values: exactly true or exactly false. They are the core of decision-making logic.

const currentLevel = 200;
const isGraduated = false;
const hasAdminAccess = true;

// An 'if' statement evaluates a Boolean
if (hasAdminAccess) {
  console.log("Welcome to the admin dashboard.");
}

Data Types: Arrays

An Array is a single variable used to store an ordered list of multiple items. Arrays are zero-indexed, meaning the first item is at position 0.

// Creating an array of strings
const traditionalHalls = ["Casford", "Valco", "Ognaa", "KNH"];

// Accessing data using the index
console.log(traditionalHalls[0]); // Output: "Casford"

// Adding a new item to the end of the list
traditionalHalls.push("Adehye");

Data Types: Objects

Objects are used to store collections of data in key-value pairs. They represent real-world entities much better than isolated variables.

const userProfile = {
  firstName: "Prince",
  role: "Web Developer",
  company: "Voidx",
  isActive: true
};

// Accessing properties using dot notation
console.log(userProfile.company); // Output: "Voidx"

// Modifying a property
userProfile.role = "CEO";

Functions: Traditional Declarations

A function is a block of code designed to perform a particular task. It is reusable. You define it once, and "call" it whenever you need it.

// Defining the function. 'price' and 'discount' are parameters.
function calculateTotal(price, discount) {
  const savings = price * discount;
  return price - savings;
}

// Calling the function. 100 and 0.20 are arguments.
const finalPrice = calculateTotal(100, 0.20);
console.log(finalPrice); // Output: 80

Functions: Arrow Functions

Introduced in ES6, Arrow Functions provide a shorter, cleaner syntax for writing functions. They are used extensively in modern libraries like React.

// The same function written as an Arrow Function
const calculateTotalArrow = (price, discount) => {
  const savings = price * discount;
  return price - savings;
};

// If the function is just one line, you can omit the {} and the 'return' keyword!
const doubleNumber = (num) => num * 2;

DOM Manipulation: Selecting Elements

The Document Object Model (DOM) is JavaScript's representation of your HTML. To change the HTML with JavaScript, you first have to find the specific element.

// Finds the exact HTML element with id="theme-button"
const themeBtn = document.querySelector("#theme-button");

// Finds the first HTML element with the class ".news-article"
const firstArticle = document.querySelector(".news-article");

// Now we can modify it directly
firstArticle.style.backgroundColor = "#f4f4f4";

DOM Manipulation: Event Listeners

JavaScript sits and waits for things to happen. These things are called Events (clicks, scrolling, typing). You attach an Event Listener to an element to run a function when the event occurs.

const loginBtn = document.querySelector("#login-btn");

// We listen for a 'click', and then run an arrow function
loginBtn.addEventListener("click", () => {
  console.log("The user clicked the login button!");
  // We could add code here to show a loading spinner
});

3. JavaScript Core: The Logic Layer

JavaScript: Making the Web Think

Variables: The `const` Keyword

Variables: The `let` Keyword

Data Types: Strings & Template Literals

Data Types: Numbers & Booleans

Data Types: Arrays

Data Types: Objects

Functions: Traditional Declarations

Functions: Arrow Functions

DOM Manipulation: Selecting Elements

DOM Manipulation: Event Listeners

Knowledge Check

3. JavaScript Core: The Logic Layer

JavaScript: Making the Web Think

Variables: The `const` Keyword

Variables: The `let` Keyword

Data Types: Strings & Template Literals

Data Types: Numbers & Booleans

Data Types: Arrays

Data Types: Objects

Functions: Traditional Declarations

Functions: Arrow Functions

DOM Manipulation: Selecting Elements

DOM Manipulation: Event Listeners

Knowledge Check