Here's I am using simple form with angularjs. Everything works fine. I am having watchgroup for EndDateFrom & EndDateTo datepickers. When it's defined I am logging the value to console. I am constructing an expression based on my if conditions if value is defined from datepickers, But i feel my code is little messy. Is there any better way to format this to make more simple.

I know we can't use switch case for this, but just checking if there is any other way to make less messy

$scope.$watchGroup(['$scope.EndDateFrom', '$scope.EndDateTo'], function () {

        if (!angular.isUndefined($scope.EndDateFrom) && !angular.isUndefined($scope.EndDateTo)) {

           return console.log(('expr://' + $filter('date')(new Date($scope.EndDateFrom), 'MM/dd/yyyy') + ' and ' + $filter('date')(new Date($scope.EndDateTo), 'MM/dd/yyyy')));
            // $scope.Test1 = 'expr://' + $filter('date')(new Date(disbursementsScheduleVm.processEndDateFrom), 'MM/dd/yyyy') + ' and ' + $filter('date')(new Date(disbursementsScheduleVm.processEndDateTo), 'MM/dd/yyyy');
        else if(!angular.isUndefined($scope.EndDateFrom))
            return console.log(('expr://' + $filter('date')(new Date($scope.EndDateFrom), 'MM/dd/yyyy')));
        else if (!angular.isUndefined($scope.EndDateTo))
            return console.log(('expr://' + $filter('date')(new Date($scope.EndDateTo), 'MM/dd/yyyy')));


Would something like that work better?

$scope.$watchGroup(['$scope.EndDateFrom', '$scope.EndDateTo'], function () {
  const FORMAT = 'MM/dd/yyyy';
  const dates = [];

  if (!angular.isUndefined($scope.EndDateFrom))
    dates.push($filter('date')(new Date($scope.EndDateFrom), FORMAT));

  if (!angular.isUndefined($scope.EndDateTo))
    dates.push($filter('date')(new Date($scope.EndDateTo), FORMAT));

  const expression = `expr://${dates.join(' and ')}`;
  return expression;

  • Array.join() will help avoid branching. In your case we don't really save any branches, but in more complex cases it may save a lot.
  • I left angular.isUndefined(...) untouched since I don't know how different it is from the native JavaScript's analogue, but if it's equivalent you may want to use $scope.EndaDateFrom !== undefined instead.
  • Original return console.log is counter-intuitive. Is it returning a value, or logging it to the console, or both? I split that into two separate operations.
  • FORMAT is a reusable constant.
  • expr://${dates.join(' and ')} uses string interpolation to create result object.

Update 1

`expr://${dates.join(' and ')}`

in older versions of JavaScript should be replaced with a classic equivalent

'expr://' + dates.join(' and ')
  • \$\begingroup\$ Getting syntax error. @igor soloydenko please help me to fix this syntax error \$\endgroup\$
    – Kiran
    May 9 '17 at 17:29
  • \$\begingroup\$ @Kiran 'expr://' + dates.join(' and ') was added to cover older versions of JavaScript \$\endgroup\$ May 9 '17 at 18:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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