
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


# How to Master JavaScript

JavaScript is one of the most popular programming languages in the world. It is a versatile language that is used both on the front-end and back-end of websites. If you want to become a master in JavaScript, here are some tips to help you get started.

## Start with the Basics

Like with any programming language, it is important to start with the basics. JavaScript has a simple syntax compared to other languages, but it is still important to learn the fundamentals.

Here is an example of a basic JavaScript code snippet:

```js
function addNumbers(num1, num2) {
    return num1 + num2;
}

var sum = addNumbers(5, 10);
console.log(sum);
```

This code defines a function that takes two arguments and returns their sum. It then calls the function with the numbers 5 and 10 and logs the result to the console. This is a simple example, but it illustrates the basic syntax of JavaScript.

## Practice, Practice, Practice

The best way to master JavaScript is through practice. There are many resources available online, such as Codecademy, FreeCodeCamp, and W3Schools, that offer interactive lessons and exercises to help you improve your skills.

It is also important to build your own projects. Start with simple projects, such as a calculator or a to-do list, and gradually work your way up to more complex projects. This will help you apply what you have learned and gain more experience in using JavaScript.

## Learn from Others

Another way to improve your JavaScript skills is to learn from others. Join online communities, such as Stack Overflow and GitHub, where you can ask questions, share your code, and learn from other developers.

You can also follow JavaScript experts on social media and read their blogs. Some popular experts include Douglas Crockford, Kyle Simpson, and Addy Osmani.

## Stay Up to Date

JavaScript is constantly evolving, with new features and updates being released regularly. It is important to stay up to date with these changes to ensure that your skills remain relevant.

Follow JavaScript news websites, such as JavaScript Weekly and Smashing Magazine, to stay informed about the latest updates. You can also attend conferences and meetups to learn from other developers and stay up to date with the latest trends.

## Conclusion

Becoming a master in JavaScript takes time and dedication. Start with the basics, practice regularly, learn from others, and stay up to date with the latest updates. With these tips, you can improve your skills and become a JavaScript master in no time.

---

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


Mastering 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_


All Posts

OOP in JavaScript

Mastering JavaScript

Getting Started with NextJS