Forem: Damilola Alloh

JavaScript : Variables and Constants (A beginner's Perspective)

Damilola Alloh — Thu, 01 Dec 2022 19:37:47 +0000

In this article, I've attempted to do a complete breakdown on the concepts of variables and constants as I've learned about them. I hope it helps!

Quick Disclaimer! I am also a beginner trying to navigate my way through programming and writing on the knowledge I gain is my way of learning. So bear with me if I'm not completely accurate or clear.

Variables

Variables are like containers for storing values. They are very important in how easily information is stored and passed in our program as we'll find out in progression.

Declaring Variable

Keywords: Variables are declared using three keywords in javascript. Declaring is you giving JavaScript an order to create a variable. These keywords include var, let, const.
An example,
First declare a variable

var firstName;
let firstName;

Then you assign(store) a value to it

firstName = 3;

Then you can refactor your code which is declaring a variable and assigning a value to it in the same line of code. This is called Explicit initialization. This is the only way to declare const variables.

var firstName = 3;

let firstName = 3;

const firstName = 3;

Redeclaration

Although it only applies to the var keyword, you can redeclare variable using the var keyword.

var firstName = "my name";
var firstName = "your name";

Reassignment

You can change the value assigned to your variable by assigning a new value to the variable. It applies to varand let keywords.

var firstName = 3;
firstName = 5;
console.log(firstName); // 5

You cannot reassign a new value to a constant variable.

const firstName = "My Name";
firstName = "Your Name"; //Uncaught TypeError: Assignment to constant variable.

But there is a little twist to this rule, so when constant variables are assigned to object data types(i.e name:value pairs), the variable assignment(values) are references containing the object values. Let's take a look at this illustration for clearer understanding

const objectName = { a : 5};

{ a : 5} - The curly braces represents the whole object as a reference to the variable objectName. Now,the reference can cannot be changed in respect to the variable but the object value can be changed.

const objectName = { a : 5};

//Attempting to reassign a new value to the variable reference
objectName = { a : 3}; //Uncaught TypeError: Assignment to constant variable.

But we can reassign a new value to the object reference.

objectName.a = 3;
console.log(objectName); // { a : 3}

Scopes

This process of declaring variables using the var keyword also works with the let keyword. But it is recommended to use let rather than var because let allows you declare variables that are limited to a Block scope, unlike var which declares a variable globally to an entire function, regardless of the block scope.

For better understanding, let's get a clear picture of what these scopes mean.

Scope tells us which variable is accessible and unto what point it is accessible. We can identify scopes by curly braces {}. Let's look at the different scopes we have in javascript.

Global Scope: This is your entire javascript code file and all other scopes, functions and variables are contained in the global scopes.

Local Scope: These are variables declared in the functions and are further classed into function scopes and block scopes.

Function Scope: These are variables declared inside a function and they can only be accessed within the function.
Block scope:These variables are only accessible within the particular loop or conditional statements they are declared in.

To illustrate these concepts, let's create the following program
(constvariables are equally block-scoped, so we'll be using only varand let keywords for easier understanding):

function x() {
If (true) {
var a = 1;
let b = 2;
console.log (a);// 1
console.log(b);//2
         }
}
x();

Both declarations are executed because they are within a block scope. Now let's see what happens when we declare a variable within a block scope and print outside the block scope.

function x() {
if (true) {
var a = 1;
let b = 2;
}
console.log(a); // 1
console.log(b); // Uncaught ReferenceError: b is not defined
}
x();

Here we can see that the variable declared with the let keyword is not recognised outside the block scope of the if statement. var functions regardless of what scope it has been declared in. Let's take a look at how this can be a disadvantage.

function x() {
var a = "a"; // very important variable
let b = "b";
 if(true) {
var a = 1;
let b = 2;
}
console.log(a); // 1
console.log(b); // b
}
x();

The result we get here is b -> b because that is the value of b in the function scope (the variable b in the block scope has been terminated within the scope).

we get a -> 1 being our output for var keyword because var is not dependent on the scope it is declared in and therefore it will override an existing variable(our important variable) and print out the most recent variable declared using var keyword. This can cause bugs in our code hence, it is safer to use the let keyword which is terminated within it's scope.

Hoisting

Hoisting is a concept where variables and function declarations are moved to the top of their scope before the execution of the code. while var can be hoisted to the top before declaration, letand constcannot because only the varkeyword is initialized as undefined.

console.log(firstName);
var firstname = "my name";

Quick summary

Incase the differences weren't clear enough, here's a summary

var and let both can be declared without initializing while const must be declared and assigned a value on the same line of code.
var and let variables can be reassigned to new values while you cannot reassign new references for const variables.
var can be redeclared while both let and const cannot be redeclared.
let and const are block-scoped while var is global-scoped and function-scoped when declared in a function.
var can be hoisted to the top of the code block, let and const cannot.

You can check out these resources for further and in-depth understanding of these concepts.
https://medium.com/nerd-for-tech/function-scope-block-scope-in-js-d29c8e7cd216
https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
https://www.youtube.com/watch?v=FNh2JCiFXIg

Thank you so much for reading❤. Comments, questions and contributions are welcome.

I hope this article breaks down the concepts of defining variables in a clear, concise manner.
Also, please I need help with embedding resources! Please somebody, help!🤧

How the Internet Works

Damilola Alloh — Sat, 19 Nov 2022 20:45:02 +0000

One general mistake we make as beginners is not understanding how the web works. How the codes we create get transformed into websites that can be displayed on any device from anywhere in the world.
It is quite tricky to want to skip this part in our learning process but in the long run, it becomes quite useful to have some basic knowledge on how the internet works.

The internet system is made up of two components. The hardware and the protocols.

The Hardware

The hardware includes everything that carry information from cables that carry heavy bits of information to your personal devices. These components together create what is called a network of networks.This network is further divided to the clients and the servers.

source:wikipedia

The clients are the devices(could be from phones, laptops, PCs, and browsers) which we use in sending requests for information from the servers which store up huge chunks of information. These servers provide the response(information) we receive in our devices.

The Protocols

The hardware cannot send and receive information without the protocols. These protocols are the sets of rules guiding how information moves on the internet. The most important ones being the Internet Protocol(IP)/Transfer Control Protocol(TCP). The IP provides a common language for machines and devices to understand the passed request/information using IP addresses. We also have the Hypertext Transfer protocol(HTTP) which is the set of rules responsible for transferring files such as HTML and multimedia resources over the internet.

IP Address - These are a set of numbers with which machines use in communicating with one another within the massive amount of devices in the internet space. Every device connected to the internet has a unique IP Address.

Now let's get into how all these come together.

The Web Flow

Image source: Geeks4Geeks
When we send a request(HTTP request) through our device browsers( the client) (an example is typing in a url such as www.google.com in our web browser), the request goes over the Domain Name System(DNS) server which is responsible for looking to see if there is a server that matches your request i.e www.google.com server. Once the requested server is found, the DNS server converts that request to an IP address so that the server can understand the request.

If the server approves your request, it sends a "200 OK" message to the client(your device) and then the server sends the HTTP response in sets of packets.
If the DNS server does not find the requested server, it sends an "Error 404" message to the client computer.

These packets are pieces of the HTTP response webpage which the server sends to the client. These packets contain headers and footers that tell your device what is in the packet and the packets are arranged to show you the requested webpage.

Transfer control protocol(TCP) sorts out how these packets are transferred between one IP address(server) and another(client). It also controls how the packets are rearranged on the client's device.

So how does your device know which DNS server to use?

When you connect your device to your home network or Internet Service Provider, you have a router which determines your computer's IP address. It also adds some network configuration Information which also Includes some DNS servers for translating the requests to IP addresses.

And there you have it! A basic rundown of how the web works.

And I'm hoping it is as simplified enough for your understanding

Thanks for Sticking!✨

I'm hopeful you've gained something reading this article and I value your time reading it.
Thank you so much for reading❤

_Every comment, corrections and discussion are welcome!😊
_ See you soon. Byeee❤

JavaScript: The Beginning (A Beginner's perspective)

Damilola Alloh — Wed, 16 Nov 2022 19:55:20 +0000

Every great developer you know got there by solving problems they were unqualified for until they actually did it - Patrick Mackenzie

As beginners, it is important to build our knowledge from the roots in order to have a solid foundation.
I have decided to document my JavaScript journey on this space to get closer with other newbies and also have inputs from the more seasoned developers.

In this introductory article, we will discuss the the creation of JavaScript, the process of development through the years and where it is today.

The Beginning

JavaScript is the programming language of the web and it's origin dates back to 1995 when the internet was becoming quite popular and webpages were looking too static and boring and needed fluidity and dynamics. Netscape's(now known as Moxilla) founder, Marc Andreessen asked Brendan Eich to come up with a solution to the lack of dynamics on the web browser. In 10 days🤯, Brendan Eich developed JavaScript which was at the time, known as 'Mocha'.

'Mocha' was originally intended to be a lesser complex language for the more informal programmers and designers to create and automate interactions on the web browser and also make websites more dynamic.

The name was later changed to 'LiveScript' in September 1995. The 'Script' meant it was a scripting language and not a real programming language compared to Java which was to be the complicated programming language reserved for real programmers to build the more complex big projects.

The Syntax of JavaScript is derived from Java, it's first class functions are from Scheme, a multi-paradigm programming language and it's prototype-based inheritance is from Self which is a prototype based dynamic object oriented programming language.

Birth of "JavaScript"

The name 'JavaScript' was introduced in December 1995 at a time when Java was quite popular among programmers and Netscape saw it as a good opportunity to clamp down on the booming success of Java. Hence, creating the name 'JavaScript'. Even though both are distinctively different languages.
This has caused quite the confusion among newbies(myself inclusive), so I found out what some of the differences were.
You can check this article for an indepth description of the differences.

Image from codingninjas.com

ECMA

At the time when Microsoft's Bill Gates created the internet explorer and it became the new wave, Netscape struggled to keep up with the Internet Explorer for market shares. Then Microsoft decided to create it's own dynamic language, JScript😏 which by the way was a reversed-engineered JavaScript. This just brought alot of confusion among programmers because the different JavaScript versions were not compatible with all web browsers.

Soon Netscape saw the need for JavaScript to be managed and standardized. As a result, in 1996 Netscape submitted JavaScript's documentation to European Computer Manufacturers Association(ECMA) for standardization.

In 1997, the TC-39 committee (Ecma International's TC39 is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain and evolve the definition of JavaScript) released the first standardized version of JavaScript(ES1) called the ECMAScript.

2009 - ES5, which is currently the standard version of JavaScript as it is supported by virtually all web browsers and is the easier version of ECMAScript to understand.

2015 - ES6 was released with the biggest update to the language in years.

The most current version of the ECMASCript is the ECMAScript 2022 (ES13) released in June 2022. As this article is directed towards beginners, it's better to avoid the confusing details of the update.

JavaScript Today

JavaScript was initially a browser-only scripting language. Today, JavaScript is a widely-adopted general-purpose multi-paradigm programming language that runs literally everywhere (web browsers, web servers, mobile apps, desktop apps, IoT devices).
Nowadays, Other non-browser hosting environments have been developed, a very popular one known as Node.js.

Node.js is a cross-platform, open-source server environment Developed by Ryan Dahl . It runs on a V8 Engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting.
Another hosting framework is called Deno, developed by the same creator of Node.js.

JavaScript frameworks and libraries have been created to ease programming steps as websites are now having more functionality and are more dynamic.

A JavaScript framework is a collection of JavaScript code libraries that provide a web developer with pre-written code for routine programming tasks.
JavaScript libraries are collections of prewritten code snippets that can be used and reused to perform common JavaScript functions. Examples include Examples are Vue.js, Angular, jQuery,Next.js, React.
We'll study these frameworks better as we progress in further articles.

JavaScript has garnered so much fame because of its dynamic nature and tight-interaction with Document Object Modelling(DOM ) which we'll also discuss later.

You got here!💪🎉

Your being here means you interested on this journey with me and I'm hoping I did some justice in explaining the start. I've gathered much more information researching for this article than when i just read about it😅. I believe this is a good foundation for us as I learn to give out more useful coding information to you guys. I hope you learned something new!

Thanks for reading!❤

All comments, additions, corrections and subtractions are welcome😊.
This week we code!💪