From Hello World to Type Casting: Learning JavaScript Step by Step

From Hello World to Type Casting: Learning JavaScript Step by Step

Tópico: From Hello World to Type Casting: Learning JavaScript Step by Step
Categoria: Tutoriais | Programação & Tecnologia
Idioma Principal: Português (Conteúdo de Tecnologia)

Descrição do Conteúdo / Informações:
-------------------------------------------------------------------------

Client and Server Side in JavaScript

There are 3 major types of JavaScript namely:

Client-Side JavaScript (CSJS) -- an extended version of JavaScript that enables the enhancement and manipulation of web pages and client browsers

Server-Side JavaScript (SSJS) -- an extended version of JavaScript that enables back-end access to databases, file systems, and servers

Core JavaScript -- the base JavaScript language

Client-Side JavaScript (CSJS) and Server-Side JavaScript (SSJS) are dependent on the core JavaScript and cannot work without it.

In Simple term, from Client side requests is sent to the servers for webpages or applications, and the servers serve up responses.

Client-side JavaScript is the version of the language that runs in the user's browser. It's responsible for making web pages dynamic and interactive without requiring page reloads or server requests.

Server-side JavaScript runs on a web server instead of in the browser. This became possible with the rise of Node.js, a powerful JavaScript runtime built on Chrome's V8 engine, introduced in 2009.

When to Use What?

Use client-side JavaScript when:

• You need quick, responsive UI interactions

• You want to reduce unnecessary server calls

Use server-side JavaScript when:

• You need to store or retrieve data from a database

• You're building backend logic or APIs

• You're performing operations that require security and control

Tip: For modern web applications, the best approach is often to use both, known as full-stack JavaScript development.

Primitive and non primitive data type

1. Primitive Data Types

Primitive data types are the built-in data types provided by JavaScript. They represent single values and are immutable, meaning their values cannot be changed directly after creation.

1.1 Number:

Number data type in JavaScript can be used to hold decimal values as well as values without decimals.

Example: Below is an example.

let x = 250;
let y = 40.5;
console.log("Value of x=" + x);
console.log("Value of y=" + y);

Output

Value of x=250

Value of y=40.5

1.2 String:

The string data type in JavaScript represents a sequence of characters that are surrounded by single or double quotes.

Example: Below is an example.

let str = 'Hello All';
let str1 = "Welcome to my new house";
console.log("Value of str=" + str);
console.log("Value of str1=" + str1);

Output

Value of str=Hello All

Value of str1=Welcome to my new house

1.3 Undefined:

This means that a variable has been declared but has not been assigned a value, or it has been explicitly set to the value undefined.

Example: Below is an example.

let x;

console.log(x); // Outputs: undefined

Output:

1.4 Boolean:

The Boolean data type can accept only two values i.e. true or false.

Example: Below is an example.

let isActive = true;
let isComplete = false;

console.log(isActive);
console.log(isComplete);

Output:

true

false

1.5 Null:

This data type can hold only one possible value that is null.

Example: Below is an example.

let x = null;
console.log("Value of x=" + x);

Output

Value of x=null

1.6 BigInt:

BigInt data type can represent numbers greater than 253-1 which helps to perform operations on large numbers. The number is specified by writing 'n' at the end of the value

Example: Below is an example.

let bigNum = 123422222222222222222222222222222222222n
console.log(bigNum)

Output

123422222222222222222222222222222222222n

1.7 Symbol:

Symbol data type is used to create unique identifiers. Each Symbol value is unique, even if created with the same description.

Example: Below is an example.

let sym = Symbol("Hello")
console.log(typeof(sym));
console.log(sym);

Output

symbol

Symbol(Hello)

2.Non-primitive Data Types [TBD]

Non-primitive data types, also known as reference types, are objects and derived data types. They can store collections of values or more complex entities. The two key non-primitive data types in JavaScript are:

Below is a list of Non-primitive data types.

2.1 Object:

An object in JavaScript is an entity having properties and methods. Everything is an object in javaScript.

2.2 Array:

With the help of an array, we can store more than one element under a single name.

library and framework

JavaScript Libraries

A JavaScript library is a collection of classes, methods, and pre-written functions that developers can use in their web development projects. Libraries make code reusable and simplify the development process. They are also favored for their cross-browser compatibility, saving developers time and effort.

JavaScript Frameworks

JavaScript frameworks are essential tools for creating web applications. They provide built-in components that help in developing robust and interactive web applications. Frameworks simplify the structure of projects by offering blueprints and streamline the development process with powerful and efficient methods for handling events, two-way data binding, and more.

