Explanation for && usage when referring to google instance

Question

I am using the vue2-google-maps module and came across the following syntax when needing to refer to the google instance from inside a component prop.

scaledSize: google && new google.maps.Size(50, 50)

It's used as such:

<GmapMarker
  :key="e.coordinates.lat + e.coordinates.lng"
  v-for="e in poi"
  :position="e.coordinates"
  :icon="{
    url: require(`@/assets/${e.icon}`),
    scaledSize: google && new google.maps.Size(50, 50)
  }"
/>

And google is a computed property.

import { gmapApi } from 'vue2-google-maps'


export default {
  computed: {
    google: gmapApi
  }
}

What is the meaning of google && and why is it required before new google.maps.Size(50, 50)?

Thank you!

Answer 1

&& is called a logical AND operator and in this case it is used to avoid errors. The MDN docs state that:

If expr1 can be converted to true, returns expr2; else, returns expr1.

This means that if variable google is not properly initialized it will return the falsy value instead of throwing an exception (e.g Cannot read property 'maps' of undefined/null).