I recently built an etch-a-sketch variant as an exercise for practicing basic JavaScript, CSS, and HTML. I wanted to document my experience in order to strengthen my understanding of what I built and to avoid the “I don’t know how it works, but it works!” perspective. I’d also love to hear any feedback!

HTML

I started with a basic HTML skeleton:

I then filled in this HTML skeleton with what I felt my project would need:

I wanted to have my “Etch-A-Sketch” grid take up the right half of my page with the title and interactive elements sitting on…

ES6 Arrow Functions

You know them, you love them, and you probably use them all the time! Introduced as part of the ECMAScript 6 update in 2015, arrow functions exploded in popularity, and with good reason. Arrow function syntax is wonderful syntactic sugar that removed the need for the following:

• the return keyword (for one line functions)
• the function keyword
• curly brackets

Arrow functions also reduced some of the complexity involved in JavaScript function scope, as well as the this keyword, because sometimes all you really need is an anonymous function.

All that being said, arrow functions are not a one-size-fits-all solution for…

Before We Destructure, What Is a Structure?

In computer science, the type of structures that we constantly build and use are called data structures.

A data structure is a storage format created for the purpose of storing and organizing data, often prioritizing the accessibility and customization of that data. In other words:

“More precisely, a data structure is a collection of data values, the relationships among them, and the functions or operations that can be applied to the data.” -Wikipedia

JavaScript has two built-in data structures: arrays and objects.

What Does It Mean to “Destructure” a Data Structure?

“The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or…

Sloppy Mode

Unlike Java or C#, JavaScript is a loosely typed language, which makes it a very forgiving language. To the best of its ability, JavaScript will try to cover for most mistakes made by those who write it.

On the surface, this may seem like a good thing, but it can allow for some rule-bending that often leads to unintended consequences down the line. This has earned the default JavaScript environment the title of sloppy mode.*

Not an official title, but MDN does have a page dedicated to the term.

Why Use Strict Mode?

Is avoiding slop enough reason to employ strict mode? Only you…

JavaScript Operators

JavaScript has several different types of operators. These include comparison, arithmetic, logical, and many more.

These operators can be further defined as either unary or binary. Let’s break down the difference between these two terms now as we move toward understanding ternary.

Unary

A unary operator takes just one operand, either before or after the operator:

operator operand || operand operatorfor example:x++ || ++x

Binary

A binary operator requires two operands, the most common examples being basic addition, subtraction, multiplication, and division:

operand operator operandx + y; || x - y; || x * y; || x / y;

…

Let’s Start With Undeclared

Undeclared is not a JavaScript reserved word. This means we don’t use or assign undeclared when writing code, instead, we encounter the error message that is produced when we try to use an undeclared variable.

aVariable;
console.log(aVariable) // ReferenceError: aVariable is not defined

When we try to use a variable that has not been declared using either of the keywords let or const, this usage will result in the above error message.

Ironically, this error message reveals the first slightly confusing scenario we’re looking at today: the data type of an undeclared variable is undefined.

Which Brings Us to undefined

undefined is one of seven…

As you likely already know, there are a variety of ways to convert a string to an integer in JavaScript. However, it’s up for debate as to which method is the “best” method available to developers. Let’s take a look at some options.

parseInt( )

parseInt(string, radix)

We begin with parseInt() which takes two arguments, a string and a radix. The function returns an integer parsed from the given string.

If the first argument is not a string, it is converted to one automatically using ToString(). Either way, any leading whitespace is ignored.

The parseInt() method starts at position 0 and determines…

Code: A Love/Hate Relationship

As human beings, we’re genetically programmed to anthropomorphize. To anthropomorphize is “to attribute human form or personality to things not human.” It’s a complicated, not entirely understood instinct that may have helped our ancestors spot familiar friends or hidden enemies. This is part of why we see silly faces in the clouds and spooky faces in the dark.

Unfortunately, for some of us (including yours truly), this means that when struggling to learn a new subject, we can subconsciously humanize said subject. When I struggle with code, I start to think of code as an enemy, as something that’s out…