DEV Community: Joel Jose

How Spread Operator is Scamming you

Joel Jose — Wed, 29 May 2024 11:16:08 +0000

Hi guys, all of us are familiar with the spread operator that is denoted by '…', and it is most commonly used for copying array or objects. But did you know that it is scamming us in the name of copy.

Let me make things clear...

Try to guess the output of this code :

const obj = {
    name: 'John',
};

const copyObj = { ...obj };

copyObj.name = 'Doe';

console.log(obj);
console.log(copyObj);

Output :

{ name: 'John' }
{ name: 'Doe' }

Great⭐! Now how about this one :

const obj = {
    name: 'John',
    dob: {
        year: 2000
    }
};

const copyObj = { ...obj };

copyObj.name = 'Doe';
copyObj.dob.year = 2024

console.log(obj)
console.log(copyObj)

Output :

{ name: 'John', dob: { year: 2024 } }
{ name: 'Doe', dob: { year: 2024 } }

Wait…. now what happened here? Why did the first object also have its value changed?

Explaining the scam

The reason for this is the shallow copy that spread operator performs while copying an object.

When we refer to shallow copy, it means that the values of the first level properties are copied perfectly and modifying them does not affect the original object. Meanwhile the spread operator only copies the references of other properties and modifying them, changes the original object.

Over to you

This is just one of the property of spread operator, there is more to learn about it and ways to avoid shallow copy when not required. So go out there and find your answers.

So, that's all, guys!😉

Just keep learning!💪

Tell us about your first step in your coding journey✈

Joel Jose — Mon, 13 May 2024 09:53:19 +0000

Hi fellow coders, we've all had that experience which ignited our passion for coding, that small step that helped us set foot on the long path of coding filled with bugs🐛 and errors.

My Experience

The event that boosted my curiosity in coding was when my friend registered a team of 4, including me, for the Google Hashcode 2019 during the first year of my college. That was a time when I was still new to programming. Even though we ranked low in the competition, we tried our best to solve the problem. I really loved those 4hrs of intense brainstorming and coding. That was when I realized coding was so much fun and interesting.

Over to you

Now, tell us about your first coding experience. I'm sure it would be interesting to know how different people came to love coding.

What is an observable?

Joel Jose — Tue, 07 May 2024 07:07:35 +0000

Introduction

Observable…….. yes its one of the most popular term that you will come across often, especially if you are an angular developer. Its a simple and powerful concept that gives a developer the power to execute asynchronous operations. In this article lets learn about what an observable is, its uses and some basic operations using an observable.

What is an observable?

Observable is a very powerful and efficient class provided by the RxJS library which helps in handling the asynchronous functions and data streams. It is a reactive approach to combine, transform, manage and manipulate streams of data.

Any continuous stream of data can be declared as an observable and the user can subscribe to it and monitor the changes in the data that is subscribed to. In simple terms we can say that observable is something that we can observe the changes constantly and in real time.

Creating my first observable

Now lets see how an observable is created.

import { Observable } from 'rxjs';
const observeMe = new Observable(observer => {
    setTimeout(() => {
    observer.next('Hello Guys');
    }, 2000);
    setTimeout(() => {
    observer.next('Hello Again');
    }, 4000);
});

observeMe.subscribe(value => console.log(value));

In this code observeMe is variable that is initialized with the constructor of Observable.

The next() function emits a value to the observer.
When we use subscribe() on observeMe, the observable starts listening and results in the following output

Hello Guys // After 2 seconds
Hello Again // After 4 seconds

Other operators on observable

Now lets see how of() operator is used

import { of } from 'rxjs';

const numberObservable = of(1, 2, 3, 4);

numberObservable.subscribe(value => console.log(value));

Here the of() operator is used to convert a the fixed set of values into an observable by emitting them one by one. After converting the values into an observable, we can subscribe to it

Next is the map() operator

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const numberObservable = of(1, 2, 3, 4);

const squaredObservable = numberObservable.pipe(
  map(value => value * value)
);

squaredObservable.subscribe(result => console.log(result));

Here the map() operator transforms the items emitted by an observable after applying the modification mentioned.

You must also have seen the pipe() method used in the code. It has a simple task of modifying the data stream by sequentially applying the specified operators within it.

Output:

Next is the filter() operator

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const numberObservable = of(1, 2, 3, 4);

const oddNumberObservable = numberObservable.pipe(
  filter((value) => value % 2 !== 0)
);

oddNumberObservable.subscribe(result => console.log(result));

In the above code, the filter() operator selectively emits only the items that satisfies the given condition.

1
3

Subscribing to an HTTP Request

HTTP request is one of the best scenario where we can utilize the power of an observable. It takes an undefined time frame to get the response of a HTTP request. By subscribing to the HTTP call we can keep on listening to the call without hindering any of the other program flow and also handle the data streams seamlessly over time.

Example:

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getData() {
  this.http.get('/api/url').subscribe((response) => {
    console.log('Response: ', response);
  });
}

In this code the subscribe() method takes a callback function as an argument that handles the emitted response from the HTTP request.

Error Handling in observable

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getData() {
  this.http.get('/api/url').subscribe((data) => {
    console.log('Data: ', data);
  },
  (error) => {
    console.log('Error: ', error);
  });
}

Here subscribe() method takes a second callback function as an argument which handles any error that happens while listening to the observable.

Unsubscribe an observable

When we use subscribe() method to open a stream to listen to an observable it will remain open unless we unsubscribe it. It is always a best practice to unsubscribe observables in your code to prevent memory leaks and free up resources when no longer needed.

One way to unsubscribe is:

ngOnDestroy() {
    this.observable.unsubscribe();
  }

Conclusion

This article gives the basics regarding an observable. There are a lot more to learn and explore regarding observable and RxJS library. Be sure to refer to https://rxjs.dev/guide/overview

So, that's all, guys!😉

Just keep learning!💪

Explain the things to note while implementing real time video communication

Joel Jose — Tue, 23 Apr 2024 12:12:23 +0000

Why do modern projects prefer Microservices architecture?

Joel Jose — Thu, 18 Apr 2024 19:11:29 +0000

In the recent years we have seen more companies and developers recommending microservices architecture for development. So in this article lets look into the reasons for this. Before we dive into the applications and advantages of microservices lets get to know what is microservices

What is microservices?

Microservices is an architectural development approach in which a large application can be broken down into small services, and each of these services is able to function independently and can be deployed and scaled individually. These functions communicate with each other using methods like HTTP, message bus, or gRPC. Each microservice will also have its own database, which would enhance the loose coupling of these services.

Advantages of Microservices.

Scalability : The microservices can be added, removed, updated and scaled anytime according to the needs of the user since each service runs independently.
Technology Flexibility : It gives the user the freedom to choose any programming language or platform for each of the services. This also helps the developers to choose the technology stack that would enhance their specific business needs.
Managing Teams : Each microservice can be divided among different teams, and each team has the opportunity to build the service without any dependency issues. This boosts team collaboration, agile development, and results in faster implementation of projects.
Faster Deployments : Microservices architecture eliminates the need to build the entire project before deployment because you only need to build the microservice where you had a change which results in faster deployments and releases.
Easy to Understand : The codebase is structured in a way that facilitates ease of understanding for any individual working on a specific module, thus reducing burden of understanding the entire project.
Fault Isolation : Large applications can continue to function smoothly with microservices even in the event of a failure in a module, due to its low coupling with other services.

Over to you

As you have read, microservices is one of the most powerful development architectures that you must follow in order to enhance the quality, security, scalability, and efficiency of your product. Microservices are currently used by popular tech firms like Netflix, Amazon, and Oracle. But even with all these wide range of advantages that microservices possess over the traditional architecture models, it is always wiser to choose an architecture based on the business requirements of your project.

So, that's all, guys!😉

Be productive and continue learning!💪