Null Coalescing Operator In Javascript and PHP

Sometimes there is no way to know if a variable has a value, or it is just null, to avoid getting x property from null exceptions.

Javascript & PHP have a null coalescing operator, through these examples you are going to be able to see how this operator gives you a default value if a variable is null.

PHP Example using Laravel Blade Component:

// welcome.blade.php
<x-alert :message="'Here a message...'" /> 

// components/alert.blade.php
<div class="bg-indigo-200 p-4 w-full rounded shadow-xl">
<p class="text-gray-100">{{ $message }}</p>
</div>

Well this would work, but what if I need different styles? I need to create multiple components with different alert colors, well certainly you can, but maybe it violates the DRY principle...

So what can I do?

I want a default style, but I want to override this style in some cases when it's needed.

There you can use this null coalescing operator in php the syntax is: ??

// welcome.blade.php
<x-alert :classlist="'bg-red-200'" :message="'Here a message...'" /> 

// components/alert.blade.php
<div class="{{ $classlist ?? 'bg-indigo-200'  }} p-4 w-full rounded shadow-xl">
<p class="text-gray-100">{{ $message }}</p>
</div>

Now the component will have bg-indigo-200 class as default if the component does not have the classlist property, but if it has the prop it would override the default styles of the alert component.

The same for Javascript:

The null coalescing operator is || so you can create components with some default style, and it would be overridden with a prop just like the example above:

By this example I will show a Vue component:

<template>
 <div class="bg-indigo-600">
  some code...
 </div>
</template>
<script>
export default {
    name: 'Navbar',
    props: {
      bgColor: null
    }
}
</script>

Well in this case the scenario It's pretty similar, I want a default style, but I want to override this style in some cases when it's needed, here is another good opportunity of null coalescing operator to shine:

<template>
 <div :class="classList || 'bg-indigo-600'">
  some code...
 </div>
</template>
<script>
export default {
    name: 'Navbar',
    props: {
      classList: null
    }
}
</script>

Take in mind

Advantage of this approach:

• Promote DRY principle.
• You can pass any prop even to nested elements in you component, but you can still use just one component.
• Is useful in other more business logic scenarios, I just use this components example to make a more visual Illustration of this.

Thanks for reading!