DEV Community: Dev Duckling

Loop over iterable and object with for..in and for..of

Dev Duckling — Sun, 30 Apr 2023 08:42:48 +0000

In the world of loops, there are for..of and for..in statements that I'm going to discuss.
for..of is mostly used to loop over arrays, strings, map,..etc.

Syntax:
for(items of array){
console.log(items);
}

Let's understand for..of
I used names from anime Demon Slayer in below examples. This is my first time embedding pen into blog and it is not showing console, meh.

So if you look at the code I have made an array named Japan just for making code more readable. Goal is to access the hashiras from nested array. For loop can be used but it is not readable like for..of.

for..in is used to loop over objects. You can use for..of too with slight adjustment.

Syntax:
for(key in object){
console.log(key);
}

Have a look at the code maybe visit pen if possible as console is not showing up. In the above pen I have made object demonSlayer. Goal is to use for..in and get key and value from the object, which is in the console.

You cannot iterate over object as for..of won't work but it is possible to select object's key or value and iterate over them by method Object.value and Object.key, fork above pen and try below code

for(hashirasElements of Object.keys(demonSlayer)){
console.log(hashirasElements);
}

for(hashirasNames of Object.values(demonSlayer)){
console.log(hashirasNames);
}

The above code would give you keys and values from our object using for..of.
That's it! Thanks for reading this blog!

When to use forward slash in file path?

Dev Duckling — Wed, 19 Apr 2023 13:23:21 +0000

You might ask, Why am I writing this blog?
Because I recently struggled for like hours. While building my capstone project 2, everything was going fine locally but when I merged my branch to main and checked site on Github pages then nightmare began. My responsive web app suddenly became static web app(links were not working, image were broken and on clicking DevDuckling it was showing '404') I messed up in file paths of links and images

I will quickly explain when you do not need and need to use / and ../
In below will be the example code, I have used my favorite anime characters as file names.

So Makima wants to have Naruto's picture in her file. She would look for path which is above current folder. Then she might use ../

<section>
<h1>../ means file is present in (one level above or above current folder)</h1>
<img src="../naruto.jpg" alt="naruto">
</section>

Now Makima wants to have Jiraiya's picture in her file. She would look for path which is on root file(top level). Then she might use /

<section>
<h1>/ is top most level that is root file</h1>
<img src="/jiraiya.jpg" alt="jiraiya">
</section>

In VS code press ctrl + space key gives you suggestions that is helpful.

Thank-you for reading this blog! I will try to write next blog soon and forgot to mention it was my first blog to dev.to haha. If anyone has suggestions, happy to apply on next blog! As every famous creator says react, comment, share and follow. Happy codding!