What You Should Know In JavaScript
Understanding the concept of Variables, data types, Control Flow
Table of contents
No headings in the article.
What really is JavaScript?
JavaScript is a programming language that makes websites interactive and dynamic by allowing you to create and control different elements and behaviours on webpages.
In a layman's understanding, Imagine you have a toy robot that can talk. You want the robot to say "Hello!" when you press a button. To make that happen, you can use JavaScript.
First, you would tell the robot that when the button is pressed, it should say "Hello!" You would write a line of code like this in JavaScript:
robot.say("Hello master!");
Then, when you press the button, the robot follows the instructions and says "Hello master!" just like you told it to.
So, JavaScript helps you give instructions to make things happen with the robot or on a computer. It's like a secret language that helps you tell the computer what you want it to do!
Getting into the concept of JavaScript
1. Embedding JavaScript in HTML file:
The very first thing you need to know in JavaScript is how to embed JavaScript in a HTML(Hypertext Markup Language)file. Before embedding, you will need to create a separate JavaScript file.
JavaScript files could be created as a script.js or Operator.js or index.js or main.js. Whichever type you use to create will automatically become a JavaScript file.
The script file is usually written in the body section as <script src "main.js"></script> or in the head section. The src contains the separate JavaScript file. For best practices, it is safe to embed the JavaScript file in the head section.
<html>
<head>
<title>Embedding JavaScript in Html file</tittle>
<script src = "main.js></script>
</head>
</html>
2. Understanding what Variables mean in JavaScript
Variables are a fundamental part of JavaScript Programming. They allow you to store and manipulate data, making your code more dynamic and flexible. Understanding how to declare, assign and use Variables effectively is very crucial for writing JavaScript programs. Now, let's see how to declare and name variables.
Declaring Variables:
Variables are declared using the var, let or const keyword. Recently, the var keyword has been suspended for declaring Variables with. After declaring a variable, an assignment operator ( = ) is used to assign a variable to a particular data value either a number, boolean, string, array etc.
-Variables declared with the let keyword can be reassigned to different values. For example;
let ageEsther = 9;
ageEsther = 18;
-Variables declared with the const keyword are read-only once and cannot be reassigned. For example;
const PI = 3.1;
PI = 3.142; // This will result in an error
Naming Variables:
To name a variable, letters(age), digits(age2), underscores (_age) and dollar signs($age) can be used but the variable name cannot start with a digit (for example, let 67 = "John";). Since the JavaScript file is case sensitive, so firstAge and FirstAge could be treated as separate variables.
Make sure that whatever variable name you use is descriptive because these paves way for writing cleaner code(easily understood by other developers)
Conventions on how to name a variable:
When variable names come in pairs, the Camel case notation is used. This means that whenever we have multiple words, the first word will be in lower case and then all other words preceded with an uppercase first letter like firstName, firstJob, selectNumbers, etc
3. Working with Data Types
Data types are like different categories or groups that help us understand and work with different kinds of information. Each data type has its own characteristics and behaviours, allowing us to do different things with them.
They are classifications of values that determine the operations that can be performed on them. They include primitive types like numbers, strings, booleans, null, undefined, as well as non-primitive types like objects and arrays.
Data types in JavaScript are like different kinds of toys. Each toy is special and can be used in different ways. Some toys are numbers, some are words(strings), some are yes or no(boolean), and some are like containers(objects and arrays) for other toys.
Data types have two different types namely:
1. Primitive Data Type (Numbers, Strings, Boolean)
2. Non-primitive Data Type (Objects and Arrays)
1. Primitive Data Type: Primitive Data Type in JavaScript are called primitive because they are the most basic and fundamental data type upon which more complex data structures are constructed. They are the building blocks and are predefined and built into the JavaScript itself.
In similarity, primitive Data Type can be compared to the fundamental quantities in Physics like the Length, Mass and Time. These three fundamentals building blocks of quantities form the basis for the derived quantities like Volume, Area, Acceleration, Velocity, force etc.
For example to derive the formula of force which is mass x acceleration. You will need to first break the components down.
-Mass on its own is a fundamental quantity.
-Acceleration is obtained from the result of multiplying Velocity x time. Therefore, time in this regard is a fundamental quantity.
So you see, without the fundamental quantities, looking to find the formula of Acceleration would be impossible. This is relatable to Primitive Data Type in JavaScript.
So the Primitive Data Type in JavaScript are Numbers, Strings and Boolean. They are the building blocks which form the data structures present in an array or objects.
A quick dive into strings and template laterals
An easy way to build strings is usually something called template laterals. ${}- is a template lateral. It makes a cleaner code structure. Inside the curly brace, we can have a variable name which is declared rather than concatenating multiple strings.
For example;
Output a code which says: I'm Esther Umoh, a 18 year old web developer.
Rather than writing:
console.log("I am Esther Umoh, a 18 year old web developer")
You could logically write:
First, declaring a variable to hold certain strings;
const name = "Esther Umoh";
const careerTittle = "Web Developer";
const birthYear = 2005;
const currentYear = 2023;
console.log(`I'm ${name}, a ${current Year - birthYear} year old ${careerTittle}`)
2. Non-primitive Data Type:
Non-primitive Data Types are complex data structures that can hold multiple values. They include objects, arrays, and functions, and are composed of primitive data types(numbers, strings, Boolean) and other non-primitive data types.
1. Array example -
let array = [45, "ageEsther", true];
2. Object example -
let car = {
carName: "Tesla"
carManufacturingData: 2014
isCarNew: True
};
3. Function example -
function greet(name){
console.log("Hello "+ name)
}
greet("Esther Umoh")
Output: Hello Esther Umoh
4. The operators' congregation: You might wonder why I named it "the operator congregation"? It is because we have more than one operator which sometimes are used concurrently.
An operator is basically what allows you to transform values, or combine multiple values and really do all kinds of nice work with values. There are many different types of operators like the mathematical or arithmetical operator, comparison operators, logical operators, assignment operators and many more.
5. Control Flow and Loop
A loop is a programming construct that executes a piece of code as long as a specific condition is met. There are two types of loops:
A. Entry-control loops (for loops and while loops are entry-control loops)
B. Exit-control loops (do while loops).
A. Entry-control loop(for loop):
We have three variables in the entry-control loop
1. counter variable ---- it keeps track of how often the code has been executed. Example i = 0
2. condition variable ---- it keeps looping until the condition is met.
For example, i < 0
3. the increment counter variable ---- it increases the loop(i++)
For example;
for(let i = 0; i <= 7; i++){
console.log(i)
}
Output: It produces a result from 0 to 7.
Note: for loops are used in an array.
For example;
let array = [1, 2,3,4,5,6,7]
for(i=0; i<array.length; i++){
console.log(array[i])
}
B. Entry control loop(While loop)
There are two parts in while loop:
1. a variable that will keep changing
2. and an ending condition which is the maximum value a variable can reach
Note: while loop is used for a condition that has an end.
B. Exit-control loop(do while loop)
The do-while loop executes the code before checking for the condition.
For example;
let count = 0;
do{
console.log("count: "+ count)
count++
}
while(count <=7);
Output:
Count: 0
Count: 1
Count: 2
Count: 3
Count: 4
Count: 5
Count: 6
Count: 7
Note: The code block starts incrementing before checking for the condition (to stop at 7)