Back to: JavaScript Tutorial For Beginners and Professionals
JavaScript Object Properties with Special Characters
In this article, I am going to discuss JavaScript Object Properties with Special Characters with Examples. Please read our previous article where we discussed JavaScript Object Define Properties with Examples.
JavaScript Object Properties with Special Characters
We already have seen how to access object properties with either dot notation(.) or bracket notation [] in the Object properties chapter. As we know object property dot notation (.) is written as myObject.property this will only allow to access characters that are usually found in JavaScript variable names that are mostly letters, numbers, and underscore (_). But what if we need to access special characters such as space, smiley 😊 or user-defined/user-provided content then, this all can be possible by using object property [] bracket notation.
What we discussed above is given in the below example.
Example1: JavaScript Objects, Object Properties with Special Characters
<html> <head> <title>JavaScript Objects, Object properties with special characters example1</title> </head> <body> <script> //sample code1 //Creates a student1 Object let student1 = { firstName: "Angel", lastName: "Kathy ", 'special property ☺': 'I am Happy' }; //display data console.log("***** Sample Code1 *****"); console.log("student1 object: ", student1) console.log("student1 object length: ", Object.getOwnPropertyNames(student1).length) //returns no. of keys present in an object console.log("student1 object properties names using Object.getOwnPropertyNames: ", Object.getOwnPropertyNames(student1)) //return ALL property keys. console.log("student1 Object literal type ? : ", typeof student1);// object console.log("student1 firstName property: ", student1.firstName); //Normal Property console.log("student1 lastName property: ", student1['lastName']); console.log("student1 special property ☺: ", student1['special property ☺']); //special property //sample code2 //Creates a student2 Object let student2 = {}; student2.firstName = "John"; student2['lastName'] = "Doe "; student2['special property ☺'] = 'I am excited'; //display data console.log("***** Sample Code2 *****"); console.log("student2 object: ", student2) console.log("student2 object length: ", Object.getOwnPropertyNames(student2).length) //returns no. of keys present in an object console.log("student2 object properties names using Object.getOwnPropertyNames: ", Object.getOwnPropertyNames(student2)) //return ALL property keys. console.log("student2 Object literal type ? : ", typeof student2);// object console.log("student2 firstName property: ", student2.firstName); //Normal Property console.log("student2 lastName property: ", student2.lastName); console.log("student2 special property ☺: ", student2['special property ☺']); //special property </script> </body> </html>
Output: Press F12 and go to the Console section
All-Digit Properties in JavaScript:
In addition to special characters in object property, object property names that are all-digits will require bracket notation []. However, in this situation, the property need not be written as a string.
What we discussed above is given in the below example.
Example2: JavaScript Objects, Object Properties with All-Digits Properties
<html> <head> <title>JavaScript Objects, Object properties with all-digits properties example2</title> </head> <body> <script> //sample code1 //Creates a student1 Object let student1 = { firstName: "Angel", lastName: "Kathy ", 105: 'I am 105' }; //display data console.log("***** Sample Code1 *****"); console.log("student1 object: ", student1) console.log("student1 object length: ", Object.getOwnPropertyNames(student1).length) //returns no. of keys present in an object console.log("student1 object properties names using Object.getOwnPropertyNames: ", Object.getOwnPropertyNames(student1)) //return ALL property keys. console.log("student1 Object literal type ? : ", typeof student1);// object console.log("student1 firstName property: ", student1.firstName); //Normal Property console.log("student1 lastName property: ", student1['lastName']); console.log("student1 digit property student1[105], number 105 is automatically converted to a string: ", student1[105]); //all digit property console.log("student1 digit property student1['105'], notice using string 105(digit with quote) produced the same result: ", student1['105']); //digit property console.log("student1 digit property student1['10'+'5'], string concatenation: ", student1['10' + '5']); console.log("student1 digit property student1[100+5], arithmetic, still resulting in 105 and producing the same result: ", student1[100 + 5]); console.log("student1 digit property student1[105.0], this works too because 105.0 evaluates to 105: ", student1[105.0]); console.log("student1 digit property student1['105.0'], this does NOT work, because '105' != '105.0': ", student1['105.0']); //undefined //sample code2 //Creates a student2 Object let student2 = {}; student2.firstName = "John"; student2['lastName'] = "Doe "; student2[105] = 'one hundred and five'; //display data console.log("***** Sample Code2 *****"); console.log("student2 object: ", student2) console.log("student2 object length: ", Object.getOwnPropertyNames(student2).length) //returns no. of keys present in an object console.log("student2 object properties names using Object.getOwnPropertyNames: ", Object.getOwnPropertyNames(student2)) //return ALL property keys. console.log("student2 Object literal type ? : ", typeof student2);// object console.log("student2 firstName property: ", student2.firstName); //Normal Property console.log("student2 lastName property: ", student2.lastName); console.log("student2 digit property student2[105], number 105 is automatically converted to a string: ", student2[105]); //all digit property console.log("student2 digit property student2['105'], notice using string 105(digit with quote) produced the same result: ", student2['105']); //digit property console.log("student2 digit property student2['10'+'5'], string concatenation: ", student2['10' + '5']); console.log("student2 digit property student2[100+5], arithmetic, still resulting in 105 and producing the same result: ", student2[100 + 5]); console.log("student2 digit property student2[105.0], this works too because 105.0 evaluates to 105: ", student2[105.0]); console.log("student2 digit property student2['105.0'], this does NOT work, because '105' != '105.0': ", student2['105.0']); //undefined </script> </body> </html>
Output: Press F12 and go to the Console section
But leading zeros are not recommended as that understand as Octal notation.
In the next article, I am going to discuss Call by Value and Call by Reference in JavaScript with Examples. Here, in this article, I try to explain JavaScript Object Properties with Special Characters with Examples and I hope you enjoy this JavaScript Object Properties with Special Characters with Examples article.