An Introduction to JavaScript
MD. AL-AMIN
Table of Contents
1. Variables
2. Data Types
3. Arrays
4. Functions
5. Control Flow
6. Classes & Objects
7. Operators
8. Template Literals
9. Asynchronous JavaScript
10. Destructure
11. Concept of Modules
12. Closures and Scope
Variables
Variables are used to store data in a program. JavaScript has three types of
variable declarations: var, let, and const.
Variables
● var: Variables declared with var are function-scoped,
meaning they are limited to the function in which they
are declared. If declared outside any function, they
become globally scoped. var can be reassigned and
updated.
● let: Variables declared with let have block scope. let
can be reassigned, but they cannot be redeclared in
the same scope.
● const: Variables declared with const also have
block scope. const cannot be reassigned after they are
assigned a value. They are constants.
Data Types
Data types include primitive types like strings, numbers, booleans, null, and undefined, as well as
objects.
String: Represents a sequence of
characters.
Number: Represents numeric values. Can
be integers or floating-point numbers.
Boolean: Represents true or false values.
Data Types
Null: Represents the absence of any
value.
Undefined: Represents an uninitialized
variable.
NaN: It is a special value in JavaScript
that represents "Not a Number." It is a
result of an operation that cannot produce
a meaningful numeric result. For example,
dividing zero by zero, or attempting to
parse a non-numeric string as a number
will result in NaN.
Arrays
Collections of elements can be stored and managed using arrays in JavaScript. Square brackets are used to
form arrays, which can hold a variety of data types, such as objects, strings, numbers, and other arrays.
Arrays
Adding and Removing Elements:
push(): Adds elements to the end of an array.
pop(): Removes the last element from an array.
unshift(): Adds elements to the beginning of an
array.
shift(): Removes the first element from an
array.
Arrays
Array Iteration:
forEach(): Performs a given function once for every element in the array.
Cod Outp
e ut
Arrays
map(): Calls a function on each element, creating a new array containing the results.
Cod Outp
e ut
Arrays
filter(): The filter() method is used to create a new array with elements that pass a
specific test provided by a function. It does not modify the original array but returns a new
array containing only the elements that satisfy the specified condition.
Functions
Functions are reusable code blocks that are created to carry out particular tasks.
Functions
Function Return: JavaScript will "return"
to run the code after the invoking
statement if the function was called from a
statement.
Arrow Functions: These are especially
helpful for short, anonymous functions and
those that don't depend on this context on
their own.
Functions
Anonymous Functions: Anonymous functions are those without a name. It may be more
convenient to utilise an anonymous function in situations where a function is used as a
callback and is only used once.
Functions
Passing a Function as a Parameter: Functions can be passed to other functions as
parameters in JavaScript.
Control Flow
Conditional Statements:
if, else if, else:
Control Flow
switch:
Cod Outp
e ut
Control Flow
Loops: If you want to run the same code repeatedly with a different value, loops come in
handy.
for loop: Iterating over a sequence which
could be an object, string, or array - is done
with the for loop.
while loop: A block of code is kept running
by the while loop as long as the given
condition is met.
Control Flow
do-while loop: Similar to the while loop,
but it always executes the block of code at
least once, even if the condition is false.
Difference between while and do-while loop: The body of a while loop will never be
executed if the condition is originally false. Regardless of the starting condition, the body
of the loop is run at least once in a do-while loop.
Control Flow
for…in loop: It is often used for iterating
over the keys of an object.
for…of loop: Loops through an iterable
object's values (such as arrays or strings).
Control Flow
Difference between for...in and for...of
loop:
for…in for…of
To iterate over an object's properties. To iterate over the values of iterable
objects.
The order of iterations may differ and is not It ensures that the iteration order is well-
guaranteed. defined and consistent, taking into account
the internal structure of the iterable.
When working with objects when it is When working with iterable objects—arrays,
needed to repeatedly access their keys or strings, maps, sets, etc.—and needing to
properties loop through their values.
Classes & Objects
Classes in JavaScript offer a more streamlined and grammatical method for defining object-oriented
programming structures.
Class Declaration: The “class” keyword and the class name are used to declare a class. When an object is instantiated
from a class, a particular method called the constructor method is invoked. It is applied to initialise properties of objects.
Classes & Objects
Class Methods: Class methods are functions that are defined within a class.
Objects: Objects (instances) of a class are created using the new keyword.
Classes & Objects
Inheritance: Classes can inherit properties and methods from other classes using the extends keyword.
Classes & Objects
Object Methods: [Link], [Link], [Link] - these methods allow you to work
with object keys, values, and entries.
Operators
JavaScript includes a variety of operators, which are symbols or keywords that perform
operations on operands.
Conditional Operator: condition ? expr1 : expr2
Cod Outp
e ut
Operators
Spread Operator (...): The spread operator is used to expand elements of an array or object.
Operators
Rest Parameter (...): The rest parameter is used to collect the remaining arguments of a function into a single
array.
Template Literal
Template Literal is also known as “String Templates” and “Template Strings”. Template
literals offer a more practical and adaptable method of working with strings. Template
Strings use backticks (``) rather than the quotes ("") to define a string.
Template Literal
Multiline Strings: Template Strings allow multiline strings.
Cod Outp
e ut
Template Literal
String Interpolation: Interpolating variables and expressions into strings is made simple with the
help of Template Strings.
Asynchronous JavaScript
Asynchronous JavaScript is a programming paradigm that allows code execution to continue while
waiting for specific operations to complete, rather than stopping execution until those operations
are completed. Asynchronous operations are critical in situations when processes such as
retrieving data from a server, reading a file, or waiting for user input may take some time.
Asynchronous JavaScript
Callbacks: Callbacks are functions that serve as parameters to other functions.
This example demonstrates the non-blocking nature of
asynchronous operations in JavaScript. The program does
not wait for the fetchData operation to complete before
proceeding to the following statements. Instead, it continues
to execute, and when the asynchronous operation is
completed, the given callback (process in this case) is
called.
Asynchronous JavaScript
Promises: Promises are objects that reflect the eventual success or failure of an
asynchronous action.
● The fetchData function returns a new Promise. The Promise
takes a callback function with two parameters: resolve and
reject.
● Inside the callback, we simulate an asynchronous operation
with setTimeout. In this case, the operation is considered
successful.
● If the operation is successful, the resolve function is called
with the fetched data. If there's an error, the reject function
is called with an error message.
● The fetchData Promise is used with the then and catch
methods to handle the resolved and rejected states,
Asynchronous JavaScript
Async/Await: Async and await make promises easier to write. Async causes a
function to return a promise. Await causes a function to wait for a promise.
● The fetchData function returns a Promise, simulating
an asynchronous operation.
● The fetchDataAndProcess function is declared as
async, allowing the use of await inside it to pause the
execution until the Promise is resolved.
● Inside the fetchDataAndProcess function, await
fetchData() is used to pause the execution until the
asynchronous operation completes, and the result is
stored in the data variable.
Destructure
Destructuring is a JavaScript feature that extracts values from arrays or properties
from objects and assigns them to variables in a simple manner.
Destructuring
Array
Destructure
Destructuring is a JavaScript feature that extracts values from arrays or properties
from objects and assigns them to variables in a simple manner.
Destructuring
Objects
Destructure
Destructuring is a JavaScript feature that extracts values from arrays or properties
from objects and assigns them to variables in a simple manner.
Destructuring function
parameters
Concept of Modules
In JavaScript, modules are used to split code into independent files
or components, making it more modular, maintainable, and
scalable. The import and export keywords are used to share and
receive functionalities respectively across different modules.
The export keyword is used to make a variable, function, class or
object accessible to other modules. In other words, it becomes a
public code.
The import keyword is used to bring in public code from another
module.
Closures and Scope
Closures and scope are basic notions in JavaScript that determine how variables and
functions are defined, accessed, and preserved throughout the code.
Scopes: Scope refers to the context in which variables and functions are declared, which
determines their accessibility.
Global Scope:
● Global scope refers to variables defined outside
of any block or function.
● They are accessible from within functions as
well as from anyplace else in the code.
Closures and Scope
Local Scope:
● Declared variables have a local scope
and are only available inside the
function in which they are declared.
Closures:
● Closures occur when one function is defined within
another and has access to the outer function's
variables. A closure enables a function to retain access
to both its own scope and the scope of the outer
(enclosing) function.
References
1. [Link]
2. [Link]
Some Helpful and Recommended VS Code extensions for JavaScript:
3. ESLint
4. Prettier - Code Formatter
5. GitLens
6. npm Intellisense
7. Live Server
Thank You
