Are they really necessary? They’re ugly! History JavaScript is not perfect, although it has significantly improved since its inception at Netscape (early browser). It was envisioned as a simpler alternative to Java for building scripts on the web. Marc Andreessen (Netscape co-founder) recruited Brendan Eich to build a prototype, which he did in 10 days. JavaScript was born. Since its humble beginnings, JavaScript is now THE language of the web. Given that the language was built to be accessible to beginners, it has some unfortunate quirks that we need to watch out for and semicolons are likely the first you will encounter. Semicolons Beginners are told to put semicolons at the end of every line (or “ ”) to signify that a line ends, without much explanation. statement var i = 0; // goodvar j = 0 // bad Other programming languages don’t need them so why does JavaScript? JavaScript doesn’t pay attention to spacing (to make it “simpler”), so it doesn’t know that you are on a new line, it needs a semicolon to know that. But when I leave out semicolons, my code still runs! var i = 0i // 0 It works a lot of the time, but not ! JavaScript uses “Automatic Semicolon Insertion” to help beginners who may have forgotten to place a semicolon. Above code is interpreted as: does always var i = 0;i; The issue is that there are exceptions. Beginners are encouraged to use semicolons so they don’t have to learn about these exceptions, but let’s go over them. “Automatic Semicolon Insertion” Exceptions Lines beginning with " (" // initialvar i = 0;(function(){console.log(i)})(); // 0 // no semicolonvar i = 0(function(){console.log(i)})() // TypeError: 0 is not a function // how engine sees above0() // TypeError: 0 is not a function JavaScript tries its best to determine the end of a line but it isn’t sure if you are trying to call a function with the input between the on the next line such as . Clearly is not a function, it’s a number, so we get an error. 0 () 0() 0 Note: I used an “immediately invoked function” because it requires parentheses around it to work, see this post for a quick explanation. Lines beginning with " [" var i = 0;[1,2,3].pop(); // 3 var i = 0[1,2,3].pop(); // TypeError: Cannot read property 'pop' of undefined 0[1,2,3]; // undefined The interpreter wasn’t sure if you finished expressing the value of . It thought maybe you would try to index an array called such as but is not an array so the last line is . We get an error trying to call an method called on , which doesn’t have any properties. i 0 0[1] 0 undefined Array pop undefined Statements Return function foo() {return1} foo() // undefined was run as so the function returned nothing, which is . A semicolon is automatically inserted at the end of a return statement so make sure to keep the values you are returning on the same line (such as ) as the lines below won’t be executed! return return; undefined return 1 return Interesting Cases without Automatic Insertion Function Declarations, Conditionals, Loops Semicolons inserted (automatically) after “ ” but not after “function declarations”. are function expressions // function expressionvar foo = function() {return 0;}; NOT inserted here: // function declarationfunction foo() {return 1} // conditional statementsif (condition) {console.log("true");} else {console.log("false");} // loopsfor (var i = 0; i < 10; i++) {console.log(i);} Semicolons are not inserted after squiggly brackets . { }, except for objects // semicolons inserted after objectvar obj = {}; So…can I stop using those damn things!? Many well respected programmers avoid cluttering their code with semicolons. If you’re now confident you understand how they work, you have the option of omitting them as well! Personally, I believe that using semicolons makes your code more readable to you and future readers (also makes it look legit AF). Additionally you minimize the risk of running into semicolon related errors which is especially important for beginners (then again, you’re unlikely to run into those obscure exceptions). I also like how they put an end-cap on a statement, just like this period does. Please enjoy this by (one of the “well respected programmers who don’t use semicolons”) which was the inspiration for this post! I recommend his channel. I’m addicted to it. Send help! video Mattias Petter Johansson highly Fun Fun Function Please comment with feedback/questions and smash that clap button!
