DEV Community

Richard Oliver Bray
Richard Oliver Bray

Posted on

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
  }
}

Enter fullscreen mode Exit fullscreen mode
// Haxe
class MyAwesomeClass {
  public function new() {
    // Stuff to initialize
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode
// Haxe
class MyAwesomeClass {
  var outsideMethod:Int;

  public function new() {
    outsideMethod = 10;
  }

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

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();
  }
}
Enter fullscreen mode Exit fullscreen mode
// Haxe
class MySecondAwesomeClass extends MyAwesomeClass {
  override myAwesomeMethod() {
    var newVariable:Int = 200;
  }
}
Enter fullscreen mode Exit fullscreen mode

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();
  }
}
Enter fullscreen mode Exit fullscreen mode
// Haxe
package; // This should be the first line in the file

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

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;
    });
  }
}

Enter fullscreen mode Exit fullscreen mode
// 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;
    });
  }
}

Enter fullscreen mode Exit fullscreen mode

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;
    });
  }
}

Enter fullscreen mode Exit fullscreen mode

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, ...)
Enter fullscreen mode Exit fullscreen mode

Or this way:

using Lambda

// usage
myArray.mapi(...)
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode
// Haxe
for (i in 0...9) {
  trace(i);
}
Enter fullscreen mode Exit fullscreen mode

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

// Haxe
for (i in 0...9) trace(i);
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode
// Haxe
() -> trace("Arrow function in Haxe");
Enter fullscreen mode Exit fullscreen mode
  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);
Enter fullscreen mode Exit fullscreen mode
// Haxe
final obj = { id: 1, name: 'Fizz'};
var newId;
var newName;

switch obj {
  case { id: newId, name: newName }:
    trace(newId);
    trace(newName);
}
Enter fullscreen mode Exit fullscreen mode
  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);
Enter fullscreen mode Exit fullscreen mode
//Haxe
final arr1 = [0, 1, 2];
final arr2 = [3, 4, 5];
final newArr = arr1.concat(arr2);
trace(newArr);
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
markknol profile image
Mark Knol • Edited

Nice comparison! As for the mapi method, In Haxe you can also use a shorthand notation for this: (using array comprehension and the key-value iterator)

// Haxe

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

    return [for (index => number in myArray) Number + Index];
  }
}
Enter fullscreen mode Exit fullscreen mode