A curious case of a function definition Today, I came across of a code snippet that made me pause and squint. The author, who was new to the JavaScript world, attempted to wrap a part of his code in an anonymous IIFE (Immediately Invoked Functional Expression). I have been a party to many a heated discussion on the merits of IIFE as a coding pattern but what made me pause and squint this time was not just the IIFE itself, it was the way it was used. In short, the code looked somewhat like this: { username = .forms[ ][ ].value (!username) {
    ( { .log( )
    }) }
}

... ( ) function doSomethingImportant const document "login_form" "username" if ( ) function // Display error here console 'Missing username' return false Quick quiz: can you spot a problem here? . The anonymous function is never called, thus the error message is never displayed making the author question the reality. Aside from this obvious oversight, the snippet brings up a more interesting question: Correct where are we allowed to declare a function? Hoist'em Up! Many developers coming from a different language, such as Java, C# or C++, are used to more or less strict rules that dictate where and how functions are declared and used. First, we declare a function - typically, at the top of the file (or in a class if it's a method). Then, often times some hundreds of lines down the code, we call it. Not the other way around. JavaScript throws a curve ball at the uninitiated by following a somewhat unique set of rules called "hoisting" ( ), which means that the function declarations (and the vars, too, but not block-bound "const" and "let") are automatically moved to the top of the enclosing scope. described here Contrary to the Java and C# norms though, JavaScript "scope" is usually the enclosing function - or the global scope. Which means that - before the call or after, as long as the call happens within the same scope as the function declaration. it does not really matter where the function is defined Hoisting is a convenient way of getting around the "chicken or egg" problem but it also may create some rather amusing situations. Consider the following snippet: { (arg) {
    show_error() } { } { .log( )
  }
} ( ) function dummy arg if // <--- Where is the function declaration?? return false else return true // Here it is, JS silently moved it to the top! ( ) function show_error console 'Error' Rather counter-intuitive but perfectly legal!

Ball

Check out my blog!

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

#JavaScript Hoisting: Where Did My Function Go?

Too Long; Didn't Read

Company Mentioned

Alex Stepanov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

#JavaScript Hoisting: Where Did My Function Go?

Too Long; Didn't Read

Company Mentioned

Alex Stepanov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES