JS in small bites: Level 2

By /

Welcome back to JS in Small Bites: Level 2.

If you have read the first post in this series, you already know the idea: JavaScript, broken down into small, digestible lessons you can actually follow along with. No magical copy-paste solutions.

This time, we are going a level deeper.

In this post, we will move beyond basic variables, conditionals, and loops to start working with complex data types, functions, and introductory concepts of object-oriented programming.

When I was learning, tutorials either rushed through these ideas as if they were obvious or buried them under unnecessary complexity. My goal here is the same as before: to provide clear explanations, examples, and small pieces that you can understand before moving on to the next.

Take a bite, understand it, and then take the next one.

Let’s level up.

What are Complex Data Types?

So far, we have worked with simple values such as numbers and strings. But real programs rarely deal with just one piece of data at a time. This is where complex data types come in: they allow us to group information together and work with it in a more structured way.

Arrays

An array is a special type of object in JavaScript designed to store ordered collections of data. Each item in an array has a numeric index, starting from 0, which is why the first element is accessed with index 0, not 1.

const scores = [85, 92, 78, 90];

console.log(scores[0]); // 85
console.log(scores.length); // 4 (method to get the length of an array)

Arrays can store any data type, and even mix them.

const mixed = ["Irma", 18, true];

Because arrays are objects, they come with built-in methods that let you modify and work with data efficiently. Some of the most commonly used ones include:

scores.push(100);    // adds an element to the end
scores.pop();        // removes an element from the end
scores.shift();      // removes an element from the start
scores.unshift(70);  // adds an element to the start

Think of arrays as the backbone of data flow in JavaScript: whenever you are dealing with lists, sequences, or collections, arrays are usually the right tool for the job.

Functions

A function is a reusable block of code designed to perform a specific task. Instead of writing the same logic multiple times, you define it once and call it whenever you need it. Functions help keep your code organized, readable, and maintainable.

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

console.log(add(2, 3)); // 5

In JavaScript, functions can be stored in variables, passed as arguments, and returned from other functions.

const greet = function(name) {
  return "Hello, " + name;
};

JavaScript also provides a shorter, modern syntax called arrow functions.

const greet = name => "Hello, " + name;

Functions can accept parameters (inputs) and return values (outputs). If a function does not explicitly return anything, it return undefined by default.

function logMessage(msg) {
  console.log(msg);
}

At a deeper level, functions create their own scope, meaning variables defined inside a function are not accessible from the outside. This helps prevent accidental conflicts and is one of the key reasons functions are essential for writing safe, predictable code.

function counter() {
  let count = 0;
  count++;
  return count;
}

A brief introduction to OOP

So far, we have been writing JavaScript in a procedural way: step by step, telling the program exactly what to do and in what order.

let name = "Irma";
let age = 18;

function introduce(name, age) {
  return "Hi, I'm " + name + " and I'm " + age;
}

introduce(name, age);

This approach works well for small scripts, but as programs grow, data and logic start to scatter across files and functions.

Object-Oriented Programming (OOP) takes a different approach. Instead of focusing on steps, it focuses on entities. Data and behavior are grouped together into objects that represent real-world concepts.

const user = {
  name: "Irma",
  age: 18,
  introduce() {
    return "Hi, I'm " + this.name;
  }
};

Now, the data (name, age) and the behavior (introduce) live in the same place. This makes code easier to reason about, extend, and maintain.

At a high level:

  • Procedural programming is about functions acting on data.
  • OOP is about objects owning both data and behavior.

JavaScript is flexible: it does not force you to choose one style. You can write procedural code, object-oriented code, or a mix of both. Understanding OOP simply gives you another powerful mental model for structuring larger applications.

This is just the starting point. In the next bites, concepts like classes and constructors will turn this idea into something you can actively use.

Project 2: A Simple Grade Tracker

Let’s build a small program that stores grades and calculates the average.
It is simple, but it combines variables, arrays, functions, and basic logic.

Step 1: Storing Data with an Array

First, we will store grades inside an array.

let grades = [85, 90, 78, 92];

Each number represents a grade. Because grades are a collection of similar values, an array is the perfect choice here.

Step 2: Creating a Function to Add Grades

Instead of manually pushing values into the array every time, we will use a function.

function addGrade(grade) {
  grades.push(grade);
}

Now you can easily add new grades without modifying the array directly.

addGrade(88);
addGrade(95);

Step 3: Calculating the Average

Next, we will write a function that calculates the average grade.

function calculateAverage() {
  let sum = 0;

  for (let i = 0; i < grades.length; i++) {
    sum += grades[i];
  }

  return sum / grades.length;
}

This function:

  • loops through the array,
  • adds all values together,
  • and returns the final average.

Step 4: Using the Program

At this point, you already have a small, reusable system, not just scattered lines of code.

console.log("Grades:", grades);
console.log("Average:", calculateAverage());

Why This Example Matters

This program shows how:

  • Arrays store collections of data,
  • Functions define behavior,
  • and logic becomes reusable instead of repetitive.

With a few more tweaks, this could easily grow into:

  • a GPA calculator,
  • a quiz grading system,
  • or part of a larger student app.

That is the power of combining small concepts into structured code.

JS in Small Bites: ROADMAP

Resources

If you are enjoying JS in Small Bites and want to keep learning alongside me, here is where you can find more:

  • 🖥️ GitHub: Browse my projects, code snippets, and experiments.
  • 📸 Instagram: Coding tips, behind-the-scenes, and my developer journey.
  • 😆 LinkedIn: Tech updates, networking, and professional milestones.
  • 👩🏻‍💻 Portfolio: Explore all my work in one place.

I would love to hear what you think about learning JavaScript this way, drop me a message anytime!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top