javascript basics.md

sorting

const numbers = [43, 56, 33, 23, 44, 36, 5];

val = numbers.sort()
// [ 23, 33, 36, 43, 44, 5, 56 ]

// use a compare function and pass it as a callback
val = numbers.sort(function(x, y){
  return x - y;
});
// [ 5, 23, 33, 36, 43, 44, 56 ]

// reverse sort
val = numbers.sort(function(x, y){
  return y - x;
});
// [ 56, 44, 43, 36, 33, 23, 5 ]

ternary operator

if(id === 100){
  'correct'
} else {
  'incorrect'
}

id === 100 ? 'correct' : 'incorrect'

functions

// function declaration
function hi(){
    console.log('hi');
}

// function expression
var hi = function(){
    console.log('hi');
};

// immediately invokable function expressions - IIFEs
(function(){
    console.log('hi');
})();

loops

// loop over array
const cars = ['ford', 'chevy', 'honda', 'toyota']

for(let i=0; i<cars.length; i++){
    console.log(cars[i]);
}

cars.forEach(function(car){
    console.log(car);
});

for(let i in cars){
    console.log(cars[i]);
}

// loop over object
const user = {
    firstName: 'john',
    lastName: 'doe',
    age: 40,
}

for(let i in user){
    console.log(`${i} : ${user[i]}`);
}

callback functions

• function passed in as a parameter to a function and called in that function
• function that is to be executed after another function has finished executing

function doHomework(subject, callback) {
  console.log(subject);
  callback();
}

function alertFinished(){
  console.log('finish');
}

doHomework('math', alertFinished);

without callback

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}

function second(){
  console.log(2);
}

first();
second();
// 2
// 1

with callback

function first(callback){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
    callback();
  }, 500 );
}

function second(){
  console.log(2);
}

first(second);
// 1
// 2

Promise

// inside Promise pass in a function with resolve, reject as parameters
function doHomework2(subject) {
  return new Promise(function(resolve, reject){
    console.log(subject);
    resolve();
  });

}

function alertFinished(){
  console.log('finish');
}

doHomework2('math').then(alertFinished);

arrow functions

• shorter syntax
• () => { statements }
• (parameter) => { statements }
• parameter => { statements }
• (parameter1, parameter2) => { statements }

// Normal function
const sayHello = function() {
  console.log('hello');
}

sayHello();
// hello

const sayHello2 = () => {
  console.log('hello');
}

sayHello2();
// hello

// One line function does not need braces
const sayHello3 = () => console.log('hello');

sayHello3();
// hello

const sayHello4 = function() {
  return 'hello';
}

sayHello4();
// returns -> hello

// simplify one line return
const sayHello5 = () => 'hello';

sayHello5();
// returns -> hello

// Return object
const sayHello6 = () => ({ msg: 'hello' });

sayHello6();
// returns -> {msg: 'hello'}

const sayHello7 = (name) => console.log(name);

sayHello7('bob');
// bob

// for single parameter, () can be removed
const sayHello8 = name => console.log(name);

sayHello8('bob');
// bob

// multiple paramaters needs ()
const sayHello9 = (x, y) => console.log(x, y);

sayHello9('bob', 'alice');
// bob, alice

const users = ['bob', 'alice', 'jane']

const nameLengths = users.map(function(name) {
  return name.length;
});

console.log(nameLengths)
// [3, 5, 4]

const nameLengths2 = users.map((name) => {
  return name.length;
});

console.log(nameLengths2)
// [3, 5, 4]

const nameLengths3 = users.map(name => name.length);

console.log(nameLengths3)
// [3, 5, 4]

Classes

class Person{
  constructor(name) {
    this.name = name;
  }

  hello() {
    return `hello ${this.name}`
  }
}

const mary = new Person('Mary')

console.log(mary);
// Person { name: 'Mary' }

console.log(mary.hello());
// hello Mary

async & await

function myFunc() {
  return 'hello';
}

console.log(myFunc());
// hello

async function myFuncAsync() {
  return 'hello';
}

console.log(myFuncAsync());
// Promise { 'hello' }

myFuncAsync().then(res => console.log(res));
// hello

iterator

• loops that can be paused

generator

• functions that can be paused

function* sayNames() {
  yield 'jack';
  yield 'jill';
  yield 'john';
}

const name = sayNames();

console.log(name.next().value);
// jack

console.log(name.next().value);
// jill

console.log(name.next().value);
// john