Let’s Learn Coding: The Basic Syntax Overview

Learn Coding with Modern JavaScript

13 min readSep 5, 2017

In a previous article, I gave a basic-level introduction on the concepts of expressions, variables, objects, and functions. In this article, we will do a deeper dive into these concepts plus a few new ones. All concepts are simple, but some of them depend on logic/math knowledge. Also, while the article introduces basic concepts, it is a deep dive into these basic concepts. You might need to read this article a few times. Please ask questions about anything that is not clear in the comments below.

Statements and Expressions

We have seen an expression in the previous article; it was:

5 + 2

An expression is a section in code that produces a value. You can think of this as the relation between:

One Oxygen atom mixed with two Hydrogen atoms (expression)
One Water molecule (value)

// The expression
1 Oxygen atom + 2 Hydrogen atoms// The value
1 Water molecule

We can use expressions (values) in many places. Most commonly you will see them on the right-hand side (RHS) of the assignment operator =:

someVar = someExpression;

Warning: I’ll use the abbreviations RHS and LHS (left-hand side) from now on.

There is another syntax category in JavaScript that we call statements. Statements are not expressions because they do not produce values. They just do things. Here is an example statement:

let sum;

This statement just creates the variable sum in memory. It does not evaluate to anything beyond that. In fact, we cannot use a statement as the RHS of an assignment operator. For example, we cannot do this:

someVar = let sum; // Error!

The details about what can go on the LHS and RHS of an assignment operator might be boring, but it is an essential thing to understand. For now, remember this, anything that you can use on the RHS of an assignment operator is an expression (or value, eventually) and anything you cannot use there is a statement.

Values and Keywords

Every value has a type. For example, a value can be a number, character, or string of characters forming words and sentences:

// Example of values42      // Number value
'A'     // One Character
'Hello' // String

Note how the character and string above are surrounded by single quotes. You can also use double quotes if you prefer. Those quotes are not optional for strings in programming because without them the computer is going to think what you wrote is a keyword or a variable.

A keyword is a word with a special meaning. For example, we have seen the keyword let. It means define a variable. What if I want to write the sentence “let me understand this” somewhere in code. Without using quotes, you will get an error:

let me understand this // will give an error

This is because the computer is trying to define a variable me and the rest of that line is invalid syntax (after “let me”, the computer expects a semicolon, a comma, or an = operator. We gave it an unexpected identifier!)

However, if we surround the sentence with single or double quotes, the word let becomes part of that string (and not the usual keyword)

"let me understand this" // valid syntax

Some of the popular keywords in JavaScript include: let, const, if, else, switch, try, catch, return, true, false, class, function, for, and this. You can see the full list here.

You cannot use keywords as names for variables. The following will throw an error:

let function = 5 + 2; // Error

When the computer sees the word function it wants to define a function, so the use of the token function after the token let was unexpected.

But even if we are not using keywords in our sentences, the computer will try to lookup any unquoted word as either a keyword or a variable and it will complain if it cannot find it.

what // Error

We started a line with an unquoted what which is not a keyword, so the computer looks it up as a variable and complains that what is not defined.

Boolean Values

One of the most common types of values in programming is the boolean type. It is the type that determines if an expression is true or false. This type is used in conditional statements (which are explained later in this article).

The boolean type has two explicit values: true and false. It also has many other implicit values. Every other type in JavaScript can be converted to a boolean. JavaScript does a lot of auto-conversion between types.

For now, just know that ALL values in JavaScript are also considered true except this short list: undefined, null, 0, “”, NaN, and false itself.

In fact, JavaScript has a Boolean function that can explicitly convert values to their boolean equivalent. You can use it to see how the five special values above are all converted as false while everything else is true:

Boolean("")        // false
Boolean(0)         // false
Boolean(undefined) // false
Boolean(null)      // false
Boolean(NaN)       // falseBoolean(1)         // true
Boolean("Hello")   // true
Boolean(Math.PI)   // true
Boolean(Boolean)   // true

The special NaN value means Not-A-Number. No Joke. For example, in Mathematics, there is no number that can represent the square root of -1. That is why in JavaScript Math.sqrt(-1) will equal NaN.

You can also get a NaN in many other situations. For example, try to divide a string by a number.

The null and undefined Values

The keywords null and undefined are two special keywords in JavaScript that you need to understand right now. They represent a similar concept: the absence of value.

So the following quote is going to be confusing:

null and undefined are both values that represent the absence of values

Weird. I know.

Let me tell you the story of a variable x.

A variable x starts by being undeclared (note how I did not use the term undefined yet). When we use the let keyword, we declare a variable.

let x;

Now x is declared, but it is now undefined. The value inside x is still undefined, but x itself, as a reference to a space in memory, is declared. That space in memory does not have a value.

When we put a value in x, we would be defining x.

x = 42;

With that, x is now defined. It has the defined value, 42.

We can revert x to not be defined, if we need to, using the undefined value:

x = undefined;

Or using the null value:

x = null;

Most other programming languages have only one type to represent the absence of a value. However, for many reasons, mostly historical ones, JavaScript has two types. Sometimes, that is actually helpful. We can use undefined to represent the unexpected and system-level absence of a value and use null to represent the normal and program-level absence of a value. For example, consider this object:

let obj = {
  a: 1,
  b: null,
};

We have three types of properties:

The obj.a property is defined and holds the value 1
The obj.b property is defined but has no value (it’s intentional)
The obj.c property is undefined (it’s an expected property)

So, basically, if you want to check whether a certain object property is defined but empty or not defined at all, null and undefined can be used for that purpose.

Array and Object Values

We have seen a few objects so far. An object is a special value type that holds a collection of other value types and each value gets a unique identifier (object property).

There is one other special value type that can hold a collection of other value types. It is called the Array type.

Just like objects, arrays hold a collection of other values but the identifiers that arrays use for those values are just their positional order, which starts with 0 for the first element.

Counting from 0 is weird, but you need to get used to it. The Xth element has an index value of X — 1.

We create arrays and access their elements using the square brackets []. Here is an example array that holds four different numeric values:

let primesUnder10 = [2, 3, 5, 7];

The identifier for the first prime number is its position in the array: 0. And so on:

// Position  // Value
0            2
1            3
2            5
3            7

We can access individual values using their positions:

primesUnder10[0]  // 2
primesUnder10[2]  // 5

The array[position] syntax is an example of an expression that produces a value. Anywhere we can use a value, we can use that syntax as well. For example, I can sum the first three prime numbers using this expression:

primesUnder10[0] + primesUnder10[1] + primesUnder10[2]  // 10

Arrays can hold other value types:

let hello = ['h', 'e', 'l', 'l', 'o'];

And they can hold different value types, including objects, arrays, and even functions:

let mix = [1, 'A', true, undefined, {}, [], function x() {}];

The last value in the mix array above is a dummy function (one that does nothing). I can call that function directly from its position in the array: mix[6](). We were able to use a function as an element in this mix array because functions are also values.

There are a few other special types in JavaScript that can be used to represent a collection, including Map and Set. I will cover these types and how they are different than objects and arrays in a future article.

Operators

Operators are special characters (or words in some cases) that we can use between two operands (which are basically values) to perform an operation. The 2-values operators are actually categorized as binary operators. In the next two sections, you’ll see an example of a unary operator (!) which works on a single operand and a ternary operator (? :) which works on three operands.

You have seen examples of binary operators like the assignment (=), addition (+), multiplication (*), division (/), and subtraction (-) operators, but there is more. For example, two other popular binary operators are the logical operators && and ||.

The && operator sits between two values (or expressions) and performs the AND logic gate. The || operator performs the OR logic gate. Each of them has four possible outcomes:

true  &&  true   // true
true  &&  false  // false
false &&  true   // false
false &&  false  // falsetrue  ||  true   // true
true  ||  false  // true
false ||  true   // true
false ||  false  // false

You actually need to memorize this table. If you remember the bolded unique case in each section you will remember the rest.

You can imagine how each true/false value above can also be an actual value because the && and || operators will do type conversion:

0 && anything   // Equivalent to false because Boolean(0) is false
42 || anything  // Equivalent to true because Boolean(42) is true

Of course, the result of any operation is also a value, which means we can combine operator calls together to do more complex operations. Try to figure out the result of these combined operations:

2 * 10 + 22true && true || false(3 * Math.PI + Math.PI) / Math.PI

Other commonly used binary operators are the greater than (>), less than (<), and the equality operators described next.

