A lot of options when you face a looping condition in Javascript [Basic - Part 1]

So many loops conditions for you to choose to solve your case.

Pandhu Wibowo

10 months ago | 2 min read

Original article on https://medium.com/dev-genius/a-lot-of-options-when-you-face-a-looping-condition-in-javascript-basic-part-1-dda8d76afaf1

Hi everyone, I’m Pandhu Wibowo and I’m a Software Engineer. Welcome to my blog.

Today, I’ll discuss about of many choices as a Javascript developer when facing a looping condition.

A lot of choices loops in Javascript. You should really be careful when you any loops condition.

Loops condition usually used for handle the object selection or inside array. You can search the value, recreate the array, find value inside an object, etc. If you are beginner about Javascript, you should know about those. Because so many options to choose it. So, let’s dive in.

for

The number one, for statement is standard of you to should know how to handle iteration. The for loop is more complex, but it’s also the most commonly used loop.

The for statement creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement (usually a block statement) to be executed in the loop.


for (begin;condition;step) {  // your statements}

For example,


for (let i=0; i<10; i++) {  console.log(i)}


//Output:0123456789

Let us break it down part by part.

begin, is initialization. Starter of loops.
condition, have value true or false. The loops will be stopped if condition is false.
step, is repeater condition if value always true.

For example in above,


for (let i=0; i<10; i++) {  console.log(i)}

we have variable i with type is let (begin).
the condition have i < 10. It means i should be smaller than 10.
step, if i smaller than 10 (true), run again and again during i bigger than 10.

forEach

forEach is function such of for … of or for as ordinary loops. Another way to loop value, index, or array value.

For an instance,


const number = [1,2,3,4,5]


number.forEach(value => {  return value})


// 1// 2// 3// 4// 5

I have case for this loop, don’t use this function if inside this loop have any asynchronous process.

It will be skipped in the process, eventhough you already set the “await” statement.

for … of

I really often use this function. Because what ? Cause with this function, your code are simple and readable compared to using regular for. Looks easier to use it.

For example,


const data = [  {    firstname: "Pandhu",    lastname: "Wibowo",    age: 17  }]


for (const val of data) {  console.log(val.firstname)  console.log(val.lastname)   console.log(val.age)}

You can access directly without index parameter, and so readable it.

find

Last but not least, find function returns the value of the first array element that satisfies the provided test function.

find() Syntax

The syntax of the find() function is:


arr.find(callback(element, index, arr),thisArg)

Example :


const ages = [18, 19, 20, 21]


const findAge = (age) => age === 18


const age = ages.find(findAge)


// 18

A lot of options when you face a looping condition in Javascript [Basic - Part 1]

So many loops conditions for you to choose to solve your case.

Read more my articles