DEV Community: Juan Garcia

From Bugs to Brilliance, Leveling Up JavaScript with TypeScript

Juan Garcia — Tue, 01 Jul 2025 14:45:27 +0000

Why should we look into TypeScript?

Imagine JavaScript injected with steroids, that’s TypeScript. While JavaScript offers flexibility and freedom, it also leaves plenty of room for bugs and silent failures. TypeScript, on the other hand, brings structure and type safety, which becomes especially valuable when working in teams. In this blog, we’ll explore why more developers are making the switch from JavaScript to TypeScript and why you might want to consider it too.

What is TypeScript?

TypeScript is a statically typed superset of JavaScript created by Microsoft It adds optional type annotations, interfaces, and modern JavaScript features, then compiles (transpiles) down to plain JavaScript that runs in any browser or JavaScript environment.

What does it mean to transpile code?
If you’ve decided to transition from JavaScript to TypeScript, chances are you already understand what it means to compile code. But you might still be wondering: “What in the world does it mean to transpile code?”

It’s actually nothing far-fetched or complicated. The key difference is that transpiling means converting your code to a different version of the same or a similar language, like TypeScript to JavaScript, or ES6 to ES5. Unlike compiling, which transforms code from a high-level language into a lower-level one (like C to machine code). To help visualize the difference: think of transpiling as two similar languages, like Spanish and Italian which are rooted in Latin and compiling as comparing a language like English with Chinese which have completely different structures and roots. I'll share a few code snippets below to help solidify our understanding of transpilation.
TypeScript (before transpilation)

function greet(name: string): string {
  return `Hello, ${name}`;
}

const user: string = "Alice";
console.log(greet(user));

Transpiled JavaScript (after running tsc)

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

var user = "Alice";
console.log(greet(user));

With a clear grasp of TypeScript and how transpilation works, it’s time to explore why this language leaves JavaScript in the dust.

How TypeScript Outshines JavaScript in Real Projects

TypeScript offers many advantages that address common pitfalls in JavaScript. In this section, we’ll walk through each benefit using clear analogies and code examples to show exactly how TypeScript helps solve the pain points JavaScript developers often face.

Type Safety

Type safety is a common feature in statically typed languages that allows developers to declare variables with specific types. At first, this may feel restrictive or even inconvenient, especially coming from JavaScript’s flexibility. But as we grow as developers and begin working on larger, more complex codebases, the benefits of type safety become clear:

fewer runtime errors.
better code completion.
stronger collaboration across teams.

Let’s look at a few code snippets that demonstrate how enforcing type safety can make a real difference and why this extra step pays off in the long run.

Type Safety in Action (TypeScript Example)

// Define an array of numbers
const scores: number[] = [95, 87, 76];

// Push a valid number
scores.push(100); // OK

// Try to push a string
scores.push("high"); 
// ^Error: Argument of type 'string' is not assignable

Let's start with a simple example where we declare a variable intended to store an array of numerical values only. At first, this might seem restrictive or like extra work. But imagine you're working on a team, and someone accidentally tries to push a string into that array.

In JavaScript, this kind of mistake could easily go unnoticed and cause hard-to-debug errors later.

With TypeScript, this isn’t a problem. It will immediately flag the issue and refuse to transpile the file until the type mismatch is fixed. TypeScript doesn’t just whisper, it screams when something’s wrong.

Tuples

At this point, you might still have some doubts about TypeScript. Maybe you're someone who enjoys working on solo projects and values the flexibility that JavaScript offers. The good news is, TypeScript doesn’t take that freedom away, it simply gives you more control when you need it.

In fact, if you want to work with arrays that hold different types of values, TypeScript has a perfect solution: tuples. Let’s take a look at how they work.

Tuple Example in TypeScript


// Create a tuple value
const person: [string, number] = ["Alice", 30];

// Access tuple elements
console.log(person[0]); // "Alice"
console.log(person[1]); // 30

// Invalid order or types cause errors
const wrong: [string, number] = [30, "Alice"]; 
// ^Error: type mismatch

// Invalid length cause errors
const alsoWrong: [string, number] = ["Alice", 30, "Bob"]
// ^Error: array only expects two values

Using tuples, we can explicitly define what types of values a variable should hold, the exact order they should appear in, and even how many elements the array should contain. Pretty cool, right?

Type Aliases

By now, many of you might be convinced that switching to TypeScript is worth it and honestly, you should be!

But there's still one issue that some of you might have already spotted.
You might be wondering: What if I need 50 or even 100 different tuples with the same structure?
Do I really have to declare the same tuple type over and over again?

Instead of repeating the tuple type every time, we can follow the DRY principle by creating a reusable type alias.

Before we dive into an example of type aliases, let’s do a quick refresher on the DRY principle, a key concept for improving the maintainability of our codebases.

DRY principle
DRY stands for Don't Repeat Yourself — a core software engineering principle that emphasizes having a single, clear source of truth for each piece of knowledge in a system. This improves maintainability and helps avoid unnecessary duplication.

In React, we apply the DRY principle through a component-based architecture. By creating reusable, customizable components, we can use the same logic and UI in multiple parts of a project — reducing repetition and making our codebase easier to manage.

Type Alias Example in TypeScript
Now let's take a look at how type aliases help us enforce the DRY principle in our code.

// Not DRY: repeating the same tuple structure
const person1: [string, number] = ["Alice", 30];
const person2: [string, number] = ["Bob", 25];
const person3: [string, number] = ["Charlie", 40];

// DRY: use a reusable tuple type alias
type NameAge = [string, number];

const user1: NameAge = ["Alice", 30];
const user2: NameAge = ["Bob", 25];
const user3: NameAge = ["Charlie", 40];

In the example above, we used a type alias. A popular TypeScript feature that allows developers to define reusable type structures.

Let’s say we want to reuse an object structure in multiple parts of our code. Instead of rewriting the type each time, we can define it once using a type and then reference it wherever needed. This not only speeds up development but also helps prevent assigning incorrect values to variables, whether by others or by ourselves.

Enums

I’ll drop a link to a TypeScript course at the end of this blog so you can dive into learning this amazing language as soon as possible.

But for now, let’s keep going with a few more key advantages that TypeScript offers.

You might already be convinced and that’s great but remember: the title of this section doesn’t just claim that TypeScript is better than JavaScript.
We boldly stated that it leaves it in the dust.

So let’s continue until there’s not even a millimeter of doubt left.

What are Enums in TypeScript?
Enums is short for enumerations and is a feature in TypeScript that allows us to define a set of named constants, essentially giving human-readable names to numeric or string values.

They help describe a fixed set of possible options for a value.

TypeScript Enum Example

// Define enum for order status
enum OrderStatus {
  Pending = "PENDING",
  Shipped = "SHIPPED",
  Delivered = "DELIVERED"
}

// Valid enum value
const status: OrderStatus = OrderStatus.Shipped;

// Invalid value not in enum
const invalidStatus: OrderStatus = "CANCELLED";
// Error: "CANCELLED" is not assignable to OrderStatus

// Accessing undefined key
const cancelled = OrderStatus.Cancelled;
// Error: Property Cancelled does not exist

TypeScript doesn’t just prevent us (or others) from assigning values of the wrong type to existing variables, it also stops us from adding properties that were never part of the original design.

Ladies and gentlemen, this isn’t just a language.
This is a tool built to give you full control over your code.

Conclusion

It’s now clear why TypeScript completely leaves JavaScript behind.

Curious to dive in? Check out this awesome resource: TypeScript Course

Good luck on your TypeScript journey! Stay patient and as your projects grow, you'll consistently reap the benefits of this powerful transition.

Understanding Big-O Notation.

Juan Garcia — Sat, 15 Feb 2025 15:08:23 +0000

To understand Big-O notation, it's important to first know what an algorithm is. In computer science, Big-O is used to analyze how an algorithm's time and space requirements grow as the input size increases. By understanding Big-O, we can compare algorithms and choose the most efficient one for a given problem, ensuring better performance as input sizes grow. Big-O focuses on the scalability of algorithms, helping us optimize code without getting caught up in hardware-specific details.

In this blog, we'll break down all of these topics so that the reader can gain a clear understanding of Big-O notation and its significance, enabling them to analyze and optimize algorithms effectively.

What is an Algorithm?

An algorithm is a step-by-step set of instructions to solve a problem or perform a task. It takes an input, processes it through a series of steps, and produces an output.

I've outlined an algorithm below that lists the most efficient steps for learning Big-O notation:

The Best Way to Learn Big-O Notation

Gather Your Tools:
- Grab a notebook, pen, and a computer with internet access. Maybe some coffee too!
Start with the Basics:
- Learn what algorithms are and why efficiency matters. Watch an introductory video or read an article about algorithms and complexity.
Understand Big-O Notation:
- Break down Big-O as the “language” to talk about how algorithms scale. Start with common terms: O(1), O(n), O(n²), O(log n).
Practice with Examples:
- Look at simple code examples (like searching and sorting) and try to guess their Big-O complexities. Check your answers online or in a textbook.
Visualize the Growth:
- Use graphs to compare how different time complexities grow with input size. See how O(n) grows slower than O(n²) for large numbers!
Solve Problems:
- Use coding platforms like LeetCode or HackerRank. When solving problems, analyze the time complexity of your solutions.
Iterate and Improve:
- Refactor your code to make it more efficient. As you learn new algorithms, try to determine their Big-O complexity.
Celebrate Small Wins:
- Every time you recognize a time complexity, take a moment to celebrate your progress. You're mastering the art of algorithm efficiency

Before we dive into the breakdown of the algorithm, take a moment to think about what the input and output might be for this specific algorithm. Try to make an educated guess based on the information we’ve covered so far.

Break Down:

Input:

The input for this algorithm consists of your tools (like a notebook, pen, computer, and internet access) and your motivation to learn Big-O notation. You also need some basic knowledge of coding concepts, as it will help you understand algorithms and how their performance is measured.

Steps:

The steps begin with preparing your tools and diving into the basics of algorithms. You'll then break down Big-O notation, learning the most common complexities like O(1), O(n), O(n²), and O(log n). By practicing with examples and visualizing how different complexities grow, you reinforce your understanding. Solving problems on coding platforms, refactoring your solutions to improve efficiency, and celebrating small milestones further cement the knowledge.

Output:

The output of this algorithm is a solid understanding of Big-O notation and the ability to recognize and analyze the time complexity of algorithms. You'll gain improved algorithm skills and a better approach to solving problems efficiently, optimizing your code based on time and space complexity.

Time Complexity

Time complexity measures how long an algorithm takes to run, based on the size of the input. It tells us how the execution time increases as the input grows.

For example, if you have a list of items and need to check each one, the time it takes will grow linearly with the number of items in the list. We describe this as O(n) time complexity, meaning the algorithm’s running time increases proportionally to the input size.

Here are some common time complexities, accompanied by code examples, to help you start recognizing and understanding them more effectively.

O(1) - Constant Time Complexity

The algorithm takes the same amount of time to execute regardless of the size of the input.
Example:

const getFirstElement = (arr) => {
    return arr[0];
}

Explanation: Accessing an element by index in an array is a constant-time operation.

O(n) - Linear Time Complexity

The algorithm's running time increases linearly with the size of the input.
Example:

const printElements = (arr) => {
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
}

Explanation: The loop iterates through each element of the array once, so the time complexity is O(n).

O(n^2) - Quadratic Time Complexity

The algorithm’s time increases quadratically with the size of the input, often seen in nested loops.
Example:

const printPairs = (arr) => {
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length; j++) {
            console.log(arr[i], arr[j]);
        }
    }
}

Explanation: Two nested loops result in n * n operations, making the time complexity O(n^2).

O(log n) - Logarithmic Time Complexity

The algorithm's running time grows logarithmically with the input size. Common in algorithms that divide the input in each step (e.g., binary search).
Example:

const binarySearch = (arr, target) => {
    let left = 0;
    let right = arr.length - 1;
    while (left <= right) {
        let mid = Math.floor((left + right) / 2);
        if (arr[mid] === target) {
            return mid;
        } else if (arr[mid] < target) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }
    }
    return -1;
}

Explanation: Binary search reduces the search space by half each time, making the time complexity O(log n).

O(n log n) - Linearithmic Time Complexity

This time complexity often arises in divide-and-conquer algorithms like merge sort or quicksort.
Example:

const mergeSort = (arr) => {
    if (arr.length <= 1) return arr;

    const mid = Math.floor(arr.length / 2);
    const left = mergeSort(arr.slice(0, mid));
    const right = mergeSort(arr.slice(mid));

    return merge(left, right);
}

function merge(left, right) {
    let result = [];
    let i = 0, j = 0;

    while (i < left.length && j < right.length) {
        if (left[i] < right[j]) {
            result.push(left[i]);
            i++;
        } else {
            result.push(right[j]);
            j++;
        }
    }

    return result.concat(left.slice(i), right.slice(j));
}

Explanation: Merge sort divides the array into halves (log n steps), then merges them in linear time for each level of recursion, resulting in O(n log n) time complexity.

Space Complexity

Space complexity measures how much memory an algorithm uses based on the input size. Some algorithms might require a lot of extra memory, while others might need very little.

For example, if you're sorting a list in place (without creating extra copies of the list), the space complexity could be O(1), meaning it uses a constant amount of memory. But if you need to store additional data for each input element, the space complexity might be O(n), meaning the memory usage grows linearly with the input size.

Here are some common space complexities, accompanied by code examples, to help you start recognizing and understanding them more effectively.

O(1) - Constant Space Complexity

The algorithm uses a constant amount of memory, regardless of the input size.
Example:

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

Explanation: This function uses a fixed amount of space to store the parameters a and b.

O(n) - Linear Space Complexity

The algorithm uses space that grows linearly with the size of the input.
Example:

const duplicateElements = (arr) => {
    const result = [];
    for (let i = 0; i < arr.length; i++) {
        result.push(arr[i]);
    }
    return result;
}

Explanation: We create a new array (result) that grows in size as the input array grows, so the space complexity is O(n).

O(n^2) - Quadratic Space Complexity

The algorithm uses space that grows quadratically with the input size.
Example:

const createMatrix = (n) => {
    const matrix = [];
    for (let i = 0; i < n; i++) {
        matrix[i] = new Array(n).fill(0);
    }
    return matrix;
}

Explanation: The function creates an n x n matrix, which takes O(n^2) space.

O(log n) - Logarithmic Space Complexity

The algorithm uses space that grows logarithmically with the size of the input, often found in recursive algorithms.
Example:

const recursiveFactorial = (n) => {
    if (n === 0) return 1;
    return n * recursiveFactorial(n - 1);
}

Explanation: The space complexity here is O(log n) because of the depth of the recursion stack.

O(n) - Linear Space Complexity in Recursion

In some recursive algorithms, the function call stack can grow linearly with the input size.
Example:

const fibonacci = (n) => {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

Explanation: In this recursive Fibonacci function, the function calls grow linearly as n increases, so the space complexity is O(n).

Why Big-O?

Big-O Notation is a way to express the efficiency of an algorithm. It helps us compare different algorithms by describing how their time or space requirements grow as the input size increases. Big-O ignores specific details (like exact time or memory usage) and focuses only on the growth rate.

In simple terms, Big-O gives us a way to talk about how an algorithm scales and whether it will maintain its efficiency with large inputs or crumble under the strain of excessive slowness or memory demands.

Keep these rules in mind as you learn and practice, and continue applying these concepts to various problems. With consistent practice, you'll move closer to mastering the art of analyzing algorithms and optimizing their efficiency.

How can data validation for form inputs be handled both in HTML and JavaScript and Why is it beneficial to use both!

Juan Garcia — Thu, 28 Nov 2024 02:56:56 +0000

HTML handles data validation for forms through attributes that specify the type of input, the pattern or the minimal amount of characters we're expecting an user to enter on an specific field.

<input type="text" name="username" pattern="[A-Za-z]{5,9}" required>

And we could simultaneously specify other input validation handlers using JavaScript.

document.querySelector('form');.addEventListener('click', (event) => {
    const username = document.querySelector("input[name='username']")
    if (username.value.length < 5) {
        event.preventDefault(); 
        alert("Username must be at least 5 characters long.");
    }
});

The code above handles the submission of form input data by preventing the default behavior of the submission event until the username input is entered by a user with more than 5 characters.

It's beneficial to use both of these methods when validating form inputs because both offer different tools that when combined give us a more secure and dynamic way of validating form data.

While Loops

Juan Garcia — Tue, 26 Nov 2024 02:32:17 +0000

You can think of a while loop as a board game that goes on an indefinite amount of times until a winner is found, We have a clear vision of what we need to do to win the game but we're not sure of how long it will take since its dependant on outside factors like chance, number of people playing the game.

Check out this example:

let user1 = 0;
let user2 = 0;
let winScore = 3;
while(user1 < winScore && user2 < winScore) {
    let dice1 = Math.random()
    let dice2 = Math.random()
    if (dice1 > dice2) {
      user1 += 1;
    } else if (dice2 > dice1)  {
      user2 += 1;
    }
    if (user1 === winScore) {
      console.log('user1 is winner');
    } else if (user2 === winScore) {
      console.log('user2 is winner');
    }
};

The syntax of a while loop is pretty straightforward, While a condition is true or false we want to execute a piece of code. The condition is always placed inside parentheses right after the while keyword, and as long as that condition is met we're running a piece of code that in most cases, to not create infinite loops we want that piece of code inside of the loop to modify the variables being evaluated in the condition. (the block of code after the while loop statement goes in between a pair of curly braces);

What are Functions?

Juan Garcia — Tue, 26 Nov 2024 01:52:17 +0000

Explanation of the concept with an analogy:In JavaScript, a function is like a tool in a toolbox. we can have many functions in our program that perform different tasks depending on the input, in the case of a tool, you can imagine a drill and the drill bit which is the part of the drill that you can change depending on what material you are working on.
For example, if I were working on metal I would need to equip my drill with the appropriate drill bit to get the job done, So you can think of the material as the parameter to take into consideration when drilling which would be the function, the execution of an action.

Check out this example:

const drill = (material) => { 
  if (material === 'wood') {   
    console.log('Use point bit'); 
  } else if (material === 'metal') {
    console.log('Use cobalt drill bit');
  }
}

Explanation of the syntax.
So first we start by declaring a const variable which is a means of storing a value belonging to a specific data type. By data type, I'm referring to what type of value are we working with. For now the main primitive types to consider are:

string = piece of text, you write a string inside of '', "" or ``. (The quotes are important because they tell our program that the text is a string and not a variable name).
number = a number (1, 2, 3, 4...etc)
boolean = true or false value, useful when checking conditions.
undefined = variable hasn't been assign a value.
null = 0

in this case, we are storing a function in our drill variable, and we know because of the following syntax that drill is a function () => {}. The parentheses are where we can specify if we want people to pass inputs to our function to get customized behavior, in this case, we set the value, in programming terms parameter to (material) which means we expect the user to input a material to know which drill bit to use. then we have an arrow which is a concise way to define a function and the curly braces where we will write the code we want our function to execute.

Welcome!

Juan Garcia — Mon, 25 Nov 2024 23:50:49 +0000

My name is Juan Felipe, though I prefer to go by Felipe. I'm someone who's deeply passionate about learning. From a young age, I've enjoyed the process of practicing and improving to master new skills. Growing up, I developed a love for rock music, largely thanks to my dad, a devoted Guns N' Roses fan. I was fascinated by how effortlessly musicians seemed to play their instruments, and I became determined to teach myself the guitar. The more I practiced, the more I improved, and the joy of entering a flow state kept me practicing for hours on end. Encouraged by my progress with the guitar, I decided to learn the piano as well. Little did I know that this journey would eventually lead me to where I am today. A few years ago, I had a conversation with a software engineer who had recently graduated from college. He shared some of the personal projects he'd worked on during his studies, and I was blown away. His work sparked a flood of questions in my mind, and he recommended I try Harvard's CS50 online course as a starting point. As I dove into the course, I became captivated by computer science. This interest led me to earn a certification in the field from Stanford University, and eventually, it brought me to web development. Currently, I'm enrolled in a web development program sponsored by Marcy Labs School, where I'll accumulate over 2,000 hours of technical practice. It's been an exciting and rewarding journey, and I'm eager to continue learning and growing in this field.