JavaScript Fundamentals

Learning to code is hard. But it can also be incredibly rewarding. Creating access to that learning is something that I am incredibly passionate about. Everyone should learn to code, even just a little, in order to have a basic understanding of how the web works. Although, I should point out that I am convinced that the internet is probably held together by three gorilla's in a trench coat, who use only a roll of duct tape, having a basic understanding of the fundamentals of a language like JavaScript is incredibly important.

What is JavaScript?

MDN defines JavaScript as a "a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)"

Okay, but what does that mean? And how can we use it? Well, in order to dive right into the world of JavaScript, you don't need to have a code editor running on your computer. The easiest way is to open up the JavaScript console in your chrome browser. You can do that by pressing Command + Option + J on a Mac, or Ctrl + Shift + J on a Windows/Linux system.

JavaScript allows us to store values inside of variables, perform operations, run code that responds to events on a web page (such as clicking or scrolling, etc), and so much more!

As we go through the definitions, try playing around in the console, entering the information as we go along. One of the first things to learn about learning to code, is how important repetition is. You will learn so much more by coding along with this, rather than reading it alone. Your fingers and your brain will develop muscle memory and know what to type before you type it as it becomes more familiar, and very soon you'll turn into a coding genius! Okay, maybe not a genius, but certainly someone who isn't as initially baffled by what the heck all this stuff means then you were initially. Trust me.

I'm certainly not going to cover everything, I hope to write multiple articles on this, but think of this as the first foray of many into the world of JavaScript.

What is a Value?

A value is one of the most basic and important units of information in programming. A value is a piece of data. One reason why it's important, is because we can store data/a value inside of a variable, and then access it later.

Think of a variable like the old school card catalogues at the library. Long before the days of computers, the easiest way to go and find a book, was to research in a card catalogue a reference number, which would then go and allow us to find the book wherever it lived within the vast library shelves. So long as we know the reference number of the book, we can always find it. If we always know the name of a variable, we can always find its value.

Conventions in JavaScript mean when naming a variable, we use something called camelCase. Rather than write out a value as this_is_my_very_long_and_non_descriptive_value_name, we would write it out as myHopefullyDescriptiveName. camelCase is written without spaces, and looks like the humps of a camel.

Variables are so important, because rather than go through and manually change wherever our variable exists, we can just change it once, where it's declared, and with the magic of programming, every other place a variable is referenced in our code will then update the variable's value.

Data Types

Everything in JavaScript is either an object, or a primitive.

And there are seven different primitive Data types which include:

1. Number - floating point numbers. Every number has decimal points, even if we write it as 23 it's actually 23.00
2. Strings - a sequence of characters, used for text, always put between quotations. "this is a string!" 'this is also a string!'
3. Boolean - Logical type, that can only be true or false
4. Undefined - value taken by a variable that has not yet been assigned, is empty, therefore is undefined.
5. Null - Also means an empty value.
6. Symbol - value that is unique and cannot be changed.
7. BigInt - Larger integers than numbers can hold.

Because JavaScript has dynamic typing, when we declare a variable using either const or let, JavaScript will identify the data type for you. Now that certainly comes in handy, doesn't it?

Declaring Variables with const and let

let and const were introduced in ES6. If you look at code written before 2015, you will see variables declared with var. That's now considered bad practice, so don't do it.

let keyword

We use the let keyword to define variables, whose value will change later.

There's nothing wrong with declaring a variable with let, and to reassign its value later on. Things change, data changes, like people. Your favorite band might've been Pink Floyd or Led Zeppelin when you were in elementary school and going through a serious stage, but now that you are an adult and much more serious, it's obviously BTS.

let myFavoriteBand = "BTS"

const keyword

const or constant, is a variable whose value we do not wish to change, or mutate. It is why const is referred to as immutable. Once it is defined, that's it. Because const is immutable, we cannot define it with an empty value. It has to have something.

const myEyeColor = "Brown"

Try declaring const myEyeColor in the console, but without a value. You will get back an error, Uncaught SyntaxError: Missing initializer in const declaration.

Basic Operators

Operators allow us to transform values, or combine multiple values.

There are a lot of categories of operators: mathematical, comparison, logical etc...

Mathematical Operators

We have the addition, subtraction, division, remainder and multiplication.
+ - / % *

Typeof Operator

The Typeof Operator is pretty self explanatory, in that it tells you what type of information your variable is.

Let's try it out. Try declaring a variable in the console. Let's say number = 2. Then type, typeof(number) into the console and see what happens. With the magic of JavaScript, you'll see that 2 is a "number". It will even change the color when it inputs that information back.

Assignment Operators

We have equals, plus equals, minus equals, multiply equals, increment, and decrement.

=, +=, -=, *=, ++, --

With the += operand, if you see something declared as x += y it's shorthand for x = x + y. This is applicable to all the -= *= operators too.

The increment and decrement operators either increase, or decrease our value.

Comparison Operators

We use these to produce boolean values of true or false. Or as you'll hear in reference to JavaScript truthy or falsy values.

>, <, >=, <=

Comparison operators see if something is less than <, greater than >, <= less than or equals, or greater than or equals >=.

And even though I am an adult, I still see those signs as an alligator eating the numbers. You're never too old not to.

Template Literals

What is a template literal? If you've looked at JavaScript code, and felt a little confused, undoubtedly you've run into something that looks like this:

My favorite color is ${color}.

A template literal, or template string allows us to use a string, and something referred to as an embedded expression.

You write template literals using the backtick key on your computer, and anything that is found within the dollar sign and curly braces${}` is a variable that is being interpolated.

So if we went into our console, and defined goingOn, say as:
const color = "Blue".

And then input our sentence, we get back:

"My favorite color is Blue."

JavaScript is interpolating what we've already defined our variable as, and inserting it into the string for us. Isn't that amazing?

You can also use backticks to write multiple lines of code as well. Just hit enter to write on multiple lines:

This is
${someCode}
I wish to write.

If/Else Statements

An if/else statement is called a control structure, and allows us to have control over what code is being executed.

As you'll learn as you dive deeper into the world of JavaScript, is that it doesn't execute linearly. In fact, it can do some pretty interesting stuff in terms of asynchronous and synchronous coding. But that's a little bit too complicated for a beginner.

For now now that we can determine what runs, and when.

The basic structure of an if/else statement is as follows:

if (conditionWeAreChecking) {
if conditionWeAreChecking evaluates to true, then we run the block of code inside of the curly braces.
}


You don't need to have an else statement attached to an if statement. Although, it is typical that you will see if else statements like below:

if (conditionWeAreChecking) {
some code we want to run if true
} else {
run this code if the the condition evaluates to false.
}


Another important thing to remember, is that anything we define within the block, or curly braces, is not available outside of the block.

const hour = 18
let greeting;
if (hour > 12) {
greeting = "Good evening!"
} else {
greeting = "Good morning!"
}

If we input that into the console, we'll see `"Good evening!" outputted. Try playing around with and changing the hour, and see what happens.

Conclusion

This is only the tip of the iceberg in terms of JavaScript's capabilities. There is a lot more when it comes to learning the fundamentals. I hope for those who may have stumbled upon this article, it's helped to explain some of the very basic principles that has built such a powerful language as JavaScript.

Comments

[jakob18]

In the if explanation, not always we use else statements, sometimes we do some if ones after another, because we want to test all, and with else or else if the first that is true it will discard the other else if.

[Dani Schuhman]

Excellent point.

[Giorgos Kalpaktsoglou]

Nice!

[Dani Schuhman]

Thanks!