Object-related


Object literal notation


Example

// 'bio' OBJECT
var bio = {
    // string
    'name': 'Marios Sofokleous',
    // sring
    'role': 'Web Developer',
    // object
    'contact': {
        'mobile': '99-111844',
        'email': 'marios.sofokleous@yandex.com',
        'github': 'PictureElement',
        'location': 'Pafos'
    },
    // string
    'pic': 'https://via.placeholder.com/100x100',
    // array
    'skills': ['HTML', 'CSS', 'JavaScript', 'WordPress.org']
};

// 'work' OBJECT
var work = {};
// dot notation
work.position = 'Web Developer';
work.employer = 'Linux Foundation';
work.yearsOfEmployment = 2;
work.city = 'Los Angeles';

// 'education' OBJECT
var education = {};
// bracket notation
education['university'] = 'University of Cyprus';
education['degree'] = 'Computer Engineering';
education['yearsOfAttendance'] = 5;

Dot notation vs bracket notation


Introduction

Bracket notation always works. Dot notation requires properties that begin with a letter and do not include special characters.

Example

Using console.log() we're going to figure out if dot and/or bracket notation will work to access the properties below. 'True' indicates a valid statement and 'False' indicates an invalid statement.

var weirdObject = {
    'property': 'Lorem ipsum dolor sit amet 0',
    'property1': 'Lorem ipsum dolor sit amet 1',
    'property-2': 'Lorem ipsum dolor sit amet 2',
    'property 3': 'Lorem ipsum dolor sit amet 3',
    'property$': 'Lorem ipsum dolor sit amet 4',
    ' property': 'Lorem ipsum dolor sit amet 5',
    'property()': 'Lorem ipsum dolor sit amet 6',
    'property[]': 'Lorem ipsum dolor sit amet 7',
    '8property': 'Lorem ipsum dolor sit amet 8'
};

console.log(weirdObject.property); //true
console.log(weirdObject['property']); //true

console.log(weirdObject.property1); //true
console.log(weirdObject['property1']); //true

console.log(weirdObject.property-2); //false
console.log(weirdObject['property-2']); //true

console.log(weirdObject.property 3); //false
console.log(weirdObject['property 3']); //true

console.log(weirdObject.property$); //true
console.log(weirdObject['property$']); //true

console.log(weirdObject. property); //false
console.log(weirdObject[' property']); //true

console.log(weirdObject.property()); //false
console.log(weirdObject['property()']); //true

console.log(weirdObject.property[]); //false
console.log(weirdObject['property[]']); //true

console.log(weirdObject.8property); //false
console.log(weirdObject['8property']); //true
Ad1
advertisement
Ad2
advertisement
Ad3
advertisement
Ad4
advertisement
Ad5
advertisement
Ad6
advertisement