Skip to main content

Access properties in javascript

# Accessing Object Properties Value

There are 2-ways to access an object’s(Properties) value in JavaScript:

    1. Dot notation.

    2. Square bracket notation.

Note : In case the property name that is not a valid Javascript identifier, they must be accessed and added using the “square bracket notation”.

1.) The dot notation (.) : The following illustrates how to use the dot notation to access a property of an object:

Syntax :
  • objectName.propertyName;

Let's see, the example of how to use the dot notation to access an object property:

Example 1:

  • In this code, we creates a book object and use the dot notation to access the property name(id, name) of the book object on the Console.

  1. <script type="text/javascript">
  2. var book = {

  3.   id : 02,

  4.   name : "JavaScript",

  5. };

  6.  

  7. // Dot notation

  8. console.log(book.id); // Output : 02

  9. console.log(book.name); // Output : JavaScript

  10. </script>

2.) The Square bracket notation ([]) : The following illustrates how to use the square bracket notation to access a property of an object:

Syntax :
  • /* Here, wrapped property name using single quote(' ') or double quote(" ") */
  • objectName['propertyName'];

  •   OR

  • objectName["propertyName"];

Let's see, the example of how to use the bracket notation to access an object property:

Example 2:

  • In this code, we creates a book object and use the square bracket notation to access the property name(id, name) of the book object on the Console.

  1. <script type="text/javascript">
  2. var book = {

  3.   id : 02,

  4.   name : "JavaScript",

  5. };

  6.  

  7. // Square bracket notation

  8. console.log(book['id']); // Output : 02

  9. console.log(book["name"]); // Output : JavaScript

  10. </script>

There are certain cases, where the property names must be accessed using the “square bracket notation” not a “dot notation”.

  • If the name of the property is not valid (i.e if it contains spaces or special characters), then you can't use the dot notation. You will have to use square bracket notation, Let see :

Let's try, to create an example :
  1. <script>
  2. var book = {

  3.   name: "Learn JavaScript",

  4.   author: "Coder Website",

  5.   "publication date": "02 July 2016"

  6. };

  7.  

  8. // Using dot notation

  9. console.log(book.'publication date'); // SyntaxError : Unexpected string

  10. console.log(book.publication date); // SyntaxError : missing ) after argument list

  11.  

  12. // Using square bracket notation

  13. console.log(book['publication date']); //Output : 02 July 2016

  14. </script>
  • The property names can be strings or numbers. But in case the property names are numbers they must be accessed using the “square bracket notation” .

Let's try, to create an example :
  1. <script>
  2. var book = {

  3.   1: 02,

  4.   name: "Learn JavaScript",

  5.   author: "Coder Website",

  6. };

  7.  

  8. // Using dot notation

  9. console.log(book.'1'); // SyntaxError : Unexpected string

  10. console.log(book.1); // SyntaxError : missing ) after argument list

  11.  

  12. // Using square bracket notation

  13. console.log(book['1']); //Output : 2

  14. </script>

Comments

Popular Posts

How to remove the date and .html from every blogger post url

#Remove date and .html from blogger post url A Common search term which every blogger search is How to Remove Date From Blogger Post URL or how do I remove date from blogger permalink? Follow the steps below and then date and .html will be removed from the URL of your blogger post. Step 1 : Login to your Blogger blog and select Theme / Template. Step 2 : Click on Edit HTML and paste the below code just above the </head> tag let's see code :   ➤ Code : mycode.js; Copy code <script type='text/javascript' > //<![CDATA[ // BloggerJS v0.3.1 var urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&"[0];function urlVal(){var e=window.location.pathname,t=e.length;return...

Django static files not working when debug false || debug true

# Django static and media files not working when debug is false In this article you will learn how to fix problem of not loading static files and media in Django even the DEBUG is FALSE. This is the easiest and safest solution. # Problem: Django static and media files not working when debug is false  ➤ Code: settings.py DEBUG = False #True ALLOWED_HOSTS = [ '*' ] #Host name # Problem Fix: Let's see, How you can fix the problem of Django static and media files not working when DEBUB = False : 1.)First way: devserver in insecure mode If you still need to server static locally ( e.g. for testing without debug ) you can run devserver in insecure mode: python manage.py runserver --insecure --insecure: it means you can run serve...

Django not able to find static files[Solved]

# Django static files not working In this article, you will learn how to fix the problem of not loading static files. This is the easiest and safest solution. In the new version of Django 3.1 and above the settings.py file uses PATH instead of OS to deal with the directory structure. So all the code, we wrote for our static dirs and things like that will no longer work unless we import os at the top of our settings.py file.. Note : This article related to DEBUG = True , if you have problems with DEBUG = False then you can follow this article; Static files not working when DEGUB= False . Have fun! Let's follow a few steps and, solve the problem of not loading Django static files: Step 1 : Check that "BASE_DIR" is defined in your project settings.py , if not then define it  ➤ Code: settings.py import os BASE_DIR = ...