5 Min

The scripting language that brings the web browser to life - a brief overview.

JavaScript is a widely used programming language that is mainly used for the development of interactive and dynamic content on websites. In contrast to HTML, which defines the structure of a web page, and CSS, which designs the appearance of a web page, JavaScript enables the programming of behavior and interactions within a web page. JavaScript is used both on the client side (in the user’s browser) and on the server side (with Node.js), as an alternative to PHP

Main features of JavaScript:

  1. Interactivity: JavaScript enables the implementation of interactive features on web pages, such as form validation of MIME types, animations, games and dynamic content.

2 DOM manipulation: By using the Document Object Model (DOM), JavaScript can access, modify and manipulate elements of a web page to generate dynamic content or respond to user interactions.

3 Event-based programming: JavaScript allows the definition of event handlers that can respond to user actions such as mouse clicks, keystrokes or the loading of a page.

4 Asynchronous programming: JavaScript supports asynchronous operations that allow tasks to be executed in the background without blocking the execution of other operations. This is particularly useful for working with server requests, file operations and animations.

5 Modularity: JavaScript allows developers to organize code into separate modules and create reusable functions and components, making applications easier to maintain and scalable.

Example of simple JavaScript code:

// JavaScript-Code, showing a greet-message
let name = prompt("Whats your name?");
alert("Hallo, " + name + "! Welcome to webdev-guide.net!");

Important concepts in JavaScript:

  1. Variables and data types: JavaScript allows the declaration of variables that can be used to store data, as well as the use of different data types such as strings, numbers, booleans, objects and arrays. Variables declared in CSS can be queried and changed by JavaScript.

2 Functions: Functions are reusable blocks of code that can perform a specific task. They can accept parameters and return values.

3 Conditions and loops: JavaScript supports conditional statements such as if-else and loops such as for and while that allow decisions to be made and tasks to be repeated.

4 Objects and classes: JavaScript is an object-oriented language that supports the definition of objects and classes. Objects are containers for properties and methods, while classes are blueprints for creating objects.

5 Asynchronous programming: JavaScript provides mechanisms such as Promises and the async/await keyword to manage and interact with asynchronous operations.

Advantages of JavaScript:

  • Browser compatibility: JavaScript is supported by all modern web browsers and is the only language that runs directly in the browser.
  • Versatility: JavaScript can be used not only for web application development, but also for desktop applications, server applications, games and mobile applications.
  • Lightweight: JavaScript is a lightweight language that can be downloaded and executed quickly, resulting in faster load times and better user experience.
  • Large community and ecosystem: JavaScript has a huge developer community and an extensive ecosystem of frameworks, libraries and tools that make development easier and faster.

Why is JavaScript so ugly?

JavaScript is sometimes referred to as an “ugly” programming language due to a variety of factors. This assessment often comes from developers who have difficulties with certain aspects of JavaScript. Here are some of the reasons why JavaScript is perceived as messy or problematic:

1. Historical context and rapid development

JavaScript was developed in just 10 days in 1995 to quickly provide a client-side scripting language for web browsers. This tight timeframe resulted in some design decisions that are now considered problematic. In addition, standards were not strictly adhered to in the early days, which led to inconsistencies.

2 Typical weaknesses and dynamic typing

JavaScript is dynamically typed, which means that variables can change their type during runtime. This can lead to bugs that are difficult to understand. For example:

   console.log(1 + '1'); // Ergebnis: '11'
   console.log(1 - '1'); // Ergebnis: 0

Such behaviors can be confusing and error-prone, especially for developers who are used to strictly typed languages.

3. Missing features at the beginning

Originally, JavaScript lacked many features that other languages had from the beginning, such as modules, classes, and block-scope variables. These features were added later (e.g. ES6), which led to an unclear evolution and different coding styles.

4 Global scope and lack of modularity

Early versions of JavaScript had a global variable problem where all variables could enter the global scope without a proper namespace mechanism. This often led to name collisions and hard-to-trace bugs.

   var a = 5;  // Wird global, wenn nicht richtig gekapselt

5 Inconsistencies between browsers

Since JavaScript is strongly tied to web browsers, there have been many inconsistencies between different browsers over the years, especially in the early days. Developers often had to work with many workarounds to make sure their code worked in all browsers.

6. “Truthy” and “Falsy” values

The way JavaScript interprets certain values as “true” or “false” can sometimes be unintuitive:

   console.log(false == 0);  // true
   console.log(null == undefined);  // true
   console.log([] == false);  // true

This can lead to confusing behavior, especially if you do not expect such peculiarities.

7 Callbacks and “Callback Hell ”

Before the introduction of Promises and async/await, JavaScript relied heavily on callbacks, which often led to unreadable and convoluted code, known as “callback hell”.

   // Callback-Hell
   fs.readFile(filePath, function(err, data) {
      if (err) throw err;
      parseData(data, function(err, parsed) {
         if (err) throw err;
         processParsed(parsed, function(err) {
            if (err) throw err;
            console.log('Done!');
         });
      });
   });

8. “this”-Keyword

The behaviour of this-Schlüsselworts can be confusing, due to it’s context-sensitive dynamics:

   function example() {
      console.log(this);
   }

   example();  // Output: global Objekt or undefined (in strict mode)

This often leads to errors, especially in functions and classes, if the developer does not understand the context behavior.

9. Hoisting

In JavaScript, variables and functions are “hoisted”, which means that they are available in the entire scope, even if they are declared later in the code. This can lead to unexpected behavior:

   console.log(myVar); // undefined
   var myVar = 5;

In this example, although myVar is declared later, it is already available, but with the value undefined.


Conclusion:

The reasons why JavaScript is sometimes considered “ugly” lie in its history, its design decisions and some peculiarities of the language. However, JavaScript has evolved a lot in recent years, and many of these issues have been fixed with modern features (such as ES6+) and tools. Nevertheless, it remains a language that has a certain learning curve, especially in terms of its idiosyncrasies and inconsistencies.

Updated: