Myujth

I've stumbled across something I can't quite get my head around. Let's say there's a product object:

let product = 
 img: "../image.jpg"

Now if I want to access product.img in a url, I can do something like the following:

const getProductImage = product => (
 backgroundImage: 'url(' + product.img +')'
);

My question is: what is going on with this bit?:

' + product.img + '

EDIT: Okay, this question starts from the wrong premise, see the answer below.

Your code simply adds the strings together, so the result is the new string concatenated:

'url(' + product.img +')'. 

For instance, if the product.img contains an url to an image, like: 'http:example.com/image1.png' then the backgroundimage will end up containing:

'url(http:example.com/image1.png)';

There are two sets of quotation marks:

'url('

and

')'

Not

' + product.img + '

Because that's how you concat a string from variables into a single string.
It could be rewritten as follows:

let first = 'url('
let last = ')'
let final_string = first + product.img + last

Or in template literals (which is better where possible)

`url($product.img)`