RPG Maker Forums

Introduction


Functions


Functions in JavaScript like method calls in any other language, are great tools for holding a set of statements that we want to execute at our leisure. Unlike other languages however, a function in JavaScript is an object; you can add properties or other functions to it due to this property. Meaning, functions in JavaScript have a lot more flexibility in their uses.


Example


function NewFunction() {

}

NewFunction.Talk = function() {
console.log("Hello everyone");
}

NewFuncttion.Talk();
//Outputs "Hello Everyone"to the console.


The other property is that anything created inside the function can't be accessed from the outside; it creates a new "scope" or environment.


Scoping


Scoping as stated above, is a new environment created by a function in JavaScript. The main use of this is to seperate code into manageable sections that clearly defines what the code's purpose is. Here's an example of scoping.


Scoping Example


var a = 2;
function NewScope() {
var b = 3;
console.log(b);

}

console.log(a);
//Outputs 2 to the console
NewScope();
//Outputs 3 to the console, because be exists within the function when called
console.log(b)
//Throws an error, because b is outside of the global scope.



The example above shows two key factors, one that you can't access variables inside of a function's scope from the outside, and two that there is a top level scope, which I will refer to as the global scope/global namespace. The global namespace is where a lot of top level names for different parts of the code base live; Anything outside of any functions would be in this global scope. Therefore, it can be useful for us to create a top level function to put all of our code in for organization purposes, which leads to namespacing.


Namespacing


Namespacing is creating a name to hold large groups of code in. It's an important thing to do, and should not be ignored. It's mainly for organization, but organizing code is probably on of the most important parts besides making it work. To create a namespace; you can do one of two things. You can create an object that can hold all of the properties, methods, and code that you want, or you can create a function and do the exact same thing. Remember, functions are objects, so the same rules apply to both.


Here's an example of a namespace:


Namespace Example


//This area is the global scope

//Pattern 1

var MyNamespace = MyNamespace || {}; //This or is used for the case that we use that namespace in different source files, but want to put our code in it regardless.

//I would personally use this pattern for namespacing.

//Adding a property

MyNamespace.plugin1 = function() {
//Plugin Code
}

//Pattern 2

function MyNamespace() {

}

//We can add properties to this function like any other object and use it as a namespace, but use pattern1
//Only reason to use pattern 2 would be if you want to initialize something after creating your namespace by running the function

MyNamespace.Plugin1 = function() {
//Plugin Code
}




The above code are examples of namespaces, which are useful. You should aim to organize your code under a namespace to prevent pollution of the global namespace/scope. Also, as a plugin creator, you probably don't want all your code out in the open for people to toy around with or accidentally access, because your code isn't under a namespace. For example, you both have similar naming patterns, thus your unscoped plugin breaks because they have the same function or property names.


In essence, use the above pattern when creating a place to hold your plugins, because this will be useful in a future tutorial for a plugin creation pattern using all the above tools.


Thank You


Hopefully this tutorial was helpful to you. If there is anything hard to understand, comment down below, and I will answer, or improve this post to better accomodate the learning experience.