I don't understand the () that are all alone. Something about arrow function syntax doesn't make sense to me.

Question

button.addEventListener( 'click', () => {
  p.textContent = input.value + ':';
})

Is there a video that explains this layout? A little better or maybe someone can link something that explains this style.  I don't understand the ':' or the parenthesis by themselves.  Actually most of this isn't clicking.  Thank you so much.

Tyler Andal · Accepted Answer

@Sean Fallon (https://teamtreehouse.com/seanfallon) 
I'll take a stab at answering this, and hopefully it is helpful. Along with my explanation I would also recommend checking out https://www.w3schools.com/Js/jsarrowfunction.asp (https://www.w3schools.com/Js/js_arrow_function.asp).
In your example () => is the arrow function syntax, and I really think it's just something to memorize if you want to use arrow functions moving forward. When you create a function I do know that it that requires the open parenthesis (). They can hold a value to pass into the function, or it can be empty like in the example you provided. Personally, I find arrow functions more difficult to read than the standard way to write a function, but I'm still getting used to all this as well. In regards to ':' that was added to include : after the input.value. A reference for this can be found https://teamtreehouse.com/library/combine-strings (https://teamtreehouse.com/library/combine-strings)
js 
button.addEventListener( 'click', () => { p.textContent = input.value + ':'; })

Welcome to the Treehouse Community

Looking to learn something new?

Sean Fallon

Sean Fallon

I don't understand the () that are all alone. Something about arrow function syntax doesn't make sense to me.

1 Answer

Tyler Andal

Tyler Andal

Sean Fallon

Sean Fallon