Why the output of the two writing methods are inconsistent？

The first way to write：

    const LazyMan = function (name) {
      const array = []
      const fn = () => { console.log("Hi! This is " + name + '!'); next() }
      const next = () => {
        const fn = array.shift()
        fn && fn()
        // array.shift() && array.shift()()
      }
      array.push(fn)
      setTimeout(() => { next() }, 0)
      const api = {
        sleep: (number) => {
          array.push(() => {
            setTimeout(() => { console.log('Wake up after ' + number); next() }, number * 1000)
          })
          return api
        },
        eat: (content) => {
          array.push(() => {
            console.log('eat ' + content); next()
          })
          return api
        },
        sleepFirst: (number) => {
          array.unshift(() => {
            setTimeout(() => { console.log('Wake up after ' + 5); next() }, number * 1000)
          })
          return api
        }
      }
      return api
    }
    LazyMan("Hank").sleep(2).eat("dinner").sleepFirst(1);
    // Wake up after 5
    // Hi! This is Hank!
    // Wake up after 2
    // eat dinner

The second way to write：

    const LazyMan = function (name) {
      const array = []
      const fn = () => { console.log("Hi! This is " + name + '!'); next() }
      const next = () => {
        const fn = array.shift()
        // fn && fn()
        array.shift() && array.shift()()
      }
      array.push(fn)
      setTimeout(() => { next() }, 0)
      const api = {
        sleep: (number) => {
          array.push(() => {
            setTimeout(() => { console.log('Wake up after ' + number); next() }, number * 1000)
          })
          return api
        },
        eat: (content) => {
          array.push(() => {
            console.log('eat ' + content); next()
          })
          return api
        },
        sleepFirst: (number) => {
          array.unshift(() => {
            setTimeout(() => { console.log('Wake up after ' + number); next() }, number * 1000)
          })
          return api
        }
      }
      return api
    }
    LazyMan("Hank").sleep(2).eat("dinner").sleepFirst(1);
    // Wake up after 2

const fn = array.shift() fn && fn();
array.shift() && array.shift()();

The console output results of the first method and the second method are inconsistent, The second method only outputs the result of "Wake up after 2", which is not what I want，I want to know why？

>Solution :

shift modifies the array, shrinking its length by 1 and returning the head of the array. So with your first code:

const fn = array.shift()
fn && fn()

You call shift once, and assign the first function to fn. You check if fn exists, and then call it if it does. The array now has 1 less entry in it than before.

Your alternate code calls shift 3 times:

const fn = array.shift()
array.shift() && array.shift()()

The first element of the array gets assigned to fn, then never used. The second element of the array determines whether to execute the &&, and the third element of the array is the one that gets called (or throws an exception if it doesn’t exist).