javascript – Should abilities have their state and functionality separated?

I’m developing a top-down game using Javascript and Canvas in an ECS architecture.

I’m wondering, which of these is better from a design / elegance point of view?

Method 1: Combining the ability function and its metadata into one object:

// in ability factory
createBlinkAbility() {
  return {
    cooldown: 5000,
    castTime: 1000,
    hotkey: "q",
    execute(entity: Entity, scene: Scene) {
      let position = entity.get(CT.Position);

      let level = scene.queryComponent(CT.Level);

      position.x = Helpers.randomInt(0, level.width);
      position.y = Helpers.randomInt(0, level.height);
    }
  }
}

function executeCurrentCast(entity: Entity, ability: Ability) {
  ability.execute(entity); // all abilities have an execute function
}

Method 2: Separating ability metadata from its function:

// in ability factory
createBlinkAbility() {
  return {
    type: "blink",
    cooldown: 5000,
    castTime: 1000,
    hotkey: "q"
  }
}

// in ability factory
castBlink = (entity: Entity, scene: Scene) => {
  let position = entity.get(CT.Position);

  let level = scene.queryComponent(CT.Level);

  position.x = Helpers.randomInt(0, level.width);
  position.y = Helpers.randomInt(0, level.height);
}

function executeCurrentCast(entity: Entity, ability: Ability) {
  switch (ability.type) {
    case "bow": this.abilityFactory.castBow(entity); break;
    case "blink": this.abilityFactory.castBlink(entity); break;
    ...
  }
}

I know in general in an ECS architecture it is wise to separate “state” from “actions”, but I’m not sure if this would also apply to things like abilities. It seems like it might be wise to maintain that separation, but the code seems like it might be “cleaner”, or shorter at least, in the former case.

Lastly, I’m not really concerned with the performance differences between these two approaches, but rather which is better from a design standpoint.