JavaScript OBJECTS in ONE Video | Code Explained

JavaScript OBJECTS in ONE Video

JavaScript OBJECTS in ONE Video
Objects in JavaScript are "EveryThing", cause almost "Everything" in JavaScript is an Object. in fact, if you understand Objects, You understand JavaScript.

An object in JavaScript is a variable that contains variables. An object has properties and methods.

if a car is our object per example, the car here has properties and methods, properties like; its color, name, model, weight, and methods like; stop, brake, start, ... etc

To create an Object in JavaScript, you have THREE different ways to do so :

  1. Using an object Literal.
  2. Using the new keyword.
  3. Using an object construction.

Using Object Literal.

This way, you define and create the object at the same time, and it's the easiest way to create an object.

to create an object literal, we use, let, then the name of our object, the equal sign "=", the curly brackets { }, and then inside, the name:value pairs separated by commas ","

Example : 

let car = { name : "Mercedes", model :2018, color : "Black" };

Using the new keyword.

to create the same object above, using the new keyword, we first create the object, like this:

let car = new Object();

and then we define the object car properties and methods, like this :

PS: for fast execution, use the object literal way.

Using an Object Constructor.

This is useful when you want to create many objects under the same category, what I mean, say you have a list of cars, Audi, Mercedes, Volkswagen, Renault, ... etc
And they all have the same properties and methods, (name, color, model, start, brake ... ).

And then You use the object literal way, you will do something like this :

let mercedes = { name : "Mercedes", model :2018, color : "Black" };
let audi = { name : "Audi", model :2017, color : "Yellow" };
let renault = { name : "Renault", model :2016, color : "White" };

It sounds like your wasting time, and type in the same code over and over.

The solution here is using a construction function. You create a function and reuse the code whenever you want. Read Functions in JavaScript.

let's create our construction function:

function Car(){ }

The first letter of our construction function in upper-case. ( good practice )

and then inside the curly brackets {}, we create the properties and the methods.

function Car(name, model, color){
this.name = name;
this.model = model;
this.color = color;
}

now it's so easy to create as many instances of the object car as we want, and it's done by simply doing this :

let mercedes = new Car("Mercedes", "2018", "Black");
let audi = new Car("Audi", "2017", "Yellow");
let renault = new Car("Renault", "2016", "White");

if you want to see this article in action, you can watch my tutorial about JavaScript Objects below.


COMMENTS

BLOGGER: 2
Loading...
Name

bootstrap,2,css,2,featured,3,JavaScript,19,
ltr
item
Code Explained: JavaScript OBJECTS in ONE Video
JavaScript OBJECTS in ONE Video
https://4.bp.blogspot.com/-cGyFk3W8uQw/W2twbForm8I/AAAAAAAAAF4/D0oZEZO43KURtkeV44vd8_Ulx0v16jdSgCLcBGAs/s640/JS%2Bobjects.png
https://4.bp.blogspot.com/-cGyFk3W8uQw/W2twbForm8I/AAAAAAAAAF4/D0oZEZO43KURtkeV44vd8_Ulx0v16jdSgCLcBGAs/s72-c/JS%2Bobjects.png
Code Explained
https://www.codeexplained.org/2018/08/javascript-objects-in-one-video.html
https://www.codeexplained.org/
https://www.codeexplained.org/
https://www.codeexplained.org/2018/08/javascript-objects-in-one-video.html
true
6721257432511051792
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy