loading...

JavaScript Objects

ziizium profile image Habdul Hazeez ・3 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Everything in JavaScript excluding numbers, strings, booleans ( true and false ), null , and undefined are objects under the hood.

In JavaScript , arrays are objects, functions are objects, and, of course, objects are objects.

Technically speaking an objects in JavaScript are mutable keyed collections.

The term mutable from the last paragraph means by default you can make changes to an objects by adding or removing an element.

Object contains properties where a property has a name and a value. A property name can be any string, including the empty string (' '). A property value can be any JavaScript value except for undefined.

Objects are useful for collecting and organizing data. They can contain other objects.

All screenshots are from Firefox 71.0 and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the multi-line code editor in the console.


In JavaScript objects can be created using two syntax:

  • Declarative
  • Constructed

The literal syntax is defined as:

var bioData = {
  key: value,
  // other properties and values
}

The constructed syntax is defined as:

// create the object using the constructed
// syntax 
var bioData = new Object();

// add a property name and value
bioData.key = value;

The literal syntax is the most common and easiest way of creating objects (explored later). The constructed form on the other hand has one drawback — you will have to add object values one by one.

Here are the things you should take note when creating objects:

  • If the property name contains hyphens or spaces, wrap the name in quotes (" ")
  • You separate each key value pair with commas ( , )
  • If the property name or value is a reserved word, wrap the name in quotes (" ").

Time for some code. Switch over to your browser console and type the following code:

/**
  * An object with three properties
  */
var bioData = {
  first_name: "Habdul",
  last_name: "Hazeez",
  field: "Computer Science"
};

Type in the console and run it:

JavaScript Objects

Next, we confirm the object has been created.

JavaScript Objects

The constructed syntax equivalent is:

var bioData = new Object();

Type in the console, run it and confirm the object is created.

JavaScript Objects

I mentioned earlier that object can also contain another object, here is an example:

var bioData = {
  first_name: "Habdul",
  last_name: "Hazeez",
  field: "Computer Science"
  skills: {
     programming_languages: "JavaScript, C, C++",
     other_fields: "Computer Security, Artificial Intelligence"
  }
};

Data Retrieval

Values can be retrieved from an object by wrapping the object name in square brackets [ ] or using dot notation. If the property name is a reserved word like name then it's best to use the dot notation because its easier to read. Let's see some code.

// retrieve the first_name using square
// brackets notation 

bioData['first_name'];

In the console:

JavaScript Objects

You can also use the dot notation.

biodata.'first_name'

In the console:

JavaScript Objects

How to retrieve data from an object that contains another object is summed up in the image below.

JavaScript Objects

If you attempt to retrieve a non-existence property you will get undefined.

Data Update

A value in an object can be updated by assignment. If the property name already exists in the object, the property value is replaced:

In code:

bioData['first_name'] = "Ben";

In the console:

JavaScript Objects

You can confirm the update with the following code:


// check the object

bioData;

In the console:

JavaScript Objects


The delete operator is used to remove a property from an object. It will remove a property from the object if it has one.


// This will delete the first_name property

delete bioData.first_name;

In the console:

JavaScript Objects

Confirm the deletion:


// check the object to confirm the deletion

bioData;

In the console:

JavaScript Object property deleted


This is just an introduction to JavaScript Objects and i have left out the following among others:

  • Object enumeration
  • Object References
  • Reflection

Up next, Numbers.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide