Can I avoid that $scope.$watch returns an undefined value?

Question

When I observe a scope variable in Angular via $scope.$watch, it seems to be undefined only at the first call of the watch function.

Is it possible to rewrite my code to avoid the unnecessary check for undefined?

Here is a minimal example:

1) jsfiddle

2) HTML:

<div ng-app="MyApp">
   <div ng-controller="MyCtrl">Enter some text:
      <input type="text" ng-model="text" size="30" />
      <p>You entered: {{text}}</p>
      <p>Length: {{textLength}}</p>
   </div>
</div>

3) Javascript:

angular.module('MyApp', []).controller(
  'MyCtrl', function ($scope) {
    $scope.textLength = 0;
    $scope.$watch('text', function (value) {
      if (typeof value !== 'undefined') {
        $scope.textLength = value.length;
      } else {
        $scope.textLength = 'observed value is undefined';
      }
    });
});

Answer 1

If you set a default empty value for your watched property in your view model you won't have the problem with undefined values.

In your case add this before or after $scope.textLength initialization (check this fiddle).

$scope.text = '';

Answer 2

Another option to avoid the undefined error is you can wrap your function in a hasOwnProperty if statement.

$scope.$watch('text', function (value) {
  if($scope.hasOwnProperty('text')) {
    if (typeof value !== 'undefined') {
        $scope.textLength = value.length;
      } else {
        $scope.textLength = 'observed value is undefined';
      }
    });
  }
};