DEV Community

Cover image for Object oriented Javascript part 1
Tristan Elliott
Tristan Elliott

Posted on • Updated on

Object oriented Javascript part 1

Introduction

These are simply my notes from reading, The principles of object oriented programming in JavaScript by Nicholas C. Zakas. I will be doing one post per chapter. This post is on chapter one. If this is helpful or not please let me know on my twitter

Types

JavaScript has no concept of classes. However, it does have types and those types are primitive and reference. We will start will primitive types.

Primitive Types

There are five primitive types in JavaScript:

      1)Boolean: true or false
      2)Number: any integer or floating point number
      3)String: any characters between "" or ''
      4)Null: only has one value, null
      5)Undefined: only has one value, undefined
Enter fullscreen mode Exit fullscreen mode

-When a primitive value gets assigned to a variable, that value gets copied directly into the variable. A consequence of this is that two variables will each have their own value of a primitive data type. Altering one variable will not effect another, even if they are assigned to each other. Example is shown below:

      let one = "ok"
      let another = one
      console.log(another)
      let another = "I aint ever seen two pretty best friends"
      console.log(one)
Enter fullscreen mode Exit fullscreen mode

-The second console.log() shows that the first variable is unchanged. This is because each variables hold separate and distinct values. Changing one will not change the other. However, this is not the case for reference types(objects).

  • Despite primitive types not being objects, there are times when they can appear as such.

       let name ="Bob"
       let lowerName = name.toLowerCase()
    
  • Demonstrated above, we can see the dot notation being used which is a clear indication of objects. JavaScript does this in order to create a more fluid flowing language. The "Object like" appearance is achieved through primitive wrapper types, which is a technical term for temporary object creation. Below is a demonstration of what happens when you use a method on a primitive type.

      let name ="Bob"
      let temp = new String(name)
      let lowerName = temp.toLowerCase()
      temp = undefined
    
  • Above is essentially what goes on 'under the hood'. The last line is a technique called "object dereferencing", this allows JavaScript to garbage collect the temporary object. If you try to create you own properties and assign them to a primitive, JavaScript will simply ignore them. Strict mode will not allow setting properties on primitives and throw a TypeError

Reference Types

  • A reference type is simply another name for an object. An object stores properties in key value pairs. There a few ways to create objects, one is with the new operator and a constructor function. Another way is by using the object literal syntax. Below shows the two ways to create objects.

    let obj = new Object()
    let obj = {}
    
  • you can access properties on objects with the dot or bracket syntax. Dot syntax is much more common but bracket syntax is used when you don't know the property name before hand. The code below is equivalent to each other.

    obj.name = "timmy"
    obj["name"] = "tim"

  • Along with the generic object type, JavaScript has a few built in objects such as, Array, Date, Error, Function, Object, RegExp. You can instantiate these object types by using the new operator but that will create unwanted side effects in certain situations. Because of this, it is almost always recommended that you create them using their corresponding object literal syntax.

-Another important thing to note about objects is how they are stored when assigned to variables. When an object is assigned to a variable its value does not get copied directly on to the variable like a primitive type. Instead a reference to the object in memory is stored on the variable. The consequence of this is that two variables can have references to the same object and unintentionally change the original copy. Below will give a better understanding.

    let obj = { name:'billy'}
    let obj2 = obj
    obj2.name = "not billy"
    console.log(obj)
Enter fullscreen mode Exit fullscreen mode
  • The console.log(obj) shows that obj2 has the ability to change the obj object, even if it was unintentional.

conclusion

  • This is the end of my chapter 1 notes. Chapter 2 notes will be on functions and should be up within one week. If you have any thoughts on this article please let me know on twitter: my twitter

Top comments (0)