JavaScript : An introduction

LiveScript, as it was to be called originally, was created in 1995, being first released in the subsequent year. After submission to the European standards organization Ecma international, ECMAScript was born, defining a bunch of standards and features to be used in JavaScript. Despite these standards being set, it wasn't until 2009 and recently 2015 that they helped shape the language in what it is today.

Despite sharing the prefix, JavaScript has nothing to do with Java.

What is JavaScript?

JavaScript is a language with first-class functions. First-class functions mean that the functions can be treated like any other variable. That's the same thing as saying that functions can be returned from functions, assigned as values to variables, and receive them as parameters on your functions.

One thing you may or may not know is that JavaScript supports object-oriented programming and many other programming paradigms. Depending on the host environment, JavaScript can be interpreted or just-in-time compiled.

Values and Types

In JavaScript, the created variables do not have a type, its values do.

The primitive types in JavaScript are the following:

• Number
• Boolean
• String
• Object
• Null
• Undefined
• Symbol

The first four types should be familiar to everyone.

Number is used to define a numerical value on JavaScript. Contrary to other languages, JavaScript doesn't have the notion of integer or decimal values, and this should be taken into account when doing some mathematical operations in JavaScript.

String is used to define characters or a sequence of characters. In JavaScript, they can be declared inside of single quotes or double-quotes.

Boolean is used to define boolean logic. This logic can be represented through the reserved keywords, true or false.

Object is used to define an object wrapper. Every non-primitive type in JavaScript is said to be a subtype of Object. Some examples are Function, Array, or Date Objects.

Undefined and Null represent the absence of value in JavaScript. Undefined is used to represent the unintentional absence of a value, while Null represents the intentional absence of value.

Last but not least, the most recently introduced type is Symbol. Symbols are used to define a unique value. This means that even if you add the same number or string to a Symbol, they'll always be different from each other.

Using the operator typeof, we can obtain a string with the type of the given value.

Example :

typeof 123 // number

typeof "dEexmas" // string

typeof true // boolean

typeof Symbol(5) // symbol

typeof undefined // undefined

typeof null // object

typeof { user: "dEexmas" } // object

typeof [1, 2, 3] // object

The example should be pretty straight forward if you read the descriptions above. One thing that may cause confusion is why is the typeof null returning an object?

This is a well known historical bug in JavaScript, and because of some legacy reasons, it can't be fixed.

Variables

Variables in JavaScript can be created using one of three keywords: var, let, or const.

let and const were introduced in ECMAScript 2015 (ES6) and allow us to declare block-scoped variables. The only difference between let and const is that const is meant to be used on variables whose values aren't intended to change.

Example:

var str;
str = 'hello world';

let names = ['dEexmas', 'Learning'];

const cantChangeWontChange = 2;
cantChangeWontChange = 3; // this will throw an error

Loops

Loops allow executing specific tasks a given number of times. This may be, for example, moving between the elements of an array.

JavaScript supports the traditional for and while loops. More recently (ES6), for…of was introduced and allowed looping between elements of an array or map to be more readable and straightforward than before.

Example:

var names = ["Flash", "is", "Barry", "Alen"]

for (let name of names) {
    console.log(name)
}

for (let i = 0; i < names.length; i++) {
    console.log(names[i]);
}

while (names.length > 0) {
    let name = names.shift();
    console.log(name)
}

Functions

As mentioned above, functions are sub-types of objects, and, thanks to this, they can have properties, methods and also be assigned to variables.

Functions are created through the function keyword or, thanks to ES6, through a fat arrow ( => ).

Bellow, we can see various types of function declarations in JavaScript.

function logMessage(message) {
    console.log(message);
}
logMessage("Flash")

function subtraction(leftSide, rightSide) {
    return leftSide - rightSide;
}

let subtracted = subtraction(600, 500);
console.log(subtracted)

const hello = (message) => {
    console.log(message)
}
hello("Hello World")


const helloWorld = (message = "Hello World") => {
    console.log(message)
}
helloWorld()


function willCallCallback(callback) {
    callback()
}

willCallCallback(() => {
    console.log("I'm a callback function")
})

Let's now analyze each example.

function logMessage(message) {
    console.log(message);
}
logMessage("Flash")

In the first one, we can see a procedure (Procedures are functions that don't return anything) that receives a parameter called message, and by calling the global object console and it's log method, the parameter is displayed in the user console. It's important to mention that even though there isn't a return statement, this function returns undefined by omission.

function subtraction(leftSide, rightSide) {
    return leftSide - rightSide;
}

let subtracted = subtraction(600, 500);
console.log(subtracted)

Continuing to the second function, here we receive two parameters and return the subtraction of them. It's also in this example that we see that a function call can be saved inside a variable. After that assignment, we can call subtracted all over our block and get the output of the subtraction between the given numbers.

const hello = (message) => {
    console.log(message)
}
hello("Hello World")

const helloWorld = (message = "Hello World") => {
    console.log(message)
}
helloWorld()

The third and fourth functions show us an example of an arrow function. These arrow functions work exactly like the procedure in the first example.

Paying particular attention to the parameters of the fourth example, we can see that there is a string assigned to the message variable. This is called default parameters, and what they do is, if no parameter is passed when invoking this function, then by default, that parameter has the default string assigned.

function willCallCallback(callback) {
    callback()
}

willCallCallback(() => {
    console.log("I'm a callback function")
})

The last example shows us a callback function. Callback functions are functions that are passed as parameters to other functions and invoked by these functions to indicate the end of an action.