DEV Community: Maxwell_Munene

JavaScript 101: Ultimate JavaScript Guide

Maxwell_Munene — Tue, 02 Aug 2022 00:15:00 +0000

Javascript is a scripting language that works alongside HTML and CSS to enhance code functionality and add interactive elements. It can be embedded in HTML using the tag and is an interpreted language, which means it is not compiled. As a beginner, the best approach to JavaScript would be to understand its basic building blocks. Here goes:- JavaScript Variables A variable is a container in which you place any literal value into, or assign it to represent an object that you have created. Variables can be changed or operations performed on them. Each variable created can be associated with an object or datatype that you can access the properties and methods <div class="highlight"><pre class="highlight plaintext"><code>var a = 5; a = 10; var b = 3; var c = a + b; var person1 = "Bill"; var person2 = "Sara"; var myText = person1 + "went to school with + person2; </code></pre></div> Variable declaration and initialization examples There are three different variable types: <code>var</code>, <code>let</code>, and <code>const</code>. Each of these variables has several rules around how they should be used and have different characteristics. Javascript Arrays An array is a variable type in any programming language used to store multiple values simultaneously. Arrays store data in the form of elements, therefore, an array is a collection of elements. We can store multiple data types in arrays, like strings, integers, arrays, or even functions. Array are divided into four types: Homogeneous arrays Heterogeneous arrays Multidimensional arrays Jagged arrays. read more <a href="https://linuxhint.com/javascript-arrays-beginner-guide/">https://linuxhint.com/javascript-arrays-beginner-guide/</a> <div class="highlight"><pre class="highlight plaintext"><code>var languages = ["javascript", "python", "java"]; </code></pre></div> Array example Javascript Object A JavaScript object is an unordered collection of key-value pairs. Each key-value pair is a property. The key can be a string and the value of a property can be of any value eg. string, number, array and function. There are many ways to create an object, the most commonly used one is the object literal notation. To create an object with properties you use the key-value pair with curly braces. <div class="highlight"><pre class="highlight plaintext"><code>let person = { firstName: "John", lastName: "Doe", } </code></pre></div> An object There are Standard built-in objects that you will need to be familiar with. They include:- String Object Array Object Date Object Math Object Number Object RegExp Object Boolean Object Function Object JavaScript Functions JavaScript code is run inside a function. They allow us to write code that will be used over and over again keeping your code dry. A function is executed when ‘something’ invokes/ calls it:- <ul> <li>when an event occurs (click event).</li> <li>When it is invoked from JS code.</li> <li>When it’s an automatic call (self invoked).</li> </ul> Also, learn how to use arrow functions in JavaScript ES6. <div class="highlight"><pre class="highlight plaintext"><code>function name(parameter1, parameter2, parameter3) { //code to be executed } </code></pre></div> A basic function example JavaScript Conditions and loops Conditions evaluate things and add logic to your scripts You require a full understanding of the comparison operators essential for conditional programming. They include:- <ul> <li>if-else</li> <li>switch-break</li> <li>ternary</li> </ul> A loop is a programming construct that repeatedly executes a piece of code as long as a certain condition is met. JavaScript now supports five different types of loops: <ul> <li>while</li> <li>do…while</li> <li>for</li> <li>for…in</li> <li>for…of</li> </ul> Summary ECMAScript 2015 also known as ES6 was the second major revision to JavaScript that came with important new features that you need to be familiar with. <a href="https://www.w3schools.com/js/js_es6.asp">https://www.w3schools.com/js/js_es6.asp</a> read more on JavaScript ES6. This article will give you an overview guide to learning JavaScript’s basic concepts the best way. follow me on twitter<a href="https://twitter.com/MaxwellmuneneM"></a>

Modern JavaScript for everyone: Mastering Modern JavaScript The Right Way

Maxwell_Munene — Fri, 04 Mar 2022 21:46:00 +0000

Coucou! I'm going to briefly share what I know about modern JavaScript and the necessary concepts that you need to master in ES6.

ECMAScript 2015/ ES2015(ES6) was the first major update to JavaScript since ES5.

Let's look at the new ES6 syntax.

let, const

ES6 came with let and const as an addition to the good old var. Any variable declared with var outside a function block is available in the whole window.

let is now more preferred for variable declaration. It is block-scoped, meaning anything within the curly {} is a block and cannot be accessed outside of the block.
let can be updated but not *re-declared *

let name = "John";
name = "Jane"

this will work

let name = "John"
let name = "Jane"//error:identifier 'name' has already been declared

However, if the same variable is declared in different scopes there will be no error because they are treated as different variables.

const is used to declare constant variables. It is also block-scoped but then it cannot be updated or re-declared.

