JavaScript, webdev

JavaScript Objects 101

The Object type represents one of JavaScript’s data types. It’s important stuff as we will use them—a lot.

It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax. Did you know that all modern JavaScript utilities for working with objects are static?

Here is an example of a JavaScript object that contains two names and one key:

let obj = {
  name1: "John",
  name2: "Jane",
  key: "value"
}


This object has three properties: name1, name2, and key. The values of name1 and name2 are strings, and the value of key is also a string. You can access the values of these properties using the dot notation, like this:

console.log(obj.name1); // Output: "John"
console.log(obj.name2); // Output: "Jane"
console.log(obj.key); // Output: "value"


You can also use the square bracket notation to access the properties of the object, like this:

console.log(obj["name1"]); // Output: "John"
console.log(obj["name2"]); // Output: "Jane"
console.log(obj["key"]); // Output: "value"

You can use the for…in loop to iterate over the properties of the object, like this:

for (let prop in obj) {
  console.log(prop + ": " + obj[prop]);
}

Output:
name1: John
name2: Jane
key: value

Here is a more ‘full’ example to the properties inside an object:

const person = {
    name: 'Sam',
    age: 30,
    // using function as a value! 
    // In other words, we can have new functionality 
    // that belongs to the object.
    say: function() { 
      console.log('hello'); 
    }
}

person.say(); // hello

tmpObj= {};
tmpObj= {a: 'foo', b: 42, c: {}};

const a = 'foo';
const b = 42;
const c = {};
tmpObj= { a: a, b: b, c: c };

tmpObj= {
  get property() {},
  set property(value) {}
};

tmpObj= { proto: prototype };

// Shorthand property names
tmpObj= { a, b, c };

// Shorthand method names
tmpObj= {
  property(parameters) {},
};

// Computed property names
const prop = 'foo';
tmpObj= {
  [prop]: 'hey',
  ['b' + 'ar']: 'there',
};

We can use the constructor function to build our object:

// 
// The constructor function
// In this case we are using: name, age and gender
// There is also a new function in our constructor that we
// can use in after the object is created
//
function Person (person_name, person_age, person_gender) {

   // assigning  parameter values to the calling object
    this.name = person_name,
    this.age = person_age,
    this.gender = person_gender,

    this.greet = function () {
        return ('Hey ' + this.name);
    }
}


// creating objects
const person1 = new Person('Tony', 23, 'male');
const person2 = new Person('Taylor', 25, 'female');

// accessing properties
console.log(person1.name); // "Tony"
console.log(person2.name); // "Taylor"

Be strong 👊🏽

Advertisement
Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s