3 ms·
Could someone please explain the following line to me? export const Button = styled.button``; Why is there a string right after the field "button" of the obje
by Traubenfuchs 6y ago
Could someone please explain the following line to me?
export const Button = styled.button``;
Why is there a string right after the field "button" of the object "styled"? How is this valid JS? What does it do?
- lucideer 6y agoI don't know why that space is there, it could be accidental or a deliberate stylistic quirk of the author, but it seems harmless (if not idiomatic). > How is this valid JS? What does it do? I'm curious if Python (or a similar whitespace-sensitive syntax) is your first/familiar programming language. The extra whitespace here does nothing. The semicolon in JS is an (optional) expression separator, similar to in Bash/Shell. It can occur at the end of a line or at the beginning of a line, or in between lines. Or in between two expressions on a single line. Any whitespace chars before or after it are irrelevant/ignored.
- samb1729 6y agoIt is not clear how this response is meant to answer the question in the post you replied to; there was no mention of whitespace. Their question was: >Why is there a string right after the field "button" of the object "styled"? which unambiguously refers to the double backtick characters between "styled.button" and the semicolon in this expression: > export const Button = styled.button``; That is, in JavaScript, an empty string. There is not whitespace and Python has nothing at all to do with the question. Similarly, an explanation of what a semicolon does in JavaScript does not answer the question. I also can't answer the question for them as I haven't kept up with newer JavaScript standards, but I thought it important that you realise you misunderstood something here.
- lucideer 6y agoPossibly a HN formatting issue (or the commenter typed wrong first time and later edited) but the backticks weren't showing up previously. Sorry @Traubenfuchs for the misguided explanation. As another commenter posted, this is a template tag. Technically equivalent to doing something like styled.button('') but the template tag syntax would be used for consistency with other calls in the code (where parameterised template strings would be passed to the button/element/component method)
- commotionfever 6y agocheckout javascript "template literal tags" https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- Traubenfuchs 6y agoThanks! So it's a special way to call a function, with the functions arguments being the parts of the given template literal string as split by the template literals and the template literal values themselves? JS syntactic sugar complexity is getting out of hand.
- deleted 6y ago[deleted]