const name = "John"
name = "Jane" //error: Assignment to constant variable.

Objects declared with const cannot be updated however, the properties can be updated.

const human = {
name: "John",
gender: "male"
}

human.name = "Justin" //is updated without errors

Rest Parameter `(a, b...args)`

in ES6, a function definition's last parameter can be prefixed with ... which allows all the remaining 'the rest' parameters to be placed within a standard JS array.

function myFunc(a, b, ...more){
console.log('more', more) //output: ['c','d','e']

In layman's, ...rest bundles all the extra parameters into a single array.

Spread Operator (...)

Spread allows an iterable such as an array expression or string to be expanded in places where zero or more arguments or elements are expected, or an object expression to be expanded in places where zero or more key-value pairs are expected.

function sum (x, y){
return x + y;
}
const numbers = [1, 2];
console.log(sum(...numbers)); //output: 3

Spread syntax can be used when all elements from an object or array need to be included in a list of some kind.

Template Literals

Template literals are enclosed by backticks character instead of quotes. They are used to allow embedded expressions called substitutions
They can contain placeholders indicated by the dollar and curly braces.
${expression}
These expressions in the placeholders and the text between the backticks get passed to a function.
To escape a backtick in a template literal, put a backslash \ before the backtick

`\`` === '`' //true

Arrow function

This is a compact alternative to the traditional function expression, but is limited and cannot be used in all situations.

//Traditional
function (a){
return a + 10;
}

//Arrow Function
(a) => {
return a + 10;
}
//Also
a => a + 10;

Differences and limits

Doesn't have its own bindings to this or super and cannot be used as a method.
Doesn't have a new.target keyword.
It is not suitable for call, apply and bind methods.
Cannot be used as constructors.
Cannot use yield within its body.

For Of Loop

With for of, you can iterate over iterable data structures such as arrays, strings, maps etc.

var num = [0, 1, 2, 3, 4];
for (let i of num)
{
console.log(i); // 0 1 2 3 4
}

Array Methods

Some new array methods were introduced in ES6 that are needed to master. They include:-

Array.from() Converts array-like values and iterable values into arrays.
Array.of() Creates an instance from a variable number of arguments instead of the number of arguments or types.
Array.prototype.copyWithin() Copies the part of an array to a different location within the same array.
Array.prototype.find() It finds a value from an array, based on the specific criteria that are passed to this method.
Array.prototype.keys() It returns an array iterator object along with the keys of the array.
Array.protorype.values() it provides the value of each key.
Try to understand these (among Other) new array methods.

To fully master Javascript you should have a good knowledge of ES5 as ES6 just polishes up to give more functionality to the JavaScript language.

Libraries and Frameworks

Once you are conversant with vanilla JavaScript, it is only right to go into Frameworks and Libraries.
A JavaScript framework is a collection of pre-written code built to support applications and provide benefits that plain JavaScript does not offer on its own.

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.

It is designed to build network applications at scale.

React - is a fast, scalable, and reusable framework for building interactive user interfaces (UIs). Like Vue, 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.
Vue.js - Vue is a front-end JavaScript framework that is designed to be approachable, versatile, and fast with a core focus on building single-page applications (SPAs).
Vue's central library focuses on the View layer of the MVC architecture and uses the virtual DOM model for fast updates without needing to reload the page.
Angular - Angular uses data binding, which automatically synchronizes data between the database and the client, saving developers from having to define requests and responses when a user interacts with the UI. The framework also supports dynamic rendering with its JSON-based processor.

Conclusion

An Ideal JavaScript roadmap will require one to up-skill from the basic JavaScript, ES6 and finally working with Framework(s) to build modern web products.

I recommend freecodecamp and the MDN web docs
MDN web docs as great resources, among others, for you to master JavaScript from the ground up. I Hope this is helpful.
_Let's code,
Cheers! _

DATA STRUCTURES & ALGORITHMS - MODERN JS

Maxwell_Munene — Mon, 21 Feb 2022 21:43:46 +0000

Introduction

When you build software there are many topics you need to think through first in order to achieve the goal and have a nice result.

You need to ask yourself questions such as:-

How are you going to store data?
How are you going to deal with static logic?
How will you handle authentication? Etc.

Algorithms

An Algorithm is a step-by-step procedure that defines a set of instructions to be executed in a certain order to get the desired output.

Algorithms are generally independent of the underlying languages. They can therefore be implemented in more than one language.

The main properties of an algorithm that you can consider include:-

Input- An algorithm must possess 0 or more well-defined inputs supplied externally to the algorithm.
Output- An algorithm should have 1 or more well-defined outputs as desired.
Correctness- Every step of the algorithm must generate correct output.
Definiteness-Algorithms should be clear/unambiguous, thus every step of the algorithm should be clear and well defined.
Finiteness- The algorithm should have a finite number of steps that must be carried out to achieve the task at hand.

One thing that makes algorithms worth studying is that in most cases, there exists more than one algorithm capable of handling the task at hand.

Data Structures

Data structures enable us to manage and utilize large datasets, handle multiple requests from users at once, and speed up data processing.

Therefore, learning Data Structures and Algorithms allows us to write different efficient and optimised computer programs.

Let’s take a look at types of Data Structures in JS

Arrays

This is the most basic of all data structures. Basically, an array is a container object that is used to hold a list of items usually of the same type.

Each array has a fixed number of cells decided on its creation, and each cell has a corresponding numeric index used to select its data.

JavaScript has dynamic arrays i.e their size is not predetermined, nor the type of data.

The easiest way to create a JavaScript Array is using array literal.

let arrayName = [element1, element2, element3, ...];

There are common methods associated with arrays that you should know.

Common methods you should know

Queues

Queues are sequential structures that process elements in the order they have entered rather than the most recent element, also known as the FIFO(First In First Out).

A Queue has the following associated JavaScript methods:-

enqueue: enter queue/add an element at the end.
dequeue: leave queue/remove the front element and return it
front: to get the first element
isEmpty: determine whether the queue is empty
size: get the number of element(s) in queue

function Queue() {
 var collection = [];
 this.print = function () {
   console.log(collection);
 }
 this.enqueue = function (element) {
   collection.push(element);
 }
 this.dequeue = function ()=> {
   return collection.shift();
 }
 this.front = function () {
   return collection[0];
 }

 this.isEmpty = function () {
   return collection.length === 0;
 }
 this.size = function () {
   return collection.length;
 }
}

JS implementation of a queue

Applications of Queues

They are helpful as a buffer for requests, storing each request in the order it was received until it can be processed.
A convenient way to store order-sensitive data such as stored voicemails
Ensures the oldest data is processed first

Stack

Similar to Queue, Stack is a linear data structure that follows the LIFO(Last In First Out) or FILO(First In Last Out) principle
Stack is an abstract data type that serves as a collection of elements, with two principal operations:

push, which adds an element to the stack, and
pop, which removes the most recently added element that was not yet removed.

Whenever we add an element to the stack, it is added at the top of the stack and also whenever we delete an element from the stack it is deleted from the top of the stack.

function Stack() {
this.count = 0;
 this.storage = {};

 this.push = function (value) {
   this.storage[this.count] = value;
   this.count++;
 }

 this.pop = function () {
   if (this.count === 0) {
     return undefined;
   }
   this.count--;
   var result = this.storage[this.count];
   delete this.storage[this.count];
   return result;
 }

 this.peek = function () {
   return this.storage[this.count - 1];
 }

 this.size = function () {
   return this.count;
 }
}

function stack example in JS

Linked lists

A Linked list is a linear collection of data elements, in which linear order is not given by their physical placement in memory. Instead, each element points to the next.

A unilateral linked list normally has the following methods:

size: Return the number of node(s)
head: Return the element of the head
add: Add another node in the tail
remove: Remove certain node
indexOf: Return the index of a node
elementAt: Return the node of an index
addAt: Insert a node at a specific index
removeAt: Delete a node at a specific index

const list = {
    head: {
        value: 6
        next: {
            value: 10                                             
            next: {
                value: 12
                next: {
                    value: 3
                    next: null  
                    }
                }
            }
        }
    }
};

A simple js Linked list.

A new instance of the LinkedList object will have the head and tail pointers refer to the null value, while the length property will start at 0.

There are three known types of linked list data structure:

Singly-linked list where each node only has the next pointer
Doubly linked list where each node as both next and previous pointer
Circular linked list where the tail node points to the head node, creating a circle.

Conclusion

Data structures and algorithms can solve the most common problems efficiently. This will make a difference in the quality of the source code you write. This includes performance.

If you choose the incorrect data structure or algorithm depending on the scenario, you can have some performance issues, therefore, this informs that Data structures and algorithms are core elements in any system or software development ecosystem.

I hope I shed some light on DSA.
Cheers!

DEV Community: Maxwell_Munene

JavaScript 101: Ultimate JavaScript Guide

Modern JavaScript for everyone: Mastering Modern JavaScript The Right Way

let, const

Rest Parameter (a, b...args)

Spread Operator (...)

Template Literals

Arrow function

For Of Loop

Array Methods

Libraries and Frameworks

Conclusion

DATA STRUCTURES & ALGORITHMS - MODERN JS

Introduction

Algorithms

Data Structures

Arrays

Queues

Stack

Linked lists

Conclusion

Rest Parameter `(a, b...args)`