cft
Become a CreatorSign inGet Started

JS 101:Introduction to modern JavaScript.

An introduction to the basic concepts of programming in JavaScript and an insight into the prospects that make modern JavaScript.


user

Muriithi Gakuru

3 months ago | 4 min read
Follow

js-101introduction-modern-javascript-duqna

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

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

// This is a single line comment

/* This

is

a multi-line

comment

*/

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";

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;

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

let a = 123e5; // 12300000

let d = 123e-5; // 0.00123

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

const temperature = 13.4;

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;

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)

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 ]

Syntax for an array is

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

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

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

}

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

}

for/in - loops through the properties of an object

for (key in object) {

// code block to be executed

}

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

for (variable of iterable) {

// code block to be executed

}

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

while (condition) {

// code block to be executed

}

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

do {

// code block to be executed

}

while (condition);

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()

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")

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!!


Upvote


user
Created by

Muriithi Gakuru

Follow

Software Developer

I am a Software Developer and student at the East African University. I love code and building software solutions. I am the Department leader for Machine Learning and Data Science department on campus


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles