JavaScript Object Properties with Special Characters

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.

JavaScript Object Properties with Special Characters

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

JavaScript Objects, Object Properties with Special Characters

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.

All-Digit Properties in JavaScript

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

JavaScript Objects, Object Properties with All-Digits Properties

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.

Leave a Reply

Your email address will not be published. Required fields are marked *