<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Md Al Mustanjid</title>
    <description>The latest articles on Forem by Md Al Mustanjid (@mustanjid).</description>
    <link>https://forem.com/mustanjid</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2848542%2F2dffb78e-0f23-40bb-979a-6fb5b74c8fb7.jpg</url>
      <title>Forem: Md Al Mustanjid</title>
      <link>https://forem.com/mustanjid</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/mustanjid"/>
    <language>en</language>
    <item>
      <title>The Struggle of Code Reusability in Laravel: Why Traits Win the Race?</title>
      <dc:creator>Md Al Mustanjid</dc:creator>
      <pubDate>Tue, 08 Apr 2025 10:02:11 +0000</pubDate>
      <link>https://forem.com/mustanjid/the-struggle-of-code-reusability-in-laravel-why-traits-win-the-race-1382</link>
      <guid>https://forem.com/mustanjid/the-struggle-of-code-reusability-in-laravel-why-traits-win-the-race-1382</guid>
      <description>&lt;p&gt;The title has already conveyed so much. In web development with Laravel or a PHP environment, we often need to use the same method across multiple classes. Suppose we are creating a vehicle rental system that includes various types of vehicles. We can consider a base class named Vehicle, which can be extended to encompass different kinds of vehicles as child classes. So, here, &lt;strong&gt;inheritance&lt;/strong&gt; is the solution? Let's see.&lt;/p&gt;

&lt;p&gt;The Vehicle class serves as our parent class. It includes shared properties that all vehicles have, with the primary function being movement. In this parent class, we'll define these properties and the function as a method, creating a solid foundation for all vehicle types. We will rent cars, boats, and amphibious vehicles. Vehicles can have different capabilities:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cars can only drive.&lt;/li&gt;
&lt;li&gt;Boats can only sail.&lt;/li&gt;
&lt;li&gt;Amphibious Vehicles can both drive and sail.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//Vehicle Class
namespace App\Models;

use Illuminate\Database\Eloquent\Model;


class Vehicle extends Model{
    protected $fillable = ['model', 'speed'];

    public function move(){
        return "{$this-&amp;gt;model} is moving at {$this-&amp;gt;speed} km/h.";
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Attempt: Using inheritance?
&lt;/h2&gt;

&lt;p&gt;Now, all vehicles inherit this base class.&lt;/p&gt;

&lt;h3&gt;
  
  
  Car Class
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\Models;

class Car extends Vehicle {
    public function drive() {
        return "{$this-&amp;gt;model} is driving on land.";
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Boat Class
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\Models;

class Boat extends Vehicle {
    public function sail() {
        return "{$this-&amp;gt;model} is sailing on water.";
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;But what are we gonna do for AmphibiousVehicle?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;First, it can't inherit both Car and Boat classes together to get both functions, php doesn't support it.&lt;/em&gt; But, it can inherit from the vehicle class and implement both the drive and sail functions. We currently have duplicate &lt;strong&gt;&lt;em&gt;drive( ) and sail( )&lt;/em&gt;&lt;/strong&gt; logic in two different classes. &lt;strong&gt;&lt;em&gt;What's the issue?&lt;/em&gt;&lt;/strong&gt; One thing! Have you noticed the repeated code? &lt;u&gt;Here, we are creating DRY code&lt;/u&gt;. If we need modifications or changes, we will have to write the code twice! &lt;/p&gt;

&lt;h2&gt;
  
  
  Attempt: Using Interface?
&lt;/h2&gt;

&lt;p&gt;Since multiple inheritance isn't possible, another option we can try is &lt;strong&gt;interface&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//Drive Interface

namespace App\Contracts;

interface Drivable {
    public function drive();
}

//Sail Interface

namespace App\Contracts;

interface Sailable {
    public function sail();
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Implementing Interfaces in Car &amp;amp; Boat
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//Car
namespace App\Models;

use App\Contracts\Drivable;

class Car extends Vehicle implements Drivable {
    public function drive() {
        return "{$this-&amp;gt;model} is driving on land.";
    }
}

//Boat
namespace App\Models;

use App\Contracts\Sailable;

class Boat extends Vehicle implements Sailable {
    public function sail() {
        return "{$this-&amp;gt;model} is sailing on water.";
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Now, let's implement AmphibiousVehicle using both interfaces.
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\Models;

use App\Contracts\Drivable;
use App\Contracts\Sailable;

class AmphibiousVehicle extends Vehicle implements Drivable, Sailable {
    public function drive() {
        return "{$this-&amp;gt;model} is driving on land.";
    }

    public function sail() {
        return "{$this-&amp;gt;model} is sailing on water.";
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Wait, isn't this duplicate code? Interfaces don't solve code duplication! We still have to write the same logic in multiple places.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Ultimate Solution: Traits!
&lt;/h2&gt;

&lt;p&gt;Okay, now we will explore the most important feature of the PHP environment, which is &lt;strong&gt;traits&lt;/strong&gt;. A trait is a mechanism for reusing code across multiple classes without relying on traditional inheritance. It simplifies code reusability and facilitates easier sharing of behaviour. We will examine the usage of traits in depth later on.&lt;/p&gt;

&lt;h3&gt;
  
  
  Create Traits for Drive &amp;amp; Sail
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//Drive Trait
namespace App\Traits;

//any vehicle drive on land will use this trait
trait DriveTrait{
    public function drive(){
        return "{$this-&amp;gt;model} is driving on the land";
    }
}

//Sail Trait
namespace App\Traits;

//any vehicle sail on water will use this trait
trait SailTrait{
    public function sail(){
        return "{$this-&amp;gt;model} is sailing on the water";
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Set Traits in Models
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//Car
namespace App\Models;

use App\Traits\DriveTrait;
use App\Models\Vehicle;

class Car extends Vehicle{
    use DriveTrait;
}

//Boat
namespace App\Models;

use App\Traits\SailTrait;
use App\Models\Vehicle;

class Boat extends Vehicle{
    use SailTrait;
}

//AmphibiousVehicle
namespace App\Models;

use App\Traits\DriveTrait;
use App\Traits\SailTrait;
use App\Models\Vehicle;

class AmphibiousVehicle extends Vehicle{
    //Trait helps to share multiple behaviours at the same time easily
    use DriveTrait, SailTrait;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;No more duplicate code! AmphibiousVehicle now inherits both!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Set a route and test our classes and traits.
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;use Illuminate\Support\Facades\Route;
use App\Models\Boat;
use App\Models\Car;
use App\Models\AmphibiousVehicle;

Route::get('/vehicles', function(){
    $car = new Car(['model' =&amp;gt; 'Tesla', 'speed' =&amp;gt; 150]);
    $boat = new Boat(['model' =&amp;gt; 'Yamaha', 'speed' =&amp;gt; 80]);
    $amphibious  = new AmphibiousVehicle(['model' =&amp;gt; 'Hydra Spyder', 'speed' =&amp;gt; 100]);

    return [
        'Car Drive' =&amp;gt; $car-&amp;gt;move().", ".$car-&amp;gt;drive(),
        'Boat Sail' =&amp;gt; $boat-&amp;gt;move().", ".$boat-&amp;gt;Sail(),
        'Amphibious Drive' =&amp;gt; $amphibious-&amp;gt;move().", ".$amphibious-&amp;gt;drive(),
        'Amphibious Sail' =&amp;gt; $amphibious-&amp;gt;move().", ".$amphibious-&amp;gt;sail(),
    ];
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Get the source code &lt;a href="https://github.com/mustanjid/AdvanceOOPwithLv/tree/Trait" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Discover even more to uncover the essential traits that can make a difference.
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Can a Trait have properties?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Yes, it should be in a function of a trait, not directly within a trait.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\Traits;

trait Logger {
    //$logPrefix = "[LOG]:"; // Error: props can't declare within trait

    public function logMessage($message){
        $logPrefix = "[LOG]:"; // set props inside a function
        return $logPrefix. $message;
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;What happens if two Traits have methods with the same name in a class? How do you resolve conflicts?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;To address conflicts in the same method between two traits, we can utilize either &lt;strong&gt;&lt;em&gt;'insteadof'&lt;/em&gt;&lt;/strong&gt; or &lt;strong&gt;&lt;em&gt;'as'.&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//Debugger Trait
namespace App\Traits;

trait Debugger{
    public function logMessage($message){
        return "Logging from Debugger:" . $message;
    }
}

////Logger Trait
namespace App\Traits;

trait Logger {
    public function logMessage($message){
        $logPrefix = "[LOG]:";
        return $logPrefix. $message;
    }
}

//LogService
namespace App\Services;
use App\Traits\Logger;
use App\Traits\Debugger;

class LogService{
    use Logger, Debugger
    { Debugger::logMessage insteadof Logger;
        Logger::logMessage as logFromLogger;
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Can a Trait use another Trait?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Yes.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Can Traits have constructors?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;No. But, we can call a method from a trait in the constructor of the class.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;trait LoggerTrait {
    public function setup() {
        echo "Logger is ready!\n";
    }
}

class Car {
    use LoggerTrait;

    public function __construct() {
        $this-&amp;gt;setup(); // Calling the trait method
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Can Traits have abstract methods?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Yes, A trait can define abstract methods that must be implemented by the class using the trait.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Can Traits implement interfaces?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;No, a trait cannot directly implement an interface. However, a class that incorporates a trait can implement an interface, allowing the methods from the trait to fulfill the contract of the interface.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;interface Loggable {
    public function logMessage($message);
}

trait Logger {
    public function logMessage($message) {
        echo "Logging: $message";
    }
}

class AppService implements Loggable {
    use Logger; // This satisfies the Loggable interface
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Can we restrict access modifiers in a Trait?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Yes, we can change the visibility of a method from a trait inside a class.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;trait Logger {
    public function logMessage() {
        echo "Logging message";
    }
}

class App {
    use Logger {
        logMessage as private; // Now it's private in this class
    }
}

$app = new App();
$app-&amp;gt;logMessage(); //Error: logMessage() is private

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;Happy coding!!!&lt;/code&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>php</category>
      <category>trait</category>
      <category>laravel</category>
    </item>
    <item>
      <title>Dependency Injection in Laravel: A Better Way to Manage Dependencies</title>
      <dc:creator>Md Al Mustanjid</dc:creator>
      <pubDate>Sat, 15 Feb 2025 06:53:06 +0000</pubDate>
      <link>https://forem.com/mustanjid/dependency-injection-in-laravel-a-better-way-to-manage-dependencies-1id</link>
      <guid>https://forem.com/mustanjid/dependency-injection-in-laravel-a-better-way-to-manage-dependencies-1id</guid>
      <description>&lt;p&gt;We all depend on something. From the moment we wake up, we rely on our alarm clock, coffee machine, or phone to start the day. Software systems are no different - they depend on services like databases, payment gateways, or email providers to function. But as applications grow, managing these dependencies becomes complex. Imagine building a notification system for an e-commerce app. Our initial implementation might look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class NotificationService 
{
    public function send()
    {
        $emailService = new EmailService(); // Direct instantiation
        return $emailService-&amp;gt;send("Welcome!");
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, the &lt;code&gt;NotificationService&lt;/code&gt; is tightly coupled to &lt;code&gt;EmailService&lt;/code&gt;. If we need a new notification method, we must modify &lt;code&gt;NotificationService&lt;/code&gt;, making the code rigid and less maintainable.&lt;/p&gt;

&lt;p&gt;This is where &lt;strong&gt;Dependency Injection (DI)&lt;/strong&gt; comes in.&lt;/p&gt;

&lt;h2&gt;
  
  
  Dependency Injection (DI) and its types
&lt;/h2&gt;

&lt;p&gt;Dependency injection (DI) is a design pattern where a class receives its required dependencies from other sources rather than creating them internally. DI also allows us to inject dependencies instead of hardcoding them into the class.&lt;/p&gt;

&lt;h3&gt;
  
  
  Types of Dependency Injection
&lt;/h3&gt;

&lt;p&gt;Laravel supports four common types of dependency injection:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Constructor Injection&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Method Injection&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Binding&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Contextual Binding&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Before moving into the details of each injecting method, we prepare our project setup for implementing each one. Avoiding how to install the laravel project or something like that, assuming you have already done it.&lt;/p&gt;

&lt;h3&gt;
  
  
  Define the interface (Contract)
&lt;/h3&gt;

&lt;p&gt;Create a new &lt;code&gt;interfaces&lt;/code&gt; folder inside &lt;code&gt;app&lt;/code&gt; and define a &lt;code&gt;MessageService&lt;/code&gt; interface. So, any class going to implement it must have the &lt;code&gt;send($msg)&lt;/code&gt; method.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;app/Interfaces/MessageService.php&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\Interfaces;
interface MessageService {
    public function send(string $message): string;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Create services (Implementations)
&lt;/h3&gt;

&lt;p&gt;Inside &lt;code&gt;app/Services&lt;/code&gt;, create implementations of &lt;code&gt;MessageService&lt;/code&gt;.&lt;br&gt;
Create another folder and name it as &lt;strong&gt;‘services’.&lt;/strong&gt; Here, we are going to put all message services individually. All services must implement the &lt;code&gt;MessageService&lt;/code&gt;interface. We will create two services, the first one is &lt;code&gt;EmailService&lt;/code&gt;, and the second one is &lt;code&gt;SMSService&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;app/Services/EmailService.php&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\Services;
use App\Interfaces\MessageService;
class EmailService implements MessageService {
    public function send($message) {
        return "Email: $message";
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;app/Services/SmsService.php&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\Services;
use App\Interfaces\MessageService;
class SMSService implements MessageService
{
    public function send($message)
    {
        return "SMS sent: " . $message;
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Create the &lt;code&gt;NotificationService&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Now, let's create a &lt;code&gt;NotificationService&lt;/code&gt; inside the &lt;code&gt;app/Services&lt;/code&gt; directory. This service will act as a bridge between our application and message services.&lt;br&gt;
Instead of directly using an email or SMS service everywhere in our code, we use this &lt;code&gt;NotificationService&lt;/code&gt; to keep things organized and flexible. This way, we can easily switch between different messaging services without changing our core logic.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;app/Services/NotificationService.php&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\Services;
use App\Interfaces\MessageService;
class NotificationService
{
    private $messageService;
    public function __construct(MessageService $messageService)
    {
        $this-&amp;gt;messageService = $messageService;
    }
    public function send($message){
        return $this-&amp;gt;messageService-&amp;gt;send($message);
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Implementation of DI with laravel
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Constructor Injection (Most Common)
&lt;/h3&gt;

&lt;p&gt;The most commonly used way to inject dependencies in laravel. In this case, the dependency is passed through the constructor of a class and stored in a property for further use. It is best to use it for multiple dependencies and class-based uses.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class NotificationController extends Controller
{
    private $messageService;
    private $notifyService; //contextual binding

    //expects an instance of MessageService
    //When Laravel instantiates this controller, it automatically injects the bound implementation of MessageService
    /* thru this, we can send notifications without worrying about which 
    specific message service (Email or SMS) is being used */
    public function __construct(MessageService $messageService, NotifyService $notifyService)
    {
        $this-&amp;gt;messageService = $messageService;
        $this-&amp;gt;notifyService = $notifyService;
    }

    //return the response from the send method of the injected MessageService instance
    public function sendNotification(){
        return response()-&amp;gt;json(
            [
                "Email with binding &amp;amp; constructor injection of DI" =&amp;gt; $this-&amp;gt;messageService-&amp;gt;send("Emailed by constructor injection"),
                "SMS with contextual binding injection of DI" =&amp;gt; $this-&amp;gt;notifyService-&amp;gt;send("SMS by contextual binding")
            ]
        );
    }

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Method Injection
&lt;/h3&gt;

&lt;p&gt;Instead of injecting the dependency in the constructor, we can inject it directly into a method. Laravel automatically resolves and injects services into the method when it's called. It is best to use when it is needed for a single time and dependency is only needed inside a single method. It also reduces unnecessary properties of a class.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Interfaces\MessageService;
use GuzzleHttp\Psr7\Message;
use Mockery\Matcher\Not;
use App\Services\NotifyService;

class NotificationController extends Controller
{
    //Method Injection (MI)
    public function sendNotificationWithMI(MessageService $messageService)
    {
        return response()-&amp;gt;json([
            'message' =&amp;gt; $messageService-&amp;gt;send("Emailed by Method Injection of DI")
        ]);
    }

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Binding
&lt;/h3&gt;

&lt;p&gt;To tell Laravel which implementation of &lt;code&gt;MessageService&lt;/code&gt; to inject, we bind it inside the &lt;code&gt;AppServiceProvider&lt;/code&gt; class of laravel. In future, if we need to switch sms service then just change it to sms. Register dependency bindings in the service provider.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\Providers;

use App\Interfaces\MessageService;
use Illuminate\Support\ServiceProvider;
use Illuminate\Validation\Rules\Email;
use App\Services\EmailService;
use App\Services\SMSService;
use Illuminate\Notifications\Notification;
use App\Services\NotifyService;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // need to bind the MessageService interface to a concrete implementation (Email or Sms)
        // whenever MessageService is injected, Laravel will automatically provide an instance of EmailService.
        // if we change the binding to SMSService, Laravel will provide an instance of SMSService
        // just a simple modification in the bind method
        $this-&amp;gt;app-&amp;gt;bind(MessageService::class, EmailService::class);
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        //
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Contextual Binding
&lt;/h3&gt;

&lt;p&gt;Suppose, we need a single service but for different platforms with different sources. So, instead of setting in the right source each time, we can provide the correct one automatically based on where it is being used. Contextual binding allows us to use different parts of the application to use different implementations of the same interface without modifying the code. We can think of it using when different classes need different dependencies.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;namespace App\Providers;

use App\Interfaces\MessageService;
use Illuminate\Support\ServiceProvider;
use Illuminate\Validation\Rules\Email;
use App\Services\EmailService;
use App\Services\SMSService;
use Illuminate\Notifications\Notification;
use App\Services\NotifyService;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // need to bind the MessageService interface to a concrete implementation (Email or Sms)
        // whenever MessageService is injected, Laravel will automatically provide an instance of EmailService.
        // if we change the binding to SMSService, Laravel will provide an instance of SMSService
        // just a simple modification in the bind method
        $this-&amp;gt;app-&amp;gt;bind(MessageService::class, EmailService::class);

        //contextual binding: 
        //to setup specific implementation of an interface to inject only for a specific class.
        $this-&amp;gt;app-&amp;gt;when(NotifyService::class)
            -&amp;gt;needs(MessageService::class)
           -&amp;gt;give(SMSService::class);
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        //
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  DI Comparison Table
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;DI Injection Methods&lt;/th&gt;
&lt;th&gt;Implementation&lt;/th&gt;
&lt;th&gt;Benefits&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Constructor Injection&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;NotificationService&lt;/code&gt;, &lt;code&gt;NotificationController&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;Best for class-wide dependencies, ensures consistency.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Method Injection&lt;/td&gt;
&lt;td&gt;&lt;code&gt;sendNotification(MessageService $messageService)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Best for one-time use, avoids unnecessary properties.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;AppServiceProvider Binding&lt;/td&gt;
&lt;td&gt;&lt;code&gt;$this-&amp;gt;app-&amp;gt;bind(MessageService::class, EmailService::class);&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Allows switching implementations without modifying code.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Contextual Binding&lt;/td&gt;
&lt;td&gt;&lt;code&gt;$this-&amp;gt;app-&amp;gt;when(NotificationService::class)-&amp;gt;needs(MessageService::class)-&amp;gt;give(EmailService::class);&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Allows different classes to receive different implementations.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt; &lt;a href="https://github.com/mustanjid/AdvanceOOPwithLv/tree/DependencyInjectionwithLv11" rel="noopener noreferrer"&gt;View Source Code on GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Happy Coding!!!&lt;/code&gt;&lt;/p&gt;

</description>
      <category>designpatterns</category>
      <category>oop</category>
      <category>dependencyinjection</category>
      <category>laravel</category>
    </item>
    <item>
      <title>Call/Pass by Value &amp; Call/Pass by Reference in Js</title>
      <dc:creator>Md Al Mustanjid</dc:creator>
      <pubDate>Tue, 11 Feb 2025 15:57:15 +0000</pubDate>
      <link>https://forem.com/mustanjid/callpass-by-value-callpass-by-reference-in-js-5c0d</link>
      <guid>https://forem.com/mustanjid/callpass-by-value-callpass-by-reference-in-js-5c0d</guid>
      <description>&lt;p&gt;This calling thing is for js variables. There are &lt;strong&gt;two types of variables&lt;/strong&gt; in js.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Primitive&lt;/li&gt;
&lt;li&gt;Non-primitive/Reference&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;When working with js, we must have a sound knowledge of the differences between these two types. Call by value and Call by Reference can also be addressed as Pass by value and Pass by Reference respectively. Let’s see what are the primitive and non-primitive data in js. We will explore the features, calling, and passing process of these two variables and their differences.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Primitive&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Non-primitive Data&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Numbers&lt;/td&gt;
&lt;td&gt;Array&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Strings&lt;/td&gt;
&lt;td&gt;Object&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Boolean&lt;/td&gt;
&lt;td&gt;Function&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Null&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Undefined&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bigint&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Symbol&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Primitive Data
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;In js, primitives are known as immutable data types; &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;that means we can’t change it once it has been created. If doing so, js will interact differently. Let’s see an example.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mustanjid&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="c1"&gt;// output: u&lt;/span&gt;
&lt;span class="c1"&gt;//try to change the second letter of the name&lt;/span&gt;
&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;a&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="c1"&gt;// not changed&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// output: Mustanjid&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It seems very uncommon with js strings. If we want to alter or change one string's alphabet, specifically if we want to change the value of a string, &lt;strong&gt;&lt;u&gt;it will not happen as js doesn’t allow us to do that&lt;/u&gt;&lt;/strong&gt;. In addition, we change the value of the string using methods such as toLowerCase, toUpperCase, etc. What was that? Actually, &lt;strong&gt;&lt;u&gt;js returns a new string to us&lt;/u&gt;&lt;/strong&gt;, not changing the value of the provided variable.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;nameWithUpperCase&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;nameWithUpperCase&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: MUSTANJID&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Output: Mustanjid&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Calling/Passing by value in primitive data type
&lt;/h3&gt;

&lt;p&gt;We commonly do this, by assigning the value of a variable to another variable. When it’s about primitive data types, then the value of the variable is called and copied in this case.  &lt;strong&gt;&lt;u&gt;They pass and remember through the value only.&lt;/u&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;prevValue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;currValue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;prevValue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;prevValue&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: 1&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;currValue&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: 1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Comparison of primitive data types
&lt;/h3&gt;

&lt;p&gt;Comparison is also done by comparing values between two variables in the case of primitive data types. So, if the values are not the same then the comparison is false.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Arif&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Arif&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name1&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;name2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Output: true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Non-primitive Data Types
&lt;/h3&gt;

&lt;p&gt;Most of the work in js is done by using functions (first-class function-based language), arrays, and objects. We can’t think of js without these three things. These three things are known and recognized as non-primitive data types. It is different from primitive as we can change the value after creating non-primitive data. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Non-primitive is mutable&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;When non-primitive data has been initialized, it creates an address in memory and remembers that to store data. It recalls the address to return the value following our needs  (like stack and memory heap).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;React&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Vue&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;copyArr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//Output: [ "Js", "React", "Vue" ]&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;copyArr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//Output: [ "Js", "React", "Vue" ]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Calling/Passing by Reference in Non-primitive data types
&lt;/h3&gt;

&lt;p&gt;Is it possible that we’re not copying data!? it’s not a question actually. However, we already learned how non-primitive data types store data with an address. Copying between two objects or arrays is totally different in non-primitive cases. &lt;strong&gt;&lt;u&gt;It copies the address eventually&lt;/u&gt;&lt;/strong&gt;, the meaning of it is that &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;changing the value of an index in an array will also change the value of the copied array. Same for the object too&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let’s see an example to clear this in our minds.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;React&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Vue&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;copyArr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//Output: [ "Js", "React", "Vue" ]&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;copyArr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//Output: [ "Js", "React", "Vue" ]&lt;/span&gt;

    &lt;span class="c1"&gt;//now let's change in the copy array and see what happens&lt;/span&gt;
    &lt;span class="nx"&gt;copyArr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Angular&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="c1"&gt;//it will also change in the main array&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//Output: [ "Js", "Angular", "Vue" ]&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;copyArr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//Output: [ "Js", "Angular", "Vue" ]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Comparison of non-primitive data types
&lt;/h3&gt;

&lt;p&gt;Suppose, we want to compare values of two arrays or objects. Do we compare as we do in primitive types? Never&lt;/p&gt;

&lt;p&gt;:::note&lt;br&gt;
We do sometimes when arrays or objects are copied, see the example below&lt;br&gt;
:::&lt;/p&gt;

&lt;p&gt;! We compare through each index or property. So, having the same value doesn’t mean that comparison is the same.&lt;br&gt;
&lt;br&gt;
 &lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;obj1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;player&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;obj2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;player&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj1&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;obj2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;//output: false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;But copied objects or arrays comparison will return true. See the example below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;anObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mustanjid&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;copyObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;anObj&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//copied obj&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;anObj&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;copyObj&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Output: true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let’s recap the major differences between these two data types.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Primitive&lt;/th&gt;
&lt;th&gt;Non-Primitive&lt;/th&gt;
&lt;th&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;It is non-mutable.&lt;/td&gt;
&lt;td&gt;It is mutable.&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;It saves data by value.&lt;/td&gt;
&lt;td&gt;It saves data by address.&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;In comparison, the value of two variables is measured.&lt;/td&gt;
&lt;td&gt;In comparison, the value of address between two variables is measured.&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Now read the code below and determine what will be the output. Hope this writing helped you a little.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;passNonPrimitiveByRef&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;product&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;product&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Pen&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;aProductObj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Book&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;aProductObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Output: &lt;/span&gt;
&lt;span class="nf"&gt;passNonPrimitiveByRef&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;aProductObj&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;aProductObj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Output:&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;Happy coding!!!&lt;/code&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>es6</category>
      <category>primitive</category>
      <category>node</category>
    </item>
  </channel>
</rss>
