Javascript Array Push and then Splice it not working

Question

So basically i want to remove the 3, with the 4. So its just only "1":"2" left.

const array = [];

array.push({ "1": "2" })
array.push({ "3": "4" })


const index = array.indexOf(3);
if (index > -1) {
  array.splice(index, 1);
}
console.log(array)

You're pushing objects with key/value pairs so `indexOf` won't work in this case. [Here's the documentation for objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object), and [the documentation for arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). — Andy, Jan 04 '22 at 01:15
@RawleyFowler that won't work either as object equality assessed by reference not shape. — pilchard, Jan 04 '22 at 01:28

score 0 · Answer 1 · answered Jan 04 '22 at 01:16

0

You can use the Array.pop() method Array.prototype.pop() like this:

const array = [];

array.push({ 1: '2' });
array.push({ 2: '4' });
array.pop();

console.log(array);

answered Jan 04 '22 at 01:16

Bilal Abraham

136
7

Basically i dont want to delete the last, or the first. I want to delete a specific key – DanielLogic Jan 04 '22 at 01:18

score 0 · Answer 2 · answered Jan 04 '22 at 01:19

0

Since you are pushing the whole object in the array after the two insertions your array would like something like this : [ {"1":"2"}, {"3":"4"} ]

So when you perform the action indexOf, it does't return anything.

In order to get the desired result you can try using object and use delete to remove any property you don't want. Example

const obj = {}

obj["1"] = "2";
obj["3"] = "4"

console.log("original obj : ", obj)

delete obj["3"];

console.log("filtered obj : ", obj)

answered Jan 04 '22 at 01:19

Saurabh Verma

483
1
4
17

Yeah but in my Code i need to push, so i cant just dont push. – DanielLogic Jan 04 '22 at 01:21
Search with a whole Object would be relatively expensive operation than searching for a constant on a map or obj. you can still use array and create a map with constant lookup time. – Saurabh Verma Jan 05 '22 at 02:01

DecPK · Accepted Answer · 2022-01-04T01:45:15.797

0

In case of OBJECT values

If you are using indexOf with objects then you have to compare it with the exact same object. You need to have exact same reference to remove it from the array in which you have added prior.

Objects are compared with references and primitives are compared with values. For more info, How to determine equality for two JavaScript objects?

const array = [];
const obj = { '3': '4' };
array.push({ '1': '2' });
array.push(obj);

const index = array.indexOf(obj);
console.log(index);

In case of PRIMITIVE values

If the input is array of primitive values then you could have used indexOf because primitives are compared with value as:

const array = ['1', '2', '3'];
console.log(array.indexOf('3'));

1) You can use findIndex with hasOwnProperty to get the same result. Thanks to pilchard for this suggestion.

const array = [];

array.push({ '1': '2' });
array.push({ '3': '4' });

const index = array.findIndex((o) => o.hasOwnProperty('3'));
if (index > -1) {
  array.splice(index, 1);
}
console.log(array);

2) You can use findIndex to find the index of the object who has 3 as a key

const array = [];

array.push({ '1': '2' });
array.push({ '3': '4' });

const index = array.findIndex((o) => Object.keys(o).some((k) => k === '3'));
if (index > -1) {
  array.splice(index, 1);
}
console.log(array);

edited Jan 04 '22 at 01:45

answered Jan 04 '22 at 01:21

DecPK

24,537
6
26
42

Or with the relevant Object method `array.findIndex((o) => Object.hasOwn(o, '3'))` (`Object.prototype.hasOwnProperty.call(o, '3')` for compatibility) – pilchard Jan 04 '22 at 01:37
@pilchard [hasOwn](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn#browser_compatibility) added recently, Its support is not so good – DecPK Jan 04 '22 at 01:41
Which is why I noted the compatibility option using `hasOwnProperty` – pilchard Jan 04 '22 at 01:41
Yeah, using `hasOwnProperty` is far more better, Thanks – DecPK Jan 04 '22 at 01:42
@pilchard why to use `call` when we can directly use `o.hasOwnProperty('3')` – DecPK Jan 04 '22 at 01:49
There are a few reasons, one being that `hasOwnProperty` is itself a property and can be overwritten (see: [Using hasOwnProperty as a property name](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#using_hasownproperty_as_a_property_name)), another is that `hasOwnProperty` will be inaccessible for objects that don't inherit from `Object.prototype` (see: [Objects created with Object.create(null)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#using_hasownproperty_as_a_property_name)) – pilchard Jan 04 '22 at 10:27

score 0 · Answer 4 · answered Jan 04 '22 at 01:24

filter the objects. If an object's key matches your search key it doesn't get returned in the filtered array.

const arr = [];

arr.push({ 1: '2' })
arr.push({ 3: '4' })

function remove(arr, k) {
  return arr.filter(obj => {
    return Object.keys(obj)[0] !== k;
  });
}

console.log(remove(arr, '3'));

Javascript Array Push and then Splice it not working

4 Answers4