DEV Community: Monique Avila

Fibonacci for newbies!

Monique Avila — Thu, 25 Jan 2024 02:54:43 +0000

The last few days I have been studying data structures and algorithms to prepare for potential upcoming interviews as well as taking on leetcode problems. So lets solve the leetcode problem #509 Fibonacci Number!

I want to write this article to help solidify the knowledge I've learned and maybe this will help out another newbie as well.

So what is this Fibonacci that's been mentioned?

The Fibonacci sequence is the integer sequence where the first two terms are 0 and 1. After that, the next term is defined as the sum of the previous two terms. Source

What does this really mean? 🤔

Essentially we take the initial terms 0 and 1, then add those together, then we continue on to the next set of terms which would be 1 and 1, then those are added together to get 2. Then 1, 2 to get 3 and so on. You would continue to add the numbers similarly to get the respective Fibonacci numbers, (check out the banner picture above to see what I mean).
All this being said the terms added together are the Fibonacci numbers so the 10th Fibonacci number is 55 as seen below.

Let's take this simple fib function for example:

const fib = (n) => {
  if(n <= 2) return 1;
  return fib(n - 1) + fib(n - 2);
}
console.log(fib(10));
// 55 is returned in the console

Let's break this down so we can understand what's happening in this fib function.

So in the argument we are expecting an integer of n (Remember in this example, we are calling fib and passing in 10), then we are checking if this integer is greater than or equal to the number 2*.
Else if n IS NOT equal to 2 or less, calculations begin to find the answer.
(*2 because remember the Fibonacci sequence has two terms! 0 and 1 these are the base case so once n is less than 2, the if code block will be triggered and then 1 would be returned)

Let's explain this part! 👩🏻‍💻

The first fib(n - 1) is subtracting 1 from the left term and then fib(n - 2) is subtracting 2 from the right term and then we are adding those together. Subtracting 1 from the left term and 2 from the right term is really because of the Fibonacci sequence definition itself.

Remember that F(1) = 1, and for n greater than or equal to 2, the nth Fibonacci number (F(n)) is defined as the sum of the two previous terms: F(n - 1) + F(n - 2).

Let's visualize the function in action!

Click to view Fibonacci call stack visualization

Hopefully seeing what this looks like helps piece everything together better! Now as you can tell from the visual how big the call stack would be if n was a large number! This would cause the function to take a long time to finish because essentially a lot of the terms are repeated. Knowing this we can tidy up this function and make it operate faster by memoizing the value of n and if it has already been 'shown' we will skip it, saving some time!

In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls to pure functions and returning the cached result when the same inputs occur again.
Memoization

Memoizing Fibonacci!📝

const memoFib = (n, memoize) => {
 memoize = memoize || [0, 1]
 if (n !== undefined) return memoize[n];
 return memoize[n] = memoFib(n - 1, memoize) + memoFib(n - 2, memoize);
}
console.log(memoFib(20));
// console returns 6765

Now let's break down what has changed and why it is faster.
As you can see we added another argument to the function, memoize. Inside the function we initialize memoize telling Javascript this should either be the incoming memoize if it's not undefined other wise memoize will be an array of [0, 1]. This is because we are telling the function these are the base cases so basically we do not want to 'see' these terms again. By excluding these base cases from further computing, the function skips redundant calculations, enhancing its speed.

The next line of code is the most crucial for this optimized function! We are checking if n is defined or not within the memoize array and if it is defined we are going to return n from the array since the calculations are already completed

Lastly, the final line of code calculates the fibonacci value for the current value of n by adding the results of the two recursive calls: memoFib(n - 1, memoize) + memoFib(n - 2, memoize).
The result is stored within the array at the index of n, so when another call appears with the same n, the calculated value can just be grabbed from the array instead of redoing the calculations.

This is how the function can be optimized and shed off some time by not having to do repeated calculations!

Hopefully by now you understand Fibonacci a bit more, I know I do! Try it out for yourself and go and challenge yourself to solve the easy leetcode question! Once you do try to beat your previous runtime! If you're bold try the other difficulty questions! Remember practice the HECK out of what you learn to really lock it into your brain!

Conclusions

I'll admit when I initially began learning about data structures and algorithms I was super intimidated and thought "Wow! I may be in over my head! 😅" I really do get a kick out of pushing myself to do things I didn't think I could do before though!

But of course anything new is scary or overwhelming, (or admittedly a bit of both).

To be completely honest going into such depth of learning about this recursive function and the type of data structure it outputs has taught me a lot and gives me a better grasp on the logic! I'll be writing more as I continue to learn about data structures and algorithms. I honestly feel such a sense of excitement of what else can I learn when it comes to coding! Anyone else feel that way?

Feel free to leave feedback or drop something that helped you learn data structures and algorithms!

Until then let's squash these bugs! Connect with me on my socials found on my personal website!

My first time using TypeScript

Monique Avila — Fri, 12 Jan 2024 04:51:55 +0000

Introduction

Hey everybody!

We are officially into 2024, and I just finished up creating the backend for my upcoming project! As you may or may not know, December 7, 2023 I graduated from FullStack Academy's Web Development bootcamp and we were given a last project to work on beyond graduation.

I wanted to challenge myself and also incorporate typescript into my project as well so I can add another tool to my arsenal. Because of this challenge there has been some slight learning curve but for basics, if you are familiar with javascript then you should not have too much of a difficult time tackling typescript!

Javascript vs Typescript

So what's the difference between javascript and typescript?

One key difference is typescript has what's called a type system. This basically means that typescript keeps track of 'somethings' type, here let me explain.

const favNum: number = 3;

Here I declared a variable named favNum with type of number and gave it the value of 3. Don't worry you wouldn't need to declare a type for every variable! Typescript is smart enough to know that favNum is a type of number without being told so and plus that would be sort of redundant. I just wanted to share an example and I know you might be asking yourself,
'So why is this better? Is this not more code I would just have to write?'

Why use Typescript?

In short typescript can save you a ton of time in the debugging stage! And while yes it is technically writing more code but it's for good reason! I will use some real examples of instances where typescript helped me prevent an error from happening or fixing an error in a shorter amount of time from my recently completed project.

Take this code for example:

const userGoal = req.body;
let dictionary = {};
        Object.keys(userGoal).forEach(function (key) {
          dictionary = { ...dictionary, [key]: userGoal[key] };
        });

As you can see, I want to create an object named 'dictionary' with the incoming data within 'userGoal.' Now, nothing is wrong with this code, and it works as expected during my testing. However, this is where I believe TypeScript's type system may have saved me from a future error, thereby saving me time. I noticed that when hovering over the 'dictionary' variable, it showed a type of 'any.' This means TypeScript doesn't know what kind of data this variable should hold. While this is not necessarily bad, it is good practice to implement TypeScript's 'types' in situations like this. I also believe having types would help prevent a user error from occurring in the future if 'dictionary' still had a type of 'any.

Here's how I gave my dictionary object a type of:

// Here i create the interface outside of my server route and declaring what each 'key' should be so Typescript knows what to expect.
interface MoneyGoal {
  user_id: number;
  money_goal: number;
  frequency: string;
  target_date: Date;
  payment_amount: number;
  created: Date;
}

// We then change the dictionary line a bit, declaring exactly what each key's value should be and from where they're coming from.

let dictionary: MoneyGoal = {
          user_id: userGoal.user_id,
          money_goal: userGoal.money_goal,
          frequency: userGoal.frequency,
          target_date: userGoal.target_date,
          payment_amount: userGoal.payment_amount,
          created: userGoal.created,
        };
// And also remove the Object.keys function

So what's the point?

Adding an interface provides static type checking and allows typescript to catch type errors at compile rather than runtime.
In other words typescript really loves structure and is only concerned that the data it receives matches the structure its given. This is why typescript is known as a structurally typed type system. Something I noticed is typescript also helps aid your code editor with autocomplete!

Another honorable mention I want to include is Promise types. They look like this
Promise<t>
This is a generic type where the t is a placeholder for the type of data the Promise will eventually complete.

Why are they used?
As you know a promise represents a value that has not yet been created but will be sometime in the future.

Promise type example

interface User {
id: number;
username: string;
email: string;
}

async function createUser({ username, password, email, } : CreateUserParams): Promise<User> {
// Rest of code for function...
}

So createUser is a function that creates a user therefore this is asynchronous code and we are letting Typescript know that at the end of this function you will receive this object named User with included properties.

Typescript helps squash bugs!

In short the reasons we would use this is code readability, allowing the data readers to know exactly what they can expect from this function. Another big reason is Typescript is able to see the expected type from the expected Promise and will provide feedback if there is any mismatches.

My thoughts

Honestly my thoughts as someone who has used Typescript for the first time coming from Javascript background, I indeed enjoyed using Typescript a lot! Once you get passed the learning curve with knowing what types to use or why exactly typescript is 'angry', creating my backend for my project was faster than I originally thought it would take me and once I got into my testing all my created server routes I had less errors and if I did Typescript made the errors less of a hassle to find and fix the bugs!

Closing

Thank you for reading! I'm excited to jump into the front end development for this project and continue learning and using more of what Typescript has to offer! I hope I helped another newbie out there who may be starting out with Typescript as well!

What's your thoughts about Typescript? Let me know in the comments!

Until next time,
Let's squash these bugs!

Sources here

My portfolio

My personal website!

Monique Avila — Fri, 22 Dec 2023 04:51:49 +0000

Post graduation, hooray!

Hello world!

It's been roughly two weeks since I finished up the software engineering bootcamp with Colorado State University and Fullstack Academy. What have I done? Well for starters I made a brand new personal website page! I actually just finished up with it recently and am wanting to show it to the world!
Check it out here!

Before I begin to talk about my personal website, I would like to introduce myself! I'm Monique! I'm 31 and coming from a non-traditional background. I grew up always having such a fascination with computers and anything electronic really. I was the kid always fixing the wifi or the family computer. Still am.

As a bootcamp grad I've worked with what is known as the P.E.R.N stack or Postgres, Express, React and Node Js. I am currently learning Typescript as well as tailwind as I'll soon mention.

My goal is to now work towards getting a software developer job! I want to write about what project I've been working on or something new I've learned. Basically my journey from bootcamp grad to jr developer! I believe documenting my journey may help someone out there as well or at least that is my hope! Okay let's get into my new project!

To start out I learned a new CSS library called Tailwind CSS. I found it a lot easier to use because you can style as you go and for me that's perfect because I'm such a visual learner. Plus it goes great with saving a few seconds from having to switch over to your css file! I am definitely going to keep using this library. I found tailwind super beneficial for me because of how much I will write some code and go and add styles to it for my visual pleasure. So if you're a visual learner like myself I would highly recommend taking the time to make a project with tailwind and see if it improves your productivity.

I also used React scroll for a smooth scrolling experience when a user interacts with the navbar, React slider to showcase my portfolio with a corresponding description and a link to the project live url. This added to the simple design concept I was also aiming for with my site.

All in all this project taught me some new skills to add to my developer belt!

Thanks for reading my first blog ever! I hope to add a new perspective with my content along my journey and maybe even help someone learn something new.

Let's squash these bugs!