Exercise to get better at JavaScript

Become a better JavaScript programmer by only using local variables

The problem

Have you ever seen a function that looks like this ...

function evilFunction() {
	food++;
	feedKittens();
}

And wondered what actually happens!?

The problem is that "evilFunction" is coupled with code outside the function.
Calling the function will have side effects.
And to know exactly what happens you might have to travel deep into the code-base to find out where the variables are used and what state they can be in.
This will slow down the development and make code hard to remove and hard to refactor.

Exercise: Avoid non-local variables

As an exercise to become better at JavaScript, only use local variables, declared inside the function or in the function arguments.
For example in NodeJS you can write your program like this:

function main() {
	// The actual program
}

main();

And if you are writing JavaScript for the browser, it can look like this:

(function(document) {
	
	// The actual program
	
})(document);

Where the entire program is encapsulated in a function that calls itself.
The reason why not to use a main function in the browser is that there might already exist other main() functions in the global scope. Whereas in NodeJS you don't have to worry about overwriting variables from other script files.

You can make it more challenging by not allowing yourself to call other functions within functions. Only call functions from main().

This will teach you to write decoupled code that is easy to manage and will increase your productivity.

Local Scope

In JavaScript variables live in function scopes.

Local variables can only be accessed from the local scope.

var notLocal = 1;

function main() {
	var localVariable = 2;
	
	alert(notLocal + localVariable);
}
main();

But variables declared outside the function can be accessed from within the function!

You can also time-lock a variable inside a function to make it easier to manage async code.

Sub-functions

In order to not repeat yourself, you can place some code inside sub-functions, then they will still be local and you do not have to worry about side effects, as in they being called from code elsewhere.
Functions inside functions are allowed to access variables from the parent function.

function someFunction() {
	
	var localVariable = 1;
	
	function subfunction() {
		localVariable++; // It's OK to change parent's variables from here
	}
}

Dependency injection

In order to get a value from one function into another function you can pass it as a function argument!

function main() {
	var someVariable = 1;
	
	someFunction(someVariable);
	anotherFunction(someVariable);
	thirdFunction(yetAnotherFunction);
}

One cool thing about JavaScript is that you can pass along actual functions just as any other variable!

Injecting dependencies also makes testing easier as you can pass in "fake" stuff, like a another database connection so that tests don't affect the production data.

Singleton

You you find yourself passing along the same variable all over the place, it's fine to make it into a global variable and save yourself from the hassle. It's especially fine if it's read-only so you always know the value.
I like to write non-local variables in ALL_CAPS so they stand out more.

Modules

One great thing with the (CommonJS) NodeJS module standard is that you can require modules from within functions! Your functions can then be very powerful and have tons of functionality while still being decoupled.


Written by Januari 19, 2017.


Follow me via RSS:   RSS https://zäta.com/rss_en.xml (copy to feed-reader)
or Github:   Github https://github.com/Z3TA