Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I'm new to Javascript. I'm learning the concept of hoisting in Javascript.
Based on the Javacsript tutorials in Mozilla website, I came across this word hoisting. According to those tutorials, variables in JavaScript is that you can refer to a variable declared later, without getting an exception. But, my question is on what circumstances is it suitable to use hoisting in a client-side Javascript or why should we use hoisting in Javascript. What are its advantages.

share|improve this question

closed as too broad by gnat, Dynamic, Alex Feinman, ChrisF Mar 26 at 21:30

There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.If this question can be reworded to fit the rules in the help center, please edit the question.

1  
Sharing your research helps everyone. Tell us what you've tried and why it didn’t meet your needs. This demonstrates that you’ve taken the time to try to help yourself, it saves us from reiterating obvious answers, and most of all it helps you get a more specific and relevant answer. Also see How to Ask –  gnat Mar 24 at 17:23
6  
@gnat After all the research, if I had understood this topic, why would I have posted this question here, to discuss and understand the concept properly –  Rudra Mar 24 at 17:30
2  
@Rudra This is not a discussion forum. Moreover, you haven't shown any proof that you've actually researched this. –  Doval Mar 24 at 17:42
4  
Yes, but it's not a requirement for asking questions. –  Robert Harvey Mar 24 at 17:53
2  
@Rudra: Keep in mind that we're not a discussion forum. We're actually a Q&A site. Questions asked here should be scoped to be reasonably answerable within the Q&A format. –  Robert Harvey Mar 24 at 17:54

3 Answers 3

up vote 8 down vote accepted

I've never heard the term "hoisting" used. If you are referring to this usage of hoisting by Ben Cherry: http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html, then from what I can gather, he is simply echoing Douglas Crockford from Javascript: The Good Parts, and saying that you should never use hoisting. His assertion at the end is that all variables should be declared at the top of your function (as Crockford and JSLint suggest).

Or, in the words of Mr. ChristopherBrown, it's not a feature to use, per-say, but simply a quirk related to how the browser interprets Javascript.

So, in short: never and nowhere.

share|improve this answer
1  
Then, why is this concept included and what is this feature about? –  Rudra Mar 24 at 17:51
    
@Rudra: The subtopic "Declarations, Names, and Hoisting" in the article David linked seems to cover this pretty well. Which part is unclear? –  Robert Harvey Mar 24 at 17:56
    
@RobertHarvey I just want to know, where and when they use this. David says it is used never and nowhere, but why is it shown as a feature –  Rudra Mar 24 at 17:57
4  
Just because something is a feature doesn't mean it's a good idea. There are many reasons why "features" fall out of favor. Even your appendix serves no apparently useful purpose, even though it probably did in the cave man days. –  Robert Harvey Mar 24 at 18:00
1  
HOisting is a term from compiler theory, especially optimisation. It's been around for at least 20 years, but made popular by this peculiarity of Javascript. If it wasn't called a feature, it would probably be a bug. –  david.pfx Mar 25 at 3:50

Hoisting describes a feature of how Javascript is interpreted by the browser, and isn't so much a feature to be used.

When interpreting Javascript, browsers scope function-level variables at the beginning of the function. Example:

function AddTwoAndTwo() {
    var two = 2;
    var result = two + two;
    return result;
}

In the posted code, both variables "two" and "result" exist at the start of function scope (obviously, as they're declared there.) However, because the browsers are "hoisting" the variables, the following becomes legal Javascript code.

function AddTwoAndTwo() {
    result = 5;
    alert(result);
    var two = 2;
    var result = two + two;
    return result;
}

The net effect here is that you have variables in use before you declare them, and that can cause confusion, especially with global-scope variables. Example:

var result = 6;

function AddTwoAndTwo() {
    alert(result);  // should this be 6 or undefined?
    var two = 2;
    var result = two + two;
    return result;
}

To avoid confusion, declare your variables at the top of a function.

share|improve this answer
4  
+1: this is how I would answer. It's not a feature to use or not use, it's just a property of the environment to take into account. –  scrwtp Mar 24 at 18:51

Why?

JavaScript doesn't have Block Scope, that should explain why things should hoist to the top.

Is it useful?

If you prefer this:

var someVariable = someVariable || {};

Instead of this:

if ( "undefined" !== typeof someVariable ) {
    someVariable = someVariable;
} else {
    someVariable = {};
}

Then it is useful. Even if you don't notice it!

Clearification

First example will translate to something like this:

var someVariable = someVariableValue;

if ( "undefined" !== typeof someVariable ) {
    var someVariableValue = someVariable;
} else {
    var someVariableValue = {};
}
share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.