style: format codebase

This commit is contained in:
Jean-Philippe Sirois
2020-05-19 21:57:49 -04:00
parent 0eaea34b28
commit a1283334b3
37 changed files with 146 additions and 138 deletions
@@ -12,7 +12,7 @@ title: Arrow functions
Brought into ES6, arrow functions are a new way to declare functions, and allow for shorter syntax. For example, below is a regular function, as usually seen before ES6.
```js
const sayHello = function() {
const sayHello = function () {
console.log("hello");
};
```
@@ -36,7 +36,7 @@ const sayHello = (nameOne, nameTwo) => {
For a single parameter, the parentheses can be omitted:
```js
const sayHello = name => {
const sayHello = (name) => {
console.log("hello", name);
};
```
@@ -50,13 +50,13 @@ const sayHello = () => "hello";
The same is also true of functions returning an expression using parameters, too.
```js
const sayHello = name => `hello ${name}`;
const sayHello = (name) => `hello ${name}`;
```
Or even...
```js
const helloObject = name => ({
const helloObject = (name) => ({
isGreeting: true,
helloName: name,
});
@@ -73,7 +73,7 @@ The keyword `this` is handled differently in arrow functions. In an arrow functi
Using regular anonymous function, `this` is refers to the `HTMLButtonObject` that called it, and therefore the function outputs `[object HTMLButtonElement]` to the console.
```js
document.querySelector("#btn").addEventListener("click", function() {
document.querySelector("#btn").addEventListener("click", function () {
console.log(this); // outputs "[object HTMLButtonElement]"
});
```
@@ -35,11 +35,11 @@ const users = [
];
// functional way
const foundUser = users.find(user => user.name === "John");
const foundUser = users.find((user) => user.name === "John");
// iterative way
let foundUser = null;
users.forEach(user => {
users.forEach((user) => {
if (user.name === "John") {
foundUser = user;
}
@@ -71,11 +71,11 @@ const users = [
];
// functional way
const youngerUsers = users.filter(user => user.age < 18);
const youngerUsers = users.filter((user) => user.age < 18);
// iterative way
const youngerUsers = [];
users.forEach(user => {
users.forEach((user) => {
if (user.age < 18) {
youngerUsers.push(user);
}
@@ -105,11 +105,11 @@ const users = [
];
// functional way
const userNames = users.map(user => user.name);
const userNames = users.map((user) => user.name);
// iterative way
const userNames = [];
users.forEach(user => {
users.forEach((user) => {
userNames.push(user.name);
});
@@ -140,7 +140,7 @@ const totalAge = users.reduce((acc, user) => acc + user.age, 0);
// iterative way
let totalAge = 0;
users.forEach(user => {
users.forEach((user) => {
totalAge += user.age;
});
@@ -166,7 +166,7 @@ const users = [
];
// functional way
const hasYoungUsers = users.some(user => user.age < 18);
const hasYoungUsers = users.some((user) => user.age < 18);
// iterative way
let hasYoungUsers = false;
@@ -193,7 +193,7 @@ const users = [
];
// functional way
const allUsersAreOldEnough = users.every(user => user.age < 18);
const allUsersAreOldEnough = users.every((user) => user.age < 18);
// iterative way
let allUsersAreOldEnough = true;
@@ -219,7 +219,7 @@ const found = pets.includes("dog");
// iterative way
let found = false;
pets.forEach(pet => {
pets.forEach((pet) => {
if (pet === "dog") {
found = true;
}
@@ -130,13 +130,13 @@ Below is the same code implemented without using Async / Await as a comparision.
```js
function getCharacters() {
return fetch(`https://rickandmortyapi.com/api/character`)
.then(response => response.json())
.then(response => response.results);
.then((response) => response.json())
.then((response) => response.results);
}
getCharacters()
.then(characters => {
.then((characters) => {
console.log(characters); // (20) [{...}, {...}, {...}]
})
.catch(err => console.error(err));
.catch((err) => console.error(err));
```
@@ -43,7 +43,7 @@ In order to access this information, we'll have to call the `.then` method on ou
to access the actual members like so.
```js
getMembers("The Programmers Hangout").then(members => {
getMembers("The Programmers Hangout").then((members) => {
console.log(members); // (32k) [{...}, {...}, {...}]
});
```
@@ -64,7 +64,7 @@ You may have tried doing something like this before.
```js
// Incorrect code, don't copy!
let results;
getWeather("Los Angeles").then(weather => {
getWeather("Los Angeles").then((weather) => {
results = weather;
});
console.log(results); // undefined
@@ -80,7 +80,7 @@ you can watch [this amazing talk](https://youtu.be/8aGhZQkoFbQ) on it to learn m
In order to fix this problem we need to move the `console.log` inside the `.then` callback like so:
```js
getWeather("Los Angeles").then(weather => {
getWeather("Los Angeles").then((weather) => {
console.log(weather); // Sunny, probably
});
```
@@ -93,11 +93,11 @@ You can try it in your browser if you want to test it out.
```js
function getCharacters() {
return fetch(`https://rickandmortyapi.com/api/character`)
.then(response => response.json())
.then(response => response.results);
.then((response) => response.json())
.then((response) => response.results);
}
getCharacters().then(characters => {
getCharacters().then((characters) => {
console.log(characters); // (20) [{...}, {...}, {...}]
});
```
@@ -9,9 +9,9 @@ The first naive attempt, using new Promise for something that already returns a
```js
function doAsync(number) {
return new Promise(function(resolve, reject) {
doDatabase().then(function(dbResult) {
otherDbFunction(dbResult).then(function(secondResult) {
return new Promise(function (resolve, reject) {
doDatabase().then(function (dbResult) {
otherDbFunction(dbResult).then(function (secondResult) {
resolve(secondResult + 10);
});
});
@@ -24,8 +24,8 @@ already returns a promise, you can just return the original thing.
```js
function doAsync(number) {
return doDatabase().then(function(dbResult) {
otherDbFunction(dbResult).then(function(secondResult) {
return doDatabase().then(function (dbResult) {
otherDbFunction(dbResult).then(function (secondResult) {
return secondResult + 10;
});
});
@@ -38,10 +38,10 @@ is that they allow you to chain them sequentially.
```js
function doAsync(number) {
return doDatabase()
.then(function(dbResult) {
.then(function (dbResult) {
return otherDbFunction(dbResult);
})
.then(function(secondResult) {
.then(function (secondResult) {
return secondResult + 10;
});
}
@@ -54,7 +54,7 @@ variable, you can pass in the entire function itself to the then block
function doAsync(number) {
return doDatabase()
.then(otherDbFunction)
.then(function(secondResult) {
.then(function (secondResult) {
return secondResult + 10;
});
}
@@ -63,10 +63,10 @@ function doAsync(number) {
And you don't need those returns if you just have ES6 arrow functions
```js
const doAsync = number =>
const doAsync = (number) =>
doDatabase()
.then(otherDbFunction)
.then(secondResult => secondResult + 10);
.then((secondResult) => secondResult + 10);
```
Wow, that last one looks a lot cleaner to me than the first. Keeping that in mind, maybe we could be making some of our other functions cleaner as well
@@ -70,7 +70,7 @@ console.log([...a, ...b]); // [1, 2, 3, 4] - Merged!
Here's a real-world example. Imagine that you're making a function which accepts an `options` object as argument, but you also want to have default values for this object. Here's a not so good way to do it without spread operator:
```js
const f = opts => {
const f = (opts) => {
const options = {};
options.foo = opts.foo || "default value";
options.bar = opts.bar || "default value";
@@ -82,7 +82,7 @@ const f = opts => {
This works, but here's a better way:
```js
const f = opts => {
const f = (opts) => {
const defaults = {
foo: "default value",
bar: "default value",