Feature
Library
Framework

Definition
A collection of reusable functions and code that helps perform specific tasks.
A complete structure that provides rules and architecture for building applications.

Control Flow
You control the flow of the application and call the library when needed.
The framework controls the flow and calls your code when needed.

Inversion of Control
No inversion of control. Developer is in charge.
Uses inversion of control. Framework is in charge.

Flexibility
More flexible. You decide how and where to use it.
Less flexible. You must follow its conventions and structure.

Project Structure
No fixed structure.
Provides a predefined structure.

Purpose
Solves specific problems or adds functionality.
Provides a complete solution for application development.

Learning Curve
Usually easier to learn.
Usually steeper because of rules and architecture.

Code Reusability
Reusable functions/modules.
Reusable components within a defined framework structure.

Examples
jQuery, Lodash, Moment.js, Axios
Angular, Next.js, Ember.js, NestJS

Usage
Use only the parts you need.
Build the application according to the framework's guidelines.

Javascript compliers

A compiler is a program that translates code written in one programming language into another language or a lower-level representation. In the context of JavaScript, a compiler translates human-readable JavaScript code into machine code or bytecode that can be executed by the computer's CPU.

Unlike traditional compiled languages like C++ or Java, JavaScript is typically executed by an interpreter in the browser. However, modern JavaScript engines (like V8, SpiderMonkey, and JavaScriptCore) use a combination of interpretation and compilation to optimize performance. This approach is known as Just-In-Time (JIT) compilation.

How JavaScript Engines Use Compilers

Modern JavaScript engines use a multi-tiered approach to execute JavaScript code efficiently. Here's a breakdown of the process:

1. Parsing

The first step is parsing, where the JavaScript engine reads the source code and converts it into an Abstract Syntax Tree (AST). The AST is a tree-like representation of the code's structure, which makes it easier for the engine to analyze and optimize.

2. Bytecode Generation

After parsing, the engine generates bytecode, a low-level, platform-independent representation of the code. Bytecode is easier to...

3. Just-In-Time (JIT) Compilation

The bytecode is then passed to the JIT compiler, which translates it into machine code (native code that the CPU can execute directly). JIT compilation happens "just in time" during the execution of the program, allowing the engine to optimize the code based on runtime information.

Why Javascript is cross platform?

JavaScript is cross-platform because it is an interpreted, standardized scripting language executed by software-based runtime environments (engines) rather than being compiled directly into machine code for a specific operating system. Because these host engines exist for almost every major operating system, JavaScript code can run anywhere an engine is installed.

How Javascript converts high level to intermediate?

