├── array-methods.js ├── arrow-functions.js ├── closures.js ├── destructuring.js ├── esmodules.js ├── nullish-operator.js ├── optional-chaining.js ├── parameter-default.js ├── promises-async-await.js ├── rest-spread.js ├── shorthand-property.js ├── template-literals.js └── ternaries.js /array-methods.js: -------------------------------------------------------------------------------- 1 | const users = [ 2 | { 3 | id: 1, 4 | name: 'Giovanna', 5 | languages: [ 6 | 'Javascript', 7 | 'Typescript', 8 | 'Swift', 9 | 'C' 10 | ] 11 | }, 12 | 13 | { 14 | id: 2, 15 | name: 'Leonardo', 16 | languages: [ 17 | 'Javascript', 18 | 'Typescript', 19 | 'Python', 20 | 'Java', 21 | 'Dart', 22 | 'Golang', 23 | 'Kotlin' 24 | ] 25 | }, 26 | 27 | { 28 | id: 3, 29 | name: 'Mario', 30 | languages: [ 31 | 'C#', 32 | 'C' 33 | ] 34 | }, 35 | 36 | { 37 | id: 4, 38 | name: 'Diego', 39 | languages: [ 40 | 'Python', 41 | 'Javascript' 42 | ] 43 | }, 44 | 45 | ] 46 | 47 | users.find(user => user.name === 'Giovanna'); 48 | // { id: 1, name: 'Giovanna', languages: [ 'Javascript', 'Swift', 'C' ] } 49 | 50 | users.some(user => user.languages.includes('Assembly')); 51 | // false 52 | 53 | users.some(user => user.languages.includes('Python')); 54 | // false 55 | 56 | users.every(user => user.languages.includes('C#')); 57 | // false 58 | 59 | users.map(user => user.name); 60 | // ['Giovanna', 'Leonardo', 'Mario', 'Diego'] 61 | 62 | users.filter(user => user.languages.includes('Javascript')); 63 | // all objects except Mario, from id: 3 64 | 65 | users.find(user => user.name === 'Giovanna'); 66 | // { id: 1, name: 'Giovanna', email: 'giovanna@gmail.com' } 67 | 68 | -------------------------------------------------------------------------------- /arrow-functions.js: -------------------------------------------------------------------------------- 1 | const sum = (a, b) => a + b; 2 | const diff = (a, b) => a - b; 3 | const returnFive = () => 5; 4 | 5 | // It's the same as: 6 | 7 | function sum(a, b) { 8 | return a + b; 9 | } 10 | 11 | function returnFive() { 12 | return 5; 13 | } 14 | 15 | function diff(a, b) { 16 | return a - b; 17 | } 18 | 19 | // React: 20 | function Users({users}) { 21 | return ( 22 | 31 | ) 32 | } -------------------------------------------------------------------------------- /closures.js: -------------------------------------------------------------------------------- 1 | // Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned. 2 | 3 | const myName = 'Giovanna'; // external (global variable is not a good practice) 4 | 5 | function printName() { // another scope 6 | console.log(`Hey, ${myName}!`); // available in this function 7 | } 8 | // this scope has access to global scope 9 | 10 | printName(); 11 | 12 | // Closure 13 | 14 | function outerFunction(outerVariable) { 15 | return function innerFunction(innerVariable) { 16 | console.log(`Outer variable: ${outerVariable}`); 17 | console.log(`Inner variable: ${innerVariable}`); // inner function has access to outside function, even if outer function is not available anymore. 18 | } 19 | } 20 | 21 | const newFunction = outerFunction('outside'); 22 | newFunction('inside'); 23 | 24 | const add = (function() { 25 | let cont = 0; 26 | return function() { 27 | cont++; 28 | return cont; 29 | } 30 | })(); 31 | 32 | add(); 33 | add(); 34 | add(); // cont is now 3 35 | -------------------------------------------------------------------------------- /destructuring.js: -------------------------------------------------------------------------------- 1 | const values = { 2 | x: 5, 3 | y: 8, 4 | z: 3, 5 | } 6 | 7 | function calculate({x, y, z}) { 8 | return x + y + z; 9 | } 10 | calculate(values); 11 | 12 | // It's the same as: 13 | function calculate(values) { 14 | const {x, y, z} = values; 15 | return x + y + z; 16 | } 17 | calculate(values); 18 | 19 | // It's the same as: 20 | function calculate(values) { 21 | const x = values.x; 22 | const y = values.y; 23 | const z = values.z; 24 | return x + y + z; 25 | } 26 | calculate(values); 27 | 28 | // React: 29 | function UserGitHubImg({ username = 'ghost', ...props }) { 30 | return 31 | } 32 | 33 | function nestedArrayAndObject() { 34 | 35 | // refactor this to a single line of destructuring... 36 | 37 | const info = { 38 | title: 'Once Upon a Time', 39 | protagonist: { 40 | name: 'Emma Swan', 41 | enemies: [ 42 | {name: 'Regina Mills', title: 'Evil Queen'}, 43 | {name: 'Cora Mills', title: 'Queen of Hearts'}, 44 | {name: 'Peter Pan', title: `The boy who wouldn't grow up`}, 45 | {name: 'Zelena', title: 'The Wicked Witch'}, 46 | ], 47 | }, 48 | } 49 | 50 | const { title, protagonist: { name: protagonistName, enemies: [, , { name: enemyName, title: enemyTitle, }] } } = info; 51 | 52 | /*const { 53 | title, 54 | protagonist: { 55 | name: protagonistName, 56 | enemies: [, , { 57 | name: enemyName, 58 | title: enemyTitle, 59 | }] 60 | } 61 | } = info -> multiple lines; */ 62 | 63 | console.log(`${enemyName} (${enemyTitle}) is an enemy to ${protagonistName} in "${title}"`); 64 | } 65 | 66 | nestedArrayAndObject(); 67 | 68 | const [a, b] = [10, 20]; 69 | console.log(a, b); // 10, 20 -------------------------------------------------------------------------------- /esmodules.js: -------------------------------------------------------------------------------- 1 | export default function add(a, b) { 2 | return a + b 3 | } 4 | 5 | // import add from './add' -> can change name 6 | 7 | export const myName = 'Giovanna'; 8 | // import { myName } from './MyName'; -> can't change name 9 | 10 | export function diff(a, b) { 11 | return a - b; 12 | } 13 | 14 | export function mult(a, b) { 15 | return a * b; 16 | } 17 | 18 | // import { diff, mult } from './utils'; 19 | 20 | // import * as Something from './some-module'; 21 | 22 | import('./some-module').then( 23 | allModuleExports => { 24 | // the allModuleExports object will be the same object you get if you had 25 | // used: import * as allModuleExports from './some-module' 26 | // the only difference is this will be loaded asynchronously which can 27 | // have performance benefits in some cases 28 | }, 29 | error => { 30 | // handle the error 31 | // this will happen if there's an error loading or running the module 32 | }, 33 | ) 34 | 35 | // React: 36 | import React, { useState, useEffect } from 'react' -------------------------------------------------------------------------------- /nullish-operator.js: -------------------------------------------------------------------------------- 1 | let x = null; 2 | x = x || 10; 3 | // problematic -> numbers/booleans 0 and false are valid value. 4 | console.log(x); 5 | 6 | function add(a, b) { 7 | a = a ?? 0; // if a isn't a valid number, then it's 0 8 | b = b ?? 0; 9 | return a + b; 10 | } 11 | 12 | console.log(add(null, 4)); 13 | 14 | // It's the same as: 15 | function add(a, b) { 16 | a = a === null ? 0 : a; 17 | b = b === null ? 0 : b; 18 | return a + b; 19 | } 20 | 21 | // React: 22 | function DisplayUserName({user}) { 23 | return
{user.name ?? 'Unknown'}
24 | } 25 | 26 | -------------------------------------------------------------------------------- /optional-chaining.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | name: 'Giovanna', 3 | address: { 4 | street: 'Av. Paulista' 5 | } 6 | } 7 | 8 | const streetName = user?.address?.street; 9 | console.log(streetName); 10 | 11 | // It's the same as: 12 | console.log(user && user.address.street); 13 | 14 | // optional chaining does not replace checks like if (typeof options == "undefined") 15 | 16 | // React: 17 | 18 | function UserProfile({user}) { 19 | return ( 20 |
21 |

