1. JavaScript Intro

Callbacks & Array Methods

Map function

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

example 1

const array1 = [1, 4, 9, 16];
//pass a function to map
const map1 = array1.map(x => x * 2);
// expected output: Array [2, 8, 18, 32]

example 2

text = [" timot", "    dart", "sass    ", " e Jo"]
const cleanName = function(x){
return x.map(function(t){
return t.trim()
})
}

Arrow functions

const add = (x,y) => {
    return x+y
}

Implicit Return (only works with 1 statement in the function)

const rollDie = () => (
    Math.random() * 6 + 1 
)

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

Scheduling execution

Set Timeout

setTimeout(() =>(
console.log('Hello')), 3000)

Set Interval Repeat function at set intervals

setInterval( () => (
    console.log(Math.random())
))

Clear Interval

const id = setInterval( () => (
    console.log(Math.random())
)) 
clearInterval(id)

Filter

numbers.filter( n => {
    return n < 4)
    })

Every

Some

Reduce

Newer JavaScript Features

Default Parameters

function multiply (a, b = 5){
    return...
}

Spread in function call

const nums = [12, 3, 5, 6]
Math.max(...nums)

Spread in array

const allPets = [...dogs, ...cats]

Spread in Object Literals

Useful when creating copy of objects with additional properties (take data from a form and add extra data (admin rights, userId…))

const feline = { legs: 4, family: 'felix' };
const canine = { isFurry: true, family: 'dogs'};
{ ...feline, color: 'black' }

Rest

function sum(){
    console.log(arguments)  //I can pass as many args I want when calling sum (it is not an array -> use rest)
}

function sum(...nums) {
    return console.log(nums) //nums is an array
}

Destructuring Arrays

const scores = [10, 8, 6, 4];
const [gold, silver, ...everyoneElse] = scores;   //gold = 10, silver = 8

Destructuring Objects

const user = {
    email:  ;
    password:   ;
    fisrtName:  ;
    lastName:   ;
    born:     ;
}
const {email} = user;   //equivalent to const email = user.email
const { born: birthYear = "N/A"} = user; //rename variable and assign default values

Destructuring Params

function fullName(user){
    return `${user.firstName}, ${user.lastName}`
}

function fullName({firstName, lastName = 'aaa'}){
    return `${user.firstName}, ${user.lastName}`
   }

DOM

JS representation of a webpage.

const allImages = document.getElementsByTagName('img')
for (let image of allImages){
    img. ...
}

Query selector

document.querySelector('h1') //works with class, tags, ids (must use a css selector!). Return the first match
document.querySelectorAll('h1') //selects all

ClassList

h2.classList.add('aaa')
h2.classList.remove('bbb')
h2.classList.contains('red')
h2.classList.toggle('purple')

Change events

form.addEventListener('submit', function(e) {
    e.preventDefault(); \\stop the form from being sent
})

Event bubbling

form.addEventListener('submit', function(e) {
    e.stopPropagation(); \\stop the nested clicking from happening
})

Event Delegation

const container = document.querySelector('ui');

container.addEventListener('click', function(e) {
    e.target.remove() //item clicked
})

Use Bulma instead of Bootstrap

Written on March 26, 2021