JavaScript engines (like Google's V8 or SpiderMonkey) convert human-readable code into intermediate language through a multi-stage process. Instead of directly interpreting it, the engine parses the code into an Abstract Syntax Tree (AST)[TBD], which is then translated into low-level Bytecode before Just-In-Time (JIT) compilation to machine code.

JavaScript Basics: Internal JavaScript, Variables, Data Types, and Operators

Introduction

JavaScript is one of the most popular programming languages used to make websites interactive. In this blog, we will learn about Internal JavaScript, variables, data types, type conversion, and operators with simple examples.

Internal JavaScript

Internal JavaScript means writing JavaScript code directly inside an HTML file using the <script> tag.

The <script> tag can be placed inside the <head> section or at the end of the <body> section.

Most developers prefer placing the script at the end of the body after all HTML elements are loaded.

Example

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>

<h1>Welcome to JavaScript</h1>

<script>
console.log("Hello World");
</script>

</body>
</html>

Viewing JavaScript Output

The most common way to check JavaScript output during development is using:

console.log("Hello World");

Steps to View Output

• Open the webpage.

• Right-click and select Inspect.

• Go to the Console tab.

• View the output.

Output:

Hello World

The console is mainly used by developers for debugging and testing code.

JavaScript Errors

If we try to use a variable without declaring it, JavaScript throws an error.

Example

console.log(k);

Output:

ReferenceError: k is not defined

This error occurs because the variable k was never declared.

Variables in JavaScript

JavaScript provides three ways to declare variables:

• var

• let

• const

let Keyword

Variables declared with let can be reassigned but cannot be redeclared within the same scope.

Example

let i = 10;
i = 15;

console.log(i);

Output:

15

Memory Concept

Initially:

let i = 10;

Variable i points to value 10.

After:

i = 15;

JavaScript creates a new value 15 and i now points to 15.

const Keyword

Variables declared with const cannot be reassigned.

Example

const i = 10;

i = 15;

console.log(i);

Output:

TypeError: Assignment to constant variable.

Since an error occurs, the program stops at that line.

JavaScript as an Interpreter

JavaScript is an interpreted language.

It executes code line by line.

Example

console.log("Hello World");

const i = 10;
i = 15;

console.log("JavaScript");

Output:

Hello World
TypeError: Assignment to constant variable.

Notice that:

• First line executes successfully.

• Error occurs on the second operation.

• Execution stops.

• Last line is never executed.

This behavior is different from many compiled languages where the entire program is checked before execution.

Operators in JavaScript

Operators are symbols used to perform operations on values.

Arithmetic Operators

Addition Operator (+)

console.log(5 + 5);

Output:

10

String Concatenation

console.log("Bahubali" + 2);

Output:

Bahubali2

The + operator joins strings together.

Subtraction Operator (-)

JavaScript automatically converts numeric strings into numbers during subtraction.

Example

console.log("15" - 5);

Step-by-step:

"15" → 15
15 - 5

Output:

10

This process is called Implicit Type Conversion or Type Coercion.

Manual Type Casting

Sometimes we need to manually convert data from one type to another.

Example

let i = 10;
let j = "5";

console.log(i + Number(j));

Output:

15

Here, Number(j) converts the string "5" into the number 5.

Boolean Conversion Example

JavaScript converts Boolean values during arithmetic operations.

Example

let i = 10;
let j = true;

console.log(i + j);

Output:

11

Reason:

true = 1
false = 0

So:

10 + 1 = 11

Another example:

let i = 10;
let j = false;

console.log(i + j);

Output:

10

Because:

10 + 0 = 10

Type Casting and Type Conversion in JavaScript

Introduction

In JavaScript, data can be converted from one data type to another. This process is known as Type Conversion or Type Casting.

For example:

let num = "10";

Here, "10" is a string. If we want to perform arithmetic operations, we may need to convert it into a number.

What is Type Conversion?

Type Conversion is the process of converting a value from one data type to another.

JavaScript supports two types of conversion:

• Implicit Type Conversion (Automatic)

• Explicit Type Conversion (Manual Type Casting)

1. Implicit Type Conversion (Automatic)

JavaScript automatically converts one data type into another when required during an operation.

Example 1

console.log("15" - 5);

Output:

10

How it works

"15" → 15
15 - 5 = 10

JavaScript automatically converts the string "15" into the number 15.

Example 2

console.log("10" * 2);

Output:

20

JavaScript converts "10" into 10 and performs multiplication.

Example 3

console.log(10 + true);

Output:

11

Because:

true = 1

So:

10 + 1 = 11

2. Explicit Type Conversion (Manual Type Casting)

When the developer manually converts a value from one type to another, it is called Explicit Type Conversion or Type Casting.

String to Number

Using Number()

let str = "25";

let num = Number(str);

console.log(num);
console.log(typeof num);

Output:

25
number

Using parseInt()

let str = "100";

let num = parseInt(str);

console.log(num);

Output:

100

Using parseFloat()

let str = "10.5";

let num = parseFloat(str);

console.log(num);

Output:

10.5

Number to String

Using String()

let num = 100;

let str = String(num);

console.log(str);
console.log(typeof str);

Output:

100
string

Boolean to Number

console.log(Number(true));
console.log(Number(false));

Output:

1
0

Number to Boolean

console.log(Boolean(1));
console.log(Boolean(0));

Output:

true
false

Difference Between Type Conversion and Type Casting

Type Conversion
Type Casting

Automatic conversion by JavaScript
Manual conversion by developer

Also called Implicit Conversion
Also called Explicit Conversion

Happens during operations
Happens using functions like Number(), String(), Boolean()

Less control
Full control

Example: "15" - 5

Example: Number("15")

References:

https://dev.to/wisdomudo/what-is-javascript-client-side-vs-server-side-5bf8

https://stackoverflow.com/a/1404400/32765761

https://www.geeksforgeeks.org/javascript/primitive-and-non-primitive-data-types-in-javascript/

https://www.geeksforgeeks.org/javascript/javascript-libraries-and-frameworks/

https://medium.com/@programmingAi/what-is-a-javascript-compiler-8dcf4ebdc503

https://medium.com/@favourcharles705/javascript-introduction-5b11d9794220

https://stackoverflow.com/questions/39967892/is-javascript-compiled-to-machine-code-when-executed-in-a-web-browser-environmen