RPGMaker MV ES6 Part 1 : Objects

[Kino]

[SIZE=14.666666666666666px]Introduction[/SIZE]


[SIZE=14.666666666666666px]When developing plugins in RPGMaker MV (RMMV), there are two things I tend to use often. Those two things would be arrays, and objects. Objects are the focus of today’s post. In RMMV, objects are used for a couple purposes: namespacing, holding data, being used as a class. All of these are staple uses even in ES5. [/SIZE]


[SIZE=14.666666666666666px]Today, however, we will be going over some new things you can do with objects in RMMV to make your life easier; these include: object assignment,  shorthand object properties, method properties.[/SIZE]


[SIZE=14.666666666666666px]Object Assignment[/SIZE]


[SIZE=14.666666666666666px]Originally in RMMV, if you wanted to assign properties to an object, you had to add each property by hand when setting up the data structure, or use some sort of loop. Now, those are both viable options, but what happens when you want to [/SIZE][SIZE=14.666666666666666px]put two objects together[/SIZE][SIZE=14.666666666666666px]? Adding new properties to an existing object would require checking properties in both objects, then you’d have to make sure not to overwrite properties on the object you want to add properties to. Now, we have the ability to use object assignment.[/SIZE]


[SIZE=14.666666666666666px]Object assignment allows you to put one or more objects into a destination object; there is no need to use a loop to assign the new properties to the object.[/SIZE]


[SIZE=14.666666666666666px]Example[/SIZE]




//Created two new objects for combining


var object1 = {playerHp: 300, playerMP: 400};

 


var object2 = {playerName: 'Ron', playerClass: 'Hero'};

 


var combinationObject = {};


//Params destination, source Object1, source object2


Object.assign(combinationObject, object1, object2);




[SIZE=14.666666666666666px]After these lines the combinationObject will have all the properties of both object1, and object2; the other option in ES5 would have been to recreate a new object, then loop through both object1, and object2, in order to place the necessary fields in our new object. That’s one feature available to us, but there is more.[/SIZE]


[SIZE=14.666666666666666px]Shorthand Object Properties[/SIZE]


[SIZE=14.666666666666666px]Shorthand object notation is a straightforward concept, it allows us to shorthand the creation of objects with already defined variables. In this case I’ll show you the difference between ES5, and ES6.[/SIZE]


[SIZE=14.666666666666666px]Example[/SIZE]




//Shorthand Object Properties

 


var x = 5;


var y = 10;

 


//ES5 JavaScript


var objA = {x: x, y : y};

 


//ES6 JavaScript


var objB = {x, y};




[SIZE=14.666666666666666px]The difference is minimal, but we can declare objects with their [/SIZE][SIZE=14.666666666666666px]variable names as keys. [/SIZE][SIZE=14.666666666666666px]This can simplify our code, and make it easier to read when creating new objects. This leads me to the last feature, method properties.[/SIZE]


[SIZE=14.666666666666666px]Method Properties[/SIZE]


[SIZE=14.666666666666666px]Method properties are similar to shorthand object properties; the point being, to make it easier for us to define methods for an object. If we were to do this in ES5, we’d have to define a new function on an object in order to create a method for it; this can make it harder to read our code. Now, we can have more code clarity; here’s an example of the difference.[/SIZE]


[SIZE=14.666666666666666px]Example[/SIZE]




//Method Properties

 


//ES5 JavaScript


var namespace1 = {


 Test: function() {


   console.log('Testing our namespace1');


 }


};


//ES6 JavaScript


var namespace2 = {


 Test() {


   console.log('Testing our namespace2');


 }


};




[SIZE=14.666666666666666px]As you can see both do the same thing, but one requires a lot less typing. And, we can declare our properties in a clearer manner.[/SIZE]


[SIZE=14.666666666666666px]Conclusion[/SIZE]


[SIZE=14.666666666666666px]All of these can help your code in a small way, try to start using them. I know that making the switch to ES5 to ES6 can be hard, but you can use both to maximize your productivity as a developer.[/SIZE]