Using a split string to destructure an array with a mix of let and const variables

Question

Using a split string to destructure an array with a mix of let and const variables

There is a problem with TS:

An error occurs stating that 'parsedHours' and 'parsedMinutes' should be declared as constants by using 'const' instead of 'prefer-const'.

This issue arises when attempting to destructure an array after performing a string split operation:

let [
  parsedHours = '00',
  parsedMinutes = '00',
  parsedSeconds = '00',
  parsedMillis = '000'
] = "12:34:56".split(':');

if (parsedSeconds.includes('.')) {
  [parsedSeconds, parsedMillis] = parsedSeconds.split('.');
}

Hours and minutes are recommended to be declared as constants, but seconds and millis can change so they should remain as let variables. There are several ways to address this issue, but finding an elegant solution has been challenging.

Any suggestions?

javascript arrays typescript ecmascript-6

Answer 1

Answer №1

To split a String using RegExp and String.split(), you can split by the characters [.:]:

const separateTime = (str) => {
  const [
    hour = '00',
    minute = '00',
    second = '00',
    millisecond = '000'
  ] = str.split(/[.:]/);

  console.log({
    hour,
    minute,
    second,
    millisecond
  });
}

separateTime("12:34:56")

separateTime("12:34:56.35")

Answer 2

To split a String using RegExp and String.split(), you can split by the characters [.:]:

const separateTime = (str) => {
  const [
    hour = '00',
    minute = '00',
    second = '00',
    millisecond = '000'
  ] = str.split(/[.:]/);

  console.log({
    hour,
    minute,
    second,
    millisecond
  });
}

separateTime("12:34:56")

separateTime("12:34:56.35")

Answer 3

Answer №2

If the only reason Seconds and Millis might vary is due to that specific if statement, then there may be a flaw in your initial approach. This is because after the initial split, parsedSeconds does not solely represent "parsed seconds", but rather "parsed seconds with an optional decimal part".

Instead of relying on assumptions, try parsing the actual format using regex:

const [
  , // discard "full match"
  parsedHours,
  parsedMinutes,
  parsedSeconds,
  parsedMillis = "000"
] = "12:34:56".match(/^(\d{2}):(\d{2}):(\d{2})(?:\.(\d{3}))?$/) || [];

In this context, all the parsed components remain constant.

Take note of the final || [], which accounts for cases where the input doesn't follow the expected format. You could name the full match as parsedResult and verify with

if( !parsedResult) throw 'something';

Answer 4

If the only reason Seconds and Millis might vary is due to that specific if statement, then there may be a flaw in your initial approach. This is because after the initial split, parsedSeconds does not solely represent "parsed seconds", but rather "parsed seconds with an optional decimal part".

Instead of relying on assumptions, try parsing the actual format using regex:

const [
  , // discard "full match"
  parsedHours,
  parsedMinutes,
  parsedSeconds,
  parsedMillis = "000"
] = "12:34:56".match(/^(\d{2}):(\d{2}):(\d{2})(?:\.(\d{3}))?$/) || [];

In this context, all the parsed components remain constant.

Take note of the final || [], which accounts for cases where the input doesn't follow the expected format. You could name the full match as parsedResult and verify with

if( !parsedResult) throw 'something';

Answer 5

Answer №3

When faced with this issue, you have a variety of choices:

You can disable the lint rule (more than likely coming from TSLint or ESLint rather than TypeScript itself).
Save the array and then utilize either const or let based on your preference.
Utilize a regular expression to use const for all values, possibly employing named capture groups to accommodate different input formats.

For option #2, consider the following code snippet:

const result = "12:34:56".split(":");
const [parsedHours = "00", parsedMinutes = "00"] = result;
let [, , parsedSeconds = "00", parsedMillis = "000"] = result;
// ...

And for option #3, here is an example:

const rexTime = /^(?<hours>\d{1,2}):(?<minutes>\d{1,2}):(?<seconds>\d{1,2})(?:\.(?<millis>\d{1,3}))?$/;
function example(timeString) {
    const {
        groups: {
            hours = "00",
            minutes = "00",
            seconds = "00",
            millis = "000"
        } = {}
    } = rexTime.exec(timeString) ?? {};
    console.log(
        timeString,
        "=>",
        hours,
        minutes,
        seconds,
        millis
    );
}

