JavaScript Explained - Introduction

Quite often beginners are struggling to grasp the concepts and methods not just with JavaScript but starting programming in general. While it is possible to learn the language and use it just by learning the syntax, watching tutorials etc., understanding and simplifying how it all works behind the scenes is what makes the beginners and even more experienced programmers have confidence in their skills and the ability to progress further.

Learning a programming language can be challenging and seem scary at first. This post is meant to serve absolute beginners in understanding the core principles of JavaScript and making it less daunting to jump right in and really understand the code they're writing.

We'll be looking at the JavaScript from the client side perspective (front end) but JS can be front and back end.

Focus on building real stuff, and taking it to the next level as we go through it. Thinking of it as LEGO blocks - collect them, take it apart, play with it. Personalise it, leave your anxiety at the door and build something cool.

IDs and Classes
Being already familiar with HTML and CSS, you've come across IDs and classes. Instead of only using them to style certain elements and components, JavaScript allows us to target those IDs or classes and add interactivity and control their behaviour, listening for clicks, putting stuff in, taking stuff out... pretty much anything you could think of, we can do with JavaScript.

Syntax

Now, every programming language has it's specific "spelling and grammar" rules which we call syntax. Though seeing it for the first time makes people have a panic attack, close it and never come back. It looks too complicated and for some, it can be overwhelming.
The thing is, it's not supposed to make sense just yet. Especially if you haven't got much/any previous programming experience. What you have to do is type it out, play with it, break it, delete it and do it all over again. That's how you start to notice patterns and that's all programming is early on - pattern recognition. Overtime, you'll start to recognise more of those patterns, find new "building blocks" and you will start building more complicated things. What you want to stay away from early on is obsessing over what things are called, trying to memorise everything you see.. terminology doesn't matter right now. You are better off building stuff than scrolling through MDN for three hours.

That being said, let's see some JavaScript.

Variables

We can tell our program to remember values for us to use later on, and we can do that by using variables.

let age = 20

let age- declaration
age = 20 - assignment

Think of it as information buckets. We create a bucket and give it a name (declaration) and we put stuff into that bucket (assignment).

That's all variables do. Create buckets of data and in some future point we can go back and use it.

let is one of the special (reserve) words JavaScript looks for and understands. When it sees let, alarm bells go off in JS saying that someone is trying to create a bucket of data. When it sees the word let, it creates a space in memory and we have essentially created a new space in memory called age and stored the value of 20 in that space.

Now let's say we want to store a location - create a bucket for it.
In that case, a declaration step would be let location (creating a new space in memory called location
An assignment step would be location = "London" and we can also write it together as let location = "London"

Now we can actually start to use these things we stored in memory. I can say "Dave is age, Dave is in location". We're trying to use these variables and it will say "Dave is 25, Dave is in London".

As we go on - as Dave gets older and moves around, we can change these values, without having to change the actual use. We can use these variables at any point in our program, change them, subtract or add to them and pretty much anything you want to do with them.

Variables and Data Types

So far we've seen two types of data:
Numbers - 20
String (just a fancy way of saying text) - London
A string is always surrounded by quotes - single or double - or ticks (`), but we'll focus on quotes for now.

Whatever quotes you use on the outside, you can't use on the inside (without doing some tricks).
For example, trying to use double quotes on the outside and inside of the string, we'll run into some issues.

We get two separate strings. What JavaScript will try to do is look for a variable called "moved" and we'll get an error because there is nothing in memory called "moved" - we haven't declared it.

Now we can tell JS to ignore these quotes by using a backslash before each of them and we can do the same with single quotes.

Numbers and Arithmetic

Numbers represent numerical data, they can be integers and floats, positive or negative in value.
int : +6
float : -5.12385

Arithmetic operators are the ones that handle our math. You don't really need math to be a full stack developer, but we do need basic arithmetic.

Conditionals

Logical operators used for making decisions and comparisons

Keeping in mind that one equal sign is only for assignment, while two or more are used when comparing values and types.

** Conditional Syntax **


if (condition is true) {
// do this thing
} else if (condition is true) {
// do this other thing
} else {
// default thing
}


You can have as many else ifs as you want, and as soon as you hit something that is true, it runs and stops. It doesn't check it any further.
Else statement is the "default", a fallback if none of the conditions were true.


const food = "pizza"
if (food === "cheeseburger") {
console.log("Not bad")
} else if (food === "pizza") {
console.log("Dominos!")
} else {
console.log("Are you even trying?")
}


In this case, we used const instead of let. Using const means that we won't be able to reassign it. Meaning, in this case, food will always be pizza and nothing else.

Multiple Conditions

We can also use a similar syntax to check multiple conditions at the same time.


if (name === "Tony" && state === "captured") {
//Build a mechanised suit of armour
}


• if his name is Tony AND he is captured to build a weapon of mass destruction, he builds an armoured suit.


if (day === "Saturday" || day === "Sunday") {
//It is the weekend
}


• if it's Saturday OR Sunday, it means it's the weekend

Next time we'll go through some actual programs and seeing it in action but you can see some examples on my GitHub if you want to play with it!