DEV Community: David Kyalo

Modern JavaScript for everyone: Mastering Modern JavaScript The Right Way

David Kyalo — Fri, 04 Mar 2022 22:56:08 +0000

Introduction

JavaScript was initially created to make web pages interactive(alive).The programs in this language are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads.

Scripts are provided and executed as plain text. They don’t need special preparation or compilation to run. Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called the JavaScript engine. The browser has an embedded engine sometimes called a “JavaScript virtual machine”.
Different engines have different “codenames”. For example:

V8 – in Chrome, Opera and Edge.
SpiderMonkey – in Firefox.

In this article, I will be discussing pure JavaScript (vanilla) and some of the popular frameworks. In case you're just getting started with JavaScript, here are some of my previous articles that may be useful:
JavaScript 101: Ultimate JavaScript Guide
Introduction to Data Structures and Algorithms With Modern JavaScript

ECMAScript

This is a general-purpose programming language that is implemented in Javascript and some other languages. It is the scripting language that formed the basis of browser-based Javascript and Node.js. ECMA is an acronym for European Computer Manufacturer’s Association, which develops standards for information technology and consumer electronics. Languages such as ECMAScript, Dart-lang, and C# were standardized by ECMA.

Vanilla

The term vanilla script is used to refer to the pure JavaScript (or we can say plain JavaScript) without any type of additional library. It's imperative for any developer to begin with vanilla JavaScript before moving on to other frameworks.

The vanilla script is one of the lightest weight frameworks ever. It is very basic and straightforward to learn as well as to use. You can create significant and influential applications as well as websites using the vanilla script. The team of developers that created the vanilla JavaScript is continuously working on it to improve it and make it more useful for the web-developers.

React

React is a fast, scalable, and reusable framework for building interactive user interfaces (UIs). React supports incremental use and uses the virtual DOM model for expedited updates of web page content. Naturally, it mainly supports the View piece of the Model-View-Controller (MVC) paradigm.

React is capable of supporting enterprise applications with ease. React introduced the idea of components, which are self-contained modules of code that are packaged for reuse. Components save developers time by writing code once and then using it across the application. Then, you only need to change the code in one location for updates.

React can be extended to servers to support server-side rendering versus rendering in the browser. The framework also supports JSX, which provides shorter and simpler syntaxes for common tasks versus normal JavaScript.

Node.js

Node.js is an open-source, runtime environment built to execute JavaScript outside of a browser, which distinguishes it from the front-end focused frameworks in the following sections.

The framework is designed to build network applications at scale. To support this goal, Node is optimized for efficient handling of resources and integrates well with other frameworks and libraries.
Built on Google Chrome's JavaScript Engine, Node leverages asynchronous loading from its APIs for faster responses. Another feature is the framework's ability to proxy some types of servers for more efficient testing.

A final benefit of Node is the Node Package Manager (NPM), a directory of over one million JavaScript libraries. These packages include server frameworks like Express, testing suites like Jest, Object-Document Mapping (ODM) solutions for SQL databases like Sequelize, and Object-Relational Mapping (ORM) solutions for NoSQL databases like Mongoose. NPM libraries can structure your entire web application, allowing your team to work in JavaScript across the full stack.

Conclusion

It's important to note that being a developer isn't about knowing syntax; you should be able to solve real world problems. This can be achieved by:

Remaining consistent
Doing projects
Enrolling in bootcamps
Doing research

Introduction to Data Structures and Algorithms With Modern JavaScript

David Kyalo — Mon, 21 Feb 2022 20:10:28 +0000

Data Structures

Data structures allow you to manage data. JavaScript has primitive and non-primitive data structures. Primitive data structures and data types are native to the programming language. These include boolean, null, number, string, etc.
Non-primitive data structures are not defined by the programming language but rather by the programmer. These include linear data structures, static data structures, and dynamic data structures, like queue and linked lists.

1. Array

An array is a single variable that keeps numerous elements. In JavaScript, an array may hold different items such as Boolean, strings, and numbers, all of which can be stored in a single array.
Arrays can be declared in two ways. This is shown in the examples below.

let array = ['JavaScript','is','fun']

let array = newArray('JavaScript','is','fun')

Because arrays are indexed from 0, a number in square brackets is used to access elements in an array. This is shown below:

let array = ['JavaScript','is','fun']
console.log(array[0]) //JavaScript
console.log(array[1]) //is
console.log(array[2]) //fun

The number of elements in an array is returned using the length property of arrays. An array's length attribute can be returned as shown below:

let array = ['JavaScript','is','fun']
console.log(array.length) //3

We may assign a value to the next index to add a new value to our array.

let array = ['JavaScript','is','fun']
array[3]='always'
console.log(array)

//The output is: ['JavaScript','is','fun','always']

We utilize the splice() function to remove or delete a specific item from an array. For example:

let array = ['JavaScript','is','fun']
array.splice(1,1)
console.log(array) //['JavaScript','fun']

To loop through an array, we may use the for keyword to loop through the full array, taking use of the length parameter. For example:

let array = ['JavaScript','is','fun']

for(a=0;i<array.length;a++){
   console.log(a,array[a]
}


/* The output is:
0 'JavaScript'
1 'is'
2 'fun'
*/

2. Queue

A queue is also a data structure but you can remove only the first added element. This principal is called FIFO (first in first out). The following is the constructor of the queue:

function Queue(){
  this.elements=[]
}

The Queue() constructor function uses an array to store its elements. The enqueue() method adds an element at the end of the queue. We use the push() method of the array object to insert the new element at the end of the queue.

Queue.prototype.enqueue = function (e) {
   this.elements.push(e);
}

The dequeue() method removes an element from the front of the queue. In the dequeue() method, we use the shift() method of the array to remove an element at the front of the queue.


Queue.prototype.dequeue = function () {
    return this.elements.shift();
}

3. Stack

A stack is an ordered list which follows LIFO (last in first out) algorithm. You can access the elements of a stack from only a single end. The push() method allows you to add one or more elements to the end of the array. The push() method returns the value of the length property that specifies the number of elements in the array. This is shown below:

let stack = [];

stack.push(1);
console.log(stack); // [1]

stack.push(2);
console.log(stack); // [1,2]

stack.push(3);
console.log(stack); // [1,2,3]

The pop() method removes the element at the end of the array and returns the element to the caller. If the array is empty, the pop() method returns undefined. This is shown below:

console.log(stack.pop()); //  3
console.log(stack); // [1,2];

console.log(stack.pop()); //  2
console.log(stack); // [1];

console.log(stack.pop()); //  1
console.log(stack); // []; // empty

console.log(stack.pop()); //  undefined

4. Linked list

A linked list is a linear data structure similar to an array. However, unlike arrays, elements are not stored in a particular memory location or index. Rather each element is a separate object that contains a pointer or a link to the next object in that list. Each element (commonly called nodes) contains two items: the data stored and a link to the next node. The data can be any valid data type. The code below shows the implementation of a linked list class with a constructor.

class LinkedList {
    constructor(head = null) {
        this.head = head
    }
}

Algorithms

An algorithm is a sequence of steps to solve a well-defined problem. A set of rules that precisely define a sequence of operations. We have different types of algorithms as stated below:

Recursion This is a programming technique using function or algorithm that calls itself one or more times until a specified condition is met at which time the rest of each repetition is processed from the last one called to the first. Recursion involves solving problems by breaking things down into simpler/smaller versions of themselves
Binary Search This is a divide and conquer algorithm, that divides the array in half every time it checks whether an element of the array is the one, we're looking for.
Tail recursion
This is when, instead of doing an invocation of the recursive function as the return statement, it does a jump and reuses the same context of the prior recursive called.
Big O notation
This is a way of representing the general growth in the computational hardness of a task as you increase the data set.
Imperative code
This is when you tell your program every single step to achieve a specific outcome as per your expected output.

JavaScript 101: Ultimate JavaScript Guide

David Kyalo — Sun, 13 Feb 2022 14:02:31 +0000

Introduction

JavaScript is one of the most popular programming languages on the planet. It can both be used as a client-side or server-side language. On the client-side, it is used with HTML(Hypertext Markup Language) and CSS(Cascading Style Sheets) to enhance a web page’s functionality such as: validating forms, creating interactive maps, and displaying animated charts. JavaScript can also be run on servers; a popular server side environment is Node.js. Here, it's used to access databases and file systems.

Getting Started

Because of its wide range of applications, you can run JavaScript in several ways:

Using console tab of web browsers
Using Node.js
Using code editors e.g. Visual Studio Code
By creating web pages

All the popular web browsers have built-in JavaScript engines hence you can run JavaScript on a browser. In this JavaScript guide we'll be using the google chrome console tab to run our first JavaScript program.

Exciting, innit?

The first step is to open google chrome, followed by opening the console tab by pressing Ctrl+Shift+i if you're on windows. You can use the console tab to run any JavaScript program.

In JavaScript, users can declare a variable using 3 keywords: var, let and const. var is global scoped, let is block scoped while const is also block scoped but can't be updated once it's declared.

Our first JavaScript program will simply be outputting a message on the console. Let's first declare a string variable x as shown below.
var x = "Hello world!";

The next step is to output the string on the console using the command below.
console.log(x);

The output of this program is shown below.

That wasn't hard, was it?

What Next?

If you wish to continue learning JavaScript in depth, here are some free resources that may be helpful:

I hope you found this article useful and I'd like to urge you to do as many projects as possible in order to improve your skills. Bonne chance!