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.😊