cohort 22

functions.js

// because of hoisting, variables are typically declared at the top of the "scope"
// var a = 1;
// var b;
// var h = "hello";

// you can declare multiple variables at once
// var a = 1, b, h = "hello";

// make sure the file is working
// console.log('hello');

// function statement
// named function
function functionStatement() {
  console.log('statement');
}
functionStatement();

// function expression
// anonymous function
const functionExpr = function() {
  console.log('expression');
};
functionExpr();

// arrow functions
const arrowFunc = () => {
  console.log('arrow func');
}
arrowFunc();

// 1-line arrow func
const arrowFunc2 = () => console.log('one-liner');
arrowFunc2();

// function arguments
const sayHello = function(name) {
  console.log("Hello " + name);
}
sayHello("world");

// function magic variable arguments
const funArguments = function() {
  console.log(arguments);
}
funArguments(1);

// return
const returnFunc = function() {
  console.log('inside function');
  return 'something';
}
console.log(returnFunc());

// *rest pattern
const restFunction = function(...rest) {
  console.log(rest);
}
restFunction(1,2,3);

// default arguments
const defaultFunction = function(a = "a", b = "b") {
  console.log(a, b);
}
defaultFunction(1, 2);
defaultFunction(1);
defaultFunction();

////
// write an if-statement that says if a number is divisible by 3 or 5 
////

// let num = 6;
// if ( ( num % 3 === 0 ) || ( num % 5 === 0 ) )
//   console.log( "I am divisible by 3 or 5" );

// let num = 5;
// if (num % 3 == 0 || num % 5 == 0) {
//   console.log(`${num} is divisible by 3 or 5`)
// }

// let num = 10;
// if (num % 3 == 0) {
//   console.log(`${num} is divisible by 3`)
// } else if (num % 5 == 0) {
//   console.log(`${num} is divisible by 5`);
// } else {
//   console.log(`${num} is not divisible by 3 or 5`);
// }

// const numberFunc = function(number) {
//    if (number % 3 === 0) {
//      console.log('Divisible by 3');
//    } else if (number % 5 === 0){
//      console.log('Divisible by 5');
//    } else if (number % 15 === 0) {
//      console.log('number divisible by 3 and 5');
//    }  else {
//      console.log('Number is not divisible by 3 or 5');
//    }
//  }
//  numberFunc(15);

////
// write a switch/case to turn a state abbreviation into a state name
////

// let abbrev = "CA"; // "FL", "NY"
// // California, Florida, New York
// let stateCode = "HI";
// switch (stateCode) {
//   case "CA":
//     console.log("California");
//     break;
//   case "FL":
//     console.log("Florida");
//     break;
//   case "NY":
//     console.log("New York");
//     break;
//   default:
//     console.log("State code not found.");
// }

// let abbrev = "CA";
// switch(abbrev) {
//   case "CA":
//     console.log('California');
//     break;
//   case "FL":
//     console.log('Florida');
//     break;
//   case "NY":
//     console.log('New York')
//     break;
// }

////
// count from 5 to 10
////

// var i = 5;
// while (i <= 10) {
//  console.log(i);
//  i += 1;
// }

// let num = 5;
// while (num <= 10) {
//   console.log(num);
//   num++;
// }

////
// loop through an array of objects, displaying their name property
////

// let students = [
//   { name: 'Ed'},
//   { name: 'Jo'},
//   { name: 'Tim'}
// ];
// console.log(students);

// for (var i = 0; i < students.length; i++) {
//   console.log(students[i].name);
// }

// for (var key in students) {
//   console.log(students[key].name);
// }

////
// write a function statement to alert the text property of an object
////

// let notice = { text: "Hello world" };

// function alertThis(notice) {
//   alert(notice.text)
// }
// alertThis(notice);

////
// weirdness
////

// JavaScript "blocks"

// 5.times do
//   puts "Hello"
// end

const times = function(number, callback) {
  for (let i = 0; i < number; i++) {
    callback();
  }
}
times(5, function() { console.log("I'm a thing!"); })

function namedFunction() {
  console.log("I'm a named thing!");
}
times(5, namedFunction);


// What are things?
"thing";
4;
[];
{};
(function() {});

// What can you do with a thing?

// 1. You can assign things to variables
// let a = 4;
// let b = [];
// let c = {};
// let d = function() {};

// 2. You can pass things to functions as arguments
// function say(thing) { console.log(thing);}
//
// say(4);
// say("Hello");
// say([]);
// say({});
// say(function() {})

////
// sameness
////

// threequals (triple-equals) is less surprising
// console.log(1 === "1");
// console.log("1" === 1);
// console.log(false == ["0"]);

// NaN sameness is broken
// console.log(NaN == NaN);
// console.log(NaN === NaN);

// Broken NaN sameness makes defensive programming against NaN annoying
const robustFunc = function(arg) {
  // if (typeof(arg) === "number" && isNaN(arg)) { // workaround
  if (Object.is(arg, NaN)) {  // new sameness checker
    console.log("Not so fast!");
  } else {
    console.log("Doing math...");
  }
}
robustFunc("1");
robustFunc(NaN);

// isNaN is weird
console.log(isNaN(NaN));     // == true
console.log(isNaN("hello")); // also true

////
// everything is a hash! (I mean "object literal")
////
let arr = [1,2,3];
arr["x"] = "something";
console.log(arr);
// iterating over an array misses its hashiness
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// this is how you loop over a hash (object literal)
for (var key in arr) {
  console.log(key, arr[key]);
}

// now with a real object literal
let hsh = {a: 1, b: 2, c: 3};
for (var key in hsh) {
  console.log(key, hsh[key]);
}

////
// hoisting
//
// aka. the difference between var, let, and const
////

// this is what you write
// console.log(x);
// var x = 1;

// this is what JavaScript sees
// var x;
// console.log(x);
// x = 1;

// let doesn't hoist
// console.log(x);
// let x = 1;

// const doesn't hoist
// console.log(c);
// const c = 1;

// hoisting also screws up functions
hoistMe();
function hoistMe() {
  console.log('hoist');
}
// same as: var hoistMe = function() { ... }

////
// hoisting pulls code to the top of the "scope"
////

// this is a global variable
//
// var global = 'global';
// console.log(global);

// const scopeFunc = function() {
//   // this is the code that runs
//   // within a function, vars are hoisted to the top of the function (function scope)
//   var local;
//   console.log(local);
//   local = 'local';
//
//   // this is the code that you wrote
//   console.log(local);
//   var local = "local";
//
//   // global variables are available in the function scope
//   console.log(global);
// }
// scopeFunc();

////
// accidentally global
////

// without "var", a is a global variable (just like with "var")
// a = 1;
// console.log(window.a);

// When you are inside a function,
// if you forget to include var/let/const
// then you are accidentally creating
// a global var (which is probably bad)
//
// const scopeFunc = function() {
//   // JS does not treat this as: var a = "inside";
//   // this is accidentally global
//   // so it's more like: window.a = 'inside';
//   a = 'inside'; // the var in the beginning is important
// }
// scopeFunc();
// console.log(a);

////
// why is global scope so bad?
////
// different JS files can screw with your code
// so...
// this is the de-facto JS boilerplate
(function() {
  // your code goes here
})();

////
// scopes can be nested
////

// closure
(function() {
  // "private" variables
  var variable = "var";
  let letVar = "let";
  const c = "const";

  // "private" functions
  function namedFunction() {}
  const constFunction = function() {}

  // "public" function
  // globalFunction "closes over" the variable
  // globalFunction is a "closure"
  window.globalFunction = function() {
    console.log('global func');
    return variable;
  }
})();

hello.js

