DEV Community

loading...

How Do Objects Work In JavaScript?

flippedcoding profile image Milecia Updated on ・2 min read

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.

javascript object phone comparison

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");
    }
} 
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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

Discussion (4)

Collapse
jazkh profile image
jazkh • 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'
Collapse
gmartigny profile image
Guillaume Martigny

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);
  }
}
Collapse
lietux profile image
Janne "Lietu" Enberg

Your first code block has mismatching quotes which causes issues with syntax highlighting.

Collapse
flippedcoding profile image
Milecia Author • Edited

Thanks! It's fixed now. It takes more than one developer sometimes. :)

Forem Open with the Forem app