Javascript Fundamentals Overview
Published: 2021-07-01 19:17:23

---
title: Javascript Fundamentals Overview
published: true
date: 2021-07-01 17:29:41 UTC
tags: 
canonical_url: 
---

In this article, I’m gonna go over some of the common concepts in Javascript that are regarded as “fundamentals”. These are meant to be the most basics of the Javascript language, keep in mind that this is an overview so I won’t be going into detail with each concept mentioned. I do plan on writing dedicated articles for each concept I’m gonna mention here so look out for that if you’re into deep dives, alright let’s get to it.

### THE SYNTAX

The first thing you’ll learn in Javascript and pretty much any programming language (and just human language in general) is the syntax of the language. This is basically the way of communicating with the machine, the structure of your code. It’s easy to get the hang of how things are written in Javascript, most developers would probably agree that this part has a lot to do with muscle memory, meaning you just have to do it multiple times, (reading and writing code) to get familiar with how things must be presented. With syntax, you’d wanna learn how statements are expressed, how comments are written(both inline and multi-line), how functions look like, and how to call a function, grabbing user attention with the **alert** and **prompt** , outputting things with **console.log** , and much more...

```
// comments are important
/*
   Especially as
   Projects become
   More complex
*/

let someVar = 'somthing in here';
const anotherVar = 'something else in here'

function greet(){
   return 'hello';
}

greet();

alert('Tell a user something');
prompt('Ask for user input');

console.log('whatever here');
console.clear();
console.warn();

// And so on...

```

Above is an example of how statements are expressed in Javascript, obviously, there’s WAY MORE to syntax than what I’ve included but again, this is an overview, I don’t intend to make it long🙂

### VARIABLES

If you’re reading this, you probably already know what **variables** are so I’m not gonna waste your time. In the variables part of getting to grips with Javascript, you only need to understand how **let** differs from **const** and when it’s best to use each.

```
// "let" can be reassigned to something else
let message = 'hello, this is a reassignable message variable';

// "const" on the contrary cannot be reassigned
const message = 'hello, this message variable cannot be reassigned, only incremented';

```

I always use const unless I know the variable I’m defining might change.

### DATA TYPES

Variables hold different kinds of information, hence “data types”. These types of data are: **String** : plain textual information. **Number** : this is an integer or a floating-point number. **BigInt** : this represents an integer with arbitrary precision. **Boolean** : can only be one of two values (true/false). **Object** : a collection of information in key-value pairs. **Null** : represents “nothing” - “nothingness” **Undefined** : represents an uninitialized variable.

```
// String
const message = 'Hello World';

// Number
const num = 42;

// BigInt
const precise = 1n;

// Boolean
const isHappy = true;

// Object
const person = {
   firstname: 'Scroopy',
   lastname: 'Noopers',
   age: 24,
   occupation: 'cartoon character'
}

// Null
const input = null;

// Undefined
const notInitialized;

```

### Type Conversion

There are times when you have to or want to convert a certain type of data to another for whatever reason, that’s where type conversion comes in handy.

```
// String
let numString = '420';

// Convert to Number
let stringToNumber = Number(numString);

// Now "stringToNumber" holds the number 420 instead of string "420"

```

### Operators & Comparison Operators

We can perform mathematical operations in programming languages, and Javascript is no exception to this.

```
// addition
let add = 4 + 75;

// subtraction
let minus = 145 - 66;

// multiplication
let multiply = 44 * 33;

// division
let divide = 50 / 5;

// modulus
let remainder = 9 % 2;

```

Comparison operators are used for comparing 2 or more values and perform certain tasks depending on a returned value. Comparison operators return **Boolean** data types ( **true** or **False** ).

```
const x = 42;
const y = 55;

// check whether x is equal to y
const equal = x == y;

```

The variable “equal” returns false, as values of **x** and **y** are not equal.

```
const x = 42;
const y = 55;
const z = 42;

// check whether x is equal to either y or z
const equal = (x == y || x == z);

```

Now “equal” returns true because we used the **OR** operator “||” so we’re asking whether **x** is equal to **y** or **z**. The other comparison operators work pretty much the same:

```
/* check if one value is greater than the other. */
const greater = 4 > 3;

/* check if one value is less than the other. */
const less = 100 < 88;

/* check if one value is greater than OR equal to another. */
const greaterOrEqual = 55 >= 66;

/* check if one value is less than OR equal to another. */
const lessOrGreater = 78 <= 112;

/* check if BOTH values are true or not. */
const and = (12 == '12' && 12 == 'twelve');

/* check if values are strictly equal which means it compares their data type as well. */
const strictEqual = 65 === '65';

```

### CONDITIONALS

Conditionals are like how we as humans make decisions in real-life situations... conditions. For instance, If you’re going out and it’s raining, you should bring a rain jacket with you.

```
setInterval(() => {

   if(document.readyState == 'complete'){
       let name = prompt('Enter your name');
       alert(`Hello ${name}, welcome aboard!`);
   }

   clearInterval()
}, 1000)

```

Okay, forget the **Interval**. The snippet above checks the state of the document (landing page), if it's “complete” then user input is required and a welcome message is printed.

```
let weather = 42.2;

if(weather >= 23){
   alert('Warm')

}else{
   alert('Cold')
}

```

The conditionals above check for the **weather** (in Celcius). If the **weather** is **equal to** or **greater than** 22 degrees(Celcius) then print “warm” Otherwise print “cold”. This is probably a terrible example, but you get the idea.😅

### FUNCTIONS

Quite possibly one of the most important concepts in programming, functions are very useful, they perform tasks on our behalf, they allow us to avoid writing redundant code. There’s a lot more to functions and this concept can be an article on its own, here I’m just gonna go over the very basics.

```
function greetUser(name){
   return `Hello ${name}`;
}

greetUser('Jake');

```

What's happening here is, we have a function **greetUser** that takes a “name” as a **parameter** or **argument** and then returns a simple greeting message to the user. Functions need to be **called** in order to perform the given task(s), and they will always return values to where they were called.

```
function calculate(x, y){
   return x + y;
}

calculate(10, 15);

```

Functions can take whatever number of **parameters** you define. This **calculate** function takes two **parameters** , performs an **addition operator** , and returns their **sum (10 + 15)**.

Functions don’t always have to take in parameters though, they work absolutely fine without, It all depends on whether a function needs a parameter to perform a task.

There’s also a variety of **built-in** functions such as **alert(), typeof(), Math(),** and a lot more…

### LOOPS

There are a few ways to loop through data collections in Javascript. **while, for, forEach** are some of the most common.

```
// the while loop
let x = 0;

while(x <= 20){
   console.log(x);
   x++;
}

```

Set **x** to **zero** then **while**  **x** is **less than** or **equal to twenty** return the current value of **x** and **increment**  **x** by one. Basically, **count from 0 to 20**. Some methods of looping are better than others, better written, and maybe even execute better.

```
// the for loop
for(let x = 0; x <= 20; x++){
   console.log(x);
}

```

The **for loop** does the exact same thing as the **while loop** but as you can see, it looks better ad it actually executes faster. But there’s an even more precise way to loop.

```
// the forEach loop
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

nums.forEach(num => console.log(num));

```

The **forEach loop** is more precise, it does the same thing but with a few subtle differences, there’s no need for defining a **variable** , setting **conditions** , and **incrementing**. Just grab the data to loop through!

### SWITCH

The **switch statement** is similar to the **if statement** , except it's much easier to write and pretty precise. You’re basically performing certain tasks on given conditions.

```
let fruit = 'apples'

function check(){
   switch(fruit){
       case 'apples': return 'green and red';
       break;
       case 'bananas': return 'yellow';
       break;
       case 'grapes': return 'green and dark purple';
       break;
       default: return 'Checking...';
       break;
   }
}

console.log(check());

```

Alright, that’s all for Javascript fundamentals. Again, I will be producing full in-depth articles on each of the concepts mentioned here. Thanks for your time and please share this if you found it interesting or somewhat helpful.😊