JS Questions: What’s a Transpiler?

This is the seventh in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What’s a Transpiler?

JavaScript transpilers emerged when the latest big update to JavaScript (ES2015) was released, which brought about some major changes to the language (such as arrow functions and classes). These updates have been good for developers, making it easier to write code in an intuitive and concise manner.

Before ES2015, the most recent update to the language had been in 2009, and since 2015, two more updates have been released, ES2016 and ES2017. With the recent rapid changes to JS, web browsers like Chrome, Firefox, and Safari have been unable to maintain compatibility with the language, and transpilers are used to bridge the gap between them.

This table breaks down different browsers’ compatibility with JS versions by feature, giving a sense of the types of issues that must be accounted for by web browsers with language updates.

Transpilers such as Babel take care of this compatibility issue by transforming code to follow earlier conventions the browser can support. Essentially, a transpiler allows a programmer to have the convenience of coding in the most recent version of JS, while still being able to revert the code to an earlier standard. The transpiled code probably won’t be as readable as it would be if it had been written by a programmer (check out Babel’s repl to test this), but it shouldn’t matter–transpiled code will be handed off to the compiler to transform into computer-readable code.

Sources

 

 

Advertisements

JS Questions: What is jQuery?

This is the sixth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is jQuery?

JQuery is a widely-used JavaScript library that makes it easier to access and manipulate DOM elements with JavaScript.

Developing with pure JavaScript is relatively tedious and time consuming, because it takes a lot of work to access DOM elements and assign any changes I may want to make to them. With vanilla JS, I’d have to grab an array of elements by class name, for example, and then iterate through those elements and remove a class. With jQuery, though, I can find elements by class and update them in one step.

 

JQuery can also be used to simplify tasks such as making animations, handling client-side events (such as a click), and making AJAX requests. Another benefit of using jQuery in contrast in vanilla JS is that the library has cross-browser compatibility built-in, meaning webpages built with jQuery generally should work the same across all browsers.

 

In recent years, many new JavaScript libraries and frameworks have emerged. JQuery has fallen from popularity as new techniques and approaches have moved to the forefront, but for small webapps, such as a single page JavaScript game, jQuery may still the the right choice.

Sources

JS Questions: What is a First-Class Function?

This is the fifth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is a First-Class Function?

In JavaScript, functions can be assigned to variables, passed as arguments to other functions, returned by functions, and stored in data structures. Basically, functions are instances of JavaScript’s Object type, just like strings or arrays.

Below is an example of a JavaScript arrow function being assigned a variable name, exclaim. JavaScript’s map function is called on an array of words, and passes in the exclaim function as an argument. These are two ways first-class functions can be used.

When a function takes in another function as an argument and/or returns a function as its value, it is known as a higher-order function. The map example above is a higher-order function.

A function passed as an argument to another function is known as a callback function.

Not all programming languages have first-class functions. With Ruby, for example, methods cannot be assigned to variables or be passed to other methods.

Sources