Update README file - Extend explanations, fix formatting mistakes and expand examples

README.md

@@ -374,9 +374,8 @@ Other Style Guides
  // bad
  const len = items.length;
  const itemsCopy = [];
- let i;
 
- for (i = 0; i < len; i += 1) {
+ for (let i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
  }
 
@@ -710,12 +709,19 @@ Other Style Guides
  }
 
  // good
- let test;
+ let test; // if you are planning to reassign value
  if (currentUser) {
  test = () => {
  console.log('Yup.');
  };
  }
+
+ // good
+ if (currentUser) {
+ const test = () => {
+ console.log('Yup.');
+ };
+ }
  ```
 
  <a name="functions--arguments-shadow"></a><a name="7.5"></a>
@@ -1031,9 +1037,9 @@ Other Style Guides
  ```
 
  <a name="arrows--one-arg-parens"></a><a name="8.4"></a>
- - [8.4](#arrows--one-arg-parens) Always include parentheses around arguments for clarity and consistency. eslint: [`arrow-parens`](https://eslint.org/docs/rules/arrow-parens)
+ - [8.4](#arrows--one-arg-parens) Always include parentheses around parameters for clarity and consistency. eslint: [`arrow-parens`](https://eslint.org/docs/rules/arrow-parens)
 
- > Why? Minimizes diff churn when adding or removing arguments.
+ > Why? Minimizes diff churn when adding or removing parameters.
 
  ```javascript
  // bad
@@ -1129,6 +1135,7 @@ Other Style Guides
  constructor(contents = []) {
  this.queue = [...contents];
  }
+
  pop() {
  const value = this.queue[0];
  this.queue.splice(0, 1);
@@ -1493,18 +1500,18 @@ Other Style Guides
  for (let num of numbers) {
  sum += num;
  }
- sum === 15;
+ sum === 15; // true
 
  // good
  let sum = 0;
  numbers.forEach((num) => {
  sum += num;
  });
- sum === 15;
+ sum === 15; // true
 
  // best (use the functional force)
  const sum = numbers.reduce((total, num) => total + num, 0);
- sum === 15;
+ sum === 15; // true
 
  // bad
  const increasedByOne = [];
@@ -1646,6 +1653,14 @@ Other Style Guides
  // bad
  superPower = new SuperPower();
 
+ // bad
+ function foo() {
+ bar = 10 // bar will appear in the global scope
+ }
+
+ foo()
+ console.log(bar) // 10
+
  // good
  const superPower = new SuperPower();
  ```
@@ -2091,28 +2106,33 @@ Other Style Guides
  let x = 1;
  break;
  case 2:
- const y = 2;
+ const x = 2; // SyntaxError: Identifier 'x' has already been declared
  break;
  case 3:
+ // Will be available in entire switch block
  function f() {
  // ...
  }
  break;
  default:
+ // Will be available in entire switch block
  class C {}
  }
 
  // good
  switch (foo) {
  case 1: {
+ // Will be available only in the case 1 block
  let x = 1;
  break;
  }
  case 2: {
- const y = 2;
+ // Will be available only in the case 2 block
+ const x = 2; // No SyntaxError
  break;
  }
  case 3: {
+ // Will be available only in the case 3 block
  function f() {
  // ...
  }
@@ -2122,6 +2142,7 @@ Other Style Guides
  bar();
  break;
  default: {
+ // Will be available only in the default block
  class C {}
  }
  }
@@ -2209,24 +2230,34 @@ Other Style Guides
 
  ```javascript
  // bad
- const value = 0 ?? 'default';
- // returns 0, not 'default'
+ const value = 0 ?? 'default'; // 0, not 'default'
 
  // bad
- const value = '' ?? 'default';
- // returns '', not 'default'
+ const value = '' ?? 'default'; // '', not 'default'
 
  // good
- const value = null ?? 'default';
- // returns 'default'
+ const value = null ?? 'default'; // 'default'
 
  // good
  const user = {
  name: 'John',
  age: null
  };
- const age = user.age ?? 18;
- // returns 18
+ const age = user.age ?? 18; // 18
+
+ // good
+ const user = {
+ name: 'John',
+ };
+ const age = user.age ?? 18; // 18
+
+ // good
+ const user = {
+ name: 'John',
+ age: 0
+ };
+ const age = user.age ?? 18; // 0
+ const anotherAge = user.age || 18 // 18
  ```
 
 **[⬆ back to top](#table-of-contents)**
@@ -2459,7 +2490,7 @@ Other Style Guides
 
  // good
  // is current tab
- const active = true;
+ const isActive = true;
 
  // bad
  function getType() {
@@ -3190,6 +3221,20 @@ Other Style Guides
  inventorOf,
  ...heroArgs
  );
+
+ // bad
+ import {
+ firstVariable,
+ secondVariable,
+ thirdVariable
+ } from './someModule';
+
+ // good
+ import {
+ firstVariable,
+ secondVariable,
+ thirdVariable,
+ } from './someModule';
  ```
 
 **[⬆ back to top](#table-of-contents)**
@@ -3746,7 +3791,7 @@ Other Style Guides
 ## ECMAScript 5 Compatibility
 
  <a name="es5-compat--kangax"></a><a name="26.1"></a>
- - [27.1](#es5-compat--kangax) Refer to [Kangax](https://twitter.com/kangax/)’s ES5 [compatibility table](https://kangax.github.io/es5-compat-table/).
+ - [27.1](#es5-compat--kangax) Refer to the [ES5 compatibility table](https://compat-table.github.io/compat-table/es5/) for features compatibility
 
 **[⬆ back to top](#table-of-contents)**
 
@@ -3861,7 +3906,7 @@ Other Style Guides
  - [Latest ECMA spec](https://tc39.github.io/ecma262/)
  - [ExploringJS](https://exploringjs.com/)
  - [ES6 Compatibility Table](https://compat-table.github.io/compat-table/es6/)
- - [Comprehensive Overview of ES6 Features](https://web.archive.org/web/20240404212626/http://es6-features.org/)
+ - [Comprehensive Overview of ES6 Features](http://es6-features.org/)
  - [JavaScript Roadmap](https://roadmap.sh/javascript)
 
 **Read This**