Javascript Syntax

Hey guys! This article represents my current understanding of the Javascript Syntax.

This section gives a little background on JavaScript to help you understand why it is the way it is.

JavaScript and ECMAScript

What is ECMAScript i.e. ES?

ECMAScript is a standard for a scripting language and the Javascript language is based on the ECMAScript standard.

Is Javascript exactly the same as ECMAScript

  • No, Javascript is not exactly equivalent to ECMAScript.

  • The core features of Javascript are based on the ECMAScript standard, but Javascript also has other additional features that are not in the ECMA specifications/standard.

Imp point : JavaScript = ECMAScript + DOM API;

DOM API like: document.getElementById('id');

Why is it called ECMAScript?

  • Javascript was originally created at Netscape, and they wanted to standardize the language. So, they submitted the language to the European Computer Manufacturer’s Association (ECMA) for standardization.

  • But, there were trademark issues with the name Javascript, and the standard became called ECMAScript, which is the name it holds today as well.

  • But, there were trademark issues with the name Javascript, and the standard became called ECMAScript, which is the name it holds today as well.

ECMA-262

This is a standard published by Ecma International. It contains the specification for a general-purpose scripting language.

Screenshot 2020-09-25 at 10.17.15 PM.png

The specification defined in ECMA-262 for creating a general-purpose scripting language.

Synonym: ECMAScript specification

While ECMA-262 is the name of the standard, it represents the scripting language specification ECMAScript.

ECMAScript provides the rules, details, and guidelines that a scripting language must observe to be considered ECMAScript compliant.

Babel

A transpiler that can convert ES6 code to ES5 code.

Babel does the same and it is called a transpiler that transpiles the code in the ECMA Script version that we want.

It has features like presets and plugins, which configure the ECMA version we need to transpile our code.

Concerned developers can use Babel to convert their ES6 code to a functionally equivalent version that only uses ES5 features. All of the major browsers fully support ES5, so they can run the code without any issues.

Refer Babel for more information.

Javascript Syntax

JavaScript syntax is the set of rules, how JavaScript programs are constructed:

An Overview of the Syntax

A few examples of syntax:

// Two slashes start single-line comments

var x;  // declaring a variable

x = 4 + y;  // assigning a value to the variable `x`

foo(x, y);  // calling function `foo` with parameters `x` and `y`
obj.bar(3);  // calling method `bar` of object `obj`

// A conditional statement
if (x === 0) {  // Is `x` equal to zero?
    x = 123;
}

// Defining function `car` with parameters `a` and `b`
function car(a, b) {
    return a + b;
}

Note the two different uses of the equals sign:

  1. A single equals sign (=) is used to assign a value to a variable.
  2. A triple equals sign (===) is used to compare two values (see Equality Operators).

Statements Versus Expressions

To understand JavaScript’s syntax, you should know that it has two major syntactic categories: statements and expressions:

  • Statements “do things.” A program is a sequence of statements. Here is an example of a statement, which declares (creates) a variable yoo:
var yoo;
  • Expressions produce values. They are function arguments, the right side of an assignment, etc. Here’s an example of an expression:
3 * 7

Semicolons

Semicolons are optional in JavaScript. However, I recommend always including them, because otherwise, JavaScript can guess wrong about the end of a statement.

Semicolons terminate statements, but not blocks. There is one case where you will see a semicolon after a block: a function expression is an expression that ends with a block. If such an expression comes last in a statement, it is followed by a semicolon:

// Pattern: var _ = ___;
var x = 3 * 7;
var f = function () { };  // function expr. inside var decl.

Comments

JavaScript has two kinds of comments: single-lin comments and multiline comments. Single-line comments start with // and are terminated by the end of the line:

x++; // single-line comment

Multiline comments are delimited by /* and */:

/* This is
   a multiline
   comment.
 */

Javascript Keywords

The keywords are the reserved words that have special meaning in JavaScript.

Variables

A JavaScript variable is the simple name of the storage location where data to be stored. There are two types of variables in JavaScript which are listed below:

Variables in JavaScript are declared before they are used:

var yoo = 6;

Loops

Loops are handy, if you want to run the same code over and over again, each time with a different value.

JavaScript supports different kinds of loops:

  1. for - loops through a block of code a number of times
  2. for/in - loops through the properties of an object
  3. for/of - loops through the values of an iterable object
  4. while - loops through a block of code while a specified condition is true
  5. do/while - also loops through a block of code while a specified condition is true

The following identifiers are reserved words—they are part of the syntax and can’t be used as variable names (including function names and parameter names):

Screenshot 2020-09-25 at 3.59.51 PM.png

The following three identifiers are not reserved words, but you should treat them as if they were:

Screenshot 2020-09-25 at 4.03.21 PM.png

JavaScript Operator:

JavaScript operators are symbols that are used to compute the value or in other word we can perform operations on operands.

Arithmetic operators ( +, -, *, / ) are used to compute the value and Assignment operator ( =, +=, %= ) are used to assign the values to variables.

// Variable Declarations 
var x, y, sum; 

// Assign value to the variables 
x = 3; 
y = 23; 

// Use arithmetic operator to 
// add two numbers 
sum = x + y;

JavaScript is Case Sensitive

All JavaScript identifiers are case sensitive.

The variables lastName and lastname, are two different variables:

var lastname, lastName;
lastName = "Doe";
lastname = "Peterson";

JavaScript does not interpret VAR or Var as the keyword var.

JavaScript and Camel Case

Historically, programmers have used different ways of joining multiple words into one variable name:

Hyphens:

first-name, last-name, master-card, inter-city.

Hyphens are not allowed in JavaScript. They are reserved for subtractions.

Underscore:

  1. first_name, last_name, master_card, inter_city.

Upper Camel Case (Pascal Case)

  1. FirstName, LastName, MasterCard, InterCity.

Lower Camel Case:

JavaScript programmers tend to use camel case that starts with a lowercase letter:

firstName, lastName, masterCard, interCity.

JavaScript Data types

To adapt knowledge in JavaScript data types, go through my other blog DataTypes.

Categorizing Values Using typeof

The JavaScript typeof operator can be used to find the type of a JavaScript variable or an expression. It can be used with primitive and non-primitive data types alike

The following table lists all results of typeof:

Screenshot 2020-09-25 at 4.09.10 PM.png

Sloppy Mode

Unlike Java or C#, JavaScript is a loosely typed language, which makes it a very forgiving language.

On the surface, this may seem like a good thing, but it can allow for some rule-bending that often leads to unintended consequences down the line. This has earned the default JavaScript environment the title of sloppy mode.*

Strict mode

ECMAScript 5 has a strict mode that results in cleaner JavaScript, with fewer unsafe features, more warnings, and more logical behavior. The normal (nonstrict) mode is sometimes called “sloppy mode.”

Switching on Strict Mode

JavaScript allows strictness of code using use strict with ECMAScript 5 or later. Write "use strict" at the top of JavaScript code or in a function.

You can apply strict mode to an entire document or to individual functions. To invoke strict mode over the entire script, write the string literal use strict on the first line of your document above all else.

// apply strict mode to entire script
'use strict';
let x= "So this is strict mode.";
Example: strict mode:

"use strict";

var x = 1; // valid in strict mode
y = 1; // invalid in strict mode

What (Specifically) Does Strict Mode Do?

In normal JavaScript, if you declare a variable without let, const, or var, it will automatically be declared as a global variable. Strict mode prevents this.

1. Eliminates some JavaScript silent errors by changing them to throw errors.

2. Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that’s not strict mode.

3. Prohibits some syntax likely to be defined in future versions of ECMAScript. Let’s break down how to implement strict mode and what changes it makes.

Let’s break down how to implement strict mode and what changes it makes.

The strict mode in JavaScript does not allow the following things:

  1. Use of undefined variables
  2. Use of reserved keywords as variable or function name
  3. Duplicate properties of an object
  4. Duplicate parameters of the function
  5. Assign values to read-only properties
  6. Modifying arguments object
  7. Octal numeric literals
  8. With statement
  9. Eval function to create a variable

Precautions aside, strict mode is very much worth it! Writing more intentional code is always beneficial and will save you from many future headaches.

Conclusion

I know we’ve all had fun here, but that was a lot of information to digest.

Please feel free to leave any questions, comments, suggestions, or concerns below.

If this article was helpful,Tweet it

Thank you very much for reading!

No Comments Yet