Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
Update Readme according to discussion
  • Loading branch information
bstashchuk committed Apr 12, 2024
commit 95c7d2ddf4271caa01583d6916dea9c52004e70e
57 changes: 35 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -708,6 +708,14 @@ Other Style Guides
}
}

// good
let test; // if you are planning to reassign value
if (currentUser) {
test = () => {
console.log('Yup.');
};
}

// good
if (currentUser) {
const test = () => {
Expand Down Expand Up @@ -1478,7 +1486,7 @@ Other Style Guides
## Iterators and Generators

<a name="iterators--nope"></a><a name="11.1"></a>
- [11.1](#iterators--nope) Don’t use iterators. Prefer JavaScript’s higher-order functions instead of loops like `for`, `for-in` or `for-of`. eslint: [`no-iterator`](https://eslint.org/docs/rules/no-iterator) [`no-restricted-syntax`](https://eslint.org/docs/rules/no-restricted-syntax)
- [11.1](#iterators--nope) Don’t use iterators. Prefer JavaScript’s higher-order functions instead of loops like `for-in` or `for-of`. eslint: [`no-iterator`](https://eslint.org/docs/rules/no-iterator) [`no-restricted-syntax`](https://eslint.org/docs/rules/no-restricted-syntax)

> Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side effects.

Expand Down Expand Up @@ -1639,9 +1647,7 @@ Other Style Guides
## Variables

<a name="variables--const"></a><a name="13.1"></a>
- [13.1](#variables--const) Always use `const` or `let` to declare variables. Not doing so will result in global variables in case strict mode is disabled. We want to avoid polluting the global namespace. Captain Planet warned us of that. eslint: [`no-undef`](https://eslint.org/docs/rules/no-undef) [`prefer-const`](https://eslint.org/docs/rules/prefer-const)

> Note: The entire contents of JavaScript modules are automatically in [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) and therefore usage of the undeclared variables will not lead to creation of the global variables
- [13.1](#variables--const) Always use `const` or `let` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that. eslint: [`no-undef`](https://eslint.org/docs/rules/no-undef) [`prefer-const`](https://eslint.org/docs/rules/prefer-const)

```javascript
// bad
Expand Down Expand Up @@ -1750,7 +1756,7 @@ Other Style Guides
<a name="variables--no-chain-assignment"></a><a name="13.5"></a>
- [13.5](#variables--no-chain-assignment) Don’t chain variable assignments. eslint: [`no-multi-assign`](https://eslint.org/docs/rules/no-multi-assign)

> Why? Chaining variable assignments creates implicit global variables in case [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) is disabled.
> Why? Chaining variable assignments creates implicit global variables.

```javascript
// bad
Expand Down Expand Up @@ -2103,25 +2109,30 @@ Other Style Guides
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: {
// 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() {
// ...
}
Expand All @@ -2130,7 +2141,8 @@ Other Style Guides
case 4:
bar();
break;
default: {
default: {
// Will be available only in the default block
class C {}
}
}
Expand Down Expand Up @@ -2217,7 +2229,10 @@ Other Style Guides
> Why? It provides precision by distinguishing null/undefined from other falsy values, enhancing code clarity and predictability.

```javascript
// good
// bad
const value = 0 ?? 'default'; // 0, not 'default'

// bad
const value = '' ?? 'default'; // '', not 'default'

// good
Expand All @@ -2242,7 +2257,7 @@ Other Style Guides
age: 0
};
const age = user.age ?? 18; // 0
const defaultAge = user.age || 18 // 18
const anotherAge = user.age || 18 // 18
```

**[⬆ back to top](#table-of-contents)**
Expand Down Expand Up @@ -2471,7 +2486,7 @@ Other Style Guides

```javascript
// bad
const isActive = true; // is current tab
const active = true; // is current tab

// good
// is current tab
Expand Down Expand Up @@ -2704,10 +2719,10 @@ Other Style Guides
// good
$('#items')
.find('.selected')
.highlight()
.end()
.highlight()
.end()
.find('.open')
.updateCount();
.updateCount();

// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
Expand All @@ -2716,16 +2731,14 @@ Other Style Guides
.call(tron.led);

// good
const leds = stage
.selectAll('.led')
.data(data)
.enter()
.append('svg:svg')
.classed('led', true)
.attr('width', (radius + margin) * 2)
const leds = stage.selectAll('.led')
.data(data)
.enter().append('svg:svg')
.classed('led', true)
.attr('width', (radius + margin) * 2)
.append('svg:g')
.attr('transform', `translate(${radius + margin}, ${radius + margin})`)
.call(tron.led);
.attr('transform', `translate(${radius + margin}, ${radius + margin})`)
.call(tron.led);

// good
const leds = stage.selectAll('.led').data(data);
Expand Down Expand Up @@ -3379,7 +3392,7 @@ Other Style Guides
}

// good
function makeQuery() {
function query() {
// ...
}
```
Expand Down