JavaScript — Understanding the Basics — AVWC

A vet who codes
May 7 · 7 min read
Photo by veeterzy from Pexels

Where should I begin?

So you want to learn how to work with JavaScript? You’re brand new, and have heard talk of all these fancy frameworks & libraries. You’ve heard talk of what they can offer. While React & Vue seem to be the big ones right now, there are tons of other options out there, and it seems like the options are growing at a breakneck pace. So which one should you choose? Well, I fully advise you to step back, take a deep breath, and learn the basics.

A little backstory

I have been working with JavaScript for going on 5 years now. Currently, I work at Ford as a frontend engineer. I work directly with React & TypeScript on a daily basis, and both of these tools bring me great joy. They’re easy to use. They make the code a lot easier to read and understand, and they have a ton of power.

With great power comes great responsibility

— Uncle Ben

As Uncle Ben put it, we must fully understand what we have at our disposal, and this is why I want to spend some time going over the basics.

Declaring Variables

In JavaScript, when we want to build something, we will usually have variables in any given block, or section, of code. A variable is something we can create and assign a value. There are two types of variables, and they start with either let or const. The primary difference between these two is that ones value can be reassigned, while the other cannot.

// If we have a counter we want to constantly update, we should use let let counterValue = 0; // If we want to store someones birth year, which will never get updated, we should use const const dateOfBirth = 1985;

Loops

Loops are one of the most commonly used things in code. It doesn’t matter the language, you will use these a lot. The two types I will discuss are the two I use the most, and they are the for loop and the while loop.

For Loop

This is the one most commonly used. I will show the code, and then explain.

for (let currentNumber = 0; currentNumber <= 10; currentNumber++) {          
console.log('The current number is ' + currentNumber);
};
// You should see the below in your browsers console window
The current number is 1
The current number is 2
The current number is 3
The current number is 4
The current number is 5
The current number is 6
The current number is 7
The current number is 8
The current number is 9
The current number is 10

While loop

The while loop is also a pretty commonly used loop. The syntax is below.

// First, we must declare our variable. Since this will change, we want to use the let keyword let currentNumber = 0; 
while (currentNumber <= 10) {
console.log('The current number is ' + currentNumber);
currentNumber++;
}
// You should see the below in your browsers console window
The current number is 1
The current number is 2
The current number is 3
The current number is 4
The current number is 5
The current number is 6
The current number is 7
The current number is 8
The current number is 9
The current number is 10

Conditional logic

= vs == vs ===

= const stringValue = '2'; 
const numberValue = 2;
// The single equals sign is used to assign value to something, like assigning values to stringValue and numberValue == if (stringValue == numberValue) {
console.log('True');
} else {
console.log('False');
}
// The == ignores data type, so this will return true === if (stringValue === numberValue) {
console.log('True');
} else {
console.log('False');
}
// The === cares about data type, so this is returned false

If statements

The other thing you will use a lot is the if statement. As above, I will show the code and then explain

const year = 2021;if (year === 2021) { 
console.log('True');
} else {
console.log('False');
}
// Above, we have 2 conditions. Check whether the year is 2021, otherwise check for any other value. This will return 'True' because the year was set to 2021 in our variable. const year = 2021;if (year == 2021) {
console.log('One');
} else if (year === 2022) {
console.log('Two');
} else {
console.log('Three');
}
// Above, we used something called an else if. This is a way to check for another set of defined conditions. If we wanted to check if the year was 2021, or the year was 2022, or anything else, we would write it this way. year === 2021 ? console.log('True') : console.log('false'); // We can also write an if statement using what's called a ternary operator, which is a shorthand way to write it. // condition ? expression_1 : expression_2;
// if the condition is true, return expression_1, otherwise return expression_2. In our case, the condition is true, so we will return expression_1.

Operators

The last thing we will discuss in this post is about logical operators. What if we need to check more than 1 thing in our if condition. What if we wanted to check that condition_1 and condition_2 were true, or say if condition_1 or conidition_2 were correct? Well we would write it like the following

const currentYear = 2021; 
const currentMonth = 'May';
const myName = 'Jeremy'
let returnedValue = '';
if (currentYear === 2021 && currentMonth === 'June') {
returnedValue = 'It is June, 2021';
} else if (currentYear === 2021 || currentMonth === 'June') {
returnedValue = 'It is either June or 2021';
} else {
returnedValue = 'Everything is wrong';
}
// What will be returned from this? // In our first check, the currentYear is 2021, but since the currentMonth is not June. The first check will fail. When we use && operator, everything in that check must pass. Essentially it is saying if condition_1 AND condition_2 are true, then this passes. // In our second check, we are saying if the currentYear is 2021 OR the currentMonth is June, then this passes. We only need 1 of the checks to pass here, so this will be true, and will set the returnedValue set to 'It is either June or 2021' // Since the else if block passes, our code never makes it to the else statement.
// If we want to check if a statement is true or false and do not want to explicitly type it out each time, we can do the following // True Statement 
if (statement === true) { ... }
// can be converted to if (statement) { ... } // This can be cleaned up further to the followingstatement ? ...do something here : ...do something else; -- False statement if (statement === false) { ... } // can be converted to if (!statement) { ... } // This can be cleaned up further to the following!statement ? ...do something here : ...do something else ;

Final thoughts

While these are only a few features offered in JavaScript, these are the things I tend to write more than anything else. Since JavaScript is all about logic and making your application perform logical operations, I felt like introducing you to these things was important.

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

A vet who codes

Written by

I work full time as a frontend software developer at Ford. I enjoy coffee, craft beer, and spending time with my family.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

A vet who codes

Written by

I work full time as a frontend software developer at Ford. I enjoy coffee, craft beer, and spending time with my family.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store