Use a Pre-Defined Scale to Place Elements: Why are arguments passed to x and y Scale constants?

Tell us what’s happening:
I passed the tests but I’m confused about the syntax here. Why are the xScale and yScale constants having arguments passed to them?

const xScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, (d) => d[0])])
                     .range([padding, w - padding]);

attr.("x", d => xScale(d[0])) //xScale(d[0]) is what I don't understand

I can make no sense out of that syntax as I just can’t see why the xScale constant would take an argument and what that argument is supposed to do. Can someone please help me make sense of this? Why not just write ‘xScale’?

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36.

Link to the challenge:

https://www.d3indepth.com/scales/

Thank you. That helped.