DEV Community: Jahkamso

What are "for loops" in JavaScript?

Jahkamso — Fri, 23 Aug 2024 18:45:58 +0000

Imagine you're in a hall (a ball room), all the chairs are disorganised, and your task is to arrange them. Where would you start? Obviously, you'll either go row by row or column by column, but it's going to be sequential/orderly.

The same is true when it comes to "for loops". It's basically a way to go through a list of data and present them one after the other till you get to the end.

An example of "for loops":

const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

In the example above, there's an array of data containing fruit names. The "for loop" goes through all of them and prints them out in the console, one after the other.

This explanation is short, but I hope you understand "for loops" better.

Create Api Endpoint in Next.js

Jahkamso — Fri, 14 Jun 2024 18:20:57 +0000

I recently learned I could create an api endpoint in nextjs without having to use node/express. I'll share my little knowledge on what I've learned and how you can start creating api endpoints in nextjs.

First you need to initialise a next app

Once the new project is created, you should have something like this when you open up your project👇🏻

Now, it's time to create some folders (nextjs uses folders for routing). Create 2 folders inside the app folder with a new file called hello.js. It should look something like this👇🏻

It's time to throw the boring stuff in the trash

Let's create our first endpoint, which is going to be a GET request. First, we need to import some things from next/server👇🏻

This 2 imports we've made are basically telling nextjs that we want to be able to send a response and make a request, similarly to the request and response argument in nodejs.

Now, let's create a simple function for our GET request. Here's how you do it👇🏻

To test if this works, start your project by typing npm run dev in the terminal. Now, head over to postman or use an extension in vscode called Thunderclient, and then add this url http://localhost:3000/api/endpoints.

You should have something like this👇🏻

Great! Now we've successfully created a GET request, now what? Well, now it's time to learn how to create a POST request to be able to get information from users on the frontend.

To do this, we basically repeat the same thing but with some little tweaks as shown below👇🏻

Now, let's try making a POST request in postman/Thunderclient. The result should be something like this👇🏻

Awesome work! You now know the basics of creating endpoints in nextjs

JavaScript Functions Dumbed down

Jahkamso — Mon, 20 May 2024 09:38:59 +0000

What the hell is a function?

Well, a function is a reusable code (which means you can call it to use at different places in your project). I know you're probably wondering what nonsense I'm talking about, but hold on I'll explain better.

We all have trash cans at our homes, correct? Now, what do we use those trash cans for? We obviously throw our waste in it (i.e biscuit wrappers, nylons, etc...). Do these trash cans have a fixed place that they can never be moved from? The trash cans can obviously be moved to different places, correct?

Now, when you move the trash can to a different place, does it change from a trash can to a box? The answer is obviously not. So what's the difference? The difference is the contents in the trash can, because you can move the trash can anywhere in the world, but it's still a trash can, and we can empty the contents each day so that we can use it again.

This is exactly what functions do in JavaScript. Take the following codes as an example:

Let's say you created a function to get someone's favourite colour

function favouriteColour(colour) {
  const userFavouriteColour = colour;
  return console.log(`The user's favourite colour is ${userFavouriteColour}`)
}

Now, we can see in the function above gets the user's colour by passing it as a parameter [the value between the parenthesis function(colour)] and returns the text that tells you the user's favourite colour return console.log(). We finally call the function and pass a colour to it as an argument favouriteColour("blue").

Let's take this function and try to call it (or use it) somewhere else. Take for example we have a second user and we have a second user and we want to get their favourite colour using the function we've created. The code below shows how this will work without changing the initial function itself.

function secondUser() {
  favouriteColour("pink")
}

You'll notice in this new code, we the function we declared earlier, and only changed the argument from blue to pink. If you run the code, you'll notice that it shows the text, with this new user's favourite colour.

What magic happened here? Well, if you recall the example of the trash can, you'll understand that just as we can move the trash can and it still remains a trash can and carries out the function of a trash can. This function works the same way, in the sense that we are using it somewhere else, the only difference is the content (colour). It stills carries out the role of printing out the user's favourite colour.

I hope this gives you a better understanding of functions and how they work. I know this one's a bit lengthy, but I wanted to go a bit deeper to explain the concept with real world and code examples. Till next time....

Byeeee!

Version Control Explained | Git

Jahkamso — Fri, 29 Mar 2024 14:27:36 +0000

Alright, so what the heck is version control? Well the way I like to think of it is with an example. Imagine you wake up, bathe, dress up, go to work, etc... but then there's a little robot with a camera following you around, taking pictures of your every change in movement and place.

Now, in programming, this little robot is called Version Control, watching every change you make in your code and saving them in a little folder where you can come back and see the break down of everything you've done, every change you've made. That is what version control does for you with your code.

But it goes more than just watching you alone. Imagine you have a friend over, now that little robots expands it's camera lens to pick up a wider angle to capture everything you and your friend does, saving them in an organised way that shows you what changes you and your friend made throughout the day.

Now let's bring this example to programming. You're working with a team at your company, you and your teammates work on different parts of the project and make different changes. The same way this little robot watches you and your friend, it also watches the changes you and team members are making, then it shows all the changes made and who made the changes so that everyone knows what they've worked on and makes Collaboration easier.

We now know what version control is and how it can help us in our work.

If you learned anything from this article, drop a like, share, and follow to be notified on my next post. You can also check out my Youtube channel for some visual contents :)

My First Blog on daily.dev

Jahkamso — Thu, 22 Feb 2024 22:52:25 +0000

Hello world! This is my first blog on daily.dev :)
I'll publish better content tomorrow