Catalog: JavaScript
JavaScript (or JS) is the programming language of the internet. Almost all sophisticated websites, including the one you are on right now, use JavaScript for their
TypeScript is a superset of JavaScript that provides optional static typing to enable better error checking for JS.
What is TypeScript?
Our catalog of quick JavaScript shots is ever-evolving. Our current selection of shots is organized by:
- What is JavaScript? where we go over the basic concepts of the language.
- Language features, where we look at language constructs, methods, and extensions.
- Application, where we explore JavaScript being used in the context of a webpage.
- Good to know, where we look at miscellaneous language features.
Disclaimer: A catalog shot links together all the shots on a particular topic and outlines how they fit together. A catalog does not attempt to cover the scope of a topic as it is only a catalog of the shots we have on the topic thus far.
What is JavaScript?
JavaScript is principally known as the scripting language for webpages. Scripted languages are interpreted one by one when the program is running rather than before execution.
What is a scripting language?
If you’re interested in constructing an interactive website, you’ll need to learn JavaScript along with HTML and CSS.
We can use JavaScript to develop all layers of a web application. From the front-end buttons that the user sees to the back-end that helps serve user data.
What is a full-stack developer?
Perhaps the best way to get introduced to a program is to see how it’s written. To produce a simple ‘hello world’ in the console of your browser, write:
console.log('hello world')
You can display ‘hello world’ as an alert by following the instructions in,
How to write a “Hello World” program in JavaScript
JavaScript supports the Number, String, Boolean, Null, and undefined primitive types and objects, slices, and arrays non-primitive types.
What are the data types available in JavaScript?
What is JavaScript null?
What are arrays in JavaScript?
splice vs. slice in JavaScript
If you’d like to confirm what a variable is, you can use the typeof operator.
Javascript typeof
What is an uncaught TypeError in JavaScript?.
To make sure your code is as readable and as maintainable as possible, you’ll want to follow the JavaScript style guide
To ensure your code is resilient and secure, you can use JavaScript in “strict mode.”
What is “use strict” in JavaScript?
How to use ’ use strict ’ in JavaScript?
Language features
JavaScript is a light-weight yet feature-rich language with useful constructs, methods, and extensions to help you in your problem-solving. In this section, we will explore some of them.
We can write JavaScript in many paradigms. We can write in a more traditional OOP (object orientated programming) paradigm
What is a constructor in JavaScript?
What are classes in Javascript?
What is the super keyword in JavaScript?
Or we can write it in the functional programming paradigm.
What is functional programming?
Constructs
Scope
Lexical scope determines where objects in JavaScript can be accessed. For instance, a global scoped object can be used anywhere in the program, but a locally scoped object can only be used in its functions.
Lexical scope in JavaScript
What are JavaScript closures?
The difference in the behavior of
letandvarwhen declaring a variable is of scope. Find out more here,
What is the let keyword in JavaScript?
Control flow
You construct the logic of your program using the built-in flow control mechanics of a language. For example, what happens if the user inputs the correct password? This if statement is one such example of directing flow.
You can use the ternary operator as you would the
ifstatement. The ternary operator has the following syntax:
(condition) ? (true result) : (false result)
What is the ternary operator in JavaScript?
Another way to control the flow of a program is by using a switch statement.
How to use the switch statement in JavaScript
Operators
In JavaScript (and programming in general), operators are used to assign or compare values, perform arithmetic operations, evaluate expressions, and more. JavaScript supports the arithmetic and comparison operators.
What are operators in JavaScript?
What are comparison operators in JavaScript?
What is the modulo operator in JavaScript?
The spread operator, or ..., is a new addition to the operators’ set in JavaScript ES6. It takes in an iterable (e.g., an array) and expands it into individual elements. This spread operator is commonly used to make shallow copies of JS objects.
What is the spread operator in JavaScript?
Set
A Set object is a construct used to make a collection of unique elements. For instance, suppose you need to count the number of unique letters in a word. If you insert an element a second time (or more), it will not be reflected in the set object. You can then iterate through the elements in a set in the order of insertion.
What is the JavaScript set?
Map
Map is a construct introduced in ES6 that is used to hold key-value pairs.
How to use the map function in Javascript
Using Map data structure in ES6
You can convert a map into an array of key-value pairs using the
entriesmethod.
What is the Object.entries() method in JavaScript?
You can check if a key is present in a map using the
hasmethod.
What is Map.has() function in Javascript?
Generators
Generators are functions that can pause execution midway through and then continue from where they stopped. They are ideal for functional and
What are JavaScript generators?
Regular Expressions (regex)
JavaScript supports regular expressions (regex), which are a sequence of characters used for pattern matching. Regex has many use-cases,e.g., it can be used for searching and replacing text.
How to write regular expressions in JavaScript
Date
The date object is used to handle dates and time in JavaScript.
What is the JavaScript date object?
Iteration
There are many ways you can go about iteration in JavaScript. You can use a for, for-of, or while loop.
How to execute a for-loop in JavaScript
What is a for-of loop in JavaScript?
How to execute a while loop in JavaScript
There are multiple methods available for iteration in JavaScript. You can use the
every,foreach,findandmapmethod.
JavaScript iteration methods
Functions
Functions are subroutines (or simply blocks of code) that perform a specific task. Functions take input and return a related output. There are two ways to write functions in JavaScript, as arrow functions and traditional functions.
Javascript functions
Arrow function vs. traditional function in JavaScript
Arrow Functions
You can compose any number of functions together in JavaScript. Function composition is an approach where one function’s result is passed on to the next function until the final function is reached.
Function composition in JavaScript
You can customize how JavaScript functions work using currying and the bind method.
What is currying in JavaScript?
What is the JavaScript bind?
IO
Accessing files from the system is fundamental for any language. In JavaScript, you can read files stored on the system with the file reader object.
What is the JavaScript file reader?
Objects
If an object in JavaScript lacks the properties you need, you can add to them in a few ways: you can use dot notation, bracket notation, defineProperty function, or use a JavaScript prototype.
How to Add Property to an object in JavaScript
What is a JavaScript prototype?
In JavaScript, you can use another object’s methods without redefining it through method borrowing.
What is Method Borrowing?
It doesn’t matter if you declare an object before calling it because JavaScript can hoist them. However, this may affect performance.
What is Javascript hoisting?
Object destructuring
Destructuring is a JavaScript expression that allows us to extract data from arrays, objects, and maps and set them into new and distinct variables for our use cases.
What is object destructuring in JavaScript?
What is destructuring in JavaScript?
Array destructuring simplified
Asynchronous constructs
Asynchronous programming is an advanced but powerful paradigm in JavaScript that allows you to write
In asynchronous coding, you make promises, an object whose results will eventually be returned. We can do other operations on the same thread during the time it takes the promise to be returned (this is not possible in synchronous programming). async and await are syntactic sugar that makes promises easier to implement.
What are promises in JavaScript?
What is async/await in JavaScript?
A popular use case of asynchronous programming is enabling a sleep function.
What is the Javascript alternative to the sleep function?
We can have async iterators and generators for network or IO driven operations.
What are Asynchronous iterators and generators?
We use the reflect function to ensure that a function returns an output even when an error occurs.
How to use the reflect function in JavaScript’s async module
Asynchronous programming is enabled by event loops in JavaScript.
What is an event loop in JavaScript?
Methods
Strings
JavaScript makes working with strings (or text) easy by including many useful methods.
You can extract parts of a string by using the substring method:
stringName.substring(startIndex,endIndex) // endIndex is optional
How to get a substring in JavaScript
If you’d like to check if a string includes certain text, you can do that with the include method:
stringName.includes(SearchforThis, StartSearchfromThisIndex) // output is either true or false
What is String.includes() method in JavaScript?
Another way to search a string for a match is to use the match method:
stringName.match(regexExpression) // output is an array object or NULL
What is the match() method JavaScript?
If you’d like to replace some text with another (or remove it entirely):
stringName.replace(SearchforThis,ReplaceWithThis) // output is the changed string
How to replace a string in JavaScript
If you’d like to check the index of some text in a string, you can use the indexOf() method. If the item is not found, the method returns -1:
stringName.indexOf(SearchforThis,StartSearchfromThisIndex) // output is index position
What is the indexOf() method in JavaScript?
You can split a string into an array by using the split method to specify the character you want to split:
array = stringName.split(characterToSplit) // characters can be 'a', ':', ' ', or nothing at all '' which will split the string into individual characters
What is the String split() method in JavaScript?
Array
Arrays are collections of the same type of data. You can manipulate this data using the in-built methods that JavaScript provides. JavaScript provides you with accessor, mutator, and iteration methods.
- Accessor methods do not modify the original array; instead, they return a modified array based on the original array.
JavaScript accessor methods - Mutator methods modify the original array.
JavaScript mutator methods - Iteration methods are used to traverse an array and dynamically access elements from that array.
JavaScript iteration methods
You can check if an array contains an element with the include method.
What is the Array.includes() method in JavaScript?
Easy way to check if an item exists in array in JS
If you’d like to retrieve a single element that matches from an array, use the find method. If you want to retrieve the entire collection of elements that match your query, use the filter method.
filter vs. find: JavaScript array methods
What is the JavaScript Array filter()?
You can sort an array using the sort method. It will sort your array alphabetically by default. However, you can construct a custom compare function to fit your needs.
What is the JavaScript array.sort() method?
How to sort an array of objects in JavaScript
If you’d like to check if all the elements of an array pass a condition (e.g., all of the numbers in an array are positive), you can use the every method.
What is the every() method in JavaScript?
To manipulate every value of an array, you can use the forEach method.
How to execute forEach in Javascript
You can use the reduce method to construct a single value using values from the entire array.
What is reduce in Javascript?
A simple example would be when you need to sum an array. In this case, you shift the entire array left, deleting the first element, and shifting the indexes by one.
What is the array.shift() method in JavaScript?
You can use the splice method to change an array
How to use the splice() method in JavaScript
If you’d like to perform array-like operations on an object, you can make them into arrays using the from method.
How to use the JavaScript’s Array.from() method
Extensions
Modules
Web pages and other applications can get large as you add more and more code to make them work. Fortunately, we can divide our program into modules that can help speed things up by loading only the necessary parts/modules for the current execution requirements.
Introduction to JavaScript modules
What are module exports in JavaScript?
Package managers
Package managers automate the process of installing, updating, and deleting software packages.
What is NPX?
You can decide if you’d like to use yarn or node package manager (npm) by looking at this comparison.
Yarn vs. node package manager (npm)
Interested in how to write and publish your first NPM package?
How to write and publish your first NPM package
JSON
JSON (JavaScript Object Notation) is a lightweight, human-readable, data-interchange format. Despite the name, it is an open-standard format that is used by most languages to share and store attribute-value pairs. JSON is commonly used to send data to and from a server (across the web).
We can use the JSON parse method in JavaScript to convert a string into a JavaScript object.
What is JSON.parse in JavaScript?
Similarly, we can convert a JSON object into a string by with the stringify method.
What is JSON.stringify in JavaScript?
Libaries
We can quickly add more functionality to a program with a library. Libraries are pre-written code that allows for easier development. Re-using code is good practice as it saves time and good libraries tend to have secure code.
jQuery is a library that makes using JavaScript simpler by introducing syntax abstractions that make development easier.
Some popular jQuery methods are:
What is the jQuery hide() method?
What is the each method in jQuery?
How to redirect to another page using jQuery
If you’d like to web-scape using JS, you can use the cheerio library. Interestingly, cheerio was built over a subset of jQuery.
What is cheerio js used for?
If you like to program in the functional paradigm, you can Lodash to provide commonly used utility functions for common tasks.
What is Lodash?
You can make interactive data visualizations using D3 or data-driven document. D3 uses SVG, CSS, and HTML to construct its visualizations.
What is D3.js?
You can create animated charts using Chart.js.
Chart.js - Create a Histogram
Applications
This section will go over some JavaScript applications and cover simple HTML manipulations using JS, introduction to JS frameworks, and miscellaneous (but useful) applications.
We create
web applicationsusing JavaScript
What is a Web App?
What are the steps involved in a website development lifecycle?
HTML
In the world of the web, all HTML webpages are referred to as documents or DOM (Document Object Model). JavaScript can access and change all the elements of a DOM.
Outputting the DOM in the browser is referred to JavaScript rendering.
What is JavaScript rendering?
We can hide an element on an HTML document with the style.display method.
How to hide an element in JavaScript
We can display dialog boxes on the webpages of an HTML document by calling the alert method.
How to use the alert() method in JavaScript
We can access specific elements through the getElementByID method.
What is the getElementByID method() in JavaScript?
We can handle events in JavaScript with event delegation to make the webpage more interactive. It is a simple technique where only need to add a single event handler to a parent element instead of adding multiple event handlers for each child element. In event capturing, an event propagates from the outermost element to the target element.
What is event delegation in JavaScript?
What is event capturing in JavaScript?
We can generate HTML for a webpage using handlebars, a template engine.
What are Handlebars in JavaScript?
We can submit forms through JavaScript using the submit() and requestSubmit() methods.
What are submit forms in JavaScript?
There are two ways to redirect to a webpage using JavaScript. You can use location.replace() or location.href().
How to redirect to a webpage using JavaScript
If you need to limit a user calling a function, we can use the debounce function. The debounce() function forces a function to wait a certain amount of time before running again.
How to use the debounce function in JavaScript
You can get timestamps with JavaScript with the date object.
How to get the timestamp in JavaScript
JS projects
We can build a simple platformer game using JS and HTML.
How to make a simple platformer using JavaScript
Work with timers in JavaScript.
How to set a timer in JavaScript
How to create a countdown timer using JavaScript
JavaScript technologies and Frameworks
JavaScript offers many technologies, including frameworks, that can increase productivity when developing a product. Frameworks define how you go about your design process, which helps improve code quality and maintainability.
React is a popular, open-source JavaScript library for building front-end user interfaces for single-page web applications. A variant of React is React Native, which allows us to write cross-platform mobile applications.
What is React JS?
Like React, Svelte is also used to build front-end web applications. Svelte is a new approach to web development; it functions as a compiler and not a framework or library. This means it doesn’t attach the boilerplate that frameworks require to function in the browser, which usually results in smaller and faster applications.
What is Svelte?
You can use NodeJS to develop server-side backends. NodeJS is a popular runtime environment that enables a complete development environment in JavaScript from the frontend to the backend.
How to build highly available/fault-tolerant services in node.js
Django is a Python server-side framework. Here’s a comparison to help you decide which is best for you.
Django vs. NodeJS
Mocha is a testing framework for JavaScript. Automated and accurate testing is important when ensuring that everything in your code is working correctly.
How to test an API in Node.js
You can explore more on Mocha in the shots below.
What are hooks in Mocha?
Mocha afterEach
Good to know
In this section, we will go over miscellaneous questions. Your first question might be, what is the difference between Java and JavaScript. Good question.
What is the difference between Java and JavaScript?
Miscellaneous
How can we insert emojis in JavaScript?
How to insert Unicode in JavaScript
JavaScript under the hood
In languages like C/C++, you need to manually dispose of unused objects. However, JavaScript does this for you.
How garbage collection works in JavaScript
Comparisons
JavaScript and Python are both very popular languages – which one best suits your needs?
Python vs. JavaScript
Editors
You can make your experience with writing JavaScript better by using the Prettier plugin. Prettier can format your code so that it’s easier to read.
What is Prettier?
You can change the way you write HTML using PUG syntax. Instead of using angle brackets <>, you can use indentation instead.
What is PUG Syntax?
We can use Flow to error-check JavaScript projects for near real-time error checks.
What is Flow?
Free Resources
