null coalescing operator in Javascript and PHP

Working with components sometimes we need a default behavior or appearance but maybe in a few situations we need to override this default behavior, another common scenario is that we could not know if some variable is getting a value or it is just null.

Here some examples:

• In a Laravel 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 ok, but what if I need different styles? I need to create multiple componentes with different alert colors, well certainly you can but maybe it violates the DRY principle...

So what can I do?

You can use the merge attributes to add more styles but what if you want to change a nested elements like in this case the "p" tag or use a "fallback style" but you want to override it:

There you can use this null coalescing operator:

// 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 work with 'bg-indigo-200' class as default if the component does not pass the "classlist" property, but if you pass the prop you can 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 override with a prop just like the example above:

By this example I will show a Vue component:

// App.vue
<navbar />

Navbar.vue

<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 its pretty similar, I want a default style but I want to override this style in some cases when its needed, here is another good opportunity of null coalescing operator to shine:

Refactoring...

// App.vue
<navbar :class-list="'bg-blue-600'" />

Navbar.vue

<template>
 <div :class="classList || 'bg-indigo-600'">
  some code...
 </div>
</template>

<script>
export default {
    name: 'Navbar',
    props: {
      classList: null
    }
}
</script>

Well there are some 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!