This is a comprehensive guide for developers and those who want to learn about JS. It covers the basics of the language, syntax, and how it relates to other languages like Java or C++.
It also includes topics on code formatting, debugging tools, web frameworks, testing frameworks, and much more.
As a junior web developer, for instance, you have most likely started from HTML and CSS, which is good. But web development comprises three elements:
- HTML allows you to determine a webpage’s structure and the headers, the body text, and images
- CSS, instead, gives you control over how the page looks by allowing you to customize fonts, background colors, and more
Just to let you understand, JS is used to create those apps you have on your phone and tablet, or the web browser based game you spend your night at.
The software environment is competitive and full of people with their own opinions about the best technology and practices. So, no matter which language we’re talking about, you’ll always encounter someone who hates it.
That’s how one of the major strengths of JS also has become its major weakness.
Still, there are quite a few recurring elements of complaint among developers that you should be aware of:
- Browser Dependency: because many functions and properties are executed differently across browsers, the result may look different on Chrome and Safari
- Weak-Typing and Aggressive Coercion: it’s a typing language that tries to convert different types to one another, resulting in some odd effects; e.g. the ‘+’ sign could mean adding numbers together or adding a number onto a text, or text onto a number
- Excessive Boiler-Plate Code: it is verbose and time-consuming programming language which requires developers to put repetitive codes in several places in order to avoid any error
- A lot of confusion: there are way too many JS frameworks out there, and way too many versions of AngularJS, React, Ember, Polymer, etc. which can lead JS developers to some initial confusion
The simple fact that it is also used for other than just web development is evidence of its undoubtful advantages:
- Easy setup: no need for you to download the JS in your machine in order to access all of its features and create a development environment; you just need your browser
- IDE: JS uses integrated development environments (IDE), or code editor, where you can create your code in a file with the .js extension
- Event-based programming for dynamic content: it has built-in events like ‘onClick’ and ‘onHover’ that act upon user interaction on a website to execute a specific segment of code
Also, without JS, any changes on web pages you visit would require either manually reloading the page, or navigating a series of static menus to get to the content you’re after
To do this, it’s important to first consider your needs and goals. There are three main types of JS frameworks: open source, commercial and lightweight (and these can be further broken down into more specific categories).
The 3 types of JS frameworks
- Open-source: with open-source front-end frameworks, all contributions are welcome. For example, the popular open-source React is a great example of this. According to Google, the baseline level of skill in JS frameworks is minimal, so it makes sense to start with the open-source frameworks first. They’re very easy to learn and understand, but the learning curve is steep. If you’re more of a visual learner, the commercial frameworks such as Angular and React are best for you. We have prepared a simple guide to help you choose the right React JS framework for your web-based project: CRA vs Gatsby vs Next.js
- Lightweight: in this type of framework, you don’t need to learn an entire programming language to develop your projects. Sometimes referred to as “micro frameworks”, lightweight frameworks can be considered more complex and robust. While most of these focus on scalability, some of them also have faster rendering time. They also offer the ability to build cross-browser and cross-platform websites. jQuery and Vue are two popular choices.
What’s the difference between front-end and back-end JS frameworks?
These frameworks can handle front-end and back-end to improve UX a lot no matter what kind of web application you are building.
React, Angular, Vue, and Ember are among the most popular JS frameworks. They each offer a different way to bridge between server-side and client-side processing and to express complex data-driven interfaces. A framework does not have to be mutually exclusive. In fact, if you’re building a new app, you might benefit from working on all four at once.
IDE is short for Integrated Development Environment. This basically means that you get all the utilities that a software developer would need to create and develop software.
You won’t need to learn how to use separate tools. Most features of IDEs save time, like intelligent code completion and automated code generation, others help developers organize their workflow and solve problems, like bugs, in real-time.
Syntax highlighting is another common feature in most IDEs to distinguish grammar.
Experienced developers build their own IDE to get ultra-customization and control by integrating utilities with lightweight text editors.
Things like recurring animations, interactive forms are just a couple of examples of myriads of repetitive tasks that developers can now automate with a code snippet. Developers can now code faster and with fewer vulnerabilities because of errors.
The following does not intend to be a comprehensive JS technical guide. Take it as a very basic introduction to JS syntax.
- White space: Spaces and line breaks are irrelevant, but best practice dictates that you use a linter or a style tool (Prettier is one common option)
- Literals: it refers to a value that is written in the source code, i.e. a string, a number, a boolean and more advanced constructs
- Identifiers: this is a series of characters and digits you can use to identify a variable, a function, or an object. You can start it with a letter, an underscore, or the dollar sign (this is used to reference DOM elements)
- Comments: as in any programming language, comments in JS let you annotate the code and add information. You can use it on a single line using double backslash, or a multi-line comment, e.g. it starts with /* and ends with */. Everything after // and /* */ is not interpreted as code
The following JS terms represent just an indication. Any specific and detailed indication of their naturae and usage is not clarified herein.
- Values – It indicates values such as hello and 5 where string and number are the types of these values. JS has several types with their unique characteristics. To have a reference for a value, you can then assign it to a variable
- Variables – A variable is a value you assign to an identifier. You can name a variable and then get quick access to any value you stored in it just by searching for the variable’s name. To use a variable, first you must declare it either with a const or a let, the difference being that the former cannot be reassigned a new value, while the latter can. To avoid bugs, experienced JS developers prefer to use const more than let – unless they know they’ll need to reassign a value to that variable. Another kind of variable is var, but it’s becoming less and less utilised
- Operators – With them, you can combine two simple expressions to form a more complex one. Operators are classified according to the operands they work with. Some work with 1 operand, most work with 2 operands, and just one operator works with 3 operands. Here’s a list of operators:
- Addition (+)
- Subtraction (-)
- Division (/)
- Remainder (%)
- Multiplication (*)
- Exponentiation (**)
- Comparison (true or false)
- Conditionals (if – else)
- Arrays – They are a collection of elements. Arrays are objects that can hold any value, even of different types, and are multi-dimensional (i.e. you can put an array into another array), which makes them ideal for creating a matrix
- Strings – They are a sequence of characters that can be enclosed in quotes or double quotes (literals). Two strings can be joined using the + operator. You can also define strings using template literals, defined inside backticks, to make multiline strings much simple and also provide an easy way to interpolate variables and expressions into strings
- while loops
- for loops
- for..of loops
- Arrow functions – Similar to Functions, they allow you to write functions with a shorter syntax. But these functions are anonymous so you must assign them to a variable. Like Functions, they can have default values for parameters, only return one value, and contain other arrow functions, or even regular functions. The big difference is when they are used as object methods
- Objects – An Object is any non-primitive value (a string, a number, a boolean, a symbol, null, or undefined). They are passed by reference. Arrays and functions are objects in practical terms. Objects have Properties, Methods, Classes and Inheritance
- Promises – Promises offer an alternative way to satisfy your asynchronous coding needs. Their primary intent is to avoid the so-called callback hell; if we need to use the result of a function in the rest of your code, all our code must be nested inside the callback. Multiply that by 2-3 callbacks and you end up messing up things
- Async and Await – An async function typically returns a promise as async functions are abstractions of promises. The async/await duo helps you to return a cleaner code as well as a simpler mindframe to work with asynchronous code.
- Variable scope – Scope is the set of variables that is only visible to a portion of your program. Scopes in JS are divided into global scope, block scope and function scope. A variable defined outside of a function – or block – has a global scope making it available in every part of your program
This is a random list of some JS use cases we have delved into with our articles. It’s an ever-growing library, so we advise you to keep monitoring this content.
Reactive Forms in Angular
Italian Angular Community leader and Google Developer Expert Fabio Biondi introduces us to Angular Reactive Forms to address a very boring and repetitive task that every frontender wants to get done as quickly as possible.
No matter what kind of application you are writing, sooner or later you’ll need a form to collect data. Angular offers a solution not so many developers are aware of.
Getting started with WebAssembly and Rust
Developers can code in C, C++, Go, and Rust (among others) and then compile their source into Wasm binaries to run them alongside JS in their applications.
In a dedicated article, you can learn to build your first Hello World project in WebAssembly using fast and memory-safe Rust.