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

Local storage synchronization in progress, please hold on

Please ensure that all files have finished downloading before proceeding to create the object

Tips for integrating the react-financial-charts library into your React and JavaScript project

TypeError: "Table" has not been declared

Changing the designated materialUI class

Encountering the "TypeError: Unable to access property 'indexOf' of undefined" error while utilizing the ipfs-api

Having trouble utilizing yarn to import Mapbox into TypeScript

Slick Slider fails to load on web browsers

Why is there a presence of quotation marks in the value stored in my local storage?

NestJS integration tests are failing due to an undefined Custom TypeORM Repository

The standard category of class method parameter nature

Angular binding causing decimal inaccuracies

What is the best way to eliminate blank values ("") from an array?

How can I extract particular combinations from a PHP array?

Begin a SeleniumWebDriver session after Google Chrome has been launched beforehand

Instructions on transforming an img into an Image component within next.js

Creating a TypeScript library with Webpack without bundling may seem like a daunting task, but

A TypeScript class utilizing a static variable with the singleton design pattern

Executing a function after a subscriber has finished in Angular 8+

Resetting an object back to its initial value while preserving its bindings in AngularJS