
JavaScript is a versatile programming language that supports various programming paradigms, including Object-Oriented Programming (OOP). OOP is a programming paradigm that focuses on designing software based on real-world objects, encapsulating properties and behaviors. In this short article, we will explore OOP in JavaScript.

## Classes and Objects

JavaScript introduced classes in ES6, making it possible to define classes as templates for creating objects. A class defines the properties and methods that an object will have. An object is an instance of a class and can be created using the "new" keyword.

```js
class Car {
    constructor(brand, model) {
        this.brand = brand;
        this.model = model;
    }

    honk() {
        console.log("Beep beep!");
    }
}

let myCar = new Car("Toyota", "Corolla");
console.log(myCar.brand); // Output: Toyota
myCar.honk(); // Output: Beep beep!
```

## Inheritance

JavaScript supports inheritance, allowing a subclass to inherit properties and methods from a superclass. A subclass can add its own properties and methods, and override the ones inherited from the superclass.

```js
class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
    }

    speak() {
        console.log(`${this.name} barks.`);
    }
}

let myDog = new Dog("Rufus");
myDog.speak(); // Output: Rufus barks.
```

## Encapsulation and Abstraction

JavaScript provides ways to encapsulate properties and methods, making them private or protected. Encapsulation helps to prevent external access to an object's internal state and behavior. Abstraction helps to hide the complexity of an object's implementation, exposing only the necessary interfaces.

```js
class BankAccount {
    #balance = 0; // Private property

    deposit(amount) {
        this.#balance += amount;
    }

    withdraw(amount) {
        if (amount <= this.#balance) {
            this.#balance -= amount;
        }
    }

    get balance() {
        // Getter method
        return this.#balance;
    }
}

let myAccount = new BankAccount();
myAccount.deposit(1000);
console.log(myAccount.balance); // Output: 1000
myAccount.withdraw(500);
console.log(myAccount.balance); // Output: 500
```

In conclusion, OOP in JavaScript provides a powerful way to design software based on real-world objects, encapsulating properties and behaviors. With classes, inheritance, encapsulation, and abstraction, JavaScript developers can create efficient and maintainable code.

---

_Author: Marcin Suski_  
_date: 2023-03-20_


OOP in JavaScript


# Getting Started with Next.js

If you are looking for a framework that can help you build high-performance React applications with ease, Next.js is the way to go. Developed by Vercel, **Next.js** is an open-source framework that enables you to build server-rendered React applications with zero configuration.

### Fast

One of the most impressive features of Next.js is its automatic code splitting capability. This means that your application's code will be split into smaller chunks, and only the code that is needed will be loaded when a user requests a page. This results in faster page load times and a better user experience.

### Server-side rendering.

Another great feature of Next.js is its support for **server-side rendering.** With server-side rendering, your application's pages are pre-rendered on the server and then sent to the client. This results in faster initial page load times and improved search engine optimization (SEO). Next.js also supports client-side rendering, so you can choose the rendering method that best suits your needs.

### CSS and Sass

Next.js also comes with built-in support for CSS and Sass. You can import your styles directly into your components, and Next.js will handle the compilation and optimization of your CSS for you. This makes it easy to create beautiful, responsive designs without having to worry about the underlying CSS.

### Static site generation

In addition to these features, Next.js also supports static site generation, TypeScript, and hot module replacement (HMR). With static site generation, you can generate a fully static website that can be hosted on a content delivery network (CDN) for even faster load times. TypeScript support enables you to add strong typing to your code, which can help prevent bugs and improve code quality. HMR allows you to make changes to your code and see the results in real-time without having to manually refresh your browser.

### File-based routing

File-based routing is a routing system used in Next.js that allows developers to create routes by simply creating files. In other words, each page in a Next.js application corresponds to a file in the project directory.

This makes it easy to create and manage routes in a Next.js application, as developers do not need to define complex routing rules in a separate configuration file. Instead, they can simply create a new file in the _"pages"_ directory and the file will automatically be mapped to a new route.

For example, if a developer creates a file called _"about.js"_ in the _"pages"_ directory, it will be automatically mapped to the _"/about"_ route in the application.

Additionally, file-based routing in Next.js supports dynamic routes, which allows developers to create routes with parameters that can be accessed in the page component.

Overall, file-based routing in Next.js is a simple and effective way to manage routes in a web application, making it easier for developers to create and maintain their projects.

![Create routes via your file + folder structure](/images/posts/getting-started-with-nextjs/nextjs-file-based-routing.png)

Overall, Next.js is a powerful framework that can help you build high-performance React applications quickly and easily. Its automatic code splitting, support for server-side rendering, and built-in CSS and Sass support make it a great choice for developers of all skill levels. So why not give Next.js a try and see how it can help you build better web applications?

---

_Author: Marcin Suski_  
_date: 2023-03-10_


Hi, I'm Marcin.

Featured Posts

OOP in JavaScript

Getting Started with NextJS