Experimenting with Javascript Objects (Part 1)

Photo by Michal Matlon on Unsplash

What is a Javascript Object?

Working with Objects

Defining/Mutating Properties

  • Define them using an object literal during initialization
  • Use the assignment operator
  • Use Object.defineProperty
  • Reflect.defineProperty

Accessing Properties

  • Use for…in
    for…in will loop over all enumerable properties, even those contained in the prototype chain. Non-enumerable properties will not be listed.
> hi mom
> hello world
  • Use Object.keys
    Object.keys will only loop over enumerable properties contained in the object itself, it will not traverse the prototype chain.
  • Use Object.getOwnPropertyNames
    Object.getOwnPropertyNames will loop over all enumerable and non-enumerable properties in the object itself, it will not check the prototype chain.

Deleting Properties

  • Use the delete keyword
  • Use Reflect.deleteProperty

Const vs Let vs Var

Javascript Objects are references

Functions are Objects

Arrays are Objects

> [1, 2, 3, hello: 'world', hi: 'mom']
> key: 0
> key: 1
> key: 2
> key: hello
> value: 1
> value: 2
> value: 3

Prototype Chain

myObject <- Object.prototype <- null
  • Date objects inherit from Date.prototype
myDateVariable <- Date.prototype <- Object.prototype <- null
  • Array objects inherit from Array.prototype
myArrayVariable <- Array.Prototype <- Object.prototype <- null
  • myObject objects inherit from myObject.prototype
myObject <- Object.prototype <- null
myObject <- myObjectFunc.prototype <- Function.prototype <- Object.prototype <- null
  1. Creating a new object
  2. Setting the prototype of this object to the constructor function’s prototype property
  3. Binding the this keyword to the newly created object and executing the constructor function
  4. Returning the newly created object

Assigning a Prototype to an Object

mySecondObject <- myFirstObject <- Object.prototype <- null

Prototypal Inheritance and Prototypal Delegation

Inheriting methods and the “this” keyword

Property Shadowing

Conclusion

--

--

--

Frontend Software Engineer at Blitz App— Founder of GDLauncher

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Reverse a String with a Stack in JavaScript

“Dependency Injection — Back to the Basics”

Computer code.

ACF multiple map markers with toggleable infowindow popups.

EASY SOCIAL-SHARING WITH IONIC 3 AND IONIC-NATIVE

How To Compare The Performance Of JS Frameworks With Google’s CrUX

Getting started with Deno

React Custom Hooks — useAutoScroll

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Davide Ceschia

Davide Ceschia

Frontend Software Engineer at Blitz App— Founder of GDLauncher

More from Medium

FUN…ctions in Javascript

“this” in Javascript

JavaScript Explained — Introduction

What’s JavaScript?