JavaScript Function Bind Syntax

es5-callbacks.js

var eventLib = require('eventLib');
var self = this;

eventLib.on('foo', function() {
  self.gotFoo();
});

eventLib.on('bar', this.gotBar.bind(this));
eventLib.on('log', console.log.bind(console));

es5-iteration.js

var ArrayProto = Array.prototype;
var map = ArrayProto.map;
var filter = ArrayProto.filter;
var todoItems = document.querySelectorAll('ul.my-list > li');

var completedItems = filter.call(todoItems, function(item) {
  return item.dataset.completed;
});

var titles = map.call(todoItems, function(item) {
  return item.textContent;
});

es5-partial-application.js

var DEBUG = console.log.bind(console, 'DEBUG:');

function add(x, y) {
  return x + y;
}

var add1 = add.bind(null, 1);
var three = add1(2);

DEBUG(three); // prints "DEBUG: 3"

es6-casper-chaining.js

class HomePage {
  run(casper) {
    function thenClickInMySection(n, selector) {
      return casper.thenClick(`.my-section:nth-of-type(${n}) ${selector}`);
    }

    function thenScreenshotContainer(name) {
      return casper.thenScreenshot('#container', name);
    }

    casper = casper
      .thenVisit('http://my-url.com/home')
      .thenScreenshot('body', 'home');

    casper = thenClickInMySection(1, '.foo');
    casper = thenScreenshotContainer('foo');
    casper = casper.thenClick('.cancel');
    casper = thenClickInMySection(2, '.bar');
    casper = thenScreenshotContainer('bar');
    
    return casper;
  }
}

es7-callbacks.js

import eventLib from 'eventLib';

eventLib.on('foo', ::this.gotFoo);
eventLib.on('bar', ::this.gotBar);
eventLib.on('log', ::console.log);

es7-casper-chaining.js

class HomePage {
  run(casper) {
    function thenClickInMySection(n, selector) {
      return this.thenClick(`.my-section:nth-of-type(${n}) ${selector}`);
    }

    function thenScreenshotContainer(name) {
      return this.thenScreenshot('#container', name);
    }

    return casper
      .thenVisit('http://my-url.com/home')
      .thenScreenshot('body', 'home')
      ::thenClickInMySection(1, '.foo')
      ::thenScreenshotContainer('foo')
      .thenClick('.cancel')
      ::thenClickInMySection(2, '.bar')
      ::thenScreenshotContainer('bar');
  }
}

es7-iteration.js

let { map, filter } = Array.prototype;
let todoItems = document.querySelectorAll('ul.my-list > li');

let completedItems = todoItems::filter(item => item.dataset.completed);
let titles = todoItems::map(item => item.textContent);

es7-partial-application.js

const DEBUG1 = ::console.log('DEBUG:');
// Currently calls the function back on the same receiver
// var DEBUG1 = console.log.call(console, 'DEBUG:');
 
const DEBUG2 = ::console.log['DEBUG:'];
// This clashes with existing [] semantics
// var DEBUG2 = console.log['DEBUG:'].bind(console);

const DEBUG3 = ::console.log<'DEBUG:'>;
// SyntaxError

const DEBUG4 = ::console.log{'DEBUG:'};
// SyntaxError

function add(x, y) {
  return x + y;
}

let add1 = ::add(1);
// SyntaxError (we need a context for the bind operator)

// ...

syntax-compiled.js

// Binding a function to a context
var log = console.log.bind(console);
 
// Calling functions with a context
var foo = {};

function bar() {
  log(this);
}

function world(a) {
  log(this, a);
}

bar.call(foo);

function hello() {
  world.apply(foo, arguments);
}

syntax.js

// Binding a function to a context
let log = ::console.log;

// Calling functions with a context
let foo = {};

function bar() {
  log(this);
}

function world(a) {
  log(this, a);
}

foo::bar();

function hello() {
  foo::world(...arguments);
}

I don't understand the Casper examples... how are you calling thenClickInMySection when the functions are named clickInMySection?

I don't understand the Casper examples... how are you calling thenClickInMySection when the functions are named clickInMySection?

I came back to these examples to get some code for some talk slides and just noticed your comment. You are right. I goofed up the names on that example. I updated them.