AngularJS function hoisting

Question

I have a 'beginner' question. Why does this error out? I call the function in the code, but the function is defined further down.

AngularJS version:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Someone';
    $scope.doStuff(); // run the defined function, but errors out

    $scope.doStuff= function(){  // function definition
        console.log('did something');
    }
}

http://jsfiddle.net/2fjuJ/4/

But this one works fine:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Someone';
    $scope.doStuff = function(){
        console.log('did something');
    }

    $scope.doStuff(); 
}

http://jsfiddle.net/2fjuJ/5/

Check this: http://stackoverflow.com/questions/16439949/define-local-function-in-javascript-use-var-or-not — Ilan Frumer, Jan 15 '14 at 19:33
Also this: http://designpepper.com/blog/drips/variable-and-function-hoisting — Ilan Frumer, Jan 15 '14 at 19:42
doStuff is not hoisted the way you've written it; change it to function doStuff and it should get hoisted and not cause an error — Dexygen, Jan 15 '14 at 20:06
This is what you should *really* be reading: http://stackoverflow.com/questions/7506844/javascript-function-scoping-and-hoisting — Dexygen, Jan 15 '14 at 20:07

score 6 · Accepted Answer · answered Jan 15 '14 at 20:46

6

You're not declaring a new variable when you write $scope.doStuff = function () {...}, you're assigning a property, which does not get hoisted. at the time you call $scope.doStuff(), $scope looks like:

{
    name: "Someone"
}

As you can see there's no "doStuff" property until the next line executes.

answered Jan 15 '14 at 20:46

ilmatic

565
3
11

What has declaring variables to do with that? – a better oliver Jan 15 '14 at 20:51
simple enough. was hoping for a solution to remedy this, but the explanation is clear enough. – SoluableNonagon Jan 15 '14 at 20:51

AngularJS function hoisting

1 Answers1