I want to know🍦 Vanilla JavaScript Series - Defining JavaScript

Currently my aim is to deepen my JavaScript understand for what is necessary as a Front End Web Developer. In order to distill the topics that are essential in that context, I am using the AlgoExpert FrontendExpert JavaScript Crash Course as an outline of topics. From there I’ll explore each topic further in YDKJS and other resources. This means that in this first iteration of my JavaScript learning, I will skip information that is not apart of that 20% of essential JS knowledge or Frontend developer knowledge. This path is a long one and I will revisit these topics at deeper levels in the future.

I am starting with You Don’t Know JS yet - Get Started and You Don’t Know JS - Up and Going. The author, Kyle Simpson, asserts that understanding how JavaScript works as a language will clarify what some consider to be quirky or flawed behaviors of the language. More importantly, developers will understand the code they are writing and write better code overall.

‍

Defining JavaScript

JavaScript is a programming language, officially named ECMAScript. There is an organization called ECMA and one of its areas of work is to develop and publish standards and technical reports for ECMAScript. This body hosts a committee called TC39 which develops and manages the official specification for the language (Simpson, 2020), (Areas of Work - Ecma International, n.d.). The language specification defines JS’s syntax and behavior. The members of this committee are people who work at companies that invest in the the web i.e companies who make browsers such as Mozilla, Google, and Apple, and devices (Samsung, etc) (Simpson, 2020).

JavaScript is the programming language of the web. It can run in many environments (web browsers, servers (Node.js), robots, house appliances) but the environment that matters the most is the web browser.  All major browsers and device makers implement JS in compliance with the TC39 specification. The JS in the specification and the JS running in the browser are the same but there can be differences at times for various reasons.  There are yearly revisions to the language, however new features are implemented by engines at different times. The solution to this is Appendix B, "Additional ECMAScript Features for Web Browsers" which gives details on the mismatches between the official JS specification and the JS on the web (Simpson, 2020, p. 6).

‍

💡 What are engines in the context of web browsers?

An "engine" refers to the core software component responsible for interpreting and executing the JavaScript code on a webpage. Each major web browser has its own JavaScript engine.

Here are some popular JavaScript engines and the browsers they are associated with:

1. V8 Engine: Used by Google Chrome and Chromium-based browsers like Microsoft Edge.
2. SpiderMonkey Engine: Used by Mozilla Firefox.
3. JavaScriptCore (Nitro) Engine: Used by Apple Safari.
4. Chakra Engine: Formerly used by Microsoft Edge (before adopting the Chromium engine).

If all browsers follow the same rules laid out in the specification, your JavaScript code should work consistently regardless of the browser it's running on.

‍

It would be a good idea to start and continue referencing the ES specification which can be found here. As of this writing, the latest version is Standard ECMA-262 14th Edition.

‍

What is Not JavaScript, but looks like JavaScript

There are functions that many of us may have assumed were official JavaScript, apart of the JS specification, however, they are not. In actuality they are APIs added by the JS environments that we use like browserJS engines and Node.js, to give us added capabilities. Examples include alert(..) , fetch(..), and even console.log(..). Simpson clarifies that these are JavaScript but they are not from the specification. Just like if any of us created an API and made it available for others to use.

Why is this important? Because some people think that the JavaScript language itself is inconsistent when really they are experiencing the differences across browsers and JS environments.

‍

These APIs generally fall into two categories Third-party APIs and Browser APIs (What Is Javascript? - Learn Web Development, n.d.). An example of the browser API would be the The DOM (Document Object Model) API. The DOM API is  an interface provided by web browsers that allows JavaScript to interact with and manipulate the structure, style, and content of web documents. The DOM API includes methods like getElementById, querySelector, appendChild, removeChild, and many others.

As stated before the methods just listed are part of the DOM (Document Object Model) API, which is provided by web browsers. They are not part of the core JavaScript language itself. I will explore the DOM and DOM API in more depth in another post.

An example of a Third Party API would be one of the Instagram APIs which would allow you to display your latest instagram posts on your website and much more.

‍

Multi-paradigm

JavaScript is a multi-paradigm language. The paradigm of a programming language refers to how the code is structured, the “style” of the programming, and the mindset behind these choices. So unlike some programming languages that are written using primarily a single paradigm, JavaScript allows you to mix and match. This is great because your paradigm can be based on the specific requirements of different parts of your application.

As a frontend developer, I am interested in how this information applies to my role and guides my decisions. Here are different JavaScript paradigms, when to use them, and best practices (ChatGPT, 2023):

1. Event-driven:
   • Definition: A paradigm where program execution is determined by events, such as user interactions or messages, and handled by event listeners or callbacks.
   • Use When: Handling user interactions, responding to browser events (clicks, keypresses, etc.), and managing asynchronous operations.
   • Best Practices: Utilize event listeners and callbacks for responsive and interactive user interfaces. Be mindful of potential event-related performance considerations.
2. Functional:
   • Definition: A paradigm that emphasizes the use of pure functions, immutability, and transformations on data, treating computation as the evaluation of mathematical functions.Use When: Emphasizing immutability, pure functions, and transformations on data.
   • Best Practices: Employ functional programming for data manipulation, stateless transformations, and when working with arrays or collections. Utilize higher-order functions, map, filter, and reduce for concise and expressive code.
3. Object-oriented:
   • Definition: A paradigm where code is organized around objects that encapsulate data and behavior, promoting concepts like classes, inheritance, encapsulation, and polymorphism.Use When: Modeling entities with properties and behaviors, and for creating reusable and modular code.
   • Best Practices: Apply OOP principles when designing components or classes that represent real-world entities. Use encapsulation for data protection, inheritance for code reuse, and polymorphism for flexible behavior.
4. Imperative:
   • Definition: A paradigm focused on describing how a program should achieve its outcomes through a sequence of statements that change the program's state.Use When: Performing step-by-step procedures, dealing with mutable state, and low-level operations.
   • Best Practices: In situations where a direct sequence of steps is essential, such as DOM manipulation or procedural tasks. Be cautious with side effects and manage state changes explicitly.
5. Declarative:
   • Definition: A paradigm where the program describes the desired outcome or state without specifying the step-by-step procedures, often used in UI frameworks to declare the intended user interface.Use When: Describing the desired outcome without specifying detailed steps, especially in UI development.
   • Best Practices: Leverage declarative approaches when working with UI frameworks like React or Vue.js. Describe the UI state, and let the framework handle the updates. Focus on what needs to be achieved rather than how to achieve it.
6. Procedural:
   • Definition: A paradigm that structures a program as a sequence of procedures or routines, with a focus on functions, steps, and the order in which they are executed.
   • Use When: Performing step-by-step procedures, dealing with mutable state, and low-level operations.
   • Best Practices: In situations where a direct sequence of steps is essential, such as DOM manipulation or procedural tasks. Be cautious with side effects and manage state changes explicitly.
   • ‍

Backwards Compatibility, Transpiling, & Polyfills

JavaScript is a backwards-compatible language. This is a fundamental principle and means once something is accepted as valid JS, it will continue to be valid in the future (Simpson, 2020, pp. 13–14). Because JS is not forwards-compatible, this means that developers can run into an issue trying to use code from new additions to the language in a program that runs in an older JS engine. The solution to this is to use a transpiler, the most common being babeljs.io, which will convert the source code of a program using newer JS syntax to an equivalent older syntax (Simpson, 2020, pp. 15–16). If the issue is not syntax-related, but rather a recently added API method, the solution is a polyfill aka “shim”. This essentially means that you provide a definition that the older environment can use as a stand-in. There are official polyfills/shims found in ES-Shim that you should use, and transpilers, like Babel, typically detect and provide the polyfills you need (Simpson, 2020, pp. 18–19).

‍

Dynamic Typing

JavaScript uses dynamic typing which means that variables and parameters can hold values of any type at any time. This is in contrast to some programming languages where variables are declared to hold a specific type of value like a boolean or an integer .

Dynamic typing allows for flexibility because you can pass any type of value to a function parameter and the function will accept it without restrictions. In Chapter four of YDKJSY - Getting Started , Simpson starts the discuss the widely misunderstood topic of types and coercion in JavaScript.

From the beginner’s standpoint, I immediately think on TypeScript and now begin to see why it is used. However this topic of dynamic versus static leads us into another topic .

‍

Interpreted, Parsed, Compiled?

JavaScript is a parsed language which means that the code is processed by an interpreter, which reads and executes the code line by line. The interpreter translates the code into a format that the computer can understand as it runs, rather than compiling the entire code into machine language before execution. This allows for more flexibility and faster iteration during development.

JavaScript is not traditionally considered a compiled language in the same sense as languages like C or Java. However, modern JavaScript engines, like V8 (used in Chrome and Node.js), do perform Just-In-Time (JIT) compilation. (Processing/optimization on the generated code (post parsing), which could reasonably be labeled either compilation or interpretation, depending on perspective.

This means they compile JavaScript code into machine code at runtime, optimizing performance. So, while JavaScript is primarily interpreted, it also benefits from compilation techniques to improve execution speed. MDN says JavaScript is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time.

‍

Web Assembly (WASM)

In YDKJSY - Getting Started Simpson starts to talk about WASM but I did not immediately understand why it was relevant when discussing the definition of JS, simply because I had never heard of WASM. So I ask AI to explain this to me in basic terms. Here is the result:

WebAssembly (WASM) is a technology that lets you run code written in languages like C, C++, or Rust in the browser, just like you run JavaScript. It’s very fast because it’s a low-level, binary format, which means it can be executed very efficiently by your computer. Think of it as a way to make your web apps faster and more powerful, especially for tasks that require a lot of computation.

WebAssembly (WASM) is useful because it allows web applications to run very fast, almost as fast as software that runs directly on your computer. It’s especially good for tasks that need a lot of computing power, like games, video editing, or complex calculations.

The best use case for WASM is when you need to run heavy, performance-intensive tasks in the browser that JavaScript alone would struggle with. For example, you can use WASM to run a game engine, process large amounts of data quickly, or even run desktop-like applications in your browser.

‍

‍

Sources:

Areas of work - ecma international. (n.d.). Ecma International. Retrieved January 23, 2024, from https://ecma-international.org/about-ecma/areas-of-work/#top

Simpson, K. (2020). You don't know js yet: Get started (2nd ed.). Independently published.

What is javascript? - learn web development. (n.d.). MDN Web Docs. Retrieved July 11, 2024, from https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript