JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

JS 101

JavaScript

/**
 * FUNCTIONS
 **/

/**
 *  Functions create closures; variables defined
 *  inside of them are accessible inside the
 *  function, and to any functions that were
 *  defined within the same scope.
 **/

$(document).ready(function() {

  var sayItOutside = (function(){

    var myVar = 'hello world',

        sayIt = function() {
          console.log(myVar);
        };

    myVar = 'a new value';

    return sayIt;

  }());

  // sayItOutside(); // 'a new value'
  // console.log(myVar);

});


/**
 *  Functions are first class objects; we can move
 *  them around just like we do with other types
 *  of objects.
 **/

$(document).ready(function() {

  $('#myDiv').click(function(e) {
    // console.log(e.target);
  });

  var repeater = function(fn, repeat) {
    while (repeat--) { fn(); }
  };

  // repeater(function() { console.log('hello'); }, 5);

});


/**
 *  Functions can create other functions.
 **/

$(document).ready(function() {

  var makeRepeater = function(fn, repeat) {
    return function() {
      while (repeat--) {
        fn();
      }
    };
  };

  var newFunction = makeRepeater(function() { console.log('hello'); }, 5);
  newFunction();
});

/**
 *  Inside a function, you have access to 'arguments',
 *  an array-like object that contains a list of the
 *  arguments passed to the function.
 **/

$(document).ready(function() {

  $('#myDiv').one('click', function() {
    // console.log(arguments);
  });

});



/**
 *  OBJECTS
 **/


/**
 *  Objects can have properties and methods.
 **/

$(document).ready(function() {

  var myObj = {
    paul : 'Google',
    adam : 'Bocoup',
    alex : 'BazaarVoice',
    sayHi : function() {
      console.log('hello');
    }
  };

});


/**
 *  Inside an object method, 'this' refers to
 *  the object that owns the method by default.
 **/

$(document).ready(function() {

  var myObj = {
    paul : 'Google',
    adam : 'Bocoup',
    alex : 'BazaarVoice',

    sayHi : function(person) {
      var company =...