example("12:34:56");
example("12:34:56.123");

There are numerous approaches to tackle this problem, and the above examples just scratch the surface.

Answer 6

When faced with this issue, you have a variety of choices:

You can disable the lint rule (more than likely coming from TSLint or ESLint rather than TypeScript itself).
Save the array and then utilize either const or let based on your preference.
Utilize a regular expression to use const for all values, possibly employing named capture groups to accommodate different input formats.

For option #2, consider the following code snippet:

const result = "12:34:56".split(":");
const [parsedHours = "00", parsedMinutes = "00"] = result;
let [, , parsedSeconds = "00", parsedMillis = "000"] = result;
// ...

And for option #3, here is an example:

const rexTime = /^(?<hours>\d{1,2}):(?<minutes>\d{1,2}):(?<seconds>\d{1,2})(?:\.(?<millis>\d{1,3}))?$/;
function example(timeString) {
    const {
        groups: {
            hours = "00",
            minutes = "00",
            seconds = "00",
            millis = "000"
        } = {}
    } = rexTime.exec(timeString) ?? {};
    console.log(
        timeString,
        "=>",
        hours,
        minutes,
        seconds,
        millis
    );
}

example("12:34:56");
example("12:34:56.123");

There are numerous approaches to tackle this problem, and the above examples just scratch the surface.

Answer 7

Answer №4

Is it possible to replace the . with a : and then split everything apart? (Alternatively, if you prefer not to do that, the second example excludes the dot replacement)

By the way, you can simply spread the remaining content as constants, and then work on the subparts:

const [
  parsedHours = '00',
  parsedMinutes = '00',
  ...rest
] = "12:34:56.123".replace('.', ':').split(':');
let [
  parsedSeconds = '00',
  parsedMillis = '000'
] = rest;  

   console.log(rest);

const [
  parsedHours2 = '00',
  parsedMinutes2 = '00',
  ...rest2
] = "12:34:56.123".split(':');
let [
  parsedSeconds2 = '00',
  parsedMillis2 = '000'
] = rest2;  

console.log(rest2);

Answer 8

Is it possible to replace the . with a : and then split everything apart? (Alternatively, if you prefer not to do that, the second example excludes the dot replacement)

By the way, you can simply spread the remaining content as constants, and then work on the subparts:

const [
  parsedHours = '00',
  parsedMinutes = '00',
  ...rest
] = "12:34:56.123".replace('.', ':').split(':');
let [
  parsedSeconds = '00',
  parsedMillis = '000'
] = rest;  

   console.log(rest);

const [
  parsedHours2 = '00',
  parsedMinutes2 = '00',
  ...rest2
] = "12:34:56.123".split(':');
let [
  parsedSeconds2 = '00',
  parsedMillis2 = '000'
] = rest2;  

console.log(rest2);

Using a split string to destructure an array with a mix of let and const variables

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error encountered in VUE JS 3: The function vue.initDirectivesForSSR is not recognized as a valid function

What is the reason behind typescript making it necessary for me to find a way to set a value of type

Interactive hover text appears when you mouse over the SVG path

Error with tsc rootDir due to Docker's installation of yarn in root directory

Modifying the height of the bar in Google Charts Timeline using react-google-charts

Position the spinner in the center of the user's screen

Learn how to cycle through three different texts that appear in the same spot using smooth transitions

What steps can I take to resolve a dependency update causing issues in my code?

Dealing with an empty req.body in an Express.js POST request

The Axios GET call encountered an error with a status code of 404

Static response is the way to go! Asynchronous responses just don't cut it

Drag and Drop in Angular with Dragula - Trigger Confirmation on Drop Event

Can someone guide me on how to make an array filled with dates using Javascript?

Guidelines on resolving the issue of Unsupported platform for [email protected]: requested {"os":"darwin","arch":"any"} (existing: {"os":"win32","arch":"x64"})

I am looking to implement custom styles to a navigation bar element upon clicking it

Ensuring type signatures are maintained when wrapping Vue computed properties and methods within the Vue.extend constructor

Utilizing Jquery and JavaScript to filter out specific HTML objects retrieved from an AJAX response

Create a duplicate of a React component that utilizes the forwardRef method

Leveraging document.getElementById alongside css modules

Transferring a JavaScript variable to PHP using Ajax within the same webpage