mirror of
https://github.com/Stone-Red-Code/website.git
synced 2026-09-04 09:15:58 +02:00
style: format codebase
This commit is contained in:
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user