JavaScript : Just The Facts, Ma’am/Sir/Your Honor… Part 2

In part one, we started tackling basic JavaScript fundamentals. Now, we’re going to dig into some concepts and try to get a better understanding of how this crazy thing works!

1. DATA STRUCTURES AND TYPES

Some of the basic types considered primitive; they are immutable values (can’t be changed). They are:

• Boolean (true or false)
• null (has exactly one value => null)
• undefined (variable that has not been assigned a value)
• number (according to the documentation, a number type is “a double-precision 64-bit binary format IEEE 754 value (numbers between -(253 − 1) and 253 − 1). In addition to representing floating-point numbers, the number type has three symbolic values: +Infinity, -Infinity, and NaN ("Not a Number").”
• BigInt (mainly useful in situations where the numerical values you’re dealing with exceed the safe integer limit for number.)
• String (textual data, any element in the string can be found by index — in the word index, index(x) = 4. )
• Symbol (as a value, is a unique identifier created by invoking the Symbol function. May be used as an object property.)

An object in JavaScript is a collection of properties; functions are objects too! Objects have key:value pairs defining their properties, and can have a function defined inside a property (ie full name() { return this.firstName + “ “ + this.lastName}. These functions are called methods. If the use of “this” is unclear here, please reference part one of this blog post, where I discuss context, “this”, and many other topics!

Collections are a type of object consisting of…well, a collection of data! Arrays, maps, sets, all are different ways to collect and store data in an object.

2. EVENTS AND EVENT LISTENERS

An event is something that happens when a user interacts with the webpage. Some types of events involve mouse clicks (click, double click, right click), key press (can be tailored to keyup, keydown), form submission, and a host of other things (one extensive list can be found here if you’re curious). JavaScript has the ability to “listen” for these specific occurrences in specified places, and then trigger something to happen. Think of it, in simple terms, like this:

Charlie Chaplin as JavaScript

So, how do we tell JavaScript to pull the lever?

First — determine the id of the element we want to use as the trigger. Sometimes it’ll be something simple like

<button id="btn">Click here!</button>

We obtain that element as a variable like so:

const buttonElement = document.getElementById('btn');

Then, we can use the id to cause something to happen, with addEventListener():

buttonElement.addEventListener('click', function (event) {
  alert('Element clicked through function!');
});

In this (very simple) example, when the user clicks the button we’ve selected, they will see an alert popup with “Element clicked through function!”. Event listeners are our way of interacting with the page via user action — they make things happen.

3. USING preventDefault()

The main use of preventDefault() for my current project, and often in practice, is to prevent automatic form submission. Say you need to take the user’s input and use fetch (which we’ll talk about in a moment) to send a request to the API you’re using. Using event.preventDefault allows you to dictate the flow of actions, effectively cancelling the usual response to clicking the submit button. In my current project, the application had to be a single page, so my form submission needed to be processed before sending through as JSON data. The first thing the form handler function did, then, was use e.preventDefault:

Not shown: the postWeapon function, but we’ll get there.

Quick note: if you’re unsure that the event you’re trying to prevent is actually preventable, you can use Event.cancelable to receive a delightfully clear boolean answer. Documentation here gives syntax and uses in greater detail.

4. SERIALIZERS

A serializer is a service class, specific to our domain, designed to handle a portion of the logic of the application. Thankfully, there’s a fantastic tool called JSON:API-serializer (details and docs here) that does all of the heavy lifting for us. The important thing to know is that a serializer takes the information passed to it, and in this case creates readable, sendable JSON data for both our application and the API that is storing the data on the back end.

5. FETCH

To talk about fetch, we need to define a couple of things. First off, AJAX (Asynchronous JavaScript And XML) — a combination of a built in XMLHttpRequest object, JavaScript, and the HTML DOM. AJAX allows web pages to be updated asynchronously, sending and receiving data from the server behind the scenes, without reloading the entire page. JSON (JavaScript Object Notation), a serialized form of data that is able to be sent from server to page and back again without a breakdown in communication. A simple demonstration, continuing the code above, passes the user “create” input to the server in a fetch request, which returns a new object :

Fetch has to be passed a URL that holds the data source (in this case, my local server running the rails API). Since we’re sending data to create a new object, we’ll specify a POST request (this also is used for GET, PATCH, and DELETE actions. If you need a refresher about routing in Rails, visit here). The content type will be “application/json”, and we get the chance to turn all our data into strings with JSON.stringify (the data has to be passed to the server as strings to be readable). Since this is happening asynchronously, we invoke the promise .then . A few things we are guaranteed by using the .then promise:

• Callbacks added with then() will never be invoked before the completion of the current run of the JavaScript event loop.
• These callbacks will be invoked even if they were added after the success or failure of the asynchronous operation that the promise represents.
• Multiple callbacks may be added by calling then() several times. They will be invoked one after another, in the order in which they were inserted.

In this case, the JSON data is returned, and the JavaScript converts that received data into a new object, which is then passed into a rendering method to be displayed on the page itself.

More reading on this topic can be found here (using fetch docs), and this page has some great examples of fetch in action.

6. OBJECTS

By definition, an object in JavaScript is a collection of properties bounded by curly braces — and those curly braces can contain anything. Functions (and functions ARE objects). Other objects. Emptiness {}. A single key-value pair. Multiple key-value pairs, separated by commas. So in a way…

THIS! IS! JAVAAAAAAAAAAAAscript.

Not literally everything, of course. Just a lot of things. Not to be confused with object oriented programming, which we also do in JavaScript.

The documentation sums it up like this:

“In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.”

A few things to note regarding objects:

• ES6 syntax allows up to create a class, wherein we can utilize a constructor function to instantiate a new instance of an object. Example:

If this looks familiar, it’s how I illustrated ‘this’ and context last time.

• We can call methods on an object. JS defines methods as a function stored as an object property. In the example here, fullName is a method.

var person = {
firstName: “John”,
lastName : “Doe”,
id : 5566,
fullName : function() {
return this.firstName + “ “ + this.lastName;
}
};

• Objects can also be created with an object initializer instead of a constructor inside a class:

let object = {
  foo: 'bar',
  age: 42,
  baz: {myProp: 12}
}

For object basics, visit here. For more details and specific usage/syntax, follow the links in the documentation (or google it!).

We’ve come to the end of our journey across the surface of JavaScript. I hope you’ve found some information that helped you understand things a bit better. I hope you’ve had a solid review of the fundamentals. I hope you’ve laughed at least once. And I hope that wherever your path leads, that it’s not completely undefined.

Puns are my favorite. No apology.