Special Cases for Semicolon Free Programming

{
  // with 
  const a = 1;
  const b = 2;
}

{
  // without
  const a = 1
  const b = 2
}

{
  // with
  const a = 1;
  const b = 2;
  (a + b).toString(); // '3'
}

{
  // without
  const a = 1
  const b = 2
  (a + b).toString() // TypeError: 2 is not a function
}

{
  // without
  const a = 1;
  const b = 2(a + b).toString(); // TypeError: 2 is not a function
}

{
  // without - fixed
  const a = 1
  const b = 2;
  (a + b).toString() // '3'
}

{
  // without - fixed
  const a = 1
  const b = 2
  ;(a + b).toString() // '3'
}

{
  // with 
  const a = 1;
  const b = 2;
  [a, b].map(x => x * 2); // [2, 4]
}

{
  // without 
  const a = 1
  const b = 2
  [a, b].map(x => x * 2) // ReferenceError: Cannot access 'b' before initialization
}

{
  // without 
  const a = 1
  const b = 2[a, b].map(x => x * 2) // ReferenceError: Cannot access 'b' before initialization
}

const value = (1, 2);
console.log(value); // 2

{
  // without
  const a = 1
  const b = 2[b].map(x => x * 2) // ReferenceError: Cannot access 'b' before initialization
}

{
  // without - fixed
  const a = 1
  const b = 2
  ;[a, b].map(x => x * 2) // [2, 4]
}

Resources

Prettier

Transcript

00:00

As you work on JavaScript code base with other engineers, there will definitely be some stylistic choices that you will all need to conform to. A lot of these are fairly universal across JavaScript projects, but a common one that can result in some friction amongst team members is semicolons versus no semicolons. You should use whatever your project already uses, and this means that as professional engineers, you should be familiar with the special patterns to follow. For semicolon free JavaScript programming. For much of JavaScript programming, it actually doesn't matter if we do use semicolons at the end of every line or if we do not.

00:34

People that use semicolons argue that it conveys a clear intent of an end of a statement. Various people that do not use semicolons argue that it just looks cleaner as there is less character noise. For this particular example, JavaScript doesn't care. The code will behave exactly the same with or without semicolons because without semicolons, JavaScript will automatically insert those semicolons for us using a thing called automatic semicolon insertion or a s I. However, let's consider another example with an additional statement. In this particular case, if you were to remove the semicolons,

01:10

the core will actually error out with type error to is not a function. The reason why this is going to error out is that the JavaScript passer in the absence of semicolons will view this code as two statements and not three, and now you can see why this code is erroring out because yes, two is not a function. The solution is pretty simple. We can add a semicolon whenever we end up in such a situation, but this means that we actively need to care about the contents of the next line. The smart fix is to put the semicolon at the start of any line that initiates

01:44

with the parenthesis to prevent any association with any code that might come before it. If we decide to go semicolon free and jow script, here is another scenario that we need to know about. This code would work fine if we had semicolons at the end of every line. However, it fails if we do not do so. The reason of course is that the JavaScript passer is passing it as two statements instead of three resulting in an unexpected error cannot access B before initialization. The solution for this is the same as the solution that we have for parenthesis. If a line starts with square brackets, prefix it with the semicolon.

02:19

If all you've ever done is semicolon based programming as an example, like myself, someone who programs in multiple programming languages, then this can look a bit weird. But if you want to go semicolon free in JavaScript, then these simple tricks do become second nature. A very common code for method that people use to bring style consistency to a code base is prettier and most use it with the default options, which actually agree with my personal preference as well. If you look at the options that Prettier provides, one of them is regarding semicolons. There are two valid values, semicolons true and semicolons false. The default is semicolons true.

02:55

If we set it to false, then prettier, we'll add semicolons at the starting of Those lines that require it, which are lines that start with Es and square brackets, and we can see it in action. If we jump into the prettier playground based in some code that we know works perfectly fine if we always use semicolons, and right now the output is the same as the input. However, if you modify the options to use no semicolons, you can see in the output that prettier has removed the semicolons and added them at the start of the lines that require it. This means that if you decide to use prettier with semicolon free programming,

03:29

you are less likely to make any silly mistakes, even though I personally use semicolons. If you are working on a code base that doesn't use them, you can now be confident that it is a pattern that you are familiar with. As always, thank you for joining me and I will see you in the next one.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional Modern JavaScript Lessons

Semicolon Free Coding in JavaScript

Subscription Required

Special Cases for Semicolon Free Programming

Resources

Transcript

Professional Modern JavaScript