Software Training and Placement Center

Getting Started with Javascript

Variables in Javascript :

In any programming or scripting language we need to have some containers to store the data , that is
nothing but a naming convention that is variable.

In JavaScript, variables are used to store data that can be accessed and manipulated within a program.
Here are some key points about variables in JavaScript:

Declaring Variables:
- You can declare variables using the var, let, or const keywords.
- var was traditionally used, but let and const were introduced in ES6 for better variable declaration.
- let is used for variables with a limited scope, and their values can be changed.
- const is used for variables that should not be re-assigned once declared.

Variable Naming Rules:

- Variable names can contain letters, digits, underscores, and dollar signs.
- Variables must begin with a letter, underscore, or dollar sign.
- JavaScript variables are case-sensitive.

Assigning Values:
- You can assign values to variables using the equal (=) operator.
- Variables can hold various types of data, such as strings, numbers, arrays, objects, functions, etc.

Example of Variable Declarations:

// Using var (for historical purposes)

var name = 'Alice';

// Using let
let age = 30;

// Using const
const PI = 3.14159

Scope of Variables:

- Variables declared with var are function-scoped, while variables declared with let and const are block-
scoped.
- Global variables are declared outside functions and are accessible throughout the script.

Variable Hoisting:

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

- In JavaScript, variable declarations (not assignments) are hoisted to the top of their scope during the
compilation phase.
- This means you can use a variable before it's declared, but only the declaration is hoisted, not the
initialization.

Code :
console.log(message); // Output: undefined (Variable declared but not
initialized)
var message = 'Hello, World!';

Variable Naming and Best Practices:

- Variable names should be descriptive and follow camelCase convention for better readability
(myVariableName).
- Avoid using reserved keywords for variable names.
- Variables should have meaningful names that reflect their purpose in the code.
- Constants (variables declared with const) should be in UPPERCASE with underscores for better
visibility.

Examples:

let employeeName = 'Alice'; // Good variable naming

let numEmployees = 10; // Using camelCase
const MAX_EMPLOYEES = 100; // Constant in UPPERCASE

Dynamic Typing:
- JavaScript is a dynamically typed language, meaning you don't have to specify a data type when
declaring variables.
- The type of the variable is determined dynamically at runtime based on the assigned value.

let dynamicVariable = 'Hello'; // variable dynamically assigned a string value

dynamicVariable = 10; // variable dynamically reassigned to a number

Scope:
- Scope determines the accessibility of variables within the code.
- Variables declared with var are function-scoped, and they can be accessed within the function in which
they are defined.
- Variables declared with let and const are block-scoped and are accessible only within the block they
are defined in.

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

Global vs. Local Variables:

- Variables declared outside any function are considered global variables and are accessible throughout
the script.
- Variables declared inside a function are local to that function and can only be accessed within it.

Example:

let globalVar = 'I am a global variable';

function myFunction() {
let localVar = 'I am a local variable';
console.log(globalVar); // Accessible
console.log(localVar); // Accessible
}

console.log(globalVar); // Accessible
console.log(localVar); // Error: localVar is not defined

Destructuring Assignment (ES6):

- Destructuring assignment allows you to extract data from arrays or objects into distinct variables.
- It provides a concise syntax for unpacking values from arrays or properties from objects.

Code :

// Array destructuring
let [a, b] = [1, 2]; // a =1 , b=2

Template Literals (ES6):

- Template literals are a way to create strings in JavaScript by using backticks (``) instead of single or
double quotes.
- They allow for string interpolation, multiline strings, and the inclusion of expressions using ${}.

Code :

let name = 'Alice';

let greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, Alice!

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

Nullish Coalescing Operator (ES11):

- The nullish coalescing operator (??) is used to provide a default value for variables that are null or
undefined.
- It returns the right-hand operand when the left-hand operand is null or undefined.

Code :

let userCount = null;

let totalUsers = userCount ?? 0; // If userCount is null, totalUsers = 0

Optional Chaining (ES11):

- The optional chaining operator (?.) is used to avoid errors when accessing nested properties of an
object that might not exist.
- It short-circuits the evaluation if a property is null or undefined, returning undefined instead of
throwing an error.

Code :
let user = {
name: 'Alice',
address: {
city: 'Wonderland'
}
};

let userCity = user.address?.city; // Safe parameter

Variables Naming Convention in Javascript:

When it comes to naming variables in JavaScript, it is important to follow certain conventions for better
readability and maintainability of the code. Here are some common naming conventions:

1. Camel Case: This is the most widely used convention in JavaScript. In camel case, the first word starts
with a lowercase letter, and each subsequent word starts with an uppercase letter. For example:
myVariableName.

2. Meaningful Names: Choose names that clearly convey the purpose or intention of the variable. Avoid
single-letter variable names (a, b, c) unless they are used as loop counters.

3. Use Descriptive Names: Be descriptive with your variable names to make the code more
understandable. For example, instead of x or temp, use names like totalAmount or userInput.

4. Avoid Reserved Words: Do not use reserved keywords or future-reserved keywords as variable
names. It can lead to unexpected behavior and errors.

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

5. Constants: When defining constants, use all uppercase letters with underscores to separate words.
For example: MAX_SIZE.

6. Use Consistent Naming: Maintain consistency in your naming conventions throughout your codebase.
If you start with camel case, stick with it.

7. Avoid Abbreviations: Try to avoid abbreviations that may not be clear to others reading your code.
Clarity should be prioritized over brevity.

8. Scope Prefixes: Consider using prefixes to denote the scope of the variable. For instance, g_ for global
variables, c_ for constants, l_ for local variables, etc.

9. Use of Underscore or Dash: While camel case is the most common convention, some developers
prefer using underscores or dashes to separate words in variable names. For example:
my_variable_name, my-variable-name.

10. Avoid Starting with Numbers: Variable names should not start with a number. They should begin
with a letter, underscore, or dollar sign.

11. Constructor Functions: When defining constructor functions or classes, use Pascal case where the
first letter of each word is capitalized. For example: Person, Car.

12. Boolean Variables: For boolean variables, consider using prefixes like is, has, or should to indicate
their nature. For example: isActive, hasPermission, shouldUpdate.

13. Avoid Hungarian Notation: In modern JavaScript, it's recommended to avoid using Hungarian
notation where the variable name includes a type prefix like strName, numCount.

14. Singular vs. Plural: Use singular names for individual entities and plural names for collections or
arrays. For example, person for a single person and people

Arrays and Objects in Javascript :

Arrays and objects are essential data structures in JavaScript that help organize and manipulate data
efficiently. Here's an overview of arrays and objects in JavaScript:

Arrays:
- An array is a special variable that can hold multiple values at once.
- Arrays in JavaScript are zero-indexed, meaning the first element is at index 0, the second element at
index 1, and so on.
- You can store different data types in an array, including numbers, strings, objects, and even other
arrays.

Creating an Array:

Code :

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

const fruits = ['apple', 'banana', 'orange'];

//Accessing Arrays elements

console.log(fruits[0]); // Output: apple

Array Methods:
- Arrays come with a variety of built-in methods like push(), pop(), forEach(), filter(), map(), etc., for
manipulation and iteration.

Objects in Javascript :

- Definition: An object is a non-primitive data type in JavaScript that represents a collection of related
data or functionalities. Objects are key-value pairs, where keys are strings (or Symbols) and values can
be any data type.

- Creating Objects: There are multiple ways to create objects in JavaScript:

- Using Object Literal: The most common way to create an object.

Code :

const person = {
name: 'Alice',
age: 30,
city: 'New York'
};

- Using the new Object() syntax:

const person = new Object();

person.name = 'Alice';
person.age = 30;
person.city = 'New York';

- Constructor Functions or Classes: Use constructor functions or ES6 classes to create multiple
instances of objects.
function Person(name, age) {
this.name = name;
this.age = age;
}

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

const person1 = new Person('Alice', 30);

- Accessing Object Properties:

- Dot Notation: Access object properties using the dot notation.

console.log(person.name); // Output: Alice

- Bracket Notation: Access object properties using

Let's continue exploring objects in JavaScript with more advanced concepts:

- Object Properties:
- Property Values: Object properties can hold various data types or even functions (methods).
- Property Access: Object properties can be accessed and modified using dot notation or bracket
notation.

- Object Methods:
- Defining Methods: Objects can contain methods, which are functions stored as object properties.

const person = {
name: 'Alice',
greet: function() {
console.log(`Hello, my name is ${this.name}.`);
}
};
person.greet(); // Output: Hello, my name is Alice.

- The this Keyword:

- Context: Inside an object method, this refers to the current object.
- Dynamic Binding: this is dynamically bound depending on how the method is called.

- Object Relationships:
- Nested Objects: Objects can have other objects as properties, creating a nested structure.
- Object References: Objects in JavaScript are reference types, and assigning one object to another
variable copies the reference, not the object itself.

- Object Enumeration:

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

- for...in Loop: Use the for...in loop to iterate over object properties.

for (let key in person) {

console.log(key, person[key]);
}

Objects in JavaScript :
- Object Prototypes:
- Prototype Inheritance: All JavaScript objects inherit properties and methods from a prototype. Every
JavaScript object has a prototype property that allows you to add properties and methods to an object
constructor.

- Prototype Chain: Objects can inherit properties and methods from other objects through a prototype
chain. When you access a property of an object, JavaScript will search for the property in the object
itself and then up the prototype chain.

