JavaScript Client-Side Theory - Exam Preparation
1. Introduction to JavaScript
What is JavaScript?
JavaScript is a high-level, interpreted, client-side scripting language primarily used for web
development. It was created by Brendan Eich in 1995 while working at Netscape Communications.
Key Characteristics:
Dynamic Language: Variables don't need explicit type declaration
Interpreted Language: No compilation required, executed by browser's JavaScript engine
Object-Oriented: Supports object-oriented programming paradigms
Event-Driven: Responds to user interactions and browser events
Case-Sensitive: Distinguishes between uppercase and lowercase letters
Platform Independent: Runs on any platform with JavaScript engine
Features of JavaScript:
1. Client-Side Validation: Validates user input before sending to server
2. Dynamic Content: Modifies HTML content without page reload
3. Event Handling: Responds to user actions like clicks, mouse movements
4. DOM Manipulation: Changes HTML elements and their properties
5. Asynchronous Programming: Handles multiple operations simultaneously
How JavaScript Works:
JavaScript code is embedded in HTML documents and executed by the browser's JavaScript engine
when the page loads. It can be included in three ways:
Inline: Directly in HTML elements using event attributes
Internal: Within <script> tags in HTML document
External: In separate .js files linked to HTML
Advantages:
Reduces server load by performing client-side operations
Provides immediate feedback to users
Creates interactive and dynamic web pages
No compilation required
Supports multiple programming paradigms
Disadvantages:
Code is visible to users (security concern)
Browser compatibility issues
Can be disabled by users
Limited file system access for security reasons
2. Objects in JavaScript
Definition:
Objects in JavaScript are collections of key-value pairs where keys are strings (properties) and values
can be any data type including functions (methods).
Object Creation Methods:
1. Object Literal Syntax:
javascript
let person = {
name: "John",
age: 25,
city: "New York",
greet: function() {
return "Hello";
}
};
2. Object Constructor:
javascript
let person = new Object();
person.name = "John";
person.age = 25;
3. Constructor Function:
javascript
function Person(name, age) {
this.name = name;
this.age = age;
}
let person = new Person("John", 25);
Object Properties:
Property Access:
Dot notation: object.property
Bracket notation: object["property"]
Property Addition: object.newProperty = value
Property Deletion: delete object.property
Property Enumeration: for...in loop
Object Methods:
Methods are functions stored as object properties. They can access object properties using the this
keyword.
Built-in Objects:
1. Array: For storing ordered collections
2. Date: For date and time operations
3. Math: For mathematical operations
4. String: For string manipulation
5. Number: For number operations
6. Boolean: For boolean operations
Object Characteristics:
Objects are reference types
Objects are mutable
Objects can contain other objects (nested objects)
Objects can have methods that operate on their data
3. Primitives, Operations and Expressions
Primitive Data Types:
1. Number:
Represents both integers and floating-point numbers
Special values: Infinity , -Infinity , NaN
Example: let num = 42; let pi = 3.14;
2. String:
Sequence of characters enclosed in quotes
Can use single quotes, double quotes, or backticks
Example: let name = "JavaScript"; let message = 'Hello';
3. Boolean:
Represents logical values: true or false
Used in conditional statements
Example: let isActive = true;
4. Undefined:
Variable declared but not assigned a value
Default value for uninitialized variables
Example: let x; // x is undefined
5. Null:
Represents intentional absence of value
Must be explicitly assigned
Example: let data = null;
6. Symbol (ES6):
Unique identifier
Used as object property keys
Example: let sym = Symbol('id');
Operations:
Arithmetic Operations:
Addition: + (also string concatenation)
Subtraction: -
Multiplication: *
Division: /
Modulus: %
Exponentiation: **
Increment: ++
Decrement: --
Comparison Operations:
Equal: == (type coercion)
Strict Equal: === (no type coercion)
Not Equal: !=
Strict Not Equal: !==
Greater than: >
Less than: <
Greater than or equal: >=
Less than or equal: <=
Logical Operations:
AND: &&
OR: ||
NOT: !
Assignment Operations:
Basic Assignment: =
Addition Assignment: +=
Subtraction Assignment: -=
Multiplication Assignment: *=
Division Assignment: /=
Expressions:
An expression is any valid unit of code that resolves to a value.
Types of Expressions:
1. Arithmetic Expressions: 5 + 3 * 2
2. String Expressions: "Hello" + " World"
3. Logical Expressions: true && false
4. Assignment Expressions: x = 10
5. Function Call Expressions: Math.max(1, 2, 3)
Type Conversion:
Implicit Conversion: Automatic type conversion by JavaScript
Explicit Conversion: Manual type conversion using functions
Number() : Convert to number
String() : Convert to string
Boolean() : Convert to boolean
4. Control Statements
Definition:
Control statements determine the flow of program execution based on certain conditions or criteria.
Types of Control Statements:
1. Conditional Statements:
if Statement:
javascript
if (condition) {
// code to execute if condition is true
}
if...else Statement:
javascript
if (condition) {
// code if condition is true
} else {
// code if condition is false
}
if...else if...else Statement:
javascript
if (condition1) {
// code for condition1
} else if (condition2) {
// code for condition2
} else {
// code if no condition is true
}
switch Statement:
javascript
switch (expression) {
case value1:
// code for value1
break;
case value2:
// code for value2
break;
default:
// default code
}
2. Looping Statements:
for Loop:
javascript
for (initialization; condition; increment) {
// code to repeat
}
while Loop:
javascript
while (condition) {
// code to repeat
}
do...while Loop:
javascript
do {
// code to repeat
} while (condition);
for...in Loop:
javascript
for (variable in object) {
// code to execute for each property
}
for...of Loop:
javascript
for (variable of iterable) {
// code to execute for each element
}
3. Jump Statements:
break Statement:
Terminates the current loop or switch statement
Control transfers to the statement after the terminated statement
continue Statement:
Skips the current iteration of a loop
Control transfers to the next iteration
return Statement:
Exits from a function
Optionally returns a value
Control Statement Characteristics:
Control statements alter the sequential execution of statements
They use conditions to determine which code blocks to execute
Proper use of control statements creates efficient and logical programs
Nested control statements allow complex decision-making logic
5. Arrays
Definition:
Arrays are ordered collections of elements that can store multiple values in a single variable. Each
element has an index starting from 0.
Array Creation:
1. Array Literal:
javascript
let fruits = ["apple", "banana", "orange"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "hello", true, null];
2. Array Constructor:
javascript
let arr = new Array();
let arr2 = new Array(5); // Creates array with 5 empty slots
let arr3 = new Array(1, 2, 3); // Creates [1, 2, 3]
Array Properties:
Length Property:
array.length : Returns the number of elements
Can be modified to change array size
Example: fruits.length returns 3
Array Methods:
Adding Elements:
push(): Adds elements to the end
unshift(): Adds elements to the beginning
splice(): Adds elements at specific position
Removing Elements:
pop(): Removes last element
shift(): Removes first element
splice(): Removes elements from specific position
Searching Elements:
indexOf(): Returns index of first occurrence
lastIndexOf(): Returns index of last occurrence
includes(): Checks if element exists
find(): Returns first element matching condition
Iterating Arrays:
for loop: Traditional iteration
forEach(): Executes function for each element
map(): Creates new array with transformed elements
filter(): Creates new array with elements matching condition
Other Useful Methods:
join(): Converts array to string
slice(): Returns portion of array
concat(): Combines arrays
reverse(): Reverses array order
sort(): Sorts array elements
Multi-dimensional Arrays:
Arrays can contain other arrays, creating multi-dimensional structures:
javascript
let matrix = [[1, 2], [3, 4], [5, 6]];
Array Characteristics:
Arrays are dynamic (size can change)
Elements can be of different data types
Arrays are objects in JavaScript
Array indices start from 0
Arrays have a length property
6. Functions
Definition:
Functions are reusable blocks of code designed to perform specific tasks. They are executed when
called (invoked).
Function Declaration:
javascript
function functionName(parameters) {
// function body
return value; // optional
}
Function Expression:
javascript
let functionName = function(parameters) {
// function body
return value;
};
Arrow Functions (ES6):
javascript
let functionName = (parameters) => {
// function body
return value;
};
// Short form for single expression
let add = (a, b) => a + b;
Function Components:
1. Function Name:
Identifies the function
Used to call the function
Should be descriptive of function's purpose
2. Parameters:
Variables that receive values when function is called
Listed in parentheses after function name
Can have default values: function greet(name = "Guest")
3. Function Body:
Contains the code to be executed
Enclosed in curly braces
Can contain any valid JavaScript statements
4. Return Statement:
Returns a value to the function caller
Optional - functions return undefined if no return statement
Terminates function execution
Function Invocation:
javascript
functionName(arguments);
Types of Functions:
1. Named Functions:
Functions with a specific name that can be called multiple times.
2. Anonymous Functions:
Functions without a name, often used as callbacks or event handlers.
3. Self-Invoking Functions (IIFE):
javascript
(function() {
// code executed immediately
})();
4. Callback Functions:
Functions passed as arguments to other functions.
Function Scope:
Local Scope: Variables declared inside function
Global Scope: Variables declared outside all functions
Function Hoisting: Function declarations are moved to top of scope
Function Characteristics:
Functions are first-class objects in JavaScript
Functions can be assigned to variables
Functions can be passed as arguments
Functions can return other functions
Functions create their own scope
7. Constructors
Definition:
Constructor functions are special functions used to create and initialize objects. They serve as
blueprints for creating multiple objects with similar properties and methods.
Constructor Function Syntax:
javascript
function ConstructorName(parameters) {
this.property1 = value1;
this.property2 = value2;
this.method = function() {
// method body
};
}
Creating Objects with Constructors:
javascript
let objectName = new ConstructorName(arguments);
The 'new' Keyword:
When using the new keyword:
1. Creates a new empty object
2. Sets the constructor's this to the new object
3. Executes the constructor function
4. Returns the new object (unless constructor explicitly returns something else)
The 'this' Keyword:
Refers to the object being created
Used to assign properties and methods to the new object
Context depends on how function is called
Constructor Example:
javascript
function Person(name, age, city) {
this.name = name;
this.age = age;
this.city = city;
this.greet = function() {
return "Hello, I'm " + this.name;
};
}
let person1 = new Person("John", 25, "New York");
let person2 = new Person("Jane", 30, "London");
Built-in Constructors:
1. Object Constructor:
javascript
let obj = new Object();
2. Array Constructor:
javascript
let arr = new Array();
3. Function Constructor:
javascript
let func = new Function('a', 'b', 'return a + b');
4. Date Constructor:
javascript
let date = new Date();
Prototype Property:
Every constructor function has a prototype property that allows adding properties and methods to all
instances:
javascript
Person.prototype.nationality = "Unknown";
Person.prototype.getAge = function() {
return this.age;
};
Constructor vs Regular Function:
Constructor: Called with new keyword, creates objects
Regular Function: Called directly, performs operations
Constructor Best Practices:
1. Constructor names should start with capital letter
2. Always use new keyword when calling constructors
3. Use prototype for methods to save memory
4. Validate parameters in constructor
5. Return nothing explicitly (let new handle return)
Advantages of Constructors:
Code reusability
Consistent object structure
Encapsulation of related properties and methods
Easy to create multiple similar objects
Supports inheritance through prototypes
Constructor Characteristics:
Constructors are regular functions called with new
They initialize object properties
They can have parameters for customization
They automatically return the created object
They can be used to implement object-oriented programming concepts
