JavaScript

Clarification about JavaScript fundamental syntax and its impact on OOP.

Hi All, I have a few questions regarding JavaScript notation:

  1. I'd like to understand the difference between double-quotes "foobar", single-quotes 'foobar' and accent-marks foobar. I tried to search on the web, they're often used interchangeably, but I don't want to create wrong habits and really want to code properly. So I want to make sure I follow the standards. If there is no set rule/standard, is there a (more or less) universally agreed best practice for using one over the other in a given situation or scenario?
  2. When do we use semi-colon to end the line of code and when not? What difference does it make and how does it impact the execution/compiling of code?
  3. I've tried to summarise my understanding of brackets, parenthesis, braces below. Can some experienced programmer please see if I understand it all well?

A. Use curly braces {} to create classes and objects. B. Use brackets/parenthesis () to call methods, functions, or for chaining effect by use of .notation document.getElementById('foobar').innerHTML function myCurrentTime (parameter) {//a bunch of code goes in here//} C. Use square brackets to create an array - var myFruitArray = ['apple', 'orange', 'banana']. Square brackets are also used to access the property of an object - let color = obj['apple'];

I'd appreciate some response that can clarify the concepts, if I'm getting something wrong.

Thanks a lot.

Cheers, Nimish.

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 143,871 Points

Hi Nimish Hathalia

It looks like you're gaining a really good grasp of the concepts.

Let's start backwards with your 3rd point. You seem to have a solid understanding of which to use where and why. The only thing I think I'd point out is that when you talk about "chaining" with parentheses, that may be a be misleading as you're still using the () with a function. getElementById() is a function call and the () is holding the argument being passed to it. and the function declaration is using () to hold the parameter for the function.

Now back to the first point. My preference are double quotation marks, unless I need to use double quotations inside of a declared string. I then use single to enclose the string and double inside the string, rather than escaping the inner ones.
e.g. "A string with no quotes in side." ===> 'A string with a quote from someone saying "Use Doubles here" and so on.'
Really, in JavaScript, there is no real "rule-of-thumb". The important thing is to be consistent and always go by the style-sheet put out by the company or group you are working with. If you move to other languages, do a quick search on that language's style-guide as there may be some preference based on language (i.e. Python).
Accent mark, are really backticks. In JavaScript, they are used to create Template Literals, which contain placeholders. You can read more about Template Literals on MDN.

For your second point. Honestly, that's a bit more 'confusing' (for lack of a better word). Some languages demand them and will throw syntax errors without them. Some languages don't use a single one and throw syntax errors in you do use them. Python, for example allows them, but they aren't really used and are not standard practice. Java, they are essential... and then there is JavaScript.
In JavaScript, semicolons are Statement enders (not terminators). And for every person you find that say to avoid using them, you will find one that says you absolutely should use them. There are some places in JavaScript where they are needed (i.e. loop conditions/expressions), but for the most part, there are technically optional, as the interpreter automatically inserts the semicolon at the end of each line for you.
As for what is the convention? ... Well, that is currently a very highly debated topic. I personally use them, but I know many who don't. I think for now, this will come down to your personal preference. Just be consistent and follow your group (if you're woking with one).

Great questions!!

I hope I was able to help. :) :dizzy:

Hi Jason, Thanks a lot for taking the time and effort to summarise this. It does shed a lot of light on the practices.

I've had some exposure to elementary python in past for AI, ML and Data Sciences, and I'm absolutely in love with Python. JavaScript now, it seems is a much more 'loosely defined' language and even to my crude eyes as a novice, seems less elegant a language than Python. But I must concede simultaneously, that the things JavaScript can do, and how it becomes the binding glue between back-end, APIs, Business-logic/Middle-Tier as well and Front-End, is nothing short of a miracle.

For something that is entirely built on 0, 1, AND, OR and NOT logic, it's kind of funny there are no set rules or agree-upon syntax.

Next Stop: Learn more Python for server-side scripting and integrate Python with front-end stack.

Cheers, Nimish.

Nick Trabue
PRO
Nick Trabue
Pro Student 12,651 Points
  1. According to You Don't Know JS

Values that are included directly in the source code are called literals. string literals are surrounded by double quotes "..." or single quotes ('...') -- the only difference is stylistic preference. number and boolean literals are just presented as is (i.e., 42, true, etc.).

I think the real key is being consistent. You can force consistency by using plugins like prettier and eslint in your editor of choice. Prettier is a set of rules that you can turn on that will format your code on save or via command line script.

Thanks a lot Nick. I conclude consistency is the name of the game here!