Merge branch 'doc-js-side-effetcs' into 'master'

Adds documentation entry: Don't user forEach, aim for code without side effects

See merge request !10811

1 files changed, 17 insertions, 0 deletions

diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md
index ed656476a96..038a689c09a 100644
--- a/doc/development/fe_guide/style_guide_js.md
+++ b/doc/development/fe_guide/style_guide_js.md
@@ -168,6 +168,23 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
 
 - Avoid constructors with side-effects
 
+- Prefer `.map`, `.reduce` or `.filter` over `.forEach`
+A forEach will cause side effects, it will be mutating the array being iterated. Prefer using `.map`,
+`.reduce` or `.filter`
+
+  ```javascript
+  const users = [ { name: 'Foo' }, { name: 'Bar' } ];
+
+  // bad
+  users.forEach((user, index) => {
+    user.id = index;
+  });
+
+  // good
+  const usersWithId = users.map((user, index) => {
+    return Object.assign({}, user, { id: index });
+  });
+  ```
 
 #### Parse Strings into Numbers
 - `parseInt()` is preferable over `Number()` or `+`