0

I have an empty object myscroll defined as var myscroll = {}. Now I want to add an array property to it. I did it as follows:

var myscroll = {}  

myscroll.point[0] = getScrollpos("home");  
myscroll.point[1] = getScrollpos("artists");  
myscroll.point[2] = getScrollpos("songs");  
myscroll.point[3] = getScrollpos("beats");  
myscroll.point[4] = getScrollpos("contact");  

I get the error myscroll.point is not defined. Then I first defined it as myscroll.point = [];, then the code worked.

So, Why can't we directly set array values and add that property to an object in javascript? Why do we have to define it first independently?

1
  • How is Javascript supposed to know what exactly point is supposed to be if you never initialise it? You could add rules to the language to have it somehow infer that, but explicit is usually better than implicit. Commented May 18, 2016 at 8:13

6 Answers 6

4

When you are dealing with object properties, by default you can access any object property and value of that property would be undefined if it wasn't set before. So, by accessing not defined property with index (myscroll.point[0]) you are trying to access property 0 of undefined, which is primitive value in javascript and has no properties, so you are getting TypeError.

As result you can set primitive values to not defined object property, but cannot dial with not defined prop as with object.

Also wanna to point you and explain situation with a little bit similar from first view situations in code below:

var obj = []
obj[0] = 10

notDefinedObj[0] = 10 // cause ReferenceError

Array is object. In JS you can't modify/add/delete object properties without initialising object before.

That's caused because objects are stored in memory and you can access them by reference. When you attempt to add new property to it, for instance add new element to list, you are trying to attach property to variable which has no Reference, that's why you are getting ReferenceError.

Good Luck!

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

1 Comment

Your answer is fine. I just recalled crockford's similar explanation that accessing a non existing property of an object obj.myprop returns undefined but accessing that undefined's further properties(or value) obj.myprop.price will throw typeError.
3

With myscroll.point you're trying to access a point property on the myscroll object. But there is no such property on that object. That's why you're getting a undefined is not an object error message (or something similar - depending on your browser).

If you're coming from PHP, this might be strange but actually it's much more explicit than the magic involved in the following php snippet for example:

$myscroll = [];
$myscroll['point'][0] = getScrollpos("home");  
// ...

PHP automagically created sub arrays for keys that do not exist.

Update after comment

There is a significant difference between myscroll.mypoint = 5; and myscroll.point[0] = getScrollpos("home");.

In the first case your setting the point property on myscroll to 5 explicitly. But in the second case you're trying to access the [] operator (which is an array operator) on a non-existing property point. Theoretically Javascript could do the same magic as PHP and create the array automagically on the fly, but it doesn't. That's why your getting an error.

It's the same as trying to access a fictitious property myproperty on myscroll.mypoint like myscroll.mypoint.myproperty. This will not work as well, because you're trying to access myproperty on mypoint which is undefined on myscroll.

1 Comment

I don't know php. My question is if I can do myscroll.mypoint = 5 then why not myscroll.point[0] = getScrollpos("home");? if I can access myscroll.mypoint then why can't I access myscroll.point[0]?
0

Because myscroll.point[0] = getScrollpos("home"); can be understood as Get the first element of the point array inside of myscroll and set it to... You can't access the first element of an non-existing array.

Comments

0

Simply check typeof of myscroll array variable and then check the typeof of myscroll.point. You have tried to assign properties of an array, outside of an array. It is empty or undefined.

Comments

0

You are trying to access the point property of myscroll which is not defined (because myscroll = {}).

If you will look at the console with myscroll.point, it will return you undefined. Here you were trying to put something in undefined so you got TypeError: myscroll.point is undefined.

If you define myscroll like this:

var myscroll = {
         point : []
}  

Then your code will work and you won't need to define myscroll.point = [].

Comments

0

if you have an an empty object and you want to set a new property that holds an array you should do this.

var obj = {};
obj['propertyName'] = [];

this will put a property with corresponding propertyName that holds an array that you can later populate.

if your getScrolloops() returns an array you can do this

obj['propertyName'] = getScrolloops();

Idealy in your case you can do this:

obj['propertyName'] = [getScrollpos("home"),
     getScrollpos("atrist"),
     getScrollpos("songs"), 
     getScrollpos("beats"),
     getScrollpos("contact")
];

EDIT: Explanation: Why is your code not working? As explained here:

You can define a property by assigning it a value.

What you do is trying to define a property by assigning a value to an index of that property. This will not work because you are not assigning a value to the property it's self but to index of a property that dose not exist.

Also i need to mention that you can use both property accessors to achieve that. This could be a helpful link.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.