Check out a free preview of the full JavaScript: From Fundamentals to Functional JS course:
The "Storing Data and Object-Literal Notation" Lesson is part of the full, JavaScript: From Fundamentals to Functional JS course featured in this preview video. Here's what you'd learn in this lesson:

Any kind of data can be stored within an object. Even functions can be stored as a property. When a function is added to an object, it’s commonly referred to as a “method”. Bianca also talks about using object-literal notation.

Get Unlimited Access Now

Transcript from the "Storing Data and Object-Literal Notation" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Bianca Gandolfo: One last thing I want to talk about objects is storing data. So as I mentioned briefly before, we can store anything in our objects. So here we have on, I guess, the second line here, we're storing a string. But we can also store an object. And then we can also store functions.

[00:00:24] When we store functions as a property and an object we call it a method. I'm not sure why we have to do that, but that's what we do. And yeah. Any questions about that? Sure?
>> Speaker 2: Can you say that again? Elaborate.
>> Bianca Gandolfo: On? Elaborate. So this slide is just showing that we can store all kinds of any data in JavaScript.

[00:00:52] So any data type. So we have strings, we can store numbers, you can store booleans, you can store undefined, null. You can also store functions and objects. And when we store our function as a property in an object, we call that a method. So if you hear the term method thrown around and function thrown around, just know that they're the same thing pretty much, except that a method is just a property on an object that's a function.

[00:01:18] That's the only difference. But if you really think about it in the browser, everything's attached to the window object, so you could kind of say that everything's a method, but maybe I'm taking that too far.
>> Speaker 2: So area here is the method?
>> Bianca Gandolfo: Yeah area is the method.

[00:01:34]
>> Speaker 2: Got it.
>> Bianca Gandolfo: Cool.
>> Speaker 2: And in the function part of your lecture, are you gonna get into the whole. When is the difference between a function and the method and all that stuff or?
>> Bianca Gandolfo: I mean yeah, I'll talk about it, I mean the difference between a function and method is there's no difference.

[00:01:53]
>> Speaker 2: Okay.
>> Bianca Gandolfo: Yeah. Like as far as how you use them, the only thing it's just a vocab word really that a method is a function that's a property of an object. So if you say like an array has a method. That just means that the array has a function like array.push, right.

[00:02:13] And we put the two parentheses on the side, that means that is a function.
>> Speaker 2: [INAUDIBLE]
>> Bianca Gandolfo: Yeah. That's all, cool and then just, just like some styles a lot of people say so you can do bracket you can do dots, when would you use one versus the other?

[00:02:31] And it really really doesn't matter again, at your job or if you're contributing to open source, if they have a style guide of course follow their guidelines. For me, I always use dot notation unless it's a variable or an odd character, just simply because it's shorter to type and it's just easier, so in general, I just use dots unless I need to do something with an expression, like evaluate a variable or something like that.

[00:02:59] Cool. All right. So, just going back up to a slide. So we have like two different ways to look at the object, right. We have this sort of a notation to the, I don't know if that's left or right, to the side. And then we have this notation where we're dynamically adding properties.

[00:03:23] So this one right here is called object literal notation, and I'm gonna talk about how to translate one from the other. So first, again, we're gonna start with how we had it. We have this object literal that's empty. And then we expand out that bracket. And so now that we have everything inside of our object, we can lose the reference to box, right cuz it's inside, so we take off box, we don't need the brackets either.

[00:03:52] And then, we aren't assigning anything we're just setting it. So we just, we have some colons, and then we added a comma, and then we're gonna take out that semi-colon and keep it at the end. And so that's sort of the walk-through on how to go from dynamically adding properties and values to an object, to object-literal notation.

[00:04:17] Which you've probably seen both of them by now. And the important thing here is that property names, in this case, are always gonna be strings. They're not gonna be expressions. But you can put in an expression as the value. Cool. Any questions about that? Sort of the different syntax.

[00:04:46] And also in this case, we don't even need to have quotations. Since it's going to be assumed that size is a string, we don't need quotes. However, if you're going to have something with funny characters, like this, you're going to need to keep those quotes around there, cuz it'll confuse your interpreter.

[00:05:05] Cool, and then we can still use our dot bracket notation still the same, even if we're using object literal notations. It's just a different way to writing it. Cool, any questions? I'm gonna wait for just like one question, so if someone could just ask me a question, we can move on.

[00:05:25]
>> Speaker 2: Do, when teams are working, they come to agreement on which way to do things based on a style guide, or how do you do that?
>> Bianca Gandolfo: Yeah, I mean, there might be a style guide, I don't know if it'll be as in-depth. But as far as like when you should use object rotation versus adding properties dynamically, it kind of depends on your data and how you're getting it.

[00:05:49] So if your data's gonna change, for example, like after run time, it might make sense to store in a variable. And add it dynamically, especially if the property names could be different. So if it's gonna change after run time, it would be you would probably wanna use the bracket or dot notation, but if it's something that's static and it's just an object that you have and that data doesn't change, then you can just put in object literal notation and call it a day.,