JS Mastery First Ten Videos – Notes


Uncategorized

Updated Aug 9th, 2021

Learn Async/Await in This Real World Project

Video here 27 minutes long. First video on the channel 12/25/2018.

Leverages two APIs: Exchange rate and Countries.

Exchange rate: data.fixer.io/api/latest?access_key=APIKEYHERE

Countries: https://restcoutries.eu/rest/v2/currency/${currencyCode}

Three functions: getExchangeRate, getCountries, convertCurrency

npm init and install axios.

Test what we get from the API.

4:37 we start writing the first function.

/* The non-promises way */
axios.get("urlToAPI").then(response) => {
  const rate = response.data.rates
  const euro = 1 / rate[fromCurrency]
  const echangeRate = euro * rate[toCurrency]
}

converted to async/await version

const getExchangeRate = async (fromCurrency, toCurrency) => {
  const response = await axios.get("urlToAPI")
  const rate = response.data.rates
  const euro = 1 / rate[fromCurrency]
  const echangeRate = euro * rate[toCurrency]

  return exchangeRate
}

At 11 minutes we write the second function “getCountries”

At 14 minutes we write the third function “convertCurrency” that makes use of the two pervious function.

21m a little error handling. I like the “isNan if check.”

JavaScript Exercise | Learn JavaScript with Exercism | #0 Setup

video here and exercism.io, (Level up your programming skills with 3,450 exercises across 52 languages).

cd into folder, run npm i to install dependencies for that exercise. Export the function so exercism can test your solution.

“exercism submit nameOfFile.js” to test your solution.

JavaScript ES6 for Beginners

JS Mastery’s third video here.

const and let, arrow functions, template literal strings, default parameters, array destructuting, object destructuring, rest operator, spread operator.

defaults parameters just put the equal sign next to the parameter. imaging add function, with a and b as parameters, you should set default’s to zero to avoid getting NaN.

const add = (a = 0, b = 0) => return a + b

add() // get zero instead of NaN

The rest operator allows us to not implicitly specify how many arguments a function will have.

const add = (a, b, c) => console.log([a, b, c]).reduce((a, b) => a + b, 0)

// becomes

const add = (...) => console.log([a, b, c]).reduce((a, b) => a + b, 0)

// now we can call with any number of arguments

add(1, 2, 3, 4, 5, 6, 7, 8)

The spread operator uses the same three dots syntax but “spreads” values into an array.

ES7 and ES8

Fourth JSMastery video here.

padStart/padEnd: Never seen this besides this video?

Object.values

“Object.entries” gives the key/value pairs of an object.

Exponentiation simpler syntax: “Math.pow(2, 3)” was the old way to handle exponents and now we get a new syntax “(2 ** 3)”.

Trailing commas is not a new feature but we don’t get a syntax error on the last value in an object or array when it has an unnecessary trailing comma.

Learn JSON in Real World React App

Fifth ever JSMastery video here.

Random quote generator using create-react-app and “andruxnet-random-famous-quotes.p.mashape.com” API that seems to no longer be valid. Here is the link to the new API URL, (note that this API requires a key):

“https://rapidapi.com/andruxnet/api/random-famous-quotes/”

Creates a quote object has quote, author, category properties. Major difference with JSON is the key needs to be wrapped in double quotes.

import axios

Use async function “getQuotes”

uses material-ui/core

import {Button, Card, CardContent, Typography} from "material-ui/core"
<Card className="card">
  <CardContent>
    <Typography variant="h2"></Typography>
    <Typography className="marginTop" color="textSecondary"></Typography>
    <hr />
    <Button className="marginTop" color="primary" variant="outlined"></Button>
  </CardContent>
</Card>

// CSS styles available in source

Need to parse JSON after getting the data.

JSON.stringify() converts an object to JSON

JSON.parse() converts JSON to a object

Axios parses JSON into an object by default

How to Create PDF Using Node and React

Significantly more views on this early video on the channel.

In a client project install axios and file-saver packages. Create a proxy in the client?

Also create a server in a new directory/project.

Check this video out with more time.

Must Have Visual Studio Code Extensions

Video here.

Code time – https://marketplace.visualstudio.com/… One Dark Prop – https://marketplace.visualstudio.com/… Bracket Pair Colorizer – https://marketplace.visualstudio.com/… Color Highlight – https://marketplace.visualstudio.com/… Path Intellisense – https://marketplace.visualstudio.com/… ES7 React/Redux/GraphQL/React-Native snippets – https://marketplace.visualstudio.com/… GitLens — Git supercharged – https://marketplace.visualstudio.com/…

Watch with more time.

Top 10 JavaScript Array Methods

Check out the “Array Methods” post as well.

JavaScript Map and Set Explained

const myArray = [1, 2, 3, 4, 5, 5, 5, 1, 2]
const mySet = new Set(myArray)

The “Set” object lets you store unique values of any type, primitives or object references. Used to remove duplicate values for an array.

Can easily use a set to turn back into an array.

const uniqueArray = [ ...mySet ]

Explore different methods: add(), delete(), .clear(), has(), size()

Differences between arrays and Sets: Array is ordered where Set is unorder so can’t use index.

Set is meant to not replace array but to provide additional support to an array.

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any values, both objects and primitives, can be stored as either a key or value. Map is a data structure that exists in other programming languages. introduced in ES6. map values to other values and Most importantly can use objects as keys.

const myMap = newMap([ ['name', 'John'], ['surname' 'Doe'] ])

The problem that Map solves is that JS objects only support one one key object.

const myObj = {}

const a = {}
const b = {}

myObject[a] = 'a'
// myObject[b] = 'b'

console.log(myObject) // gets back {'[object Object]': 'a'}

When we add a second object b, the a object gets overridden.


const a = {}
const b = {}

const mymap = {[ [a: 'a'], [b: 'b'] ]}


map
console.log(my) // gets back { {} => 'a', {} => 'b'}

The Map keeps track of both key objects.

Different methods Map has to offer: set(), delete(), clear(), has(), size()

Git Commands Tutorial for Beginners

git –version

git add single files versus all files

Create a snapshot like a giant copy/paste using git commit -m

git messages should NOT be in past tense (add navbar versus added navbar)

push to remote repository

add new remote by using “git remote add origin”

For the first time “git push -u origin master”

branches are pointers to specific commits or clusters of commits

git branch to see all branches

git checkout -b newBranchName

First time you are setting the branch you need to –set-upstream?

Merge with “git checkout master” and the “git merge branch”

Change branches quickly in visual studio code by clicking on the bottom left branch icon in VSCode.

After merging use “git pull” on the to master branch to make sure you are “up to date.”