DEV Community

- -
- -

Posted on

2

TOP - Objects and Object Constructors

TOP

Introduction

There are multiple ways to define objects but in most cases, it is best to use the object literal syntax as follows:

const myObject = {
  property: 'Value!',
  otherProperty: 77,
  "obnoxious property": function() {
    // do stuff!
  }
};
Enter fullscreen mode Exit fullscreen mode

There are also 2 ways to get information out of an object:

  1. dot notation myObject.property; // 'Value!'
  2. square bracket notation myObject["obnoxious property"]; // [Function]

Which method you use will depend on context. Dot notation is cleaner and is usually preferred

you cannot use variables in dot notation:

const variable = 'property';

myObject.variable; // this gives us 'undefined' because it's looking for a property named 'variable' in our object

myObject[variable]; // this is equivalent to myObject['property'] and
Enter fullscreen mode Exit fullscreen mode

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

  • How to write an object constructor and instantiate the object.
  • Describe what a prototype is and how it can be used.
  • Explain prototypal inheritance.
  • Understand the basic do’s and don’t’s of prototypal inheritance.
  • Explain what Object.create does.
  • Explain what the this keyword is.

Object constructors

When you have a specific type of object that you need to duplicate like our player or inventory items, a better way to create them is using an object constructor, which is a function that looks like this:

function Player(name, marker) {
  this.name = name;
  this.marker = marker;
}
Enter fullscreen mode Exit fullscreen mode

and which you use by calling the function with the keyword new.

const player = new Player('steve', 'X');
console.log(player.name); // 'steve'
Enter fullscreen mode Exit fullscreen mode

Just like with objects created using the Object Literal method, you can add functions to the object:

function Player(name, marker) {
  this.name = name;
  this.marker = marker;
  this.sayName = function() {
    console.log(name)
  };
}

const player1 = new Player('steve', 'X');
const player2 = new Player('also steve', 'O');
player1.sayName(); // logs 'steve'
player2.sayName(); // logs 'also steve'

Enter fullscreen mode Exit fullscreen mode

Exercise

  • Write a constructor for making “Book” objects
  • Your book objects should have the book's title, author and number of pages, and whether or not you have read the book
  • Put a function into the constructor that can report the book info like so:
theHobbit.info(); // "The Hobbit by J.R.R. Tolkien, 295 pages, not read yet"

Enter fullscreen mode Exit fullscreen mode

The prototype

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (1)

Collapse
 
slobodan4nista profile image
Slobi

The righter way to JS. Thanks for sharing!

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay