What are JavaScript Objects and Properties?

Question

Can anyone explain objects and properties to me in Javascript in layman's terms? The Javascript MDN documentation is confusing me.

I am trying to solve a problem in a Javascript tutorial about objects and properties The question is below and my attempt at the code, I think I followed the MDN as far as I can grasp it. Any help would be appreciated!

Question: Add the value of the property argument as a key on the object argument. The value of the new property should be set to null. Return object after adding the new property.

Input Example:

{}, 'hello'
{ x: 5 }, 'y'

Output Example:

{ hello: null }
{ x: 5, y: null }

note: the property name is NOT 'property'. The name is the value of the argument called property (a string).

My code: //NOTE: the function addProperty(object, property) was already in the console and I have to write the solution inside of it.

function addProperty(object, property) {
  // code here
  let result = addProperty({x: 5}, 'y');
  obj[property] = null;
  return obj;
}

addProperty(x, 'y'); 

Answer 1

a property is a key:

let obj = {
    name: 'Jordan',
    age: 15
}

obj.name is a property, same goes for obj.age.

Answer 2

This particular example is simple:

var one={};
var two={x:5};
function addProperty(object property){
  obj[property]=null;
  return obj;
}

addProperty(one, 'hello'); 
addProperty(two, 'y');

Objects in javascript are really flexible, their properties can be added or removed, even when set from the very beginning.

If you take:

var x={};

x will be an object with nothing in it, but if instead of that you write:

var x={
  inner:'b'
};

x will be an object with a property called inner which value is 'b', now, if we want to access that property we could do something like this:

var valueOfInner=x.inner;

or

var valueOfInner=x['inner'];

The same if we want to change the value of that property:

x.inner=8;

or

x['inner']=8;

Now, you'll notice that when we use x.['inner'], we could very well use instead:

var propertyName='inner';
x[propertyName]=8;

So you can access and modify a property of an object without actually knowing exactly which property you're manipulating.

Finally, if you're (willing or by accident) trying to set the value of a property that doesn't exists, the property will be automatically be created, for example:

x['blah']=456;

Will create the property blah even when it wasn't defined at first.

Edit: yes, you can define the object and define its properties later:

var x={};
//more code or something
x['y']=777;//now x has a y property with the value 777

Answer 3

Layman's explanation:

An object is a collection of properties. You can give a name to the object to keep things organized. For example, lets create a person object.

var person = {};

The object has no properties right now. To further describe the person we can add properties to the object.

person.Name = 'Zim';
person.Age = 29;
person.Gender = 'Male';
person.Weight = 80;

Now this object has some properties to help describe it. A different way to write the same thing:

var person = { Name: 'Zim', Age: 29, Gender: 'Male', Weight: 80 };

If we had to create a program that displays a list of people, storing all of our information inside objects would help keep things organized.

Object properties are sometimes referred to as keys.

---

Adding properties to objects:

You can add a property to an object using brackets, just like you had in your addProperty function. If you just need it to add a property, set that property to null and return the result it would look something like this:

function addProperty(object, property) {
  // code here
  object[property] = null;
  return object;
}

This would let us create a properies on our object from above by calling

addProperty(person, 'Occupation');
addProperty(person, 'Income');
addProperty(person, 'Height');

Answer 4

I think you're over-thinking it.

First the question:

Add the value of the property argument as a key on the object argument. The value of the new property should be set to null. Return object after adding the new property.

emphasis added

So, property will be the KEY (of a key/value pair), and the VALUE will be null of object, which we are also passing in as an argument.

One way to interrogate key/value pairs on a javascript object is through the square-brackets []. So, if you have a key/value pair: { foo: "bar" }, you can get "bar" by: object['foo']. You can also create new key/value pairs like this, so your function can look like:

function addProperty(object, property) {
    object[property] = null;
    return object;
}

var obj = {};

obj = addProperty(obj, "hello");

console.log(obj);
console.log(addProperty({x: 5}, 'y'));

What our function is doing is taking the object passed into it (as an argument), creating a new KEY with our property argument, and setting its VALUE to null, and simply returning the object.

*Side note -

Be careful, the code you have posted will create an endless recursive loop, as you keep calling the same function with no way to break out of it.