Object-Oriented Programming (OOP) in JavaScript is a paradigm centered around objects rather than functions.
Unlike procedural programming, which structures programs as sequences of steps or logic, OOP models complex systems as interactive objects.
This guide delves into the core principles of OOP in JavaScript, with some coding examples.
<h3>Fundamentals of OOP in JavaScript</h3>
<h3>1. Objects and Classes In JavaScript, an object is a standalone entity, with properties and type.</h3>
<pre>let dog = { breed: 'Labrador', color: 'black', bark() { console.log('Woof!'); } }; dog.bark(); // Woof!</pre>
Classes, introduced in ES6, are a template for creating objects.
<pre>class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } let animal = new Animal('Dog'); animal.speak(); // Dog makes a noise.</pre>
<h3>2. Encapsulation Encapsulation means that the internal representation of an object is hidden from the outside.</h3>
<pre>class Car { constructor(brand) { this._brand = brand; } get brand() { return this._brand; } set brand(newBrand) { this._brand = newBrand; } } let myCar = new Car('Ford'); console.log(myCar.brand); // Ford myCar.brand = 'BMW'; console.log(myCar.brand); // BMW</pre>
<h3>3. Inheritance Inheritance allows a class to inherit properties and methods from another class.</h3>
<pre>class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } class Dog extends Animal { speak() { console.log(`${this.name} barks.`); } } let d = new Dog('Mitzie'); d.speak(); // Mitzie barks.</pre>
<h3>4. Polymorphism Polymorphism allows objects of different classes to be treated as objects of a common superclass.</h3>
<pre>class Animal { speak() { console.log('Animal speaks'); } } class Cat extends Animal { speak() { console.log('Meow'); } } class Dog extends Animal { speak() { console.log('Woof'); } } function makeAnimalSpeak(animal) { animal.speak(); } makeAnimalSpeak(new Cat()); // Meow makeAnimalSpeak(new Dog()); // Woof</pre>
<h3>5. Abstraction Abstraction involves creating simple models representing complex real-world objects.</h3>
<pre>class Vehicle { startEngine() { console.log('Engine started'); } stopEngine() { console.log('Engine stopped'); } } class Car extends Vehicle { startEngine() { console.log('Car engine started'); } } let myCar = new Car(); myCar.startEngine(); // Car engine started</pre>
<h3>Advanced OOP Concepts in JavaScript</h3>
<h3>6. Constructors and the new Keyword Constructors are special functions that create and initialize objects.</h3>
<pre>class Person { constructor(name, age) { this.name = name; this.age = age; } } let person = new Person('Alice', 25); console.log(person); // Person { name: 'Alice', age: 25 }</pre>
<h3>7. Methods — Instance, Static, and Prototype Methods Methods in JavaScript classes can be instance, static, or prototype methods.</h3>
<pre>class Rectangle { constructor(width, height) { this.width = width; this.height = height; } // Instance method getArea() { return this.width * this.height; } // Static method static compareArea(rect1, rect2) { return rect1.getArea() - rect2.getArea(); } } let rect1 = new Rectangle(5, 8); let rect2 = new Rectangle(6, 7); console.log(Rectangle.compareArea(rect1, rect2)); // -2</pre>
<h3>8. Getters and Setters Getters and setters allow you to define Object Accessors (Computed Properties).</h3>
<pre>class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } get fullName() { return `${this.firstName} ${this.lastName}`; } set fullName(name) { [this.firstName, this.lastName] = name.split(' '); } } let person = new Person('John', 'Doe'); console.log(person.fullName); // John Doe person.fullName = 'Jane Smith'; console.log(person.fullName); // Jane Smith</pre>
<h3>9. Inheritance with extends and super The extends keyword is used in class declarations to create a class as a child of another class.</h3>
<pre>class Shape { constructor(name) { this.name = name; } move() { console.log(`${this.name} moved`); } } class Circle extends Shape { constructor(radius) { super('Circle'); this.radius = radius; } } let myCircle = new Circle(5); myCircle.move(); // Circle moved</pre>
<h3>Object-Oriented vs. Functional Programming in JavaScript</h3>
Differences Between OOP and Functional Programming - State and Immutability: OOP handles state within objects, which can change over time. In contrast, functional programming prefers immutable data structures and pure functions without side effects. - Methodology: OOP is about modeling real-world entities using objects and classes, whereas functional programming focuses on the computation process and avoids changing state. - Code Reusability: In OOP, reusability comes through inheritance and polymorphism. Functional programming achieves reusability through functions and higher-order functions.
<h3>When to Use OOP or Functional Programming</h3>
Use OOP when: - You’re dealing with a complex system with clearly defined types and relationships. - Your application’s state changes frequently and needs to be managed cohesively. - You prefer a modular and structured approach to organizing code.
Use Functional Programming when: - You need a robust system with operations that don’t depend on or alter the state. - Your focus is on the flow of data and transformations applied to it. - You aim for code that’s easy to test and reason about due to its immutability and purity.
Conclusion: Object-oriented programming in JavaScript offers a powerful way to structure and organize code, especially for complex applications. While it differs from functional programming, both paradigms have unique strengths and can even be combined in a single project for different aspects of the application. Understanding both OOP and functional programming will make you a more versatile and effective JavaScript developer.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=e015ea4a3a1b" width="1" height="1" alt="">

OOP in JS With My Understanding

In this article, we will take a look at how to setup an S3 bucket to host a static website using the aws cli. Skip to the bottom of the article if you just want the script.
<h4>AWS CLI</h4>
The AWS Command Line Interface (CLI) lets us manage all of our AWS services from the command line, without having to use the web console. So instead of clicking a bunch of buttons to create a new EC2 instance, you could just run a command like this:
<pre>aws ec2 run-instances --region $region --image-id "ami-0d4504aaac331dc68" --count 1 --instance-type t2.micro --associate-public-ip-address</pre>
<h4>Setup</h4>
If you haven’t setup the AWS CLI already, you can do so using this link: <a href="https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html">https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html</a>
The reference for all of the commands used here is available at <a href="https://docs.aws.amazon.com/cli/latest/reference/">https://docs.aws.amazon.com/cli/latest/reference/</a>
<h4>S3 Static Website</h4>
The steps for hosting a static website using s3 are pretty much the following:
<ol>
<li>Create a new bucket with a unique name</li>
<li>Enable public access to the bucket</li>
<li>Update the bucket policy for public read access:</li>
</ol>
<pre>{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::acit-3640-fall-2020-40126/*" } ] }</pre>
<ol>
<li>Enable the s3 bucket to host an index and error html page</li>
<li>Upload your website</li>
</ol>
<h3>1. Create a new bucket with a unique name</h3>
<pre>aws s3 mb "s3://your-bucket-name"</pre>
aws s3 mb will create a new bucket. Make sure you change your-bucket-name to something better.
<h3>2. Enable public access to the bucket</h3>
<pre>aws s3api put-public-access-block \ --bucket your-bucket-name \ --public-access-block-configuration "BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false"</pre>
aws s3api put-public-access-block allows you to configure the public access to the bucket. We’re setting all of the blocks to false to enable public access.
<h3>3. Update the bucket policy for public read access:</h3>
<pre>aws s3api put-bucket-policy --bucket your-bucket-name --policy "{ \"Version\": \"2012-10-17\", \"Statement\": [ { \"Sid\": \"PublicReadGetObject\", \"Effect\": \"Allow\", \"Principal\": \"*\", \"Action\": \"s3:GetObject\", \"Resource\": \"arn:aws:s3:::your-bucket-name/*\" } ] }"</pre>
aws s3api put-bucket-policy allows us to specify a bucket policy which has to be written in JSON. This policy will allow anyone to get the objects ot of the bucket.
<h3>4. Enable the s3 bucket to host an index and error html page</h3>
<pre>aws s3 website "s3://your-bucket-name" --index-document index.html --error-document index.html</pre>
aws s3 website configures the bucket as a website. We have to include an index and an error page. We could specify a single page for both of these. This is usually what we want for a single page application.
<h3>5. Upload your static website</h3>
<pre>aws s3 sync directory-path "s3://your-bucket-name/"</pre>
aws s3 sync will update the buckets contents with that of the contents of the local directory.
If we want to just copy a single file, we can use aws s3 cp
<pre># Copy a file to an s3 bucket aws s3 cp path-to-file "s3://your-bucket-name/filename"</pre>
<pre># Copy a file from an s3 bucket aws s3 cp "s3://your-bucket-name/filename" path-to-file</pre>
<h3>s3 vs s3api</h3>
s3api gives you complete control of S3 buckets. s3 gives you a higher level of abstraction for some of the more common operations you want to perform on an S3 bucket.
<h4>Single Script</h4>
As a single bash script, this code would look like this. There are a few more variables to make the region and profile easier to configure.
<pre>#!/bin/bash</pre>
<pre>bucket_name='your-bucket-name' website_directory='/path/to/website/'</pre>
<pre>region='us-east-1' profile='default'</pre>
<pre># 1. Create a new bucket with a unique name aws s3 mb \ --profile $profile \ --region $region \ --region us-east-1 "s3://$bucket_name" </pre>
<pre># 2. Enable public access to the bucket aws s3api put-public-access-block \ --profile $profile \ --region $region \ --bucket $bucket_name \ --public-access-block-configuration "BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false"</pre>
<pre># 3. Update the bucket policy for public read access: aws s3api put-bucket-policy \ --profile $profile \ --region $region \ --bucket $bucket_name \ --policy "{ \"Version\": \"2012-10-17\", \"Statement\": [ { \"Sid\": \"PublicReadGetObject\", \"Effect\": \"Allow\", \"Principal\": \"*\", \"Action\": \"s3:GetObject\", \"Resource\": \"arn:aws:s3:::$bucket_name/*\" } ] }"</pre>
<pre># 4. Enable the s3 bucket to host an `index` and `error` html page aws s3 website "s3://$bucket_name" \ --profile $profile \ --region $region \ --index-document index.html \ --error-document index.html</pre>
<pre># # 5. Upload you website aws s3 sync \ --profile $profile \ --region $region \ $website_directory "s3://$bucket_name/"</pre>
Once the bucket is created, you only need to run the sync code to push new updates:
<pre>#!/bin/bash</pre>
<pre>bucket_name='your-bucket-name' website_directory='/path/to/website/'</pre>
<pre>region='us-east-1' profile='default' </pre>
<pre>aws s3 sync \ --profile $profile \ --region $region \ $website_directory "s3://$bucket_name/"</pre>
And if you ever want to completely destroy the bucket:
<pre>#!/bin/bash</pre>
<pre>bucket_name='your-bucket-name' website_directory='/path/to/website/'</pre>
<pre>region='us-east-1' profile='default' </pre>
<pre>aws s3 rm \ --profile $profile \ --region $region \ --recursive s3://$bucket_name aws s3api delete-bucket \ --profile $profile \ --region $region \ --bucket $bucket_name</pre>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=affbb9f8f330" width="1" height="1" alt="">

AWS CLI | Setup an S3 Static Website

Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example:
<pre>&lt;div foo="bar"&gt;…&lt;/div&gt; &lt;script&gt; const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // 'hello world' &lt;/script&gt;</pre>
It seems like fewer and fewer developers know this, partially thanks to frameworks:
<pre>&lt;input className="…" type="…" aria-label="…" value="…" /&gt;</pre>
If you do the above in a framework’s templating language, you’re using attribute-like syntax, but under the hood it’ll sometimes be setting the property instead, and when it does that differs from framework to framework. In some cases, it’ll set a property and an attribute as a side-effect, but that isn’t the framework’s fault.
Most of the time, these distinctions don’t matter. I think it’s good that developers can have a long and happy career without caring about the differences between properties and attributes. But, if you need to dig down into the DOM at a lower level, it helps to know. Even if you feel you know the difference, maybe I’ll touch on a couple of details you hadn’t considered. So let’s dig in…
<h3>The key differences</h3>
Before we get to the interesting stuff, let’s get some of the technical differences out of the way:
<h4>HTML serialisation</h4>
Attributes serialise to HTML, whereas properties don’t:
<pre>const div = document.createElement('div');</pre>
<pre>div.setAttribute('foo', 'bar'); div.hello = 'world';</pre>
<pre>console.log(div.outerHTML); // '&lt;div foo="bar"&gt;&lt;/div&gt;'</pre>
So when you’re looking at the elements panel in browser developer tools, you’re only seeing attributes on elements, not properties.
<h4>Value types</h4>
In order to work in the serialised format, attribute values are always strings, whereas properties can be any type:
<pre>const div = document.createElement('div'); const obj = { foo: 'bar' };</pre>
<pre>div.setAttribute('foo', obj); console.log(typeof div.getAttribute('foo')); // 'string' console.log(div.getAttribute('foo')); // '[object Object]'</pre>
<pre>div.hello = obj; console.log(typeof div.hello); // 'object' console.log(div.hello); // { foo: 'bar' }</pre>
<h4>Case sensitivity</h4>
Attribute names are case-insensitive, whereas property names are case-sensitive.
<pre>&lt;div id="test" HeLlO="world"&gt;&lt;/div&gt; &lt;script&gt; const div = document.querySelector('#test');</pre>
<pre> console.log(div.getAttributeNames()); // ['id', 'hello']</pre>
<pre> div.setAttribute('FOO', 'bar'); console.log(div.getAttributeNames()); // ['id', 'hello', 'foo']</pre>
<pre> div.TeSt = 'value'; console.log(div.TeSt); // 'value' console.log(div.test); // undefined &lt;/script&gt;</pre>
However, attribute values are case-sensitive.
Ok, here’s where things start to get blurry:
<h3>Reflection</h3>
Take a look at this:
<pre>&lt;div id="foo"&gt;&lt;/div&gt; &lt;script&gt; const div = document.querySelector('#foo');</pre>
<pre> console.log(div.getAttribute('id')); // 'foo' console.log(div.id); // 'foo'</pre>
<pre> div.id = 'bar';</pre>
<pre> console.log(div.getAttribute('id')); // 'bar' console.log(div.id); // 'bar' &lt;/script&gt;</pre>
This seems to contradict the first example in the post, but the above only works because Element has an id getter &amp; setter that 'reflects' the id attribute.
When a property reflects an attribute, the attribute is the source of the data. When you set the property, it’s updating the attribute. When you read from the property, it’s reading the attribute.
For convenience, most specs will create a property equivalent for every defined attribute. It didn’t work in the example at the start of the article, because foo isn't a spec-defined attribute, so there isn't a spec-defined foo property that reflects it.
Here’s the spec for &lt;ol&gt;. The "Content attributes" section defines the attributes, and the "DOM interface" defines the properties. If you click on reversed in the DOM interface, it takes you to this:
<blockquote>
The reversed and type IDL attributes must <a href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same name.
</blockquote>
But some reflectors are more complex…
<h4>Naming differences</h4>
Ok, this is relatively minor, but sometimes the property has a different name to the attribute it reflects.
In some cases it’s just to add the kind of casing you’d expect from a property:
<ul>
<li>On &lt;img&gt;, el.crossOrigin reflects the crossorigin attribute.</li>
<li>On all elements, el.ariaLabel reflects the aria-label attribute (the aria reflectors became cross browser in late 2023. Before that you could only use the attributes).</li>
</ul>
In some cases, names had to be changed due to old JavaScript reserved words:
<ul>
<li>On all elements, el.className reflects the class attribute.</li>
<li>On &lt;label&gt;, el.htmlFor reflects the for attribute.</li>
</ul>
<h4>Validation, type coercion, and defaults</h4>
Properties come with validation and defaults, whereas attributes don’t:
<pre>const input = document.createElement('input');</pre>
<pre>console.log(input.getAttribute('type')); // null console.log(input.type); // 'text'</pre>
<pre>input.type = 'number';</pre>
<pre>console.log(input.getAttribute('type')); // 'number' console.log(input.type); // 'number'</pre>
<pre>input.type = 'foo';</pre>
<pre>console.log(input.getAttribute('type')); // 'foo' console.log(input.type); // 'text'</pre>
In this case, the validation is handled by the type getter. The setter allowed the invalid value 'foo', but when the getter saw the invalid value, or no value, it returned 'text'.
Some properties perform type coercion:
<pre>&lt;details open&gt;…&lt;/details&gt; &lt;script&gt; const details = document.querySelector('details');</pre>
<pre> console.log(details.getAttribute('open')); // '' console.log(details.open); // true</pre>
<pre> details.open = false;</pre>
<pre> console.log(details.getAttribute('open')); // null console.log(details.open); // false</pre>
<pre> details.open = 'hello';</pre>
<pre> console.log(details.getAttribute('open')); // '' console.log(details.open); // true &lt;/script&gt;</pre>
In this case, the open property is a boolean, returning whether the attribute exists. The setter also coerces the type - even though the setter is given 'hello', it's turned to a boolean rather than going directly to the attribute.
Properties like img.height coerce the attribute value to a number. The setter converts the incoming value to a number, and treats negative values as 0.
<h4>value on input fields</h4>
value is a fun one. There's a value property and a value attribute. However, the valueproperty does not reflect the value attribute. Instead, the defaultValue property reflects the value attribute.
I know, I know.
In fact, the value property doesn't reflect any attribute. That isn't unusual, there's loads of these (offsetWidth, parentNode, indeterminate on checkboxes for some reason, and many more).
Initially, the value property defers to the defaultValue property. Then, once the valueproperty is set, either via JavaScript or through user interaction, it switches to an internal value. It's as if it's implemented roughly like this:
<pre>class HTMLInputElement extends HTMLElement { get defaultValue() { return this.getAttribute('value') ?? ''; }</pre>
<pre> set defaultValue(newValue) { this.setAttribute('value', String(newValue)); }</pre>
<pre> #value = undefined;</pre>
<pre> get value() { return this.#value ?? this.defaultValue; }</pre>
<pre> set value(newValue) { this.#value = String(newValue); }</pre>
<pre> // This happens when the associated form resets formResetCallback() { this.#value = undefined; } }</pre>
So:
<pre>&lt;input type="text" value="default" /&gt; &lt;script&gt; const input = document.querySelector('input');</pre>
<pre> console.log(input.getAttribute('value')); // 'default' console.log(input.value); // 'default' console.log(input.defaultValue); // 'default'</pre>
<pre> input.defaultValue = 'new default';</pre>
<pre> console.log(input.getAttribute('value')); // 'new default' console.log(input.value); // 'new default' console.log(input.defaultValue); // 'new default'</pre>
<pre> // Here comes the mode switch: input.value = 'hello!';</pre>
<pre> console.log(input.getAttribute('value')); // 'new default' console.log(input.value); // 'hello!' console.log(input.defaultValue); // 'new default'</pre>
<pre> input.setAttribute('value', 'another new default');</pre>
<pre> console.log(input.getAttribute('value')); // 'another new default' console.log(input.value); // 'hello!' console.log(input.defaultValue); // 'another new default' &lt;/script&gt;</pre>
This would have made way more sense if the value attribute was named defaultvalue. Too late now.
<h3>How frameworks handle the difference</h3>
Back to the example from earlier:
<pre>&lt;input className="…" type="…" aria-label="…" value="…" /&gt;</pre>
How do frameworks handle this?
<h4>REACT</h4>
React does things the other way around. Aside from a predefined set of cases where they favour properties, they’ll set an attribute. This makes their render-to-string method similar in logic.
This explains why custom elements don’t seem to work in React. Since they’re custom, their properties aren’t in React’s ‘predefined list’, so they’re set as attributes instead. Anything that’s property-only on the custom element simply won’t work. This will be fixed in React 19, where they’ll switch to the Preact/VueJS model for custom elements.
The funny thing is, React popularised using className instead of class in what looks like an attribute. But, even though you're using the property name rather than the attribute name, <a href="https://github.com/facebook/react/blob/699d03ce1a175442fe3443e1d1bed14f14e9c197/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L388-L389">React will set the </a><a href="https://github.com/facebook/react/blob/699d03ce1a175442fe3443e1d1bed14f14e9c197/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L388-L389">class attribute under the hood</a>.
<ul><li>
<a href="https://github.com/facebook/react/blob/699d03ce1a175442fe3443e1d1bed14f14e9c197/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L349">setProp in React</a>.</li></ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=20d1a10ec2f3" width="1" height="1" alt="">

Jamshid

Makhmudov

Software Engineer

What i do.

Places i’ve worked.

Some of my works.

Medium blog

OOP in JS With My Understanding

javascript, oop

2024-06-27

AWS CLI | Setup an S3 Static Website

aws-s3, devops

2024-05-02

HTML attributes vs DOM properties

html, property, a-tribute

2024-05-02