├── README.md
├── async-await.js
├── console-log.js
├── destructuring.js
├── index.html
├── loops.js
├── rest-params.js
├── spread-syntax.js
└── template-literals.js
/README.md:
--------------------------------------------------------------------------------
1 | # Code this, not that - JavaScript
2 |
3 | Watch the video on [YouTube](https://www.youtube.com/watch?v=Mus_vwhTCq0).
--------------------------------------------------------------------------------
/async-await.js:
--------------------------------------------------------------------------------
1 | const random = () => {
2 | return Promise.resolve(Math.random())
3 | }
4 |
5 | 'Bad Promise Code 💩'
6 |
7 | const sumRandomAsyncNums = () => {
8 | let first;
9 | let second;
10 | let third;
11 |
12 | return random()
13 | .then(v => {
14 | first = v;
15 | return random();
16 | })
17 | .then(v => {
18 | second = v;
19 | return random();
20 | })
21 | .then(v => {
22 | third = v;
23 | return first + second + third
24 | })
25 | .then(v => {
26 | console.log(`Result ${v}`)
27 | });
28 | }
29 |
30 |
31 | 'Good Promise Code ✅'
32 |
33 | const sumRandomAsyncNums = async() => {
34 |
35 | const first = await random();
36 | const second = await random();
37 | const third = await random();
38 |
39 | console.log(`Result ${first + second + third}`);
40 |
41 | if (await random()) {
42 | // do something
43 | }
44 |
45 | const randos = Promise.all([
46 | random(),
47 | random(),
48 | random()
49 | ])
50 |
51 | for(const r of await randos) {
52 | console.log(r)
53 | }
54 |
55 |
56 | }
57 |
58 |
59 |
60 | sumRandomAsyncNums()
--------------------------------------------------------------------------------
/console-log.js:
--------------------------------------------------------------------------------
1 | const foo = { name: 'tom', age: 30, nervous: false };
2 | const bar = { name: 'dick', age: 40, nervous: false };
3 | const baz = { name: 'harry', age: 50, nervous: true };
4 |
5 |
6 | 'Bad Code 💩'
7 |
8 | console.log(foo);
9 | console.log(bar);
10 | console.log(baz);
11 |
12 |
13 |
14 | 'Good Code ✅'
15 |
16 | // Computed Property Names
17 |
18 | console.log('%c My Friends', 'color: orange; font-weight: bold;' )
19 | console.log({ foo, bar, baz });
20 |
21 | // Console.table(...)
22 | console.table([foo, bar, baz])
23 |
24 |
25 | // // Console.time
26 | console.time('looper')
27 |
28 | let i = 0;
29 | while (i < 1000000) { i ++ }
30 |
31 | console.timeEnd('looper')
32 |
33 | // // Stack Trace Logs
34 |
35 | const deleteMe = () => console.trace('bye bye database')
36 |
37 | deleteMe()
38 | deleteMe()
39 |
40 |
--------------------------------------------------------------------------------
/destructuring.js:
--------------------------------------------------------------------------------
1 | const turtle = {
2 | name: 'Bob 🐢',
3 | legs: 4,
4 | shell: true,
5 | type: 'amphibious',
6 | meal: 10,
7 | diet: 'berries'
8 | }
9 |
10 | 'Bad Code 💩'
11 |
12 | function feed(animal) {
13 | return `Feed ${animal.name} ${animal.meal} kilos of ${animal.diet}`;
14 | }
15 |
16 |
17 | 'Good Code ✅'
18 |
19 | function feed({ name, meal, diet }) {
20 | return `Feed ${name} ${meal} kilos of ${diet}`;
21 | }
22 |
23 | // OR
24 |
25 | function feed(animal) {
26 | const { name, meal, diet } = animal;
27 | return `Feed ${name} ${meal} kilos of ${diet}`;
28 | }
29 |
30 |
31 |
32 | console.log(feed(turtle))
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Code This, Not That - JavaScript
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/loops.js:
--------------------------------------------------------------------------------
1 |
2 | const orders = [500, 30, 99, 15, 223];
3 |
4 |
5 | 'Bad Loop Code 💩'
6 |
7 | const total = 0;
8 | const withTax = [];
9 | const highValue = [];
10 | for (i = 0; i < orders.length; i++) {
11 |
12 | // Reduce
13 | total += orders[i];
14 |
15 | // Map
16 | withTax.push(orders[i] * 1.1);
17 |
18 | // Filter
19 | if (orders[i] > 100) {
20 | highValue.push(orders[i])
21 | }
22 | }
23 |
24 |
25 | 'Good Loop Code ✅'
26 |
27 | // Reduce
28 | const total = orders.reduce((acc, cur) => acc + cur)
29 |
30 | // Map
31 | const withTax = orders.map(v => v * 1.1)
32 |
33 | // Filter
34 | const highValue = orders.filter(v => v > 100);
35 |
36 | /**
37 | * Every
38 | * @returns false
39 | */
40 | const everyValueGreaterThan50 = orders.every(v => v > 50)
41 |
42 | /**
43 | * Every
44 | * @returns true
45 | */
46 | const everyValueGreaterThan10 = orders.every(v => v > 10)
47 |
48 |
49 | /**
50 | * Some
51 | * @returns false
52 | */
53 | const someValueGreaterThan500 = orders.some(v => v > 500)
54 |
55 | /**
56 | * Some
57 | * @returns true
58 | */
59 | const someValueGreaterThan10 = orders.some(v => v > 10)
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/rest-params.js:
--------------------------------------------------------------------------------
1 | 'Bad Function Code 💩'
2 |
3 | function totalHitPoints(a, b, c, d) {
4 | return a + b + c + d;
5 | }
6 |
7 | 'Good Function Code ✅'
8 |
9 | function totalHitPoints(...hits) {
10 | return hits.reduce((a, b) => a + b);
11 | }
12 |
13 | totalHitPoints(1,2,3,4,5,6,7,)
--------------------------------------------------------------------------------
/spread-syntax.js:
--------------------------------------------------------------------------------
1 |
2 | // Objects
3 |
4 | const pikachu = { name: 'Pikachu 🐹' };
5 | const stats = { hp: 40, attack: 60, defense: 45 }
6 |
7 | 'Bad Object Code 💩'
8 |
9 | pikachu['hp'] = stats.hp
10 | pikachu['attack'] = stats.attack
11 | pikachu['defense'] = stats.defense
12 |
13 | // OR
14 |
15 | const lvl0 = Object.assign(pikachu, stats)
16 | const lvl1 = Object.assign(pikachu, { hp: 45 })
17 |
18 | 'Good Object Code ✅'
19 |
20 | const lvl0 = { ...pikachu, ...stats }
21 | const lvl1 = { ...pikachu, hp: 45 }
22 |
23 |
24 | // Arrays
25 |
26 | let pokemon = ['Arbok', 'Raichu', 'Sandshrew'];
27 |
28 | 'Bad Array Code 💩'
29 |
30 | pokemon.push('Bulbasaur')
31 | pokemon.push('Metapod')
32 | pokemon.push('Weedle')
33 |
34 | 'Good Array Code ✅'
35 |
36 | // Push
37 | pokemon = [...pokemon, 'Bulbasaur', 'Metapod', 'Weedle']
38 |
39 | // Shift
40 |
41 | pokemon = ['Bulbasaur', ...pokemon, 'Metapod', 'Weedle', ]
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/template-literals.js:
--------------------------------------------------------------------------------
1 | const horse = {
2 | name: 'Topher 🐴',
3 | size: 'large',
4 | skills: ['jousting', 'racing'],
5 | age: 7
6 | }
7 |
8 | 'Bad String Code 💩'
9 |
10 | let bio = horse.name + ' is a ' + horse.size + ' horse skilled in ' + horse.skills.join(' & ')
11 |
12 | 'Good String Code ✅'
13 | const { name, size, skills } = horse;
14 | bio = `${name} is a ${size} horse skilled in ${skills.join(' & ')}`
15 | console.log(bio);
16 |
17 | // Advanced Tag Example
18 |
19 | function horseAge(str, age) {
20 |
21 | const ageStr = age > 5 ? 'old' : 'young';
22 | return `${str[0]}${ageStr} at ${age} years`;
23 | }
24 |
25 | const bio2 = horseAge`This horse is ${horse.age}`;
26 | console.log(bio2)
27 |
28 |
--------------------------------------------------------------------------------