New Set Array returing Wrong data

I am trying to get distinct coaGrpId from ldgrwisesum useState but getting null values in array object and length as 310 which is my requires array object.

below is the ldgrwisesum useState from where i stored the data

[
    {
        "siteCode": "ANKL",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500044",
        "coaGrpId": 310,
        "opening": 10000,
        "prdDr": 0,
        "prdCr": 0,
        "closing": 10000
    },
    {
        "siteCode": "AYDH",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500003",
        "coaGrpId": 310,
        "opening": 5000,
        "prdDr": 0,
        "prdCr": 0,
        "closing": 5000
    },
    {
        "siteCode": "BIAL",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500010",
        "coaGrpId": 310,
        "opening": 41400,
        "prdDr": 0,
        "prdCr": 0,
        "closing": 41400
    },
    {
        "siteCode": "BLSH",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500013",
        "coaGrpId": 310,
        "opening": 5000,
        "prdDr": 0,
        "prdCr": 0,
        "closing": 5000
    },
    {
        "siteCode": "BLSH",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500016",
        "coaGrpId": 310,
        "opening": 1178176,
        "prdDr": 0,
        "prdCr": 0,
        "closing": 1178176
    },
    {
        "siteCode": "BLSH",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500028",
        "coaGrpId": 310,
        "opening": -294710,
        "prdDr": 0,
        "prdCr": 0,
        "closing": -294710
    },
    {
        "siteCode": "CKBL",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500026",
        "coaGrpId": 310,
        "opening": 3890,
        "prdDr": 0,
        "prdCr": 0,
        "closing": 3890
    },
    {
        "siteCode": "CPLN",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500027",
        "coaGrpId": 310,
        "opening": 139371,
        "prdDr": 0,
        "prdCr": 0,
        "closing": 139371
    },
    {
        "siteCode": "DMR5",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500018",
        "coaGrpId": 310,
        "opening": 37200,
        "prdDr": 0,
        "prdCr": 0,
        "closing": 37200
    },
    {
        "siteCode": "DMR7",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500039",
        "coaGrpId": 310,
        "opening": 57000,
        "prdDr": 0,
        "prdCr": 0,
        "closing": 57000
    },
    {
        "siteCode": "JHJR",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500017",
        "coaGrpId": 310,
        "opening": 8500,
        "prdDr": 0,
        "prdCr": 0,
        "closing": 8500
    },
    {
        "siteCode": "JHJR",
        "ldgrGrp": "L",
        "coaGrpNm": "Security Deposit - Others",
        "coaGrpCode": "CASDR0500021",
        "coaGrpId": 310,
        "opening": 44000,
        "prdDr": 0,
        "prdCr": 0,
        "closing": 44000
    }
]

i am expecting o/p in variable b .Below is the Expected output

[
  310    
]

I have getting 310 times null value in array and lenght 310 as displayed below

[
    null,
    null,
    null,
    null,
   // 310 times 
]

Below expression i have used

 var b = Array(...new Set(ldgrwisesum.map((x) => x.coaGrpId)));

Kindly help me on this.

Answer

You are misrepresenting the contents of the array. It is not [null, null, ...], it is [ , , , , , ...], i.e. not containing any elements whatsoever (neither null nor undefined), just 310 “empty slots”. It is an array with length 310 and no elements, i.e. a sparse array. And that is because you called Array(310) which means “create a sparse array with length 310”. Note that if you had two different numbers in your set, it would have done what you wanted, because Array(1, 2) means “create array [1, 2]” – only with a single numerical argument it’s different.

This is exactly why the Array constructor is not recommended anymore – because this often-unexpected difference in behavior would often lead to bugs. Instead, you can use Array.from or the spread syntax directly:

const b = Array.from(new Set(ldgrwisesum.map(x => x.coaGrpId)))
// --- OR ---
const b = [...new Set(ldgrwisesum.map(x => x.coaGrpId))]