Object-related


Object literal notation


Example

  1. // 'bio' OBJECT
  2. var bio = {
  3. // string
  4. 'name': 'Marios Sofokleous',
  5. // sring
  6. 'role': 'Web Developer',
  7. // object
  8. 'contact': {
  9. 'mobile': '99-111844',
  10. 'email': 'marios.sofokleous@yandex.com',
  11. 'github': 'PictureElement',
  12. 'location': 'Pafos'
  13. },
  14. // string
  15. 'pic': 'https://via.placeholder.com/100x100',
  16. // array
  17. 'skills': ['HTML', 'CSS', 'JavaScript', 'WordPress.org']
  18. };
  19. // 'work' OBJECT
  20. var work = {};
  21. // dot notation
  22. work.position = 'Web Developer';
  23. work.employer = 'Linux Foundation';
  24. work.yearsOfEmployment = 2;
  25. work.city = 'Los Angeles';
  26. // 'education' OBJECT
  27. var education = {};
  28. // bracket notation
  29. education['university'] = 'University of Cyprus';
  30. education['degree'] = 'Computer Engineering';
  31. 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.

  1. var weirdObject = {
  2. 'property': 'Lorem ipsum dolor sit amet 0',
  3. 'property1': 'Lorem ipsum dolor sit amet 1',
  4. 'property-2': 'Lorem ipsum dolor sit amet 2',
  5. 'property 3': 'Lorem ipsum dolor sit amet 3',
  6. 'property$': 'Lorem ipsum dolor sit amet 4',
  7. ' property': 'Lorem ipsum dolor sit amet 5',
  8. 'property()': 'Lorem ipsum dolor sit amet 6',
  9. 'property[]': 'Lorem ipsum dolor sit amet 7',
  10. '8property': 'Lorem ipsum dolor sit amet 8'
  11. };
  12. console.log(weirdObject.property); //true
  13. console.log(weirdObject['property']); //true
  14. console.log(weirdObject.property1); //true
  15. console.log(weirdObject['property1']); //true
  16. console.log(weirdObject.property-2); //false
  17. console.log(weirdObject['property-2']); //true
  18. console.log(weirdObject.property 3); //false
  19. console.log(weirdObject['property 3']); //true
  20. console.log(weirdObject.property$); //true
  21. console.log(weirdObject['property$']); //true
  22. console.log(weirdObject. property); //false
  23. console.log(weirdObject[' property']); //true
  24. console.log(weirdObject.property()); //false
  25. console.log(weirdObject['property()']); //true
  26. console.log(weirdObject.property[]); //false
  27. console.log(weirdObject['property[]']); //true
  28. console.log(weirdObject.8property); //false
  29. console.log(weirdObject['8property']); //true
Ad1
advertisement
Ad2
advertisement
Ad3
advertisement
Ad4
advertisement
Ad5
advertisement
Ad6
advertisement