2

first

I have the following code

function function_name () { var list = $('li'); var active = $('li.active'); list.on('click', function(event) { event.preventDefault(); list.removeClass('active'); // use this way active = $(this); // or this way var newActive = $(this); }); }

is it fast && better ? to assign a new value to global "active" variable or declare a new variable "newActive" in the new the function?

and I am wondering whether there is a better way to filter the active list item from the list variable by it's class. I was thinking of using jQuery's .get() function but I'm not sure how to use it or what its return value would be.

Improve this question
2
  • There's lots of ways to achieve the same result here with selecting.. There's no right answer. Commented May 22, 2015 at 10:45
  • @MackieeE i think there is a right answer maybe memory less use , faster or just more readable right? Commented May 23, 2015 at 12:49

4 Answers 4

Reset to default
3

You are asking two questions

1. Which is faster?

You are caring about the wrong thing. Changing the DOM (especially in visible ways) is going to be 1,000,000 times slower than assigning a variable. The difference between assigning a global and a local is so tiny that it would be impossible to measure it if you also change the DOM. And it will depend on which browser, browser version, OS, OS version, kind of processor and phase of the moon.

2. Which is better

In general it's considered bad to have global variables, so the more local is your state the better it is.

The reason is that with self-contained chunks that don't depend or pollute the global namespace it's easier to build bigger constructions by combining them.

When you use global state instead (like global variables or global functions) different chunks can collide on those globals and the end result is that the combination will not work (often in subtle ways).

The best is if you can avoid depending on or mutating the global state completely. This is often possible in Javascript using the pattern:

(function(){...})()

that creates a function and immediately calls it. The body ... can define its own variables and use them without interfering with the outside world.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Just a thought, $('li') returns all <li> in the page, same with $('li.active'), so if you have multiple <li> and <li class="active">, your code will remove all active items on clicking a li element.

Back to your question, I reckon it based on the scope of the variable, and what you want to do with it.

Using assignment, the value will be kept outside list.on('click', function(event) { ... });

While using declaration, the value will only be meaningful inside the function (it's not a good practice to have local variable the same name with global one)

Improve this answer

1 Comment

i got it but which one is faster and better? declaring a new variables or just assigning?! which one use more memory ?! i believe declaration will take new memory size but it is faster ?! than assigning to a global one ?!
1

If your code is:

var $list = $('li');

You can use jQuery's filter function:

var $active = $list.filter(".active")

https://api.jquery.com/filter/

The get function that you mention only accepts an index (see the docs http://api.jquery.com/get/) which would mean that you need to know which is the active <li>.

Improve this answer

Comments

1

Check the performances by yourself: https://jsperf.com/ :-D That said, I guess there is no big differences, but more importantly, I have mercy on these "orphans" variables :'-( A little OOP would be more reliable:

// /my/UL.js (requires jquery.js) var my = window.my || {}; my.UL = function (id) { var me = this; var ul = $('#' + id); me.active = ul.children('.active'); ul.on('click', function (ev) { // event delegation if (ev.target.parentNode === this) { me.handleClick(ev.target); } } } my.UL.prototype.handleClick = function (li) { var me = this; me.active.removeClass('active'); me.active = $(li); me.active.addClass('active'); } my.UL.prototype.getActive = function () { // no DOM query return this.active[0]; }

Usage:

var myUL1 = new my.UL('my-favorite-ul'); var myUL2 = new my.UL('a-crappy-one'); myUL1.getActive(); // the active list item or undefined

There are three things to notice here. First, using event delegation allows to add or remove list items without worrying about the click event. Then, a fresh active property is assigned to each instance of my.UL to avoid collisions. Finally, maintaining a reference to the active item avoids to query the DOM each time you want to get the item.

However, this is not a best practice, you can find many smarter solutions over the web. I'm just trying to widen your field of vision a little. This subject is indeed more complicated than you seem to think.

Anyway, keep in mind that there are plenty of possibilities to optimize your code. Take your time :-)

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.