JSFiddle

  • Array of objects

    Check if an array contains objects (assumes same-shape items in the array)

    function objArrayCheck(array) {
      // checks if the first item in the array is an object
        // assumes same-shape for all array items ...
  • React One-way Data Flow #9 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript 1.7

    class OneWay extends React.Component {
      constructor() {
        super();
        this.handleChange = this.handleChange.bind(this);
        // set initial this.state.text to an ...
  • React One-way Data Flow

    No-Library (pure JS), HTML, CSS, JavaScript 1.7

    class OneWay extends React.Component {
      constructor() {
        super();
        this.handleChange = this.handleChange.bind(this);
        this.state = {
          value: ''
        };
      }
    
      handleChange(e) {
        this.setState ...
  • JS Closures

    No-Library (pure JS), HTML, CSS, JavaScript

    function whenMeetingJohn(salutation) {
      var greeting = salutation + ', John!';
      
      function alertGreeting() {
        alert(greeting);
      }
      return alertGreeting;
    }
    var atLunchToday = whenMeetingJohn('Hi');
    
    atLunchToday(); // alerts "Hi ...
  • JS Closures - Adder

    No-Library (pure JS), HTML, CSS, JavaScript

    function addCreator(x) {
      return function(y) {
        alert(x + y);
      }
    }
    var add1 = addCreator(1);
    var add5 = addCreator(5);
    
    add1(2); // alerts ...
  • JS Closures

    No-Library (pure JS), HTML, CSS, JavaScript

    function whenMeetingJohn(salutation) {
      var greeting = salutation + ', John!';
      
      function alertGreeting() {
        alert(greeting);
      }
      return alertGreeting;
    }
    var atLunchToday = whenMeetingJohn('Hi');
    
    atLunchToday(); // alerts "Hi ...
  • JS Scope #4 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var a = 1;
    
    function outerFunc() {
      var b = 2;
      console.log('outerFunc:', a + b);
      
      function middleFunc() {
        var c = 3;
        console.log ...
  • Reactive Programming with JavaScript #12 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    const confCodeInput = document.getElementById('confirmation-code');
    const attemptedCode = document.getElementById('attempted-code');
    
    const confCodes$ = 
      Rx.Observable
        .fromEvent(confCodeInput, 'input')
        .map(e => e ...
  • Functional Programming with JavaScript #18 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    const fpCopy = `Functional programming is powerful and enjoyable to write. It's very cool!`;
    
    // remove punctuation from string 
    const stripPunctuation ...
  • FRP-inspired JavaScript #22 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    // create a time observable that adds an item every 1 second
    // map so resulting stream contains event values
    const time ...