Best way to code Javascript

This site is best viewed in a modern browser with JavaScript enabled.

Jazztronik

In order to reduce interferences between several scripts, I know it's highly recommended to encapsulate the Javascript code. But how would you do it? Which would you consider a better script between the following?:

Function 1:

euler2 = {
    getSumEven: function(limit) {
        this.total = 0, 
        this.a = 0, 
        this.b = 1, 
        this.abSum = 1;
        do {
            this.a = this.b;
            this.b = this.abSum;
            this.abSum = this.a + this.b;
            if (this.abSum % 2 == 0) this.total += this.abSum;
        } while (this.abSum <= limit)
        console.log('euler2. Total: ' + this.total);
    }
};

euler2.getSumEven(4000000);

Function 2:

(function(limit) {
        var total = 0, 
        a = 0, 
        b = 1, 
        abSum = 1;
        do {
            a = b;
            b = abSum;
            abSum = a + b;
            if (abSum % 2 == 0) total += abSum;
        } while (abSum <= limit)
        console.log('euler2. Total: ' + total);
})(4000000);

I could even exchange the way I use variables so that Function 1 could use local variables as such, and Function 2 would use function properties, and it would also work.

Which way to use better? Which way to use variables?

toicontien

Neither way for this particular problem. Furthermore, I've used many different ways, depending on the situation. The first question is, do you need to maintain state?

If not, then a simple function would suffice.

If you do, then there are several options available:

Traditional JavaScript OOP:

function Point(x, y) {
	this.x = x;
	this.y = y;
}

Point.prototype = {
	above: function(point) {
		return this.y > point.y;
	},
	below: function(point) {
		this.y < point.y;
	}
};

new Point(1, 2).above(new Point(3, 10));

Private variables using OOP:

function Point(x, y) {
	var _x = x;
	var _y = y;

this.above = function(point) {
	return _y > point.getY();
}

this.below = function(point) {
	return _y < point.getY();
}

this.getX = function() {
	return _x;
}

this.getY = function() {
	return _y;
}
}

Using the Module Pattern:

function Point(x, y) {
	var _x = x;
	var _y = y;

return {
	above: function(point) {
		return _y > point.getY();
	},
	below: function(point) {
		return _y < point.getY();
	},
	getX: function() {
		return _x;
	},
	getY: function() {
		return _y;
	}
};
}

p = Point(2, 3);
p2 = Point(4, 6);
p.above(p2);

Jazztronik

Thanks for answering!

Things have turned even more complicated with your reply, because I don't know the right path for each case.
And why do you consider the examples I mentioned not good? The ones you posted are not encapsulated. They don't use any namespace. They all might crash with another script with a variable called Point.

Could you please shed a light on this?

rnd_me

Jazztronik;1220351 wrote:
And why do you consider the examples I mentioned not good? The ones you posted are not encapsulated. They don't use any namespace. They all might crash with another script with a variable called Point.

using no global variables is one goal of good code design, not the only one, nor even the most important.

providing easy code re-use using plain-jane methoding that a wide variety of programmers can read is more beneficial overall than a perfect stealth attack.

performance is another factor; each closure and anon function add additional call overhead, deeper lexical stack depth, and one more activation object for the host environment to manage. the closer your code is to global, the faster it runs.

it's also not apparent how i would find the functionality you posted from an external script. if i need to make 38 calculations, how simply and intuitively can i do so with your 2nd code?

in short, you have to balance a variety of factors based on your problem.

at the end of the day there is no perfect demo code, only good and bad solutions to real problem.