Question

182

how could I reduce the cyclomatic complexity?

rated 0 times [ 189] [ 7] / answers: 1 / hits: 43223 / 11 Years ago, mon, july 29, 2013, 12:00:00

Whenever I lint a piece of code I'm working on I get the This function's cyclomatic complexity is too high. (7). But I'm a bit confused on how I could rewrite it in such way so it works.

This would be the function that keeps throwing that message:

function () {

  var duration = +new Date() - start.time,

    isPastHalf = Number(duration) < 250 && Math.abs(delta.x) > 20 || Math.abs(delta.x) > viewport / 2,

    direction = delta.x < 0;



  if (!isScrolling) {

    if (isPastHalf) {

      if (direction) {

        this.close();

      } else {

        if (this.content.getBoundingClientRect().left > viewport / 2 && pulled === true) {

          this.close();

          return;

        }

        this.open();

      }

    } else {

      if (this.content.getBoundingClientRect().left > viewport / 2) {

        if (this.isEmpty(delta) || delta.x > 0) {

          this.close();

          return;

        }

        this.open();

        return;

      }

      this.close();

    }

  }

}

I would like to hear some advice on how I could structure my code in such way so I avoid this kind of situations.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

irvingcarloe

Add To Favorites

Follow

Total Points: 677

Total Questions: 109

Total Answers: 96

Location: Svalbard and Jan Mayen

Member since Sun, Sep 25, 2022

2 Years ago

irvingcarloe questions

1 Is it better to use multiple states or one state object in React?

Wed, Aug 10, 22, 00:00, 2 Years ago

1 Tailwind classes not working after page refresh in production

Fri, Jun 4, 21, 00:00, 3 Years ago

1 Event listener for dataLayer push events on Tag Manager JS

Wed, Mar 31, 21, 00:00, 3 Years ago

1 Convert file to Base64

Tue, Aug 4, 20, 00:00, 4 Years ago

1 How to autoplay audio in any browser?

Fri, Jul 3, 20, 00:00, 4 Years ago

View All

answered 11 Years ago grayson · Accepted Answer

Well you have only two actions in your code, but much too many conditions. Use a single if-else-statement, and boolean operators in the condition. If that was impossible, you could at least

remove the empty lines to get the full logic on one screen page

add some comments on what the branches are doing (and why)

avoid early returns

Here's your function simplified:

var duration = +new Date() - start.time,

    isPastHalf = Number(duration) < 250 && Math.abs(delta.x) > 20 || Math.abs(delta.x) > viewport / 2,

    isFarRight = this.content.getBoundingClientRect().left > viewport / 2, 

    direction = delta.x < 0;



if (!isScrolling) {

    if (isPastHalf) {

        if (direction)

            this.close();

        else {

            if (isFarRight && pulled)

                this.close();

            else

                this.open();

        }

    } else {

        if (isFarRight) {

            // Looks like the opposite of `direction`, is it?

            if (this.isEmpty(delta) || delta.x > 0)

                this.close();

            else

                this.open();

        } else

            this.close();

    }

}

and shortened:

var duration = +new Date() - start.time,

    isPastHalf = Number(duration) < 250 && Math.abs(delta.x) > 20 || Math.abs(delta.x) > viewport / 2,

    isFarRight = this.content.getBoundingClientRect().left > viewport / 2, 

    direction = delta.x < 0,

    undirection = this.isEmpty(delta) || delta.x > 0;



if (!isScrolling) {

    if ( isPastHalf && !  direction && !(isFarRight && pulled)

     || !isPastHalf && !undirection &&  isFarRight )

        this.open();

    else

        this.close();

}