How to push array to object that doesn't exist in object?

Question

I'm very new to JavaScript. I was trying pushing new values to an object. But when I tried to push an array that doesn't exist in myObj, I got Cannot read property 'push' of undefined error. My code is below:

var myObj = {
    first: "first value",
    second: "second value",
}

myObj.third.push(123)

console.log(myObj)

But when I check if it doesn't exist and create an empty array, then push it, it works. =>

var myObj = {
    first: "first value",
    second: "second value",
}

myObj['third'] = myObj.third || []

myObj.third.push(123)

console.log(myObj)

I wonder if bottom code is best practice and if there is a better way to do it.

Looks like you solved your own problem, you can't call push on a array until you initialize it. — Wilhelmina Lohan
– Wilhelmina Lohan, Commented Feb 6, 2020 at 22:35
You can also initialize the property with the initial value that you want to push, like so: myObj.third = [123], from there, you can use .push() to add values — mhodges
– mhodges, Commented Feb 6, 2020 at 22:35
push is a method on Array. To create a property on an object you simply assign something to it. — Ben Aston
– Ben Aston, Commented Feb 6, 2020 at 22:36
I was expecting it to do in single comment ( creating a property that doesn't exist and pushing the value ). But it's seems my bottom code is way to go. @WilliamLohan — Teyyihan Aksu
– Teyyihan Aksu, Commented Feb 6, 2020 at 22:40

Crisoforo Gaspar · Accepted Answer · 2020-02-06 22:50:28Z

1

The push method is part of the Array prototype in your particular case you are trying to access a not defined property which in JavaScript is consider undefined so you are trying to do transalates into something like:

myObj.third.push => myObj.undefined.push

Because myObj does not have a third key you can try this in the console doing console.log(myObje.third );

So the engine returns an error saying that undefined does not have a property push that is only available in Array.

In this case you need to set assign a value to myObj.third before using it as an array, for that there are multiple ways to set the value as an array your answer above is one of those ways:

myObj['third'] = myObj.third || []

That line works however if for example myObj.third has a value will use that as a value as you are assigning the result of the operation myObj.third || [] which in this scenario anything that evaluates as truthy will be returned if for instance you have:

myObj.third = true;

And then you do:

myObj.third.push(123);

An error will be displayed Uncaught TypeError: myObj.third.push is not a function as currently myObj.third is not an array.

So you need to make sure you are operating over an Array when using push, or at least when you initialize the value of your property is set as an Array, you can find more details on Array construction on this page.

Alternatives you can do to check before pushing are:

if ( ! Array.isArray(myObj.third) ) {
   myObj.third = [];
}

myObj.third.push(123)

edited Feb 6, 2020 at 22:50

answered Feb 6, 2020 at 22:44

Crisoforo Gaspar

3,8402 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Teyyihan Aksu Over a year ago

Yes i tested the true error. But we will overcome this issue with a if(myObj.third === Array) condition. Then we will be sure it's an array

Wilhelmina Lohan · Accepted Answer · 2020-02-10 16:58:18Z

1

Updated 2nd:

You could do a ternary operator

let myObj = {
  first: 'first value',
  second: 'second value'
};

myObj.third = myObj.third ? [...myObj.third, 123] : [123];

console.log(myObj);

edited Feb 10, 2020 at 16:58

answered Feb 6, 2020 at 22:38

Wilhelmina Lohan

3,1233 gold badges33 silver badges67 bronze badges

2 Comments

Teyyihan Aksu Over a year ago

Yes i can. But when i would fetch data from API, i won't be able to tell if property is there or not until if condition. I was expecting it to do in single line of code.

Wilhelmina Lohan Over a year ago

Updated answer above

Collectives™ on Stack Overflow

How to push array to object that doesn't exist in object?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related