- Object Constructor Functions:

- Creating Objects: Constructor functions are used to create multiple instances of objects with the
same structure and methods.

function Person(name, age) {

this.name = name;
this.age = age;
}
const person1 = new Person('Alice', 30);

- ES6 Classes:
- Class Syntax: ES6 introduced class syntax, which provides a more elegant way of creating objects and
implementing inheritance.

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const person1 = new Person('Alice', 30);

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

- Object Destructuring:
- Destructuring Assignment: Object destructuring allows you to extract multiple properties from an
object and assign them to variables.

Data Types in Javascript :

In JavaScript, there are several data types that are used to store different kinds of values. Here are the
basic data types in JavaScript:

1. Primitive Data Types:

- String: Used for textual data enclosed in single or double quotes.
- Number: Represents both integers and floating-point numbers.
- Boolean: Represents a logical value - true or false.
- Null: Represents an empty or non-existent value.
- Undefined: Represents a variable that has been declared but not assigned a value.
- Symbol (introduced in ES6): Represents a unique value that may be used as an identifier for object
properties.

2. Composite Data Types:

- Object: A collection of key-value pairs. Objects can store functions and other data types.
- Array: An ordered list of values, accessed by index.
- Function: A reusable block of code that performs a specific task.
- Date: Represents dates and times.
- RegExp: Represents regular expressions used for pattern matching.

3. Special Data Type:

- BigInt (introduced in ES11): Used for handling large integers exceeding the Number data type
limitations.

let name = 'Alice'; // String

let age = 30; // Number
let isStudent = true; // Boolean
let person = { firstName: 'Bob', lastName: 'Smith' }; // Object
let numbers =[1,2,3]

Keywords in Javascript :

In JavaScript, keywords are reserved words that have special meanings and are used to define the syntax
and structure of the language. Here are some important keywords in JavaScript:

1. Variables Keywords:
- var: Used to declare variables traditionally. Variables declared with var have function-level scope.
- let: Introduced in ES6 to declare block-scoped variables that can be reassigned.

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

- const: Also introduced in ES6 to declare variables that cannot be reassigned. It creates read-only
named constants.

2. Control Flow Keywords:

- if: Used to execute a block of code if a specified condition is true.
- else: Used with if to execute a block of code if the if condition is false.
- else if: Used to specify a new condition if the previous if condition is false.
- switch: Used to select one of many code blocks to be executed.
- for: Used to create a loop that runs a specified number of times.
- while: Used to create a loop that executes a block of code as long as the specified condition is true.
- break: Used to terminate a loop.
- continue: Used to jump over one iteration in a loop.

3. Function Keywords:
- function: Used to define a function.
- return: Used to return a value from a function.

4. Error Handling Keywords:

- try: Specifies the run time error
-catch : catches the error and handle it
-finally : it will always executes in the run time irrespective of the run time errors

Here are some important keywords in JavaScript:

1. var, let, const: Used to declare variables.

2. function: Defines a function. In ES6, we also have arrow functions.
3. if, else, else if: Used for conditional branching.
4. for, while, do-while: Looping constructs for iterations.
5. switch, case, default: Used for multi-way branching based on a value.
6. return: Returns a value from a function.
7. break, continue: Used in loops for control flow.
8. try, catch, finally: Used for exception handling in JavaScript.
9. this: Refers to the current object.
10. class, extends, super: Used for object-oriented programming in ES6.
11. import, export: Used for module imports and exports in ES6.
12. new: Creates an instance of a user-defined object type.
13. typeof: Returns the data type of a variable.
14. async, await: Used for handling asynchronous operations with Promises.

Understanding and using these keywords effectively will help you write efficient and structured
JavaScript code.

console.log() Usage :

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

The console.log() function in JavaScript is used to print messages and variables to the console in your
browser's developer tools. This is very useful for debugging and checking the values of variables during
the execution of your program.

Here's a simple example to demonstrate the usage of console.log():

Example Code :

// Using console.log() to print a message

console.log('Hello, World!');

// Using console.log() to print the value of a variable

let num = 10;
console.log('The value of num is: ' + num);

output :

When you run this JavaScript code in your browser, you can open the developer tools (usually by
pressing F12 or right-clicking on the page and selecting "Inspect") and navigate to the console tab to see
the output.

The messages and variable values you pass to console.log() will be displayed in the console, helping you
track the flow of your program and troubleshoot any issues that may arise.

window.alert():

The window.alert() function in JavaScript is used to display an alert dialog with a specified message and
an OK button. This can be a simple way to show information or prompt the user for some action.

Here's an example of how to use window.alert():

// Display an alert with a message

window.alert('Welcome to our website! Click OK to continue.');

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

Output :

When you run this code in a browser, an alert dialog box will pop up displaying the message "Welcome
to our website! Click OK to continue." The user can click the OK button to dismiss the alert.

Remember that while window.alert() can be handy for displaying messages, overusing it can disrupt the
user experience. It's usually best reserved for important notifications or prompts that require immediate
attention.

window.prompt():

The window.prompt() function in JavaScript is used to display a dialog box that prompts the user to
enter some input. This input can be stored in a variable for further use in your program.

Here's an example of how to use window.prompt():

// Prompt the user to enter their name

let userName = window.prompt('Please enter your name:');

Output :

When you run this code in a browser, a dialog box will appear with a message "Please enter your name:"
and an input field. The user can type in their name and click OK. The value entered by the user will be
stored in the userName variable.

window.prompt() is often used when you need to gather user input dynamically, such as asking for a
name, age, or any other information required by your program.

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

window.confirm():

The window.confirm() function in JavaScript is used to display a dialog box with a message and OK and
Cancel buttons. This function is often used to confirm an action with the user before proceeding.

Here's an example of how to use window.confirm():

Code :
javascript// Display a confirmation dialog
let isConfirmed = window.confirm('Are you sure you want to delete this item?');

// Check the value returned by the confirmation dialog

if (isConfirmed) {
console.log('Item deleted successfully!');
} else {
console.log('Deletion canceled.');
}

Output:

When you run this code in a browser, a dialog box will pop up with a message "Are you sure you want to
delete this item?" and OK and Cancel buttons. If the user clicks OK, the variable isConfirmed will be true,
and the message "Item deleted successfully!" will be logged to the console. If the user clicks Cancel, the
variable will be false, and the message "Deletion canceled." will be logged.

window.confirm() is commonly used to ensure that users want to perform critical actions like deleting
data or proceeding with irreversible changes.

Strict Mode in Javascript:

Strict mode in JavaScript is a special mode that allows you to place a script or a function in a strict
operating context. When using strict mode, the code is executed in a stricter version of JavaScript, which
helps to prevent some common pitfalls and improve performance. Here are some key points about strict

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

mode:

Strict Mode in JavaScript:

- Enabling Strict Mode:
- To enable strict mode in an entire script, add "use strict"; at the beginning of the script or function.

"use strict";
// Strict mode code
var a=5;
a="hellow"; // voilation

- Benefits of Strict Mode:

- Error Reporting: Strict mode helps to catch common coding errors and warn against unsafe coding
practices.
- Secure JavaScript: It prevents certain actions that were allowed in earlier versions of JavaScript,
making your code more secure.
- Optimization: It enables modern JavaScript features and optimizations by the engine.

- Strict Mode Features:

- Global Context: When used at the beginning of a script, strict mode applies to the entire script.
- Function Context: When used at the beginning of a function, strict mode applies only to that function
and its nested functions.

- Strict Mode Restrictions:

- Creating Global Variables: In strict mode, assigning a value to an undeclared variable will throw an
error.
- Deleting Variables or Functions: Deleting variables, functions, or function arguments is not allowed.

Finding an Object Class in Javascript:

It seems like you are asking about how to identify the class of an object in JavaScript. In JavaScript, you
can check the class of an object by using the instanceof operator. This operator allows you to check if an
object is an instance of a specific class or constructor function. Here's how you can use the instanceof
operator to find the class of an object:

Finding the Class of an Object in JavaScript:

function Person(name, age) {

this.name = name;
this.age = age;
}

const person1 = new Person('Alice', 30);

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in
 Software Training and Placement Center

if (person1 instanceof Person) {

console.log('person1 is an instance of Person class.');
} else {
console.log('person1 is not an instance of Person class.');
}

In the code snippet above, we define a Person constructor function and create an object person1 using
this constructor function. By using the instanceof operator, we check if person1 is an instance of the
Person class. If the check is true, it confirms that person1 belongs to the Person class.

Getting Object by Constructor Name :

In JavaScript, you can get the type of an object by accessing the constructor property of the object and
then retrieving the constructor name. The constructor property references the constructor function that
created the object, and you can extract the name of this constructor function using the name property
of the function. Here's how you can get the object type by constructor name in JavaScript:

Getting Object Type by Constructor Name in JavaScript:

function Person(name, age) {

this.name = name;
this.age = age;
}

const person1 = new Person('Alice', 30);

const objectType = Object.getPrototypeOf(person1).constructor.name;

console.log('The object type is: ' + objectType); // Output: The object type is:
Person

In the code above, we define a Person constructor function and create an object person1 using this
constructor function. By accessing the constructor property of the object's prototype and then getting
the name of the constructor function, we can determine the type of the object, which in this case is
Person.

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : enquries@bytesplash.in