Fsd Module -1 Notes
Fsd Module -1 Notes
Module-01
Statements are the building blocks of any JavaScript program. Understanding how
these work will help you in writing efficient and effective JavaScript code.
1. Instructions in JavaScript
2. Statements in JavaScript
Syntax:
Examples:
o Declaring a string:
Explanation: Variables are essential for storing data that can be used and
manipulated later in the program.
b. Assignment Statements
Syntax:
Examples:
Syntax:
function greet() {
Examples:
javascript
CopyEdit
function add(x, y) {
let result = add(5, 10); // Calling the `add` function with arguments
console.log(result); // Output: 15
Syntax:
if (x > 10) {
} else {
Examples:
} else {
Syntax:
Examples:
f. Return Statement
Syntax:
function sum(x, y) {
Examples:
function square(number) {
4. Expression Statements
Syntax:
Examples:
setTimeout(function() {
}, 2000);
// Function Declaration
function greetUser(name) {
} else {
Output:
Hello, John
2. Comments in JavaScript
a. Single-Line Comment
A single-line comment is used to add brief notes or explanations for a specific line
of code. The comment starts with two forward slashes (//). Everything following
these slashes on that line will be ignored by the JavaScript engine.
Syntax:
Usage:
Example:
In this example, the comments help explain the purpose of the code on each line,
making it easier for someone to understand the logic.
b. Multi-Line Comment
A multi-line comment is used when a comment spans more than one line. It starts
with /* and ends with */. Everything between these markers will be considered part
of the comment and ignored by JavaScript.
Syntax:
/*
This is a
multi-line comment
*/
Usage:
Example:
/*
*/
Clarify Complex Code: Use comments to explain parts of the code that may
be difficult to understand at first glance.
Use comments to explain "why", not "what": The code itself should show
what is happening. Comments should explain why something is done in a
specific way, especially when it's not immediately obvious.
/*
It takes an array of item objects, where each object contains the price of the item.
*/
function calculateTotalCost(cartItems) {
3. Variables in JavaScript
Variables are fundamental to any programming language, and in JavaScript, they are
used to store data that can be referenced and manipulated throughout the program.
Variables allow you to store values like numbers, strings, objects, and more. In
JavaScript, you can declare variables using three different keywords: var, let, and
const.
a. Declaration of Variables
To declare a variable in JavaScript, we use one of the three keywords: var, let, or
const.
Syntax:
Example:
Hoisting: Variables declared with var are "hoisted" to the top of their scope,
meaning the declaration is moved to the top during execution, but the
initialization stays in place.
Example:
function greet() {
console.log(message);
greet();
In this example, message is accessible within the function greet() but not outside.
Scope: A variable declared with let is only accessible within the block
(denoted by curly braces {}) where it is declared, such as inside loops,
conditionals, or functions.
Hoisting: Like var, variables declared with let are also hoisted to the top of
their block, but they cannot be accessed until after the declaration line. This
prevents issues caused by hoisting in var.
Example:
if (true) {
In this example, the city variable inside the if block does not affect the city variable
outside of it, because the variable is block-scoped.
Example:
In this example, the reassignment of the country variable results in an error, but
modifying the contents of the numbers array is allowed because arrays are reference
types.
Scope in JavaScript
Scope refers to the visibility and lifetime of a variable. It determines where the
variable can be accessed and modified.
Function Scope: Variables declared with var inside a function are only
accessible within that function.
Block Scope: Variables declared with let or const inside a block (e.g., if
statements, loops) are only accessible within that block.
Hoisting in JavaScript
Hoisting refers to the behavior where variable declarations are moved to the top of
their scope during the compilation phase, before the code is executed.
With var: The declaration is hoisted, but the initialization remains in place.
console.log(name); // undefined
console.log(name); // Alice
With let and const: The declaration is hoisted, but not the initialization.
Accessing the variable before initialization results in a ReferenceError.
In JavaScript, data types are categorized into two main groups: Primitive Types and
Non-Primitive Types. Each type serves a specific purpose, and understanding these
data types is fundamental to writing effective JavaScript code.
Primitive types are the most basic types in JavaScript. They represent single values
and are immutable (cannot be changed after creation). These types include:
o Example:
o Example:
o Example:
4. Undefined: A variable that has been declared but not yet assigned a value has
the value undefined.
o Example:
o Example:
6. Symbol: A unique and immutable value primarily used to add unique property
keys to objects.
o Example:
7. BigInt: A type that can represent integers with arbitrary precision. It is useful
for working with large numbers that exceed the Number type’s limit.
o Example:
Note: Primitive data types are compared by their values. This means that two
variables with the same value of a primitive type will be considered equal.
Non-primitive data types, also called reference types, are more complex than
primitive types. They store references to the data rather than the actual data.
Modifying an object or array will affect all references to it.
o Example:
o Example:
o Example:
function greet(name) {
o Example:
Note: Non-primitive data types are compared by reference, meaning if two objects
or arrays refer to the same location in memory, they are considered equal.
Non-primitive types are mutable: You can modify the contents of an object
or array after they have been created.
console.log(person.age); // Output: 26
5. Arrays in JavaScript
Arrays in JavaScript are used to store collections of elements. They allow you to
group multiple values into a single variable and access each element using an
index.
o Example:
o Example:
o Example:
o Example:
1. Adding Elements:
arr.push(3);
arr.unshift(0);
2. Removing Elements:
arr.pop();
arr.shift();
3. Finding Elements:
console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits[i]);
o Using forEach():
5. Copying Elements:
6. Transforming Elements:
7. Filtering Elements:
Using Index: Use the bracket notation with the element's index.
Negative Indexing: JavaScript does not support negative indexing, but you
can achieve it using custom logic.
Multi-Dimensional Arrays
Example:
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];
6. Strings in JavaScript
Strings are sequences of characters used to store and manipulate text. They are
enclosed in single quotes ('), double quotes ("), or backticks (`) for template
literals.
1. String Declaration:
2. String Properties:
console.log(message.length); // Output: 10
7. Functions in JavaScript
Functions are reusable blocks of code designed to perform specific tasks. They
take input, process it, and return an output.
1. Function Declaration:
function greet(name) {
3. Function Expression:
return a + b;
};
5. Default Parameters:
8. Methods in JavaScript
Methods are functions that belong to objects and are used to perform operations on
object data.
1. String Methods:
2. Array Methods:
3. Object Methods:
let car = {
brand: "Toyota",
start: function () {
},
};
9. Objects in JavaScript
Objects are collections of key-value pairs that allow you to store related data and
methods together.
Key Features:
1. Object Declaration:
2. Accessing Properties:
o Dot notation:
o Bracket notation:
3. Adding/Updating Properties:
4. Deleting Properties:
delete car.color;
Key Constructs:
1. if-else Statement:
o Syntax:
} else {
2. else if Statement:
console.log("Grade: A");
console.log("Grade: B");
} else {
console.log("Grade: C");
// Output: Grade: B
3. switch Statement:
o Syntax:
let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Invalid day");
// Output: Wednesday
Types of Loops:
1. for Loop:
console.log(i); // Output: 0, 1, 2, 3, 4
2. while Loop:
let i = 0;
while (i < 5) {
console.log(i); // Output: 0, 1, 2, 3, 4
i++;
3. do-while Loop:
let i = 0;
do {
console.log(i); // Output: 0, 1, 2, 3, 4
i++;
4. for...of Loop:
5. for...in Loop:
console.log(key, car[key]);