10 Syntax differences between Haxe and Javascript

I've mentioned in my previous posts that Haxe and Javascript (well more Typescirot) are very similar syntax wise. However, if you've come from javascript to Haxe you'll notice a few odd things with the syntax that don't make sense.

The creator of Haxe tried to keep to language as simple as possible even though you can do some really complex things with it if you've come from C# some of these might make sense, but for js devs, there are a few weird differences. I've listed some below.

1 - Constructors methods

This was quite confusing to me at first but the more I wrote in Haxe the more it's implementation made sense.

// Javascript
class MyAwesomeClass {
  constructor() {
    // Stuff to initialize
  }
}

// Haxe
class MyAwesomeClass {
  public function new() {
    // Stuff to initialize
  }
}

2 - All variables are var (well almost)

Again I would have to agree with the Haxe way on this. Javascript gets a bit confusing when creating variables, especially in classes. Sometimes you use this, sometimes you can use var, let or const depending on if you want a constant scoped variable or not, and sometimes, you don't write anything. In Haxe you only need to remember one keyword var.

// Javascript
class MyAwesomeClass {
   outsideMethod;

  constructor() {
    this.outsideMethod = 10;
  }

   myAwesomeMethod() {
    const constantInsideMethod = 15;
    let insideMethod = 10;
  }
}

// Haxe
class MyAwesomeClass {
  var outsideMethod:Int;

  public function new() {
    outsideMethod = 10;
  }

  function myAwesomeMethod() {
    final constantInsideMethod:Int = 15;
    var insideMethod:Int = 10;
  }
}

3. The overwrite keyword

Overriding an inherited method is something I've never done in javascript but do quite often in Haxe so I'm not sure if the js example I've written below will work.

// Javascript
class MySecondAwesomeClass extends MyAwesomeClass {
  myAwesomeMethod() {
    var newVariable = 200;
    super.myAwesomeMethod();
  }
}

// Haxe
class MySecondAwesomeClass extends MyAwesomeClass {
  override myAwesomeMethod() {
    var newVariable:Int = 200;
  }
}

4. Package instead of export

This is a really small change that you probably would have figured out without this article but I'll put it here nevertheless.

// Javascript

export default class MySecondAwesomeClass extends MyAwesomeClass {
  myAwesomeMethod() {
    var newVariable = 200;
    super.myAwesomeMethod();
  }
}

// Haxe
package; // This should be the first line in the file

class MySecondAwesomeClass extends MyAwesomeClass {
  override myAwesomeMethod() {
    var newVariable:Int = 200;
  }
}

5. Different array methods

There are probably loads other default methods that are different in Haxe and Javascript but the array methods, in my opinion, are used a lot so it's good to know they're slightly different in Haxe.

// Typescript
class MyThirdAwesomeClass {
  testArrayMap():Array<number> {
    var myArray:Array<number> = [0, 1, 2];

    return myArray.map(function(number:number, index:number) {
      return number + index;
    });
  }
}

// Haxe

// the mapi method won't work without adding using Lambda outside of this class
class MyThirdAwesomeClass {
  function testArrayMap():Array<Int> {
    var myArray:Array<Int> = [0, 1, 2];

    return myArray.mapi(function(Index:Int, Number:Int) {
      return Number + Index;
    });
  }
}

6. The Using keyword

This is what I meant by the using keyword in the previous example. There's only a Haxe example for this one because you can't do it in Javascript.

// Haxe
using Lambda;

class MyThirdAwesomeClass {
  function testArrayMap():Array<Int> {
    var myArray:Array<Int> = [0, 1, 2];

    return myArray.mapi(function(Index:Int, Number:Int) {
      return Number + Index;
    });
  }
}

It's a bit difficult to explain if you haven't used it before but essentially if you have created a static method in one class and want to use it in another there are two ways you could do it this way.

import Lambda;

// usage
Lambda.mapi(myArray, ...)

Or this way:

using Lambda

// usage
myArray.mapi(...)

If you import with using the static method can be applied directly to the variable as if it's a method that belongs to it.

7. For Loops

There's a pretty cool way of doing incrementing for loops kind of with the spread syntax in javascript.

// Javascript
for (let i = 0; i < 10; i++) {
  console.log(i);
}

// Haxe
for (i in 0...9) {
  trace(i);
}

There's also a cool little shorthand you can do with Haxe"

// Haxe
for (i in 0...9) trace(i);

8. Arrow functions

There were introduced properly in Haxe 4 (same as the final keyword) so you won't see it in many of the examples online, it's slightly different from Javascripts implementation but not massively.

// Javascript
() => console.log("Arrow function in Javascript");

// Haxe
() -> trace("Arrow function in Haxe");

1. Destructuring I really love this feature in Javascript and do it whenever I can, sadly there isn't an easy way to do this in Haxe :(

// Javascript
const obj = { id: 1, name: 'Fizz'};
const {id, name} = obj;
console.log(id);
console.log(name);

// Haxe
final obj = { id: 1, name: 'Fizz'};
var newId;
var newName;

switch obj {
  case { id: newId, name: newName }:
    trace(newId);
    trace(newName);
}

1. The spread operator Again this is something I love using in Javascripts that once again doesn't have an equivalent in Haxe 4.

// Javascript
const arr1 = [0, 1, 2];
arr1 = [...arr1, 3, 4, 5];
console.log(arr1);

//Haxe
final arr1 = [0, 1, 2];
final arr2 = [3, 4, 5];
final newArr = arr1.concat(arr2);
trace(newArr);

Conclusion

So as you can see there are loads of similarities between Haxe and Javascript syntax wise, (also Haxe and Actionscript, and Java/C#). But there are a few small things that might trip you up if you're coming from JS. Hopefully, this article will help you out with that.

Sources

http://adireddy.github.io/haxe/keywords/never-inline-keywords

https://stackoverflow.com/questions/25424247/constants-in-haxe/26906874#26906874