Strict and Loose Equality Operators

JavaScript has many operators that we can use to compare values. They all produce either true or false based on their operands’ equality.

There is the loose equality operator, ==, which should generally be avoided (because, well, someone named it loose!):

3 == 3     // true.
3 == '3'   // Also true.3 == 4     // false

As you can see, the loose equality operator also does the implicit type conversion thing and does not care about the different operand value types.

On the other hand, the strict equality operator (===) compares two values for equality without any implicit type conversations:

3 === 3        // Sure
3 === '3'      // No3 === (1 + 2)  // true

Of course, there are also loose and strict inequality operators (!= and !==).

By the way, the character ! (on its own) is used as a prefix logical operator that means NOT. It’s an example of a unary operator that operates on a single value.

!true  // false
!0     // true

The famous if-statement

One statement that is very popular in programming languages is the if-statement. You have probably heard of it or seen a few examples.

Here is the official syntax of an if-statement in JavaScript:

if (expression) {
  statementA1;
  statementA2;
  ...
} else {
  statementB1;
  statementB2;
  ...
}

The else part is optional, but it will help you understand the if part.

We know what an expression is and we know what a statement is. However, a more accurate syntax description for an if-statement would describe the expression as a condition: something that’s either true or false.

But remember that everything in JavaScript is either true or false. The if-statement’s expression value is no exception.

The if-statement above will first convert the expression in parenthesis to a boolean value. If that boolean value is true, it will execute statementA1, statementA2, …etc and it will not execute statementB1, statementB2, …etc. If the boolean value is false, it will do the exact opposite.

The if-statement is popular because it enables conditional logic. It enables us to execute certain code only when a certain condition applies. For example, let’s assume that we want a function that doubles the value of its single argument only when that argument is an odd number. The function should not double the value for even numbers. This function can be easily written with an if-statement:

function doubleOddOnly(number) {
  if (number % 2 === 1) {
    return 2 * number;
  }
  
  return number;
}// Try it with
doubleOddOnly(3)
doubleOddOnly(10)

We were able to check the oddity of a number using the modulus math operator (%), which gives the remainder of a division operation:

5 % 2  // 1
6 % 2  // 0
11 % 3 // 2

If the remainder, when dividing the number by 2 is 1 (a boolean expression that uses the strict equality operator), the doubleOddOnly function will return the number argument multiplied by 2. Otherwise, it will return the number argument as is.

Note that we did not need to use an else section for that if statement because we used return statements. A return statement is the last statement executed in a function. When the function executes a return statement it will not execute the rest of the code after that. That is why the second return statement is equivalent to having an else section for the if statement.

I included a section about the if-statement here because it is an example of a statement! An if-statement does not evaluate to anything. It only does its conditional picking of other statements. For example, we cannot use an if-statement on the RHS of the assignment operator:

let result = if (3 == '3') { 42 } else { 0 }; // Syntax Error

While writing the whole if-statement on one line is OK (spaces and new lines, in general, are ignored by the computer), the fact that we used that line on the RHS of the assignment will give an unexpected token error.

Other languages (like Ruby for example) treat the if-statement as an expression as well, but In JavaScript, an if-statement is just a statement.

There is another syntax that we can use to do the conditional if-logic within an expression. It’s called the ternary operator (because it operates on three operands). To do so, we need to use two different characters (? and :):

condition ? if-true-value : if-false-value

Since this is an expression, it will produce the if-true-value if the condition part is true, and the if-false-value if the condition part is false.

The problematic if-statement example above can be easily and correctly written using the ternary operator:

let result = (3 == '3') ? 42 : 0; // No problem

What is the value of result above, by the way?

Your Homework

1 — Write a function that will determine if a number is odd or even.

Examples of expected output:

oddOrEven(17)    // should return 'odd';
oddOrEven(100)   // should return 'even';
oddOrEven(5 + 4) // should return 'odd';

Playground Template:

Here is the solution.

2 — Determine the output of the following code:

function mystery(arg1, arg2) {
  if (arg1 && arg2) {
    return 'Hello';
  }  return (arg2 % 3 === 1) ? 'World' : ', ';
}mystery(null, 10) + mystery(true, 0) + mystery(10, "null");

Do not copy/paste the code to evaluate it, and do not guess. Parse the code line-by-line and follow what it does.