// this is a comment
console.log('hellojs');
// console.log('hellojs');
// console.log('hellojs');
/**
 * this is a multi-line comment
 * it will keep going until
 * you write
 **/

// control flow (again)
let input;
if (input === undefined) {
  console.log("I'm not defined.");
} else {
  console.log(input);
}

// truthy/falsey refactor
let input2;
if (input2) {
  console.log("I'm something");
} else {
  console.log("I'm a bottom value.");
}

// ternary statements
let input3 = false;
let output = input3 ? "passed" : "failed";
console.log(output);

// else-if
let input4 = "hello";
if (input4 === 0) {
  console.log("zero");
} else if (input4 === 1) {
  console.log('one');
} else {
  console.log("something else");
}

// bracket-less if
let input5 = "hello";
if (input5 === 0) console.log('hello');
else {
  if (input5 === "hello") {
    console.log('something else');
  }
}

// switch/case
let input6 = 123;
switch (input6) {
  case 0:
    console.log('zero');
    break;
  case 1:
    console.log('one');
    break
  default:
    console.log('something else');
}

// fall-through breaks
let input7 = 1;
switch (input7) {
  case 0:
  case 1:
    console.log('zero or one');
    break;
  default:
    console.log('else');
}

// while loops
let n = 1; // start
while (n <= 10) { // end
  console.log(n);
  n++; // step
  // n += 2; // step
}

// breaking while loops
let n2 = 0;
while (true) {
  console.log(n2);
  if (n2 >= 10) {
    break;
  } else {
    n2++;
  }
}

// for-loops
for (var i = 0; i < 10; i++) {
  console.log(i);
}
// var i = 0;
// while (i < 10) {
//   console.log(i);
//   i++;
// }

// for-loops for arrays
let arr = ["a", "b", "c"];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// looping/iterating over arrays (ca. <= 2015)
arr.forEach(function(item) {
  console.log(item);
});
// looping over array (> 2015)
arr.forEach((item) => console.log(item));

//
// functions
//

// function statement
function helloWorld() {
  console.log('hello');
}
helloWorld();

// function args
function hello(name) {
  console.log('Hello ' + name);
}
hello("Wyncode");

// function expressions
// (aka anonymous functions)
// (function() {
//   console.log('hello');
// })

// What is anonymous?
let s = "string"; // named string
"string"; // anonymous string
let num = 1; // named number
1; // anonymous number

// named function
function functionName() {
  // blah
}

// What's an expression?
let h = "hello"; // "hello" is an expr
let num2 = 2; // 2 is an expr
let arr2 = [1,2,3]; // [1,2,3] is an expr
// let f = function hello() {}

// function expr


// named anonymous function expr
var fun2 = (function() {
  console.log('hello');
});
fun2();

// these are the same

// named function statement
function fun() {
  console.log('hello');
}
fun();

// named & anonymous functions work the same
var fun3 = function(name) {
  console.log('hello ' + name)
}
function fun4(name) {
  console.log('hello ' + name)
}
fun3("world");
fun4("world");
console.log(fun3);
console.log(fun4);

// arrow functions
const fun5 = function() {
  console.log('hello');
}
const fun6 = () => {
  console.log('hello');
}
const fun7 = () => console.log('hello');
fun7();

// function returns
const one = function() {
  // console.log('one');
  // 1;  no "implicit return" in JS
  return 1;
}
let result = one();
console.log(result);

// bracket-less arrow function have implicit return
const arrowOne = () => 1;
result = arrowOne();
console.log(result);

// magic variable: arguments
const addArgs = function() {
  // console.log('addArgs');
  // console.log(arguments);
  let sum = 0;
  for (var i = 0; i < arguments.length; i++) {
    // console.log(arguments[i]);
    sum += arguments[i];
  }
  return sum;
}
let sum = addArgs(1, 2, 3, 4);
console.log(sum);

// JS stole the *rest pattern
// default args