Basic JavaScript and JavaScript Concepts.
JavaScriptSeries#1
A bit of a back Story
In 2009 a clever engineer took the open-source JS engine in chrome(v8) and embedded it inside a C++ program. He called that program Node.
Find out who that clever engineer is.😉
Before the introduction of Node.js, JavaScript primarily ran in web browsers and was mainly used for client-side scripting. It was primarily utilized to enhance the interactivity and user experience of websites. JavaScript allowed developers to manipulate the Document Object Model (DOM) of web pages, handle user events, and perform various client-side operations.
However, JavaScript was limited to running within the browser environment and had no direct access to system resources or the ability to perform server-side tasks. This restricted its use to front-end development.
After introducing Node.js, which revolutionized JavaScript by enabling it to run on the server-side. Node.js is a runtime environment built on Chrome’s V8 JavaScript engine that allows JavaScript to be executed outside the browser. It introduced event-driven, non-blocking I/O model, which made it suitable for building scalable and efficient server applications.
Node.js brought JavaScript to the server-side, opening up new possibilities for full-stack development using a single programming language. It provided access to system resources, file system operations, network communication, and allowed developers to build web servers, APIs, real-time applications, and more.
With Node.js, developers could leverage the same JavaScript language and its rich ecosystem of libraries and frameworks both on the client-side and server-side. This enabled code reusability, streamlined development workflows, and facilitated the creation of isomorphic or universal JavaScript applications that run seamlessly on both the server and the client.
Node.js also introduced the npm (Node Package Manager) ecosystem, which became one of the largest and most vibrant package repositories, hosting thousands of open-source libraries and frameworks that significantly accelerated the development process.
The introduction of Node.js transformed JavaScript from a language primarily used for front-end development into a versatile and powerful language for building full-stack applications, enabling JavaScript developers to work across the entire web stack and beyond.
Difference between ECMAScript and JavaScript
ECMA script is just a Specification.
JavaScript is a programming language that conforms to this specification.
So we have this organization called ECMA which is responsible for defining Standards.
They take care of this ECMA script specification.
1st version was released in 1997.
After 2015 they release a new version every year.
Variables
Before ES6 was released, we used to var keyword to declare a variable.
After ES6 the Best Practice is to use let keyword to declare a variable.
Using Double quotes or Single quotes to define strings is the developer’s personal preference.
Normally to define strings we use single quotes in JavaScript.
Constants
const interestRate = 0.3;Primitive Types
- String
let name = 'Yeran'; //String Literal
//String Literal is just a fancy name given to a string- Number
let age = 19; //Number Literal
//Number Literal is just a fancy name given to a number.
/*
In JavaScript there is no int,float types.
All types are of type number.
*/- Boolean
let isApproved = false; //Boolean Literal
//Boolean Literal is just a fancy name given to a number.- undefined
let firstName = undefined;
/*
let firstName; //This is also undefined.
We usually don’t explicitly tell that is undefined. (let firstName = undefined;)
Undefined is also a type as well as a value.
*/- null
let selectedColor = null;
//We use null in situations where we want to explicitly clear the value of the variable.Dynamic Typing
We have 2 types of programming languages.
i) Static
ii) Dynamic.
In Static languages, when we declare a variable, the type of that variable is set and cannot be changed in the future.
In a Dynamic language like JavaScript, the type of a variable can change at run-time.
SideNote#1
Java is a statically-typed programming language. In Java, every variable and expression has a specific type that is known at compile time. The type of a variable determines the kind of values it can hold and the operations that can be performed on it. Java requires explicit type declarations for variables and performs type checking during compilation to ensure type safety. This means that the type of a variable is determined and checked before the program is executed, providing greater reliability and catching potential type-related errors early in the development process.
Reference Types
- Object
- Array
- Function
Objects
Whether its JavaScript or Java or any other programming language, an Object is like a object in real life.
Think of a person in real life. The person has a name, age, address…etc.
These are the properties of a person.
We have the same concept in JavaScript.
When we are dealing with multiple related variables, we can put these variables inside of an object.
let person = {
name : 'Yeran',
age : 19
};When accessing the properties of an object, there are two ways to work with properties.
- Dot Notation
We can write (changing the name) and read (when logging to console) the value of the property using Dot notation.
//Changing the name
person.name = 'Savi';
//logging to console
consolt.log(person.name);2. Bracket Notation
Instead of a dot we use square brackets. And we pass a string that determines the name of the target property.
person['name'] = 'Victor';(Q) Which notation is better?
Dot notation is a bit more concise and shorter. So that should be your default choice.
However Bracket notation has its own uses.
Sometimes you don’t know the name of the target property until the run time.
For example, in the UI, the user might be selecting the name of the target property. In that case we don’t know what property we are going to access.
That is going to be selected at Run time by the user.
So we might have another variable somewhere else (like selection)
So selection will determine the name of the target property that the user is selecting. And that can change at run time.
With this we can access that property using the bracket notation in a dynamic way.
let selection = 'name';
person[selection] = 'Victor'Hey, does the Bracket notation seem a bit hard to digest, It’s alright. Just stick to the Dot notation which is clean and precise.😉
Array
Sometimes in your application, you might be dealing with a list of objects or elements.
In situations like that, we use an array to store that list.
An array is a Data Structure that we use to store/represent a list of items.
let selectedColors = ['red', 'black'];
selectedColors[2] = 'blue'; //adding a new element to the array
console.log(selectedColors);Unlike in other programming languages where every item or every object in the array should have the same type, In JavaScript arrays we can store different types.
So objects in the array as well the size of the array are dynamic.
let selectedColors = ['red', 'black'];
selectedColors[2] = 1; //adding a new element (number) to the array
console.log(selectedColors);Technically an array is an object. So just like the person object we defined earlier, an array has a key:value pair or properties that we can access using the Dot notation.
Function
A function is basically a set of statements that performs a task or calculates a value.
function greet(name){
console.log('Hello' + name);
}
greet('Yeran');name is the parameter of the greet function.
Yeran is the argument of the greet function.
Parameter is what we have at the time of declaration.
Argument is the actual value we supply for that parameter.
A lot of developers get confuse with these two words.😅
A function can have multiple parameters.
function greet(firstName, lastName){
console.log('Hello' + firstName + ' ' + lastName);
}
greet('Yeran', 'Kods');