{user.name}

22 | {user.bio?.slice(0, 50)}... 23 |
24 | ) 25 | } 26 | 27 | // && -> React 28 | function Mailbox(props) { 29 | const unreadMessages = props.unreadMessages; 30 | return ( 31 |
32 |

Hello!

33 | {unreadMessages.length > 0 && 34 |

35 | You have {unreadMessages.length} unread messages. 36 |

37 | } 38 |
39 | ); 40 | } -------------------------------------------------------------------------------- /parameter-default.js: -------------------------------------------------------------------------------- 1 | function sum(a, b = 0) { 2 | return a + b; 3 | } 4 | 5 | console.log(sum(2, 3)); 6 | console.log(sum(2)); 7 | 8 | // It's the same as: 9 | 10 | const sum = (a, b = 0) => a + b; 11 | 12 | // It's the same as: 13 | function add(a, b) { 14 | b = b === undefined ? 0 : b; 15 | return a + b; 16 | } 17 | 18 | function diff(a = 5, b) { 19 | return a - b; 20 | } 21 | 22 | console.log(diff(4, 1)); 23 | console.log(diff(undefined, 5)); // weird!!!!! -------------------------------------------------------------------------------- /promises-async-await.js: -------------------------------------------------------------------------------- 1 | // Async code 2 | // Async/await -> special syntax for dealing with promises 3 | 4 | const fs = require('fs'); 5 | 6 | setTimeout(() => { 7 | console.log('Waited 1 second'); 8 | setTimeout(() => { 9 | console.log('Waited 2 seconds') 10 | setTimeout(() => { 11 | console.log('Waited 3 seconds') 12 | }, 1000) 13 | }, 1000) 14 | }, 1000); // Callback Hell! 15 | 16 | /*const btn; 17 | btn.addEventListener('click', () => { 18 | // This function is a callback 19 | });*/ 20 | 21 | fs.readFile('./test.txt', { encoding: 'utf-8' }, (err, data) => { 22 | // Callback function 23 | if(err) { 24 | console.error(err); 25 | } else { 26 | console.log(data); 27 | } 28 | }); 29 | 30 | // Promises 31 | 32 | const myPromise = new Promise((resolve, reject) => { 33 | const rand = Math.floor(Math.random() * 2); 34 | if(rand === 0) { 35 | // succesfull 36 | resolve(); 37 | } else { 38 | reject(); 39 | } 40 | }); 41 | 42 | myPromise.then(() => console.log('Success')).catch(() => console.log('Something went wrong')); 43 | //.then() only handles succesfull cases 44 | //.catch() handles errors 45 | 46 | fs.promises.readFile('./test.txt', { encoding: 'utf-8' }).then(data => console.log(data)).catch(error => console.error(error)); 47 | 48 | fetch('https://pokeapi.co/api/v2/pokemon/ditto').then(res => res.json()).then(data => console.log(data)).catch(err => console.log(err)); 49 | 50 | // Async await 51 | 52 | const loadFile = async () => { 53 | try { 54 | const data = await fs.promises.readFile('./test.txt', {encoding: 'utf-8'}); 55 | console.log(data); 56 | } catch(e) { 57 | console.error(e); 58 | } 59 | } 60 | loadFile(); 61 | 62 | const fetchPokemon = async(id) => { 63 | try { 64 | const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`); 65 | const data = await res.json(); 66 | console.log(data); 67 | } catch(e) { 68 | console.error(e); 69 | } 70 | } 71 | 72 | fetchPokemon(1); -------------------------------------------------------------------------------- /rest-spread.js: -------------------------------------------------------------------------------- 1 | // Collection 2 | 3 | const arr = [3, 4, 5]; 4 | const maxValue = Math.max(...arr); 5 | console.log(maxValue); // 5 6 | 7 | // It's the same as: 8 | 9 | Math.max.apply(null, arr); 10 | 11 | const obj1 = { 12 | a: 'a from obj1', 13 | b: 'b from obj1', 14 | c: 'c from obj1', 15 | d: { 16 | e: 'e from obj1', 17 | f: 'f from obj1', 18 | }, 19 | } 20 | 21 | const obj2 = { 22 | b: 'b from obj2', 23 | c: 'c from obj2', 24 | d: { 25 | g: 'g from obj2', 26 | h: 'g from obj2', 27 | }, 28 | } 29 | 30 | const obj3 = {...obj1, ...obj2}; 31 | console.log(obj3); 32 | 33 | // It's the same as: 34 | console.log(Object.assign({}, obj1, obj2)); 35 | 36 | function add(first, ...rest) { 37 | return rest.reduce((sum, next) => sum + next, first); 38 | } 39 | 40 | // It's the same as: 41 | function add() { 42 | const first = arguments[0]; 43 | const rest = Array.from(arguments).slice(1); 44 | return rest.reduce((sum, next) => sum + next, first); 45 | } 46 | 47 | console.log(add(0, 2, 3, 5)); -------------------------------------------------------------------------------- /shorthand-property.js: -------------------------------------------------------------------------------- 1 | const myName = 'Giovanna'; 2 | const age = 20; 3 | const occupation = 'Developer'; 4 | 5 | console.log({ 6 | myName, 7 | age, 8 | occupation 9 | }); 10 | 11 | // It's the same as: 12 | console.log({ 13 | myName: myName, 14 | age: age, 15 | occupation: occupation, 16 | }); 17 | 18 | // React: 19 | function Counter({initialCount, step}) { 20 | const [count, setCount] = useCounter({initialCount, step}) 21 | return 22 | } -------------------------------------------------------------------------------- /template-literals.js: -------------------------------------------------------------------------------- 1 | const greeting = "Hello World"; 2 | const myName = "Giovanna Moeller"; 3 | 4 | console.log(`${greeting}, ${myName}!!!`); 5 | // It's the same as: 6 | console.log(greeting + ', ' + myName + '!!!'); 7 | 8 | // React: 9 | function Box({name, ...props}) { 10 | return
11 | } -------------------------------------------------------------------------------- /ternaries.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | name: 'Giovanna', 3 | isLoggedIn: false, 4 | } 5 | 6 | const message = user.isLoggedIn ? 'User is logged in!' : 'User is not logged in!'; 7 | console.log(message); 8 | 9 | // It's the same as: 10 | let string; 11 | if(user.isLoggedIn) { 12 | string = 'User is logged in!'; 13 | } else { 14 | string = 'User is not logged in!'; 15 | } 16 | 17 | console.log(string); 18 | 19 | // React: 20 | function UserList({users}) { 21 | return ( 22 |
23 | {users.length ? ( 24 | 31 | ) : ( 32 |
There are no users.
33 | )} 34 |
35 | ) 36 | } --------------------------------------------------------------------------------