Ray Morgan's Examples from Javascript as a Language: Functions

nodevegas-funcitons.js

// This is a comment.
/*
  This is a multiline comment
*/

// ---------------------------------- //
//               Variables            //
// ---------------------------------- //

// -- Numbers:

var aNumber = 1; // Integer
var anotherNumber = 1.23; // Floating point

// -- Boolean:

var isTall = true;
var didRun = false;

// -- Strings:

var aString = "This is a string.";
var anotherString = 'This is also a string.'; // single quotes are the same

"foo" + "bar"; // #=> "foobar"   // + to concat strings


// -- Arrays:

var arr = [1, 2, 3];
var arr2 = [1, 2, 3, 4];  // any length
var arr3 = [1, "foo", 3]; // can hold mixed data

arr3[0];      // #=> 1   // arrays are 0 indexed
arr3[2] = 5;  // replace an element

arr3; // #=> [1, "foo", 5]

arr3[3] = 6;
arr3; // #=> [1, "foo", 5, 6];   // add another element


// -- Objects:

var obj = {};
obj.foo = "bar";
obj; // #=> {foo: "bar"}

// same as above but declared inline
var obj2 = {foo: "bar"};

// Access data in an object
obj.foo;    // #=> "bar"
obj["foo"]; // #=> "bar"   // square brace and dot notation are basically the same

// Although, with the square brace syntax you can use variables
var str = "foo";
obj[str];         // #=> "bar"
obj.str;          // #=> undefined     // obj does not have the key "str"
obj["f" + "oo"];  // #=> "bar"

// Also you can use long and non variable safe keys
obj["This is some crazy long key"] = 3;
obj.This is some crazy long key = 3; // !! Syntax Error


// -- Complex data

var person = {
  name: "Jim",
  age: 27,
  workedAt: ["Starbucks", "Sunrise Coffee"]
};

person.name;          // #=> "Jim"
person.workedAt[0];   // #=> "Starbucks"



// --------------------------------- //
//              Functions            //
// --------------------------------- //

// A function statement
function add(a, b) {    // a and b are "arguments"
  return a + b;
}

add(1, 2); // #=> 3
add(2, 2); // #=> 4


// A function expression
var add = function (a, b) {
  return a + b;
}

add(1, 2); // #=> 3
add(2, 2); // #=> 4

// Note that we assigned a unnamed function to the variable "add" this time
// We can even assign it to another variable

var pleaseAdd = add;
pleaseAdd(2, 2); // #=> 4


// -- Higher order functions
//    Functions that take other functions as arguments

var arr = [1, 2, 3];

// Array.map takes a function and applies it to each element in the array, returning
//  a new array with the return value of the function.

arr.map(function (el) {
  return el * 2;
});
// #=> [2, 4, 6]

arr.map(function (el) {
  return el * 3;
});
// #=> [3, 6, 9]


// -- Returning functions from functions

function genMultiplier(multiplier) {
  return function (num) {
    return multiplier * num;
  }
}

/*
  genMultiplier is a function that takes a single argument, a multiplier (number). It will
  then return a newly created function. This newly created function also takes a single
  number argument. When it is called, it will multiply the number specified with the
  multiplier originally passed into genMultiplier, returning the result.
*/

genMultiplier(3);     // #=> Function
genMultiplier(3)(4);  // #=> 12     // note we are calling genMultiplier *and* the returned function

var timesThree = genMultiplier(3);
timesThree(4); // #=> 12
timesThree(2); // #=> 6

var timesFour = genMultiplier(4);
timesFour(2);  // #=> 8
timesThree(2); // #=> 6    // note that timesThree still works as before


// Notice how timesThree takes one number and returns a number?

var arr = [1, 2, 3];
arr.map(timesThree); // #=> [3, 6, 9];  // Boom! Note we aren't calling timesThree, but rather passing it into arr.map



// ------------------------------- //
//              Scoping            //
// ------------------------------- //

/*
  Scope in 5 words: What variables are available where.

  In Javascript unlike a lot of other languages scope is
  based on functions and only functions.
*/

function test() {
  var outerFoo = "bar";

  function inner() {
    console.log("inner", outerFoo);

    /*
      Since foo is not defined in this function (inner), lets walk up the scope chain.
      inner is defined within the function "test", and in that scope, we find "foo",
      so we will use that.
    */
  }

  inner();
  console.log("test", outerFoo);
}

test();
#=> inner bar
#=> test bar

inner();  // Error, inner not defined.
          // We defined inner within the scope of the function test, therefore this
          // scope outside of the function "test" cannot access it.
outerFoo; // #=> undefined, same as inner, it isn't in this scope



function anotherFunction() {
  console.log("anotherFunction", anotherFoo);
}

function test2() {
  var anotherFoo = "bar";
  anotherFunction();

  /*
    anotherFunction is not defined in this scope, but it is defined in the parents scope,
    so it will be called.
  */
}

test2();
#=> anotherFunction undefined

/*
  Note that "anotherFoo" inside of "anotherFunction" is undefined. This is because the scope
  is not determined based on where the function is called, but rather where the function is
  defined. Inside of anotherFunction it asks, does anotherFoo exist in my scope? No. Go up
  to my parent scope, is anotherFoo exist in that scope? The parent scope in this case is the
  global scope. anotherFoo is not there either (anotherFunction and test2 are the only things
  we defined in that scope) so anotherFoo is undefined.
*/




/*
  Some things have been glanced over a bit, others just poped up (like console.log).

  The best way to work through some of these things would be to try them out and tweak them
  to see what happens.

  If you have any questions, feel free to hit me up on twitter: @raycmorgan
*/