Basic Javascript lexicon and syntax

This tutorial is a part of the Learn everything about Javascript in one course.

Whitespace

Is insignificant unless the one between words.

// only one whitespace is required between words
const myVar = 123

// extra whitespaces are ignored
const   myVar  =        123 // same meaning as above but look ugly :(

Comments

are ignored comments when computer runs your code. Comments are usually used to document or take note right on your code. Comments can be:

• Single line
• Inline
• Block

// this whole line is comment
const myVar = 123

const myVar = 123 // this is a valid inline comment too

/* block comment, everything from here
to
multiple lines
.
.
.
until here, is a block comment */
const myVar = 123

Optional semi-colon

const myVar = 123 // without ";" works
const myVar = 123; // with ";" also works

Identifier

is simply a name for variable or function. It must start with any of:

• letter [a-z] or [A-Z]
• underscore _
• dollar sign $.

// legal identifiers
const a = 123
const A = 123
const _myVar = 123
const $var = 123
const var123 = 123
const var_123 = 123

Case sensitive identifier

Javascript is case sensitive. That means myVar is a different identifier with MyVar or MYVAR.

// 3 valid, different identifiers
const myVar = 1
const MyVar = 2
const MYVAR = 3

Reserved words

Are words are reserved for Javascript syntax. You must not use these words to name your identifiers. Always reference to the source of this list in w3school website.

Words marked with* are new in ECMAScript 5 and 6. ECMAScript is just verions of Javascript. Same with iOS 5 or 6.

Variable declaration

Variable is what holds data in your code. In Javascript, you must declare a variable before using it. Keywords used to declare variable:

• const: constant variable, read-only
• let: re-assignable variable
• var: re-assignable variable, not popular to use anymore

// declare constant myVar
const myVar = 123
myVar = 456 // error, can't reassign

// declare re-assignable myStr
let myStr = 'hello world!'
myStr = 'I am learning Javascript!' // ok, re-assignable

// declare re-assignable myNum
let myNum = 678
myNum = 789 // ok, re-assignable

// declare variable with no initial value
let myObj

// declare multiple variables with no initial value
let myObj, myRegex

Literal

Is a data value that appears directly in a program. It's convenient and frequently used to declare variable with initial value by using literal.

// The following are all literals:
12 // number literal
"hello world" // string literal
true // Boolean literal
false // another Boolean literal
/javascript/gi // "regular expression" literal
null // null literal
undefined // undefined literal
[1, 2, 3] // array literal
{ a: 1, b: 'c' } // object literal

// declaring variable with literal
const myNum = 12

Function declaration

Function is a collection of code that can be called as many times as you want to do the same task. It is the process P in IPO. Function can be called with different inputs to produce different output.

// function to square up a number
function square(x) {
  return x*x
}

// function can be called with different input like 2, 3, ...
console.log('output:', square(2)) // output: 4
console.log('output:', square(3)) // output: 9

There are multiple ways to declare a function in Javascript.

// ES5 syntax, function delared this way is object function and constructable
function square(x) {
  // do something
}

// ES6 syntax with arrow
const square = (x) => {
  // do something
}

// ES6 syntax without arrow
const square = function(x) {
  // do something
}

// Also a legal function declaration
const squareFunc = function square(x) {
  // do something
  // note that we can call 'square' inside itself as we gave it a name
  square(someVar) // this can be useful in recursion
}

'use strict' directive

Is a directive usually put on top of a file to indicate the following code is in strict mode. Javascript is a "loose" language so it's easy to learn (hence less secured in some opinion). The purpose of strict mode is to make your Javascript more secured. Some features applied when in strict mode:

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.

'use strict'
// the rest of your code now in "strict mode"

A full list of features enabled in strict mode can be official found here. But don't stress yourself to memorize this list. You'll see it yourself if you need to enable strict mode after using Javascript more and more.

Summary

1. Make sure to read all of lexicons and have an impression of it so you can come back and reference in the future.
2. strict mode is meant to make your code more secured. But you only need to worry about it in some far future.