DEV Community: Aashritha Shiva

Possible ways of Iterating ARRAYS in JavaScript

Aashritha Shiva — Fri, 29 May 2020 10:38:39 +0000

Arrays are used to solve most of the coding problems. So when starting with this, there raises a question for everyone i.e “What are the possible ways to iterate arrays and opting which would be the best?”. The main aim of this blog is to find the possible ways and which method performs best.

1. for :

The “for loop” is the common way of iterating an array. The syntax of for takes an initialization followed by condition and then by increment/decrement operation. The example code below depicts the usage of the “for”.

If the condition is written as “i<a.length”, the for loop calculates the length of the array for every iteration and increases the time. So, calculate the length priorly and store it in a variable and make use of it everywhere. This improves the performance of the code.

2. forEach :

“forEach()” invokes the callback function, which is being given, for each element of the array. forEach works only for arrays. The example code below depicts the usage of the “forEach”.

3. while :

“while” is an entry-level condition checking control statement. The condition is being provided to the while loop and if the loop accepts that condition, the control enters into it and executes the statements. If the condition becomes false, the control moves out of the loop. The example code below depicts the usage of the “while”.

4.do-while :

The do-while loop performs exit-level condition checking. So this loop executes a block of code at least once even when the condition is false. The example code below depicts the usage of the “do-while”.

5.for…of :

The for…of statement is used to loop over the data structures that are iterable such as Arrays, Strings, Maps etc. It calls a custom iteration hook with instructions to execute on the value of each property of the object. The example code below depicts the usage of “for…of”.

6.for…in :

for…in is mostly used to iterate over the properties of an object. As for..of operates on the data items of the array directly, for…in loops through the indices of the array. So we must log “a[i]”.The for…in iteration happens in an arbitrary order. The example code below depicts the usage of “for…in”.

7.filter :

“filter” takes an array and filters out unwanted elements based on the condition provided. This way helps us avoiding usage of for or forEach along with conditional statements. It is an available method only for array and the first argument of that is callback. After the callback is executed, a new array is returned with the required result. The example code below depicts the usage of “filter”.

8. map :

There will be a condition that raises for us when we are working with arrays demanding a modification of array elements. “map” method helps us achieve that. It is an available method only for array. Similar to “filter”, map executes a callback on each element and returns a new array with the required result. The example code below depicts the usage of “map”.

Now we have seen the possible ways of iterating the arrays and performing operations on the array elements. FEW THINGS TO BE NOTED…

It is most commonly suggested that “for…in” not to be used with arrays because we can’t guarantee that the iteration happens in sequence.
Make better use of ES6 functions map and filter as they make our work more simpler.
“map” creates a new array by transforming every element in an array individually. “filter” creates a new array by removing elements that don’t satisfy the condition.
The callback function for the “map” function must have a “return” statement. However the single liner arrow functions use the implicit return but when using {}, “map” assumes it as a body and demands for a return statement.

When an explicit return is not given, “map” returns undefined but “filter” returns an empty array.

The performance of for…of loop is great compared to for...in and forEach. If it is a casual iteration, it is mostly suggested to go for “for”.

Make use of the above-mentioned methods depending on the situation. I hope this blog helps you better understand the ways of iterating arrays in JavaScript.

Feel free to put your feedback. :)

Thank you guys!

A Quick Self-learning tip

Aashritha Shiva — Tue, 26 May 2020 08:55:51 +0000

Hello Everyone

This is just a random post that might help self learners. Let's look into it.

Yesterday I have come across a question " I have so many resources , I've registered courses in more than one resource and now I'm confused about which one to prefer and I feel like I'm lost and not learning anything " .

This kind of questions will be common in most of them ! Even I was into this situation in some phase of my life.

The best thing I want to mention about this is ... "Do not expect some course to give you entire knowledge about that language/library/framework or anything that you are learning". Instead make list of resources, compare the topics, find one good resource(based on topics it is providing/way of explanation), follow docs simultaneously,read books and blogs . This helps you gain more knowledge in the language you are learning !!

Keep going guys !
Thank you !

Is Commenting Code that necessary?

Aashritha Shiva — Sun, 24 May 2020 16:57:18 +0000

So We’ve seen people often suggesting to comment while coding. Let’s together find out what the comments are and how are they really helpful.

“Comments” are the text that is being added to the computer programs to better understand the implementation logic.

In technical terms, “ A comment is a programmer-readable explanation or annotation in the source code of a computer program.” (source: wiki)

There is a phase where everyone thinks that “As I’ve written the code I can better understand it !! so what is the need of commenting? “
Or
“Whom do the comments in my program help? “
Or to be simpler
“What is the use of writing comments? “

I’m gonna crack all these answers for you now…! :)

For instance, you’ve put your code in an open-source platform and users try to read it. What if they couldn’t cope up with the flow?
When we are writing smaller programs, it is okay to understand the code and logic with little hard work. But when we are trying to build larger applications where one file is linked to another or data is being rendered from other files, commenting can help you better understand the overview of code working.
The two important scenarios where comments help are :

People who are referring to your code can easily go through the flow as the comments prevent one fight with the logic.
You can understand your code when you read it after years (happens with most programmers ).

How should be the comments?

Try to keep them relevant.
Don’t write bigger comments, keep it short and simple.
Don’t use it everywhere. ( Find the toughest code lines to comment).

For example, we are commenting an HTML file,
The comment should be in such a way that it should give a description (one line) about the tag and any ids or classes included in it.
So try to comment your code so that it helps for your future reference and also to those who are willing to refer your code.
I hope this helps you.
Do drop your feedback :)
Thank you guys. !