Convert coffeescript function to javascript

Question

I am following this railscast https://www.youtube.com/watch?v=ltoPZEzmtJA but I don't use coffeescript. I am trying to convert the coffeescript to javascript but I'm running into a problem.

coffeescript

jQuery ->
  new AvatarCropper()

class AvatarCropper
  constructor: ->
    $('#cropbox').Jcrop
      aspectRatio: 1
      setSelect: [0, 0, 600, 600]
      onSelect: @update
      onChange: @update

  update: (coords) =>
    $("#crop_x").val coords.x
    $("#crop_y").val coords.y
    $("#crop_w").val coords.w
    $("#crop_h").val coords.h

js.erb file

$(document).ready(function() {

  $('.crop-image').on('click', function () {
    $('#cropbox').Jcrop({
      aspectRatio: 1,
      setSelect: [0, 0, 100, 100],
      onSelect: update,
      onChange: update
    })
  });

  update: (function(_this) {
    return function(coords) {
      $('.user').val(coords.x);
      $('.user').val(coords.y);
      $('.user').val(coords.w);
      return $('.user').val(coords.h);
    };
  })(this)  

});

I didn't understand why he decided to make a class and thought it would be more complicated to convert the whole thing. The trouble I'm having is the update function. I just plugged his coffee script for the update function into a converter and used the output. This is causing an error saying update is not defined. Where am I going wrong?

Also bonus question: what's the point of him making a class here?

Thanks!

I've been reading Javascript the good parts and the "construct a class method" is promoted in there with the advantage being privacy, i.e. exposing fewer properties of an object — engineerDave, Jan 26 '17 at 18:06

score 7 · Accepted Answer · 2017-01-27T10:57:04.017

7

Your syntax looks wrong... : is used to declare labelled statements.

This is a correct way. Declares an hoisted variable and assign a function ref. to it. The function name can appear in expressed functions too, so it can refer itself intially using its name.

Using var the function variable should hoist, except the assign value.

/* there are various ways to declare a function */

function update(coords) {
    var $users = $('.user');
    $users.val(coords.x);
    $users.val(coords.y);
    $users.val(coords.w);
    return $users.val(coords.h);
}

edited Jan 27 '17 at 10:57

answered Jul 22 '16 at 12:21

sorry my code was wrong, the coords are supposed to be x,y,w,h I will change it..copied it wrong – user4584963 Jul 22 '16 at 12:26
also, in the railscast he made a point to say he's using the fat arrow..something about context, I'm not sure what this means. Does your answer account for this? – user4584963 Jul 22 '16 at 12:27
3

Read: `https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/` – Jul 22 '16 at 12:32
Thanks your answer seems to be working for me. Any thoughts as to why make this whole thing a class like he did in the original coffeescript? – user4584963 Jul 22 '16 at 12:34
I think the fat arrow in this case might be a coffeescript specific thing..not sure. [Here](http://stackoverflow.com/questions/8965855/coffeescript-when-to-use-fat-arrow-over-arrow-and-vice-versa) is an SO question about it but I don't really understand it. – user4584963 Jul 22 '16 at 12:36
3

@user4584963 Classes make the code more efficient. Fat arrows are specified in ES6 and work in the today JavaScript. – Jul 22 '16 at 12:36
My answer looks kinda wrong... The colon also define labels – Jan 21 '17 at 20:47

score 1 · Answer 2 · answered Jan 27 '17 at 20:45

The point of a class:

make it more easy to run the same task multiple times on different elements with less room for collisions.
to help mentally organize your code

To convert, use a site like http://js2.coffee/

var AvatarCropper,
  bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

jQuery(function() {
  return new AvatarCropper();
});

AvatarCropper = (function() {
  function AvatarCropper() {
    this.update = bind(this.update, this);
    $('#cropbox').Jcrop({
      aspectRatio: 1,
      setSelect: [0, 0, 600, 600],
      onSelect: this.update,
      onChange: this.update
    });
  }

  AvatarCropper.prototype.update = function(coords) {
    $("#crop_x").val(coords.x);
    $("#crop_y").val(coords.y);
    $("#crop_w").val(coords.w);
    return $("#crop_h").val(coords.h);
  };

  return AvatarCropper;

})();

// ---
// generated by coffee-script 1.9.2

Convert coffeescript function to javascript

2 Answers2