In this article, we are going to talk about the JavaScript set of rules that tells how the language should be written and how the code should be structured, passing through variable declarations, functions, and data types.

General aspects

JavaScript is a case-sensitive language, which means that the language differentiates upper-case declarations from lower-case declarations. Beyond that, it uses the Unicode character set.

In JavaScript, the programming instructions are called statements, and they are ended with a semicolon after (;), even though it is not required. In the code below we can see an example of the language case sensitivity - where variables have the same name but they are not the same, and, what is a statement.

var hello;
var Hello;

Functions

A function in JavaScript is a block of code that is based on a set of statements responsible for performing a task.

Function declarations

In JavaScript, we have the keyword function that is a way to declare functions, beyond that we also have arrow functions.

A function declaration, also known as function definition or function statement, refers to when we are creating a named function and assigning it statements. The syntax for regular functions consists of the keyword function, followed by its name an open and closing parentheses containing the arguments (if there are any), and a block of code. The process for an arrow function is similar but with a few differences.

// Regular function that receives two values as params and
// returns the multiplication of those

function multiply(x, y) {
    return x * y;
}

// Arrow function that receives two values as params and
// returns the sum of those
const sum = (x, y) => {
    return x + y;
}

Function expressions

A function can also be assigned to a variable, and this is called a function expression. When doing function expressions we can create anonymous functions, which are functions without a name, or named functions.

// Anonymous function expression, we do not assign a name to the function
const sum = function(x, y) {
    return x + y;
}

// Named function expression
const multiply = function mul(x, y) {
    return x * y;
}

Function calling

We saw in the examples above how to declare a function or even a function expression, but we didn't yet have the chance to see how to call a function.

Before that, I do think that it is important to highlight something. When we are using the return keyword in a function this means that we are specifying the value that the function should output or produce, so we can store it in a variable or something like.

// calling functions
multiply(2, 3);

// since the multiply function returns the multiplication value
// we can store it in a variable, in the example below, result = 6 
const result = multiply(2, 3);

Immediately Invoked Function Expression (IIFE)

IIFE are function expressions that as soon as they are defined are also called.

// using the function keyword
(function() {
    console.log('This is an IIFE');
})();

// as arrow functions
(() => {
    console.log('This is also an IIFE');
})();

Data Types

JavaScript has 8 total types as it today, they are:

1. String - A sequence of characters that represent a text value, they can be declared between single quotes or double quotes. For example: 'Hello' or "Hello";

2. Number - An integer or floating point number. For example: 10.50
   or 1001;

3. Boolean - true and false values;

4. Null - A special keyword denoting a null value.

5. Undefined - A top-level property when a value is not defined.

6. BigInt - Represents integers of arbitrary precision. It allows the representation of numbers beyond the capability of the Number type.

7. Symbol - A unique and immutable primitive data type, often used as a property key in objects to avoid naming conflicts.

8. Object - A special data type that also contains other data types inside:

   1. An object

   2. An array

   3. A date

Variables

JavaScript has three types of variable declaration.

• var - A variable with function scope, can be declared without being initialized and can be reassigned and re-initialized.

• let - A variable with block scope, can be declared without being initialized and can be reassigned.

• const - A variable with block scope, can't be declared without being initialized and can't be reassigned.

  ⚠

  Don't worry about understanding the variable's scope and the difference between variable types for now; this subject will be addressed in another moment.

This is how you can declare these variables:

var x = 17;
let y = 50;
const bar = "foo";

Operators

We have several types of operators in JavaScript, we are going to go through the arithmetic, relational, equality, logical**,** and conditional operators. These are the most used type of operators in the language, but there are more types.

Arithmetic operators

Responsible for doing operations with numerical values.

• ** - Exponentiation operator

• * - Multiplication operator.

• / - Division operator.

• % - Remainder operator.

• + - Addition operator. (if used with strings it will concatenate them)

• - - Subtraction operator.

Relational operators

Responsible for comparison operands returning a boolean value depending on the comparison result

• < - Less than operator.

• > - Greater than operator.

• <= - Less than or equal operator.

• >= - Greater than or equal operator.

Equality operators

It is responsible for evaluating the equality of values, and will always return a boolean depending on the result.

• == - Equality operator.

• != - Inequality operator.

• === - Strict equality operator.

• !== - Strict inequality operator.

Logical operators

• && - Logical AND.

• || - Logical OR.

• ?? - Nullish Coalescing Operator: This operator is used to provide a default value for a variable if its current value is null or undefined. Unlike the logical OR operator (`||`), the nullish coalescing operator strictly checks for null or undefined.

// since nullish is equal null, someVariable will receive "Another value"
const nullish = null;
const someVariable = nullish ?? "Another value";

Conditional operator

As a conditional operator, we have the ternary. This kind of operator will return a value depending on whether the condition is achieved or not. (condition ? value if true: value if false)

const value = true;
const ternaryValue = value === true ? 10 : 20;

Comments

We can also add comments to our JavaScript code, the comments can be added as multi-line or single-line, like the example below.

// This is a single line comment

/*
This is a multi-line comment
*/