JS | Data type - Objects (Lecture Summary)

Objects are used to store keyed collections of various data and more complex entities.

Properties - values stored in an object - they hold some value

Methods - functions stored in an object - they do something

Properties and methods are stored in the object as key: value pairs

syntax

/*
var obj = {
    key: value,
    key: value
}
*/
// Each pair is separated with a coma 

var person = {
    name: 'Sarah',
    age: 30
}

Declaring an object

Object literal

var person1 = {};

Object constructor - using keyword `new`

var person2 = new Object(); //  same as `var person2 = {};`

However, there is no specific need to use the new Object() syntax, for simplicity use the object literal syntax.

Object properties - creating

var obj1 = { name: 'foo' }

// The convention and good practice is to avoid single line syntax like above

var obj2 = {
	firstName: 'John',
  lastName: 'Carr',
  age: 40,
  working: true,
}
  // after each property we should put the comma
  // the comma after the last property is called trailing comma, but it is not necessary

Accessing the object properties

Dot notation - `obj.propertyName`

obj.name = 'foo'
console.log(obj.name);

Bracket notation - expression in the brackets is evaluated

var objFoo = {};

objFoo['name1'] = 'fizz';
objFoo['name2'] = 'baz'

console.log(objFoo)

console.log(objFoo['name1']);

console.log(objFoo['name' + (1 + 1)]);



// Where do we commonly use the bracket notation ?


// Same can be done with arrays
var myArray = [22,33,44,55];
console.log( myArray[1 + 1] );

Creating object methods - example

var person = {
    firstName: 'John',
    lastName: 'Carr',
    age: 30,
    from: 'Scotland',
    working: false,
    
    sayHello: function (name) {
        console.log('Hello ' + name + '! I am John.')
    }
}

// Assignment in the object is done with ':'
// Assignment outside of the object is done with '=' 

// Adding a method using a dot notation
person.myAge = function () {
    console.log('I am 30.')
}

// Adding a method using a square notation
person["myBirthplace"] = function () {
    console.log('I am from Scotland.');
};

Deleting object properties - keyword `delete`

var obj = {
    name: 'John',
    age: 30,
};

console.log('before', obj);

// Delete using dot notation
delete obj.name;

console.log('after delete - dot notation', obj);


// Delete using bracket notation
var propName = 'age';

delete obj[propName];
console.log('after delete - with bracket notation', obj);

`for...in` statement - iterates over the property names

The for...in statement iterates over all property names of an object. Only name's not values.

Syntax

for (variable in objectName) { ...
	// do something in here
}

var objNumbers = {
  a: 15,
  b: 25,
  c: 35
};


for (var prop in objNumbers) {
  console.log(prop);
}

// Output:
// "a"
// "b"
// "c"


// We can access the values with the bracket notation
for (var prop in obj) {
  console.log(obj[prop]);
}


// Output:
// "15"
// "25"
// "35"

Object prototype methods

Object prototype is the "parent" class that holds static methods that we use only for the objects.

These static methods are Object.keys() and Object.values().

`Object.keys()` - returns array of property names

The Object.keys() method returns an array of a given object's own property names.

NOTE: this names are not guaranteed to return in the exactly same order 100% of times, like when looping over an array which has numbered indexes.

Example

var obj1 = {
  a: 1,
  b: 2,
  c: 3
};

var obj2 = { 
  firstName: 'John',
  lastName: 'Carr',
  age: 30
}

console.log('obj1: ', Object.keys(obj1));

console.log('obj2: ', Object.keys(obj2));

`Object.values()` - returns an array objects values

The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop.

Example

var obj1 = {
  a: 1,
  b: 2,
  c: 3
};

var obj2 = { 
  firstName: 'John',
  lastName: 'Carr',
  age: 40
}

console.log('obj1: ', Object.values(obj1));

console.log('obj2: ', Object.values(obj2));

Storing Objects and arrays together

var persons = [
  {name: 'Sarah', age: 22, occupation: 'Software Engineer'},
  {name: 'Jack', age: 26, occupation: 'Front End Developer'},
  {name: 'Marco', age: 34, occupation: 'Taxi Driver'},
  {name: 'Gloria', age: 41, occupation: 'Logistics Manager'},
  {name: 'Ben', age: 39, occupation: 'Program Manager'},
];


persons.forEach( function(person) {
  person.friends = ['Anna', 'Allyn', 'Alex'];
})


console.log(persons);

// How can we add another person to Sarah's array of friends

persons[0].friends.pop();
persons[0].friends.push('Uros');

ross-u/README.md