Learn OOP Javascript the Easy way

Introduction:

Hi! I am success and in this course I will teach everything you need to know about OOP JavaScript, Learn OOP Javascript the Easy way. The concept of Object Oriented JavaScript is difficult to comprehend by new developers but once you can wrap your head around its difficulty, you cannot do without it.

What you will learn:

  • The concept of Object Oriented Programming,
  • How to create new objects
  • How to add/remove objects properties
  • Understand the scope of this keyword
  • How to use OOP in your next project
  • The difference between objects in JavaScript and Json data

The concept of Object Oriented Programming

Object-Oriented Programming has to do with understanding how to work with objects.

What is an object: Given a professional definition, (i) An object is an abstract data type created by a developer (ii) An object is a collection of properties.

Now let’s step down a bit and explain this in its simplest form. An object is an object, it can be a file on your PC, the chair you’re sitting on, the table you use, these are all objects.

Object Properties: This refers to the various things that make up your object, take for instance the chair you’re sitting on can be identified by its, color, size, design, etc. so if we have a chair to be our object, then we have the chair properties to be color: red, size: medium, design: handless.

Each property consists of a key/value pair and can reference either a primitive (e.g., strings, numbers, booleans, etc.) or another object. In the simple definition above we have color, size and design to be our keys while red, medium and handless are the values.

See Also: Turning a TikTok Sound into an an Android Ringtone or Alarm.

Now lets define an object in JavaScript.

How to create new objects in JavaScript

const chair = {}

How to add properties to an object in JavaScript

const chair = {
  color: 'red',
  design: 'Plastic Chair',
  size: 'Big',
  number of legs: 4
};

I want you to take a closer look at the object defined above and observe the syntax use in writing the object properties. We have color followed by a column (:) and then any of the JavaScript primitive data types.

The column (:) demarcates between the key and its value. To the left of the column, we have the key and to the right of the column we have the value.

Do not confuse object to Json file because there are really similar, later in this course I will explain the core difference between these two.

See Also: Best web hosting services of 2021: Top host providers for your website

How to access object properties

Now that we have our object define, lets say we now want to know the color of the chair, this process is call accessing object properties and it is very easy to understand.

Basically there are two ways to access an object

  1. By using the dot notation chair.color and
  2. By using the bracket notation chair[‘color’]
chair.color
// red

chair['color']
// red

In the future we shall see small differences in using the two but at this level, the two perform the same task and fell free to use anyone that is okay for you.

Note that while dot notation may be easier to read and write, it can’t be used in every situation. For example, let’s say there’s a key in the above chair object that is a number. An expression like chair.1; will cause a error, while chair[1]; returns the intended value:

3 thoughts on “Learn OOP Javascript the Easy way”

Leave a Comment

%d bloggers like this: