JavaScript Programming Language

Published 3 years ago.
Last updated October 28th, 2020

About

JavaScript, often abbreviated as JS, and also known as ES6 is the primary programming language for web browsers.
JavaScript can update and change both HTML and CSS.
JavaScript can calculate, manipulate and validate data.
JavaScript can make HTTP requests without refreshing the browser window (AJAX).

JavaScript is an object-oriented, prototype-based and text-based scripting language.

History

Java is to JavaScript as ham is to hamster.

JavaScript was released in 1995 by a team at Netscape.

The name JavaScript was chosen for marketing reasons, partly because of the popularity of the Java programming language.

JavaScript is officially called ECMAScript (or ES), and has been since 1999. Currently known as ECMAScript 6, ES6, ECMAScript 2015, and JavaScript 6. 6 is the most widely supported version of the ECMAScript standard among web browsers.

ECMAScript is maintained and hosted by ECMA (European Computer Manufacturers Association) International. The word JavaScript is technically a trademark owned by Oracle (previously Sun).

Web 2.0 was a JavaScript revolution thanks to AJAX and DOM manipulation, and it ensured that JavaScript would remain the primary browser technology for the next 20 years.

In recent years JavaScript has made it’s way to the backend server-side with platforms like Node.

Objects

JavaScript is designed on a simple object-based paradigm.

An object is just a collection of properties. A property is an association between a name (a key) and a value, and are the same as ordinary variables, except they are attached to objects.

A property’s value can be any data type, including a number, string, object, or function. If a propert value is a function, it is known as a method.

Lexical Scoping

JavaScript uses a scope model called lexical scoping which in practice basically means three things:

All JavaScript functions have access to the global scope.
Nested functions have access to the scopes of their descendants (functions “above” them).
A variable with the same name as a global variable can be declared (as a new unique variable) inside a local scope.

The word lexical refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine that variables availability or scope. Everything within scope is called the lexical environment.

Global Scope

In JavaScript there is always a default global object, of which everything is descended from. Variables, functions and objects assigned directly under the global object are said to be in the “global scope”.

When JavaScript is running in a web browser all global variables and functions belong to the window default global object, which represents the HTML page itself, also called the DOM (Document Object Model).

my_var and window.my_var is the same variable and my_function() and window.my_function() is the same function, and both are declares in the global scope.

Global variables can be used (and changed) by any script running on a page.

Different scripts can easily create name conflicts in the global namespace. To minimize this, use closures (more about closures later).

Local Scope

In JavaScript local scope means inside a function. A local variable can only be used inside the function it was defined in, and is hidden from everything outside the function. A local scope is created when the function is invoked, and deleted when the function is finished.

Variables

JavaScript variables can belong to the local or global scope.
Variables created without a declaration keyword (var, let, or const) are automatically made global, even if they are created inside a function.
Global variables live until the page is discarded, like when you navigate to another page or close the window.
Local variables have short lives. They are created when the function is invoked, and deleted when the function is finished.

Functions

All functions have access to the global scope.
JavaScript supports nested functions.
Functions can be assigned to variables.

In JavaScript, functions are simply one more object type. They can be passed around just like any other element. They can be assigned to variables, and, in later version of JavaScript, they can even be thrown as exceptions.

Anonymous Functions

https://www.javascripttutorial.net/javascript-anonymous-functions/

Closures

Simply declaring a function in JavaScript creates a closure. Any code which “encloses” other code, creating a local scope is a closure. A closure is really just a name for how functions work within JavaScripts lexical environment.

Global variables can be made local within closures.

A closure represents all the scopes the function has access to, like its local scope, the global scope, and the scopes for all the descendant functions it may be nested under.

Closure functions have access to the parent scope, even after the parent function has closed.

Anonymous Closures or IIFE

An anonymous closure is another name for an IIFE (Immediately Invoked Function Expression). It’s basically an anonymous function that runs as soon as it is defined.

The “enclosure” (the brackets enclosing the anonymous function, (...)();) turns what would normally be a function declaration into a function expression, which gets immediately executed.

(function () {
    // All vars and functions within are in this local scope only.
    // Can still access all globals.
})();

Assigning an anonymous closure to a variable allows properties from the anonymous function to be accessed. This also happens to be the basic structure for the JavaScript module pattern.

var result = (function () {
    return "Hello!";
})();

alert(result); // alerts "From IIFE"

Examples

Running the following PHP code will throw a NOTICE Undefined variable: var_a error and echo nothing.

$var_a = 'Hello!';

function function_b() {
    echo $var_a;
}

function_b();

This is because in PHP anything inside a function is effectively cut-off from everything outside of it. The $var_a variable inside function_b() is a different variable than the $var_a variable outside the function.

Running the following JavaScript code will output "Hello!".

var var_a = 'Hello!';

function function_b() {
    console.log(var_a);
}

function_b();

Classes

JavaScript uses prototypal inheritance, which means everything can be extended from the base prototype object. JavaScript is an object-oriented language. It has objects, but not classes. JavaScript does not have classes because it’s not a class-based language. JavaScript also does not have namespaces. What is often referred to as a ‘class’ in JavaScript is actually an object.

Since it’s been possible to use JavaScript like a class-based language, many people do by simulating classes using prototypes and referring to the constructor functions as “classes”.

With ECMA Script 6, classes were introduced in 2015. However, there are some deep differences between how classes work in JavaScript and “class based” programming languages.

JavaScript classes introduced in ECMAScript 2015 are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.
– Mozilla ES6 Classes

Language Functions

join (implode) an array

let imploded_array = original_array.join(separator);

typeof

Can be used to check for undefined variables:

if (typeof variable_name !== 'undefined') {
    console.log(variable_name + ' exists!');
}

if (typeof variable_name === 'undefined') {
    console.log(variable_name + ' does not exist!');
}

typeof returns a string that tells the type of the operand. It is used without parentheses, passing it any value you want to check:

const list = [];
const count = 2;
const car = {
  model: 'Fiesta'
}

typeof list; //"object"
typeof count; //"number"
typeof "test"; //"string"

typeof color; //"undefined"
typeof car.color; //"undefined"