How Do Objects Work In JavaScript?

#beginners #javascript #webdev #programming

Objects have a reputation for being weird, but they really aren't that bad. They just have their own way of doing things in JavaScript and you can control how they do them. You can assign values to objects and you can get results from them. They're basically like super variables that can hold any and everything you assign to them.

Here's an attempt to help make the concept of objects easier to understand.

Think about your phone. It has a certain height, width, and thickness and it has different apps to send texts or get on the internet. Now think of all of the other phones you can. Just like yours, they have certain dimensions and functions.

Now think of objects in that same way. An object is like a generic phone. You can give it properties that define the object and you can have methods that the object can use just like you can get a phone that has specific dimensions and apps.

The thing that makes objects complex is that they can hold multiple values of different types. Objects are so open that you can assign functions as values. That's also what makes objects so powerful. For example, if you are creating multiple users for a website, objects would be helpful. They would let you use the same code to get the same information from different users.

Here's a code example of a JavaScript object:

var user = {
    username: "flpdcdg"
    password: "890iop"
    email: "flpdcdg@flpdcdg.com"
    isActive: function() {
        return (user.password === true ? "Y" : "N");
    }
}

If you wanted to get the username for a user you could use, user.username, and you'll get the value you need. Or if you needed to create a new user, you could just use the object like this:

var user353 = new User();
user353.username = "djno";
user353.email = "djno@aol.com";

You see, objects are there to make it easier for you to reuse code and keep the code consistent. All objects do is take names and give them values. That's why user.username will return a value of "flpdcdg".

That's also why you are able to use methods like substring on your string variables. Strings are a common example of an object. They allow you to use the String properties and methods like length or split. It feels like everything in JavaScript is an object (because it is)!

The main thing you need to remember about objects is that they are nothing more than key-value pairs. They have names that have values assigned to them and that's what makes them so useful. You don't have to remember indexes or a bunch of variable names. You just have to remember the name of the property or method you want and the value is ready for you.

I hope this made sense of JavaScript objects for you. It's another one of those concepts that's easier to understand than to explain. But if you have any questions, feel free to ask in the comments.

Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding

Top comments (4)

jazkh • Sep 26 '18 • Edited

JS constructor would be more useful.

function User(username, password, email) {
    this.username = username
    this.password = password
    this.email = email
    this.isActive = function() {
        return (this.password ? "Y" : "N");
    }
}

Then you can assign it as much as you want:

var student1 = new User('alex', 'p@ssw0rd', 'alex@example.com')

var student2 = new User('john', 'kRypt0n', 'john@example.com')


student1.isActive()

And you can change property value on the fly:

student1.password = 'myNewP@$$w0rd'

Guillaume Martigny • Sep 27 '18

It's even more slick with ES6 classes:

class User {
  constructor (username, password, email) {
    this.username = username;
    this.password = password;
    this.email = email;
  }

  isActive () {
    return Boolean(this.password);
  }
}