Total time: 20 minutes 
Updated: December 3rd, 2019
Calling all writers!

We’re hiring. Write for Howchoo

pi
PRIMARY
215 guides
electronics
8 guides
Howchoo YouTube Profile Picture howchoo
Calling all writers!

We’re hiring. Write for Howchoo

Tyler's profile pictureTyler
Joined in 2015
Software Engineer and creator of howchoo.
For Raspberry Pi beginners who still love to follow along in a book.
Michael's profile picture MichaelView
In these interests: booksretropiepi
What’s better than an experiment? An experiment in space!
Michael's profile picture MichaelView
In these interests: kidspinews
In these interests: pi
Kali Linux is a great distribution for Raspberry Pi users who want to get to grips with security testing.
The Raspberry Pi micro-computer grows in power with each new model release, with more resources that make it a more capable, low-cost content server for your media and resources.
Laptops, smartphones, tablets, even lightbulbs—an endless number of devices now have the ability to connect to your local network and the wider internet.
The Raspberry Pi was designed to boot from an SD card, but in some cases, it’s convenient to boot from a USB drive.
Get the new official Raspberry Pi OS on your Pi.
New to the Raspberry Pi? Start here.
Blocking ads just got easier with Pi-hole, a network-wide ad blocker for the Raspberry Pi
Don’t skip out on a proper case for your Pi 4.
The only Raspberry Pi Bluetooth guide you’ll ever need.
Your favorite MS OS on the Pi.
pi
PRIMARY
The Raspberry Pi is a small, inexpensive computer developed by the Raspberry Pi Foundation in the United Kingdom.
For those who love hobby electronics, burning themselves on soldering irons, and figuring out how the world works.
Updated: December 2nd, 2019
Build Your Own Google Home-Enabled Smart Mirror in About Two Hours Build Your Own Google Home-Enabled Smart Mirror in About Two HoursMagic mirror, on the wall, turn off the lights.
Calling all writers!

We’re hiring. Write for Howchoo

pi
PRIMARY
201 guides
woodworking
18 guides
magicmirror
4 guides
Calling all writers!

We’re hiring. Write for Howchoo

Zach's profile pictureZach
Joined in 2015
Web developer, designer, tinkerer, and beer enthusiast living in Tampa, Florida.
Raspberry Pi livestreams each Thursday with new things for kids to code!
Michael's profile picture MichaelView
In these interests: kidsnewspi
For Raspberry Pi beginners who still love to follow along in a book.
Michael's profile picture MichaelView
In these interests: booksretropiepi
What’s better than an experiment? An experiment in space!
Michael's profile picture MichaelView
In these interests: kidspinews
Kali Linux is a great distribution for Raspberry Pi users who want to get to grips with security testing.
The Raspberry Pi micro-computer grows in power with each new model release, with more resources that make it a more capable, low-cost content server for your media and resources.
Laptops, smartphones, tablets, even lightbulbs—an endless number of devices now have the ability to connect to your local network and the wider internet.
The Raspberry Pi was designed to boot from an SD card, but in some cases, it’s convenient to boot from a USB drive.
Get the new official Raspberry Pi OS on your Pi.
New to the Raspberry Pi? Start here.
Blocking ads just got easier with Pi-hole, a network-wide ad blocker for the Raspberry Pi
Don’t skip out on a proper case for your Pi 4.
The only Raspberry Pi Bluetooth guide you’ll ever need.
pi
PRIMARY
The Raspberry Pi is a small, inexpensive computer developed by the Raspberry Pi Foundation in the United Kingdom.
“He who works with his hands is a laborer. He who works with his hands and his head is a craftsman. He who works with his hands and his head and his heart is an artist.” – Francis of Assisi
Mirror, mirror on the wall: who’s the nerdiest of them all?
Ash's profile pictureAsh
Joined in 2018
Ash is an experienced tech writer with an endless passion for technology. She enjoys retro gaming, 3D printing, and making awesome projects on the Raspberry Pi.
Related to this guide:
Make Money 3D PrintingMake Money 3D Printing
You can’t print money, but you can make money printing.
Ash's profile picture AshView
In these interests: 3dprinting
The Spaghetti DetectiveThe Spaghetti Detective
Access OctoPrint from anywhere with this OctoPrint Anywhere replacement.
Ash's profile picture AshView
In these interests: pioctoprint3dprinting
People also read:
3D printing on glass bed
How to choose, install, and use a glass bed with your printer.
3D-printed Raspberry Pi cases
Build your dream case one line at a time!
Time for this project to take shape.
APPROVED! REJECTED! APPROVED!
Yes the holidays are already here!
Get the printer ready, it’s time to play!
Posted in these interests:
3dprinting3dprinting
3dprinting
PRIMARY
Think of it like a 2D printer, but with an extra dimension.
Discuss this guide:
We’re hiring!
Are you a passionate writer or editor? We want to hear from you!
We’re hiring!
Are you a passionate writer or editor? We want to hear from you!

Want to support Howchoo? When you buy a tool or material through one of our Amazon links, we earn a small commission as an Amazon Associate.

Want to support Howchoo? When you buy a tool or material through one of our Amazon links, we earn a small commission as an Amazon Associate.

JavaScript for loops

My journey trying to find the one loop operator to rule them all
Dayne Dayne (57)
0
Updated: December 1st, 2019

Newer JavaScript developers are bound to be confused by the many ways to do a simple loop. Everyone seems to use for (var i=0; i < array.length; i++), but is there a simpler syntax? How do I handle objects? And what is forEach?

This guide will teach you how to use each option while taking you through my journey to find the one for loop operator to use 100% of the time so I never have to think about it again.

Posted in these interests:

javascript
PRIMARY
27 guides
code
68 guides
webdev
58 guides

You know it, you love it, the loop classic:

let fruits = ["apple", "banana", "jackfruit"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i].slice()); }

It works but isn’t there something nicer to use out there?

for...in is not what you are looking for. You might think you can do this:

// BAD CODE let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruit.slice()); }

But this prints the following:

0 1 2

It prints the index of each item because the for...in loop iterates through an object’s enumerable properties. For an object, that iterates through the object’s keys. For an Array, that is actually the index.

We can fix the code by doing the following:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruits[fruit].slice()); }

But now we have a super confusing line there: fruits[fruit]

Add to that, Mozilla explicitly warns users not to use for...in if the order of the elements matters.

Why, JavaScript?

for...of is actually closer to what you’d expect from a simple loop operator. It works like this:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit of fruits) { console.log(fruit.slice()); }

This outputs what you would expect (hope at this point).

One major snag though, you do not have access to the key, which in this case is the index that for...in was printing. It’s pretty common to need the index so this cannot be the solution I always reach for.

forEach is a method that can be called on Arrays. It looks like this in the wild:

var fruits = ["apple", "banana", "jackfruit"]; fruits.forEach(function(fruit) { console.log(fruit.slice()); });

Slice pun aside, this is pretty simple right? It isn’t the most elegant syntax necessarily but it reads very well and it seems like it’s going to do what it says it’s going to do. Does this means it can be the tool you always reach for? For many yes, but there is one gotcha that breaks the deal for me. You cannot a break or continue operator within the loop and the return statement does nothing whatsoever.

I was so close to just accepting forEach but that snag was big enough that I could never feel truly secure reaching for it 100% of the time.

That’s right. The OG for (var i=0; i < array.length; i++) syntax won in the end. Between the rapport I already had with this operator and the fact that every JavaScript developer I know is very familiar with it, I decided to stop seeking greener pastures and stick with what I knew.

Honestly though, if it’s reasonable to include a third party library, lodash’s loops will solve all of your problems. They look just like forEach but you can use break, continue, and they are significantly faster.

let fruits = ["apple", "banana", "jackfruit"]; _.forEach(fruits, function(element, i) { console.log(element); });

JavaScript for loops

My journey trying to find the one loop operator to rule them all
Dayne Dayne (57)
0
Updated: December 1st, 2019

Newer JavaScript developers are bound to be confused by the many ways to do a simple loop. Everyone seems to use for (var i=0; i < array.length; i++), but is there a simpler syntax? How do I handle objects? And what is forEach?

This guide will teach you how to use each option while taking you through my journey to find the one for loop operator to use 100% of the time so I never have to think about it again.

Posted in these interests:

javascript
PRIMARY
27 guides
code
68 guides
webdev
58 guides

You know it, you love it, the loop classic:

let fruits = ["apple", "banana", "jackfruit"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i].slice()); }

It works but isn’t there something nicer to use out there?

for...in is not what you are looking for. You might think you can do this:

// BAD CODE let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruit.slice()); }

But this prints the following:

0 1 2

It prints the index of each item because the for...in loop iterates through an object’s enumerable properties. For an object, that iterates through the object’s keys. For an Array, that is actually the index.

We can fix the code by doing the following:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruits[fruit].slice()); }

But now we have a super confusing line there: fruits[fruit]

Add to that, Mozilla explicitly warns users not to use for...in if the order of the elements matters.

Why, JavaScript?

for...of is actually closer to what you’d expect from a simple loop operator. It works like this:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit of fruits) { console.log(fruit.slice()); }

This outputs what you would expect (hope at this point).

One major snag though, you do not have access to the key, which in this case is the index that for...in was printing. It’s pretty common to need the index so this cannot be the solution I always reach for.

forEach is a method that can be called on Arrays. It looks like this in the wild:

var fruits = ["apple", "banana", "jackfruit"]; fruits.forEach(function(fruit) { console.log(fruit.slice()); });

Slice pun aside, this is pretty simple right? It isn’t the most elegant syntax necessarily but it reads very well and it seems like it’s going to do what it says it’s going to do. Does this means it can be the tool you always reach for? For many yes, but there is one gotcha that breaks the deal for me. You cannot a break or continue operator within the loop and the return statement does nothing whatsoever.

I was so close to just accepting forEach but that snag was big enough that I could never feel truly secure reaching for it 100% of the time.

That’s right. The OG for (var i=0; i < array.length; i++) syntax won in the end. Between the rapport I already had with this operator and the fact that every JavaScript developer I know is very familiar with it, I decided to stop seeking greener pastures and stick with what I knew.

Honestly though, if it’s reasonable to include a third party library, lodash’s loops will solve all of your problems. They look just like forEach but you can use break, continue, and they are significantly faster.

let fruits = ["apple", "banana", "jackfruit"]; _.forEach(fruits, function(element, i) { console.log(element); });

JavaScript for loops

My journey trying to find the one loop operator to rule them all
Dayne Dayne (57)
0
Updated: December 1st, 2019

Newer JavaScript developers are bound to be confused by the many ways to do a simple loop. Everyone seems to use for (var i=0; i < array.length; i++), but is there a simpler syntax? How do I handle objects? And what is forEach?

This guide will teach you how to use each option while taking you through my journey to find the one for loop operator to use 100% of the time so I never have to think about it again.

Posted in these interests:

javascript
PRIMARY
27 guides
code
68 guides
webdev
58 guides

You know it, you love it, the loop classic:

let fruits = ["apple", "banana", "jackfruit"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i].slice()); }

It works but isn’t there something nicer to use out there?

for...in is not what you are looking for. You might think you can do this:

// BAD CODE let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruit.slice()); }

But this prints the following:

0 1 2

It prints the index of each item because the for...in loop iterates through an object’s enumerable properties. For an object, that iterates through the object’s keys. For an Array, that is actually the index.

We can fix the code by doing the following:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruits[fruit].slice()); }

But now we have a super confusing line there: fruits[fruit]

Add to that, Mozilla explicitly warns users not to use for...in if the order of the elements matters.

Why, JavaScript?

for...of is actually closer to what you’d expect from a simple loop operator. It works like this:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit of fruits) { console.log(fruit.slice()); }

This outputs what you would expect (hope at this point).

One major snag though, you do not have access to the key, which in this case is the index that for...in was printing. It’s pretty common to need the index so this cannot be the solution I always reach for.

forEach is a method that can be called on Arrays. It looks like this in the wild:

var fruits = ["apple", "banana", "jackfruit"]; fruits.forEach(function(fruit) { console.log(fruit.slice()); });

Slice pun aside, this is pretty simple right? It isn’t the most elegant syntax necessarily but it reads very well and it seems like it’s going to do what it says it’s going to do. Does this means it can be the tool you always reach for? For many yes, but there is one gotcha that breaks the deal for me. You cannot a break or continue operator within the loop and the return statement does nothing whatsoever.

I was so close to just accepting forEach but that snag was big enough that I could never feel truly secure reaching for it 100% of the time.

That’s right. The OG for (var i=0; i < array.length; i++) syntax won in the end. Between the rapport I already had with this operator and the fact that every JavaScript developer I know is very familiar with it, I decided to stop seeking greener pastures and stick with what I knew.

Honestly though, if it’s reasonable to include a third party library, lodash’s loops will solve all of your problems. They look just like forEach but you can use break, continue, and they are significantly faster.

let fruits = ["apple", "banana", "jackfruit"]; _.forEach(fruits, function(element, i) { console.log(element); });

JavaScript for loops

My journey trying to find the one loop operator to rule them all
Dayne Dayne (57)
0
Updated: December 1st, 2019

Newer JavaScript developers are bound to be confused by the many ways to do a simple loop. Everyone seems to use for (var i=0; i < array.length; i++), but is there a simpler syntax? How do I handle objects? And what is forEach?

This guide will teach you how to use each option while taking you through my journey to find the one for loop operator to use 100% of the time so I never have to think about it again.

Posted in these interests:

javascript
PRIMARY
27 guides
code
68 guides
webdev
58 guides

JavaScript for loops

javascriptcodewebdev
My journey trying to find the one loop operator to rule them all
Dayne Dayne (57)
0
Updated: December 1st, 2019
Dayne
1
 

Posted in these interests:

javascript
PRIMARY
27 guides
code
68 guides
webdev
58 guides
javascript
PRIMARY
27 guides
code
68 guides
webdev
58 guides
PRIMARY
Calling all writers!

We’re hiring. Write for Howchoo

1
 
In these interests
javascript
PRIMARY
27 guides
code
68 guides
webdev
58 guides
javascript
PRIMARY
27 guides
code
68 guides
webdev
58 guides
PRIMARY

You know it, you love it, the loop classic:

let fruits = ["apple", "banana", "jackfruit"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i].slice()); }

It works but isn’t there something nicer to use out there?

for...in is not what you are looking for. You might think you can do this:

// BAD CODE let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruit.slice()); }

But this prints the following:

0 1 2

It prints the index of each item because the for...in loop iterates through an object’s enumerable properties. For an object, that iterates through the object’s keys. For an Array, that is actually the index.

We can fix the code by doing the following:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruits[fruit].slice()); }

But now we have a super confusing line there: fruits[fruit]

Add to that, Mozilla explicitly warns users not to use for...in if the order of the elements matters.

Why, JavaScript?

for...of is actually closer to what you’d expect from a simple loop operator. It works like this:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit of fruits) { console.log(fruit.slice()); }

This outputs what you would expect (hope at this point).

One major snag though, you do not have access to the key, which in this case is the index that for...in was printing. It’s pretty common to need the index so this cannot be the solution I always reach for.

forEach is a method that can be called on Arrays. It looks like this in the wild:

var fruits = ["apple", "banana", "jackfruit"]; fruits.forEach(function(fruit) { console.log(fruit.slice()); });

Slice pun aside, this is pretty simple right? It isn’t the most elegant syntax necessarily but it reads very well and it seems like it’s going to do what it says it’s going to do. Does this means it can be the tool you always reach for? For many yes, but there is one gotcha that breaks the deal for me. You cannot a break or continue operator within the loop and the return statement does nothing whatsoever.

I was so close to just accepting forEach but that snag was big enough that I could never feel truly secure reaching for it 100% of the time.

That’s right. The OG for (var i=0; i < array.length; i++) syntax won in the end. Between the rapport I already had with this operator and the fact that every JavaScript developer I know is very familiar with it, I decided to stop seeking greener pastures and stick with what I knew.

Honestly though, if it’s reasonable to include a third party library, lodash’s loops will solve all of your problems. They look just like forEach but you can use break, continue, and they are significantly faster.

let fruits = ["apple", "banana", "jackfruit"]; _.forEach(fruits, function(element, i) { console.log(element); });

You know it, you love it, the loop classic:

let fruits = ["apple", "banana", "jackfruit"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i].slice()); }

It works but isn’t there something nicer to use out there?

You know it, you love it, the loop classic:

let fruits = ["apple", "banana", "jackfruit"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i].slice()); }

It works but isn’t there something nicer to use out there?

Loop classic

for...in is not what you are looking for. You might think you can do this:

// BAD CODE let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruit.slice()); }

But this prints the following:

0 1 2

It prints the index of each item because the for...in loop iterates through an object’s enumerable properties. For an object, that iterates through the object’s keys. For an Array, that is actually the index.

We can fix the code by doing the following:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruits[fruit].slice()); }

But now we have a super confusing line there: fruits[fruit]

Add to that, Mozilla explicitly warns users not to use for...in if the order of the elements matters.

Why, JavaScript?

for...in is not what you are looking for. You might think you can do this:

// BAD CODE let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruit.slice()); }

But this prints the following:

0 1 2

It prints the index of each item because the for...in loop iterates through an object’s enumerable properties. For an object, that iterates through the object’s keys. For an Array, that is actually the index.

We can fix the code by doing the following:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit in fruits) { console.log(fruits[fruit].slice()); }

But now we have a super confusing line there: fruits[fruit]

Add to that, Mozilla explicitly warns users not to use for...in if the order of the elements matters.

Why, JavaScript?

for…in

for...of is actually closer to what you’d expect from a simple loop operator. It works like this:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit of fruits) { console.log(fruit.slice()); }

This outputs what you would expect (hope at this point).

One major snag though, you do not have access to the key, which in this case is the index that for...in was printing. It’s pretty common to need the index so this cannot be the solution I always reach for.

for...of is actually closer to what you’d expect from a simple loop operator. It works like this:

let fruits = ["apple", "banana", "jackfruit"]; for (let fruit of fruits) { console.log(fruit.slice()); }

This outputs what you would expect (hope at this point).

One major snag though, you do not have access to the key, which in this case is the index that for...in was printing. It’s pretty common to need the index so this cannot be the solution I always reach for.

for…of

forEach is a method that can be called on Arrays. It looks like this in the wild:

var fruits = ["apple", "banana", "jackfruit"]; fruits.forEach(function(fruit) { console.log(fruit.slice()); });

Slice pun aside, this is pretty simple right? It isn’t the most elegant syntax necessarily but it reads very well and it seems like it’s going to do what it says it’s going to do. Does this means it can be the tool you always reach for? For many yes, but there is one gotcha that breaks the deal for me. You cannot a break or continue operator within the loop and the return statement does nothing whatsoever.

I was so close to just accepting forEach but that snag was big enough that I could never feel truly secure reaching for it 100% of the time.

forEach is a method that can be called on Arrays. It looks like this in the wild:

var fruits = ["apple", "banana", "jackfruit"]; fruits.forEach(function(fruit) { console.log(fruit.slice()); });

Slice pun aside, this is pretty simple right? It isn’t the most elegant syntax necessarily but it reads very well and it seems like it’s going to do what it says it’s going to do. Does this means it can be the tool you always reach for? For many yes, but there is one gotcha that breaks the deal for me. You cannot a break or continue operator within the loop and the return statement does nothing whatsoever.

I was so close to just accepting forEach but that snag was big enough that I could never feel truly secure reaching for it 100% of the time.

forEach

That’s right. The OG for (var i=0; i < array.length; i++) syntax won in the end. Between the rapport I already had with this operator and the fact that every JavaScript developer I know is very familiar with it, I decided to stop seeking greener pastures and stick with what I knew.

That’s right. The OG for (var i=0; i < array.length; i++) syntax won in the end. Between the rapport I already had with this operator and the fact that every JavaScript developer I know is very familiar with it, I decided to stop seeking greener pastures and stick with what I knew.

Back to loop classic

Honestly though, if it’s reasonable to include a third party library, lodash’s loops will solve all of your problems. They look just like forEach but you can use break, continue, and they are significantly faster.

let fruits = ["apple", "banana", "jackfruit"]; _.forEach(fruits, function(element, i) { console.log(element); });

Honestly though, if it’s reasonable to include a third party library, lodash’s loops will solve all of your problems. They look just like forEach but you can use break, continue, and they are significantly faster.

let fruits = ["apple", "banana", "jackfruit"]; _.forEach(fruits, function(element, i) { console.log(element); });

Bonus

Calling all writers!

We’re hiring. Write for Howchoo

Dayne's profile pictureDayne
Joined in 2015
Software engineer, co-founder of Howchoo, and renaissance man. Lifelong amateur woodworker, espresso mechanic, freestyle lyricist, drummer, artist, runner, coffee roaster, electrical engineer, gamer, inventor, churner, psychoanalyst, photographer, pizza chef, pit master, audiophile, guitarist, entrepreneur, dad, yogi, cyclist, and barista.
Dayne's profile picture
Share this guide!
RedditEmailText
Related to this guide:
How to Pretty Print JSON in Chrome Developer ConsoleHow to Pretty Print JSON in Chrome Developer Console
In these interests: codejavascriptwebdev
Remove Elements From an Array in JavaScriptRemove Elements From an Array in JavaScript
When working with arrays in JavaScript, we often need to remove elements.
Tyler's profile picture TylerView
In these interests: codejavascript
Enumerable Properties in JavaScriptEnumerable Properties in JavaScript
Enumerable properties are properties whose internal enumerable flag set to true.
Tyler's profile picture TylerView
In these interests: codejavascript
How to Pretty Print JSON in Chrome Developer ConsoleHow to Pretty Print JSON in Chrome Developer Console
In these interests: codejavascriptwebdev
Zach's profile pictureViewcodejavascriptwebdev
Remove Elements From an Array in JavaScriptRemove Elements From an Array in JavaScript
When working with arrays in JavaScript, we often need to remove elements.
Tyler's profile picture TylerView
In these interests: codejavascript
Tyler's profile pictureViewcodejavascript
Enumerable Properties in JavaScriptEnumerable Properties in JavaScript
Enumerable properties are properties whose internal enumerable flag set to true.
Tyler's profile picture TylerView
In these interests: codejavascript
Tyler's profile pictureViewcodejavascript
People also read:
This guide demonstrates multiple ways to iterate over a JavaScript object’s properties and values.
There are two very similar statements in JavaScript: for…in and for…of. And while they can be easily confused, they’re actually quite different.
As a JavaScript developer, you’ll often need to construct URLs and query string parameters. One sensible way to construct query string parameters is to use a one layer object with key value pairs.
Writing tests is an important part of software development process. Unit tests form a core part of testing process where each functional block is tested as an independent unit.
Making a deep copy of an object in JavaScript is fairly challenging. Fortunately, there are a few ways to accomplish this without much code.
At some point you’ll want to read, set, and remove cookies using JavaScript.
Learn how to split a string into an array.
This guide will teach you how to concatenate, or join, all elements of an array into a single string.
Learn how to merge two arrays together in JavaScript.
Tabbed browsing has become the standard so modern browsers have provided a way for developers to determine if a tab has focus. This uses the HTML 5 Page Visibility API.
This guide demonstrates multiple ways to iterate over a JavaScript object’s properties and values.
There are two very similar statements in JavaScript: for…in and for…of. And while they can be easily confused, they’re actually quite different.
As a JavaScript developer, you’ll often need to construct URLs and query string parameters. One sensible way to construct query string parameters is to use a one layer object with key value pairs.
Writing tests is an important part of software development process. Unit tests form a core part of testing process where each functional block is tested as an independent unit.
Making a deep copy of an object in JavaScript is fairly challenging. Fortunately, there are a few ways to accomplish this without much code.
Learn Multiple Ways to Iterate Over JavaScript Object Properties and Values
The Difference Between “for…in” and “for…of” in JavaScript
How to Turn an Object into Query String Parameters in JavaScript
Unit Testing in JavaScript – Mocha, Chai and Sinon – a Beginner’s Guide
How to Copy an Object in JavaScript
At some point you’ll want to read, set, and remove cookies using JavaScript.
Learn how to split a string into an array.
This guide will teach you how to concatenate, or join, all elements of an array into a single string.
Learn how to merge two arrays together in JavaScript.
Tabbed browsing has become the standard so modern browsers have provided a way for developers to determine if a tab has focus. This uses the HTML 5 Page Visibility API.
How to Manage Cookies in JavaScript
How to Split a String into an Array in JavaScript
How to Join All Elements of an Array in JavaScript
How to Merge Two Arrays in JavaScript
Determine if a Tab has Focus in JavaScript
Posted in these interests:
javascriptjavascript
javascript
PRIMARY
Array(16).join(“wat” – 1) + ” Batman!”;
codecode
Code is poetry — one line at a time.
webdevwebdev
All things web development.
javascriptjavascript
javascript
PRIMARY
Array(16).join(“wat” – 1) + ” Batman!”;
PRIMARY
Explore
codecode
Code is poetry — one line at a time.
Explore
webdevwebdev
All things web development.
Explore
Discuss this guide:
We’re hiring!
Are you a passionate writer? We want to hear from you!
We’re hiring!
Are you a passionate writer? We want to hear from you!
View openings

Want to support Howchoo? When you buy a tool or material through one of our Amazon links, we earn a small commission as an Amazon Associate.

Donate
Zach's profile pictureZach
Joined in 2015
Web developer, designer, tinkerer, and beer enthusiast living in Tampa, Florida.
Related to this guide:
Ender 3 upgrades and modsEnder 3 upgrades and mods
Improve your overall printing experience—and quality.
Zach's profile picture ZachView
In these interests: ender33dprinting
Ender 3 FAQEnder 3 FAQ
The most common Creality Ender 3 questions answered!
Ash's profile picture AshView
In these interests: ender33dprinting
Ender 3 Board UpgradeEnder 3 Board Upgrade
Make your Ender 3 quieter and improve your prints with this board upgrade.
Zach's profile picture ZachView
In these interests: 3dprintingender3
People also read:
Ender 3 spring upgrade
An inexpensive upgrade that greatly reduces bed leveling frequency!
Ender 3 OctoPrint touchscreen
An inexpensive upgrade to make your Ender 3 even better!
Marlin firmware on the Ender 3
Update your 3D printer’s firmware and add thermal runaway protection.
Make Money 3D Printing
You can’t print money, but you can make money printing.
See how 3D printer manufacturer, Prusa Research, is helping meet the demand for hand sanitizer by repurposing equipment.
Prusa MK3S 3D printer review
An incredible desktop 3D printer for a great price
Posted in these interests:
Ender 3 3D printerEnder 3 3D printer
ender3
PRIMARY
An interest for owners of the Ender 3, an amazing budget 3D printer from Creality. Have a specific question? Be sure to check out our Ender 3 FAQ.
3dprinting3dprinting
Think of it like a 2D printer, but with an extra dimension.
Discuss this guide:
We’re hiring!
Are you a passionate writer or editor? We want to hear from you!
We’re hiring!
Are you a passionate writer or editor? We want to hear from you!

Want to support Howchoo? When you buy a tool or material through one of our Amazon links, we earn a small commission as an Amazon Associate.

Want to support Howchoo? When you buy a tool or material through one of our Amazon links, we earn a small commission as an Amazon Associate.

How to Upgrade Your Ender 3 Power Supply to a MeanWell PSU

Ender 3 MeanWell PSU upgradeEnder 3 MeanWell PSU upgrade
An inexpensive upgrade to make your Ender 3 quieter and safer
Zach Zach (217)
Total time: 20 minutes 
Updated: December 1st, 2019
Calling all writers!

Are you a writer who loves 3D printing? Send us a message

Aside from upgrading your Ender 3 board, upgrading your stock PSU to a Mean Well PSU is one of the best upgrades to make your 3D printer quieter.

In this guide, I’ll show you how to upgrade your Ender 3 to the MeanWell LRS-3500-25 PSU. This is the same power supply used on the Ender 3 Pro.

Why upgrade?

There are several reasons to upgrade your Ender 3’s PSU to a Mean Well:

  • Noise: The PSU fan only runs when needed (usually <20% of the time), meaning a much quieter printer.
  • Safety: MeanWell power supplies are more reliable and safer than the cheap stock unit. They use higher-quality components that provide consistent, clean power with fewer spikes and sags.
  • Reduce bed-leveling issues: By providing consistent power the MeanWell reduces issues with EZABL and other bed-leveling kits related to power ripples and grounding.
  • Compact form factor: The MeanWell PSU is noticeably thinner and more compact than the stock unit; this is especially handy if you’re using an enclosure and want to keep your setup as compact as possible.

Here’s everything you’ll need to complete this guide:

MeanWell LRS-350-24 PSUMeanWell LRS-350-24 PSU×1
Screwdriver, flathead×1
Screwdriver, Phillips×1
Hex key, M3Hex key, M3×1
Setting MeanWell input voltageSetting MeanWell input voltage
If you forget to do this, you’re going to have a bad time.

Use a flathead screwdriver to slide the input voltage switch to either 115V or 230V, depending on your country. I’m in the US so I switched it to 115V.

You probably know which mains voltage your country uses, but if for some reason you don’t, you can reference this “Mains electricity by country” Wikipedia article.

3D-printed MeanWell PSU cover3D-printed MeanWell PSU cover

Your MeanWell PSU probably didn’t come with a PSU cover, the bottom portion that holds the AC plug inlet and protects your terminal block from dangerous shorts (and fingers).

Since the MeanWell PSU is smaller than the stock one, the old cover won’t fit; therefore, you’ll need to print a new one. You can find tons of designs on Thingiverse, but I recommend this excellent model from TH3D Studio.

Download and print that model. I was able to print mine standing up without supports. My Ender 3 was more than capable of “bridging the gap” without stringing.

Removing the stock Ender 3 power supply unit (PSU)Removing the stock Ender 3 power supply unit (PSU)

Unplug your printer’s power cable and disconnect the XT60 connector that connects the PSU to your printer.

Then, use an M3 hex key to remove the two front cap screws that secure the stock PSU to your printer’s right Z-axis vertical support.

Finally, set the old PSU aside.

Transferring Ender 3 AC plug inletTransferring Ender 3 AC plug inlet
Here you can really see how much slimmer the MeanWell PSU is!

We’ll need to disassemble the old PSU and transfer the AC inlet (plug) and wiring to the new MeanWell PSU.

Remove the two M3 screws from the bottom cover. Then, use a Phillips screwdriver to remove the two inlet screws.

Take a photo of the wiring (or reference my photo in the step below). Then, unscrew each screw to remove the 5 wires from the PSU terminal block.

Finally, insert the AC plug inlet into the new PSU bottom cover and secure it using the two Phillips screws.

Ender 3 MeanWell PSU wiringEnder 3 MeanWell PSU wiring

Wire up the PSU the same as the old one. In addition to the photo I took, here’s a handy table I made to help you with your wiring:

MeanWell PSU wiring

From Color To
XT60 cable Red +V
XT60 cable Black -V
AC inlet Yellow GND
AC inlet Black N
AC inlet Red L
Ender 3 MeanWell PSU completed assemblyEnder 3 MeanWell PSU completed assembly
On the left, my upgraded MeanWell PSU; on the right, the stock Ender 3 PSU.

Route the XT60 cable through the back opening of the MeanWell PSU cover. Slide the cover into place, and secure it using the two M3 screws you removed from the old cover.

MeanWell PSU assembly mounted on the Ender 3MeanWell PSU assembly mounted on the Ender 3
Fits like a glove!

Mount your brand-new PSU to your Ender 3’s Z-axis support using the same screws that secured the old one.

Reconnect your cables and you’re good to go! Next, check out my Ender 3 mainboard upgrade guide—an upgraded mainboard gives you better prints while making your printer eerily silent.

We’re hiring!
Are you a passionate writer or editor? We want to hear from you!

Want to support Howchoo? When you buy a tool or material through one of our Amazon links, we earn a small commission as an Amazon Associate.

How to Add a Fan to the Raspberry Pi 4 for Proper Cooling (You Need One)

Raspberry Pi 4 case fanRaspberry Pi 4 case fan
It’s getting hot in here, a fan will cool your Pi.
Ash Ash (253)
Total time: 30 minutes 
Updated: December 1st, 2019

The Raspberry Pi 4 has been a hot topic since it’s release—and no one knows that better than Jeff Geerling. In a recent blog post, Jeff reveals a serious issue that’s impacting the performance of the Pi 4.

Be sure to also check out our guide on adding a Raspberry Pi fan that will turn itself on and off automatically!

Raspberry Pi 4 Thermal ImageRaspberry Pi 4 Thermal Image
Jeff used his Seek thermal imager to identify the Pi 4 heat signature.
 Photo: Jeff Geerling

The Raspberry Pi Foundation released an official Raspberry Pi 4 Desktop Kit. The kit comes with a new plastic case featuring holes for every port on the Pi 4, but nothing at all for ventilation. This project uses the official Raspberry Pi 4 case, though you can use any other case to accomplish this project as well.

Most Raspberry Pi models don’t need fans or heatsinks for everyday use—but the Pi 4 is another story. The CPU idles around 60°C. Running heavy processes can heat the board so much it hurts to touch. Too much heat will cause the CPU to throttle, causing serious performance issues.

Jeff revealed some telling images by photographing the Pi 4 with a thermal imager. Most of the heat appears to come from the USB-C power circuitry. Since the heat has nowhere to leave inside the Pi 4 case, he decided to install a fan. Here’s a quick breakdown of the project.

Raspberry Pi 4 fanRaspberry Pi 4 fan
 Photo: Jeff Geerling

The Pi-Fan is attached to the top half of the Pi case. Drill a hole in the center using a 1-1/8″ hole saw. Be sure to smooth out the edges with a file or sandpaper.

Line the fan up with the newly drilled hole and mark the screw holes with a pen or pencil. When drilling the screw holes, you will need a 7/64″ drill bit. Smooth out the edges and remove any remaining plastic.

Raspberry Pi 4 case with fanRaspberry Pi 4 case with fan
 Photo: Jeff Geerling

Place the fan inside of the Pi case with the “Pi-FAN” sticker facing up. Line up the fan and screw it into place.

Connect the fan’s red wire to GPIO pin 4 (5V) and the black wire to GPIO pin 6 (ground). The fan should receive power automatically when the Pi is booted.

If you’d like your fan to only run when needed (based on Pi temperature), check out our Raspberry Pi fan controller guide.

After installing the fan, you may want to initiate a stress test to see how it’s impacting the Pi. Jeff’s observation resulted in a lower temperature that kept the Pi 4 well under its throttling point by about 20°C. You can find more details on performing a stress test in his original post. Don’t forget to check out our guide on how to measure the core temperature of your Raspberry Pi.

In this video, Jeff breaks down everything you need to add a fan to the Pi 4. Don’t forget to check out the full post on Jeff Geerling’s website!

We’re hiring!
Are you a passionate writer or editor? We want to hear from you!

Want to support Howchoo? When you buy a tool or material through one of our Amazon links, we earn a small commission as an Amazon Associate.

How to Enable the OctoPrint Dark Theme

OctoPrint dark themeOctoPrint dark theme
Will somebody please think of the eyes!
Zach Zach (217)
Total time: 5 minutes 
Updated: December 1st, 2019
Calling all writers!

Are you a writer who loves 3D printing? Send us a message

Like dark themes? Me too! This short guide will show you how to add a dark theme to your OctoPrint (or OctoPi) interface.

Here’s everything you’ll need to complete this guide:

OctoPrint×1
Installing ThemeifyInstalling Themeify

Themeify is one of the most popular OctoPrint plugins.

Open OctoPrint Settings by clicking on the wrench icon.

Then, select Plugin Manager and click Get More….

Finally, search for and install Themeify. When prompted, restart OctoPrint.

Setting the OctoPrint dark themeSetting the OctoPrint dark theme

Open Settings once more and select Themeify from the sidebar.

Make sure Enable theme is checked and select Discorded or Nighttime from the Theme dropdown.

Click Save. You’re done!

We’re hiring!
Are you a passionate writer or editor? We want to hear from you!

Want to support Howchoo? When you buy a tool or material through one of our Amazon links, we earn a small commission as an Amazon Associate.

Updated: December 1st, 2019
retrogaming
PRIMARY
49 guides
pi
215 guides
diy
37 guides
Calling all writers!

We’re hiring. Write for Howchoo

retrogaming
PRIMARY
49 guides
pi
215 guides
diy
37 guides
Calling all writers!

We’re hiring. Write for Howchoo

Zach's profile pictureZach
Joined in 2015
Web developer, designer, tinkerer, and beer enthusiast living in Tampa, Florida.
In these interests: piretrogaming
Everything you didn’t know about the retro gaming staple.
Ash's profile picture AshView
In these interests: retropiepiretrogaming
Ready to game, but don’t know where to start?
Ash's profile picture AshView
In these interests: piretropieretrogaming
All about that bass? Let’s crank it up!
You can’t play anything like this. Let’s fix it!
You can play your Game Boy in the dark now!
Someone recreated the iconic first level of Super Mario Bros as a fully-playable, life-size augmented reality (AR) game in Central Park. The results are astounding.
We’ve put together a guide to help you find the best soldering iron for your next project.
For Raspberry Pi beginners who still love to follow along in a book.
Thank you Mario, but our Princess is in another castle!
The Raspberry Pi is a small, inexpensive computer developed by the Raspberry Pi Foundation in the United Kingdom.
“It takes half your life before you discover life is a do-it-yourself project.” – Napoleon Hill
Total time: 60 minutes 
Updated: December 1st, 2019
Check PriceMIDI keyboard
MIDI keyboard
on Amazon
Calling all writers!

We’re hiring. Write for Howchoo

pi
PRIMARY
215 guides
diy
38 guides
music
10 guides
How to Update Your Raspberry Pi How to Update Your Raspberry PiMake sure your Pi is fresh.
Calling all writers!

We’re hiring. Write for Howchoo

Ash's profile pictureAsh
Joined in 2018
Ash is an experienced tech writer with an endless passion for technology. She enjoys retro gaming, 3D printing, and making awesome projects on the Raspberry Pi.
For Raspberry Pi beginners who still love to follow along in a book.
Michael's profile picture MichaelView
In these interests: booksretropiepi
What’s better than an experiment? An experiment in space!
Michael's profile picture MichaelView
In these interests: kidspinews
In these interests: pi
Kali Linux is a great distribution for Raspberry Pi users who want to get to grips with security testing.
The Raspberry Pi micro-computer grows in power with each new model release, with more resources that make it a more capable, low-cost content server for your media and resources.
Laptops, smartphones, tablets, even lightbulbs—an endless number of devices now have the ability to connect to your local network and the wider internet.
The Raspberry Pi was designed to boot from an SD card, but in some cases, it’s convenient to boot from a USB drive.
Get the new official Raspberry Pi OS on your Pi.
New to the Raspberry Pi? Start here.
Blocking ads just got easier with Pi-hole, a network-wide ad blocker for the Raspberry Pi
Don’t skip out on a proper case for your Pi 4.
The only Raspberry Pi Bluetooth guide you’ll ever need.
Your favorite MS OS on the Pi.
pi
PRIMARY
The Raspberry Pi is a small, inexpensive computer developed by the Raspberry Pi Foundation in the United Kingdom.
“It takes half your life before you discover life is a do-it-yourself project.” – Napoleon Hill