DEV Community

Cover image for JS 101:Introduction to modern JavaScript.
Muriithi Gakuru
Muriithi Gakuru

Posted on

JS 101:Introduction to modern JavaScript.

JavaScript is the most used programming language. It is used alongside HTML(Hypertext Markup Language) and CSS(Cascading Stylesheet) on the World Wide Web. It is used on the client side to manipulate webpage behavior.
JavaScript is Multi-paradigm. This means that it is event-driven, functional, imperative and incorporates object-oriented programming.

Getting Started.

We're going to print a Hello World statement. JavaScript uses the console on the browser to print statements. You don't need to install JavaScript since it is interpreted by the browser. We just have to write code on a file with a dot js extension as such;
myFile.js

Console log image

On your browser, navigate to the location of your project. Right-click and select inspect. Click on the console tab to get your console.
We can achieve the same result using an Integrated Development Environment.
We just have to write code on a file with a dot js extension as such;
myFile.js

Visual Studio Code
We get the same print statement when we refresh the browser.

Hello World on the browser
The hello world statement is a bit distorted to show the difference.
Comments

// This is a single line comment
/* This
    is
    a multi-line
    comment
*/
Enter fullscreen mode Exit fullscreen mode

Variables

We assign variables using various keywords such as var, let or const
Var - var is used to declare variables. It is flexible in that the data can be reassigned later in the code. Var is functional scoped It is able to run in the older browser versions.
Let - it's used to declare variables much like var. The difference is let can not be redeclared later on. Let has a block scope. Get more information here.
Const - These are constant that are block scoped much like let declared variables. Values cannot be reassigned but the can be redeclared through variable declaration. However, if a constant is an object or array its properties or items can be updated or removed.

**

Data Types

**
Strings - Js support string assignment. This is used to print statements and store words or variables that are required to be processed as strings.

let name = "Muriithi Gakuru";
Enter fullscreen mode Exit fullscreen mode

The value is enclosed by quotation marks and the end of the statement has to be a semi-colon.

Integers - These are assigned decimal numbers

let b = 210;
Enter fullscreen mode Exit fullscreen mode

Extra large or extra small numbers can be written with scientific (exponential) notation

let a = 123e5;      // 12300000
let d = 123e-5;     // 0.00123
Enter fullscreen mode Exit fullscreen mode

Floating Point numbers - These are declared much like integers only that these have decimal points.

const temperature = 13.4;

Enter fullscreen mode Exit fullscreen mode

Boolean Values - These are assigned values that show whether a condition or values is true or false.

let isAlive = true;
// reassign to false
isAlive = false;
Enter fullscreen mode Exit fullscreen mode

BigInt - Used to represent an manipulate primitive bigint values which are too big to be represented by a number.

const MaxSafeInteger = 9007199254740991n

const alsoHuge = BigInt(9007199254740991)
Enter fullscreen mode Exit fullscreen mode

Arithmetics - JavaScript supports all mathematical arithmethic and logical operations.

Arrays

An array is a special variable, which can hold more than one value. The values are enclosed in square brackets.

const cars = ["volvo", "mercedes", "Rolls Royce"]
// They can contain different data types
let details = ["Muriithi Gakuru", 23, "Wisconsin", 72.4 ]
Enter fullscreen mode Exit fullscreen mode

Syntax for an array is

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];
Enter fullscreen mode Exit fullscreen mode

Objects

JavaScript objects are containers for named values called properties.
These store values that can be accessed using name:value pairs. They are variables enclosed using curly braces.

const car = {
   type:"Fiat", 
   model:"500", 
   color:"white"
};
// You can access the value by using the key ie. property name `car.key`
console.log(car.type) // this will print Fiat

Enter fullscreen mode Exit fullscreen mode

Conditional Statements

Conditional statements are used to perform different actions based on different conditions.
Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false

if (condition) {
  //   executed if the condition is true
}else if(condition){
 //    executed if the first condition failed
}
else{
  // executed if the previous conditions failed
}
Enter fullscreen mode Exit fullscreen mode

Loops

JavaScript supports different kinds of loops:

for - loops through a block of code a number of times

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}
Enter fullscreen mode Exit fullscreen mode

for/in - loops through the properties of an object

for (key in object) {
  // code block to be executed
}
Enter fullscreen mode Exit fullscreen mode

for/of - loops through the values of an iterable object

for (variable of iterable) {
  // code block to be executed
}
Enter fullscreen mode Exit fullscreen mode

while - loops through a block of code while a specified condition is true

while (condition) {
  // code block to be executed
}
Enter fullscreen mode Exit fullscreen mode

do/while - also loops through a block of code while a specified condition is true

do {
  // code block to be executed
}
while (condition);
Enter fullscreen mode Exit fullscreen mode

More information on the loops is shared here

Functions

A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it). It is called using the function name, either to print or to return a value.

function printName(){
   name = "Muriithi Gakuru";
   console.log("My name is", name);
}
//call the function
printName()
Enter fullscreen mode Exit fullscreen mode

A function may take arguments making calling JS functions more dynamic.

function printName(name){
   console.log("My name is", name)
}
// call the function using an argument
printName("Muriithi Gakuru")
Enter fullscreen mode Exit fullscreen mode

This is just an introduction into the vastness of JavaScript. It is a very robust language hence its uses both in the client side and the server side. Keeplearning and Follow for more content. Cheers!!
credits
w3schools
mozilla

Top comments (2)

Collapse
 
dhananjaywarade profile image
Dhananjay Warade

This is very helpful for me , thanks bro.

Collapse
 
muriithigakuru profile image
Muriithi Gakuru

You're welcome, let's keep learning.