Originally published at https://www.djamware.com
A basic example of Javascript Objects example used by almost every Javascript application or embedded Javascript. Javascript basically is object-oriented programming language just like another programming language. Globally, the object built by a collection of properties or variables or fields that has key and value separated by ":". In real life example, a chair is an object, because it has color, height, width, foot, etc that called properties which every property have its own values.
Every Javascript object's properties have their own types. The type can be other objects or primitive type what do not have properties or method. the primitive types in Javascript are:
Javascript primitive values are immutable which means they are unchangeable. Objects in Javascript also can describe as variable or object can contain many variables inside it.
A property of an object can describe as the variables attached to the objects. The property of an object can declare with simple dot notation.
objectName.properyName
Be careful to declare an object name, like in Java or other languages, the Javascript name declaration is case sensitive alphabet and numeric.
Now, let's see the example below. We will create an object with the name chair and have properties width (number type), height (number type), color (string type), and model (string type).
var chair = new Object(); chair.width = 200; chair.height = 400; chair.color = "black"; chair.type = "wooden";
Another way to describe an object in Javascript, you can see below example.
var chair = { width: 200, height: 400, color: 'black', model: 'wooden' };
If you print this object variable to the browser console as below full example.
<html> <head> <title>Javascript Objects</title> </head> <body> <script> // var chair = new Object(); // chair.width = 200; // chair.height = 400; // chair.color = 'black'; // chair.model = 'wooden';var chair = new Object({ width: 200, height: 400, color: ‘black’, model: ‘wooden’ });
console.log(chair);
</script>
</body>
</html>
You will see the output like below.
If the property does not have an initial value, then you will see “undefined” in the console.
chair.model;
console.log(chair.model);
The other way to describe the Javascript properties is using bracket “[]” notation. You can see the example below.
var chair = new Object();
chair[‘width’] = 200;
chair[‘height’] = 400;
chair[‘color’] = ‘black’;
chair[‘model’] = ‘wooden’;
A method is a function associated with an object or a property that act as a function for the object. Methods are defined as the way normal functions are defined, except that they have to be assigned as the property of an object. Below is the Javascript method structure.
var objectName = {
method1: function(params) {
// …do something
}
method2: function(params) {
// …do something
}
};
or
var objectName = {
method1(params) {
// …do something
}
method2(params) {
// …do something
}
};
or
var objectName.method1 = {
// …do something
}
Here’s an example including the properties attached to the object.
var car = new Object({
engine: ‘2000cc’, // property
brand: ‘Chevrolet’, // property
model: ‘Aveo’, // property
color: ‘Silver’, // property
price: 12999, // property
startEngine: function(gear) { // Object method 1
console.log('Engine starting with gear position ’ + gear); // Method body
},
stopEngine: function(gear) { // Object method 2
console.log('Engine stopped with gear position ’ + gear); // Method body
}
});car.startEngine(1);
car.stopEngine(4);
Below the declaration of the object is method calls. You also can change the property value of that object.
That it’s, a basic Javascript object. You can get the full source code from our GitHub.
Thanks for reading ❤
If you liked this post, please do share/like it with all of your programming buddies!
Follow us on Facebook | Twitter
☞ The Complete JavaScript Course 2019: Build Real Projects!
☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
☞ JavaScript Bootcamp - Build Real World Applications
☞ JavaScript Programming Tutorial - Full JavaScript Course for Beginners
☞ New ES2019 Features Every JavaScript Developer Should Know
☞ Best JavaScript Frameworks, Libraries and Tools to Use in 2019
☞ JavaScript Basics Before You Learn React
☞ Build a CMS with Laravel and Vue
☞ Google’s Go Essentials For Node.js / JavaScript Developers
☞ 7 best JavaScript Design Patterns You Should Know
☞ 12 Concepts That Will Level Up Your JavaScript Skills
☞ React vs Angular vs Vue.js by Example
#javascript #objective-c #web-development