Is JavaScript only for back-end or front-end?

By /

JavaScript was started as a language for interactions on browsers. It has now transformed into a language for the modern web that works for both front-end and back-end.

For learning JavaScript, we need to understand its building blocks.

  • ECMAScript – Controls the language definitions for browsers to follow and adapt.
  • DOM – Document Object Model creates an interfaces for interacting with elements on web pages.
  • BOM – Browser Object Model creates interface to the browser API for interacting with the web browser.

JavaScript helps you to add interactivity, actions, validations, and quick responses to a web page without server interactions.

Typically, we use JavaScript with the building blocks of the web.
HTML and CSS to enhance functionalities, such as validation, developing interactive maps, and displaying charts with animations and responsive behavior.

When you hit a URL in web browser the request goes to a server which sends back HTML, CSS and JavaScript code, which is then executed by browser engine to display the web page. JavaScript’s helps to add events that can be performed on the web page after user performs and action.

The JavaScript engine is a component of web browsers responsible for interpreting and executing JavaScript code. It includes a parser to analyze the code, a compiler to convert it into machine code, and an interpreter to run the compiled code.

Famous JavaScript engines:

  • V8 in Chrome
  • Spider Monkey in Firefox
  • JavaScript Core in Safari

Modern JavaScript engines are known as JIT (just-in-time) compilers that compile JavaScript code to bytecode for improved performance i.e. compiled and interpreted at same time.

Client-side & Server-side JavaScript

JavaScript was primarily built for browser called as client-side, after the V8 engine from chrome was combined with supporting libraries NodeJS was formed and the journey for Server-Side JavaScript started which opened new possibilities of single code stack in both front-end and backend.

JavaScript History

JavaScript was first introduced in 1995 by Brendan Eich, a developer at Netscape. It was originally named Mocha, but later changed to LiveScript.

Netscape recognized the popularity of Java and decided to change the name of LiveScript to JavaScript. This decision was made just before the introduction of Netscape Navigator 2 web browser, which included JavaScript version 1.0.

Netscape then released JavaScript 1.1 in Netscape Navigator 3, while Microsoft released its own web browser called Internet Explorer 3 (IE 3), which featured its own JavaScript implementation called JScript. Microsoft named it JScript to avoid any licensing issues with Netscape.

Consequently, two versions of JavaScript were available in the market at the same time: JavaScript in Netscape Navigator and JScript in Internet Explorer.

However, there were no standardized syntax or features for JavaScript during this time. To resolve this issue, the community advocated for a standardization of the language.

In 1997, Technical Committee #39 (TC39) was assigned by the European Computer Manufacturers Association (ECMA) to standardize JavaScript and transform it into a general-purpose, cross-platform, and vendor-neutral scripting language. As a result, TC39 proposed JavaScript 1.1 to ECMA as a proposal.

TC39 developed ECMAScript, which established a standard for defining a new scripting language. It aimed to standardize and simplify JavaScript. The International Organization for Standardization and International Electrotechnical Commissions (ISO/IEC) later adopted ECMAScript (ISO/IEC-16262).

JavaScript overview

Lets take a quick look at features of JavaScript. Don’t worry this is just a jest of what JavaScript is capable of, you can look at each topic in details in related tutorials.

Variables 

var a = 10;
let b = 20;
const c = 30;

var is the first variable in language which can hold any kind of data String, Number, Boolean, Abject, Array etc.

let was introduced in ES6 with a difference from var in scope and hoisting.

const is similar to let only difference is its value cannot be changes once assigned, like a constant value across the execution primarily to save against unexpected changes during execution.

Functions

There are multiple ways to define functions in JavaScript.
You can define it using function keyword or using ES6 arrow function.

Below example declares add function using function keyword, to add two numbers and return the response.

// using function keyword
function add( inputA, inputB ) {
   return inputA + inputB;
}

Below example declares add function using ES6 arrow functions, to add two numbers and return the response.

// using ES6 arrow function syntax
const add = ( inputA, inputB ) => {
   return inputA + inputB;
}

For both ways, we can use add() function using below syntax and using console.log() to print the output.

let output = add(x, y);
console.log(output);

Conditional Statements

JavaScript provides multiple ways to validate conditions in your code using if-elseif-else, switch. A quick sample to use these.


function divide(inputA, inputB) {
   if ( inputB == 0) {
   // throw - to throw exception
   throw 'Division by zero not possible'; 
   }
   return inputA / inputB;
}

console.log(divide(20, 0);

If we divide any number by Zero, JavaScript will though and exception and to save our code from unhandled exception, we are checking and handling using condition to check if inputB is ‘0’ and taking appropriate action with custom exception message to inform user about the issue in inputs provided.

Loops and Arrays

// declaring empty array 
let sample = [];
//declaring array with initial elements
let items = [1, 2, 3];
// accessing property length 
console.log(items.length); <em>// 3</em>

To iterate over the elements of the items array, you use the for loop statement as follows:

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

You can also use for...of loop which came with ES6

// getting each item one by one from items array and printing it.
for ( let item of items ) {
  console.log(item);
}

Over the years JavaScript has evolved into language of web through its wide variety of features which are both used in backend as well as frontend development for better user experience.

Summary:

Basics of Java Scripts, History, Variables, Loops covered.

Related Posts

Scroll to Top