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