Skip to main content
JavaScript

Coding Worksheet # 5: OMG! Objects

By May 4, 2019July 17th, 2022No Comments
Objects in JavaScript coding worksheet

OMG! Objects

What are objects

Objects are a data type. JavaScript follows an ‘object based paradigm’. Which means in JS an object is a stand-alone entity (object) with properties. Properties come in key: value pairs. They are like variables. In the sense that variables reference some value in memory. The same way, in objects the property key: value pairs are akin to variables.

Why?

Think about it… In the real world most things are “objects”. For example your car, the food you eat, the bed you sleep on etc. So the objects in your real life have properties (example red car, thin mattress) and there is some functionality associated with the objects. The car has “driving” functionality and the “mattress” has the “sleep” functionality.

Isn’t the whole point of JS to mimic real life stuff (objects) so that you can make apps example Uber

Properties

Just like real life objects have characteristics example a “red” car. The same way in JavaScript we can create objects that have certain characteristics. Except in JS these are called “properties” and not characteristics.

Objects have properties. A property is a “key” : “value” pair. This association may be familiar to you from attributes and values in HTML. Example a div class=”myDiv”. The values can be of any data type example strings, numbers, booleans, an array.

Example:

name: “Rocko”

Method

A method refers to a function of an object. It is a the value of a property in an object. Think of a method as an “action” of an object. Example the method/action of a car object is driving.

Example:

like: function(){
console.log(“I love treaties!”)
}

How?

Object Literal Syntax

const employee = {

firstName : ‘Jane’,

lastName : ‘Doe’

};

The “new” keyword with an Object constructor()

const employee = new Object();

employee.firstName = ‘Jane’;

employee.lastName = ‘Doe’

 

The “new” keyword with an constructor function


function employee(firstName, lastName){this.name = firstName;

this.surname = lastName;

}

let employee1 = new employee (‘Jane’, ‘Doe’);

 

Using the Object.create() method


let employee = {position: “developer”,

hourly: 45,

language: “JavaScript”,

snack: “”,

details(){

console.log(this.position + ” likes ” + this.snack)

}

};

const projectManager = Object.create(employee);projectManager.position = “Project manager”;
projectManager.snack = “Chocolate”;
projectManager.details();

Using Objects

Accsessing an object’s properties

An object’s properties can be accessed in 2 ways:

  1. Dot notation
  2. Bracket notation

Dot notation

objectName.propertyName

Bracket notation

objectName[propertyName]

Deleting an object’s properties

  • Deleting an object’s property with the “delete” keyword

  • delete objectName.propertyName

Modifying an object’s property

  • Dot notation

    objectName.newProperty = “Hello”;

  • Bracket notation

    objectName[newProperty] = “Hello”;

Note: You can also change an existing property’s value with the above. Simply re-assign the new value

Looping through an object

for-in loop

The for-in loop is used to iterate through an object’s properties


for (let key in objectNAme) {console.log(objectName[key]);

}

 

Try this!

  1. Use object constructor function to code a function called “aboutMe”
  2. This function will include the following properties:
    • name
    • lastName
    • likes
    • dislikes
    • method called “activities” which will alert your likes
  3. Declare a variable “person” and use the “new” keyword to create a new “aboutMe”. With all the above properties

Also on codepen

[codepen_embed height=”300″ theme_id=”21517″ slug_hash=”qGWpmO” default_tab=”result” user=”Kauress”]See the Pen Coding Worksheet # 5: OMG! Objects by Kauress (@Kauress) on CodePen.[/codepen_embed]

Leave a Reply