Scribd
Upload
36 views

JAVASCRIPT

1. The document discusses the difference between let, const, and var in JavaScript, as well as arrays. 2. let and const introduce block scope in JavaScript and prevent variables from being redeclared, while var has function scope and allows redeclaration. const also prevents reassignment. 3. Arrays allow storing multiple values in a single variable and accessing elements via indexes. Arrays have useful methods like toString() to convert to a string.

Uploaded by

Nithiyaraj V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
36 views

JAVASCRIPT

1. The document discusses the difference between let, const, and var in JavaScript, as well as arrays. 2. let and const introduce block scope in JavaScript and prevent variables from being redeclared, while var has function scope and allows redeclaration. const also prevents reassignment. 3. Arrays allow storing multiple values in a single variable and accessing elements via indexes. Arrays have useful methods like toString() to convert to a string.

Uploaded by

Nithiyaraj V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

JAVASCRIPT

TODAY TOPICS:
Let
Const
Var
Difference between let, const, var
Array
Hoisting
JS let:

Variable defined with let cannot be redeclared.


Variable defines with let must be Declared before use.
Variable defined with let have Block scope.
The let Keyword attaches the variable declaration to the scope of whatever block it’s contained in.
Example:
<!DOCTYPE html>
<html>
<body>
OUTPUT:
<h2>Redeclaring a Variable Using let</h2>

<p id="demo"></p> Redeclaring a Variable Using var


10
<script>
let x = 10;
// Here x is 10

{
let x = 2;
// Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>
JS const:

Variables defined with const cannot be Redeclared.


Variables defined with const cannot be Reassigned.
But const object and arrays can be changed.
Variables defined with const have Block Scope.
JavaScript variables must be assigned a value when they are
declared.
Example:
<!DOCTYPE html> OUTPUT:
<html>
<body> JavaScript const
TypeError: Assignment to constant variable.
<h2>JavaScript const</h2>

<p id="demo"></p>

<script>
try {
const PI = 3.141592653589793;
PI = 3.14;
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>
JS var:
The var statement declares a variable.
Variables are containers for storing information.
Creating a variable in JavaScript is called “declaring” a variable.
Example 1:
<!DOCTYPE html> OUTPUT:
<html>
<body> JavaScript Variables
In this example, x, y, and z are variable
<p id="demo"></p>
The value of z is: 11
<script>
var x = 5;
var y = 6;
Var z = x+y;
document.getElementById("demo").innerHTML =
“The value of z is:” +z;
</script>

</body>
</html>
Example 2:
OUTPUT:
<!DOCTYPE html>
<html> You can declare many variables in one statement.
<body> Name: Jeevan Age:30 Work: Software Developer

<p>You can declare many variables in one statement:</p>

<p id="demo"></p>

<script>
var lastName = “Jeevan",
age = 30,
job = “Software Developer";

document.getElementById("demo").innerHTML = "Name: " +


lastName + ". Age: " + age + ". Work: " + job;
</script>

</body>
</html>
OUTPUT:
<!DOCTYPE html>
Hoisting:
<html>
<body> JavaScript Hoisting
With
Variables defined with var are hoisted to the top and can be initialized var,time.
at any you can use a variable before it is declared:
Example: <h2>JavaScript Hoisting</h2> Ravi

<p>With <b>var</b>, you can use a variable before it is


declared:</p>

<p id="demo"></p>

<script>
name = “Ravi";
document.getElementById("demo").innerHTML =name;
var name;
</script>

</body>
</html>
Scope:
Scope determines the accessibility (visibility) of variables.
JavaScript has 3 types of scope:
1)Block scope
2)Function scope
3)Global scope
Block Scope:
JavaScript had only Global scope and Function scope.
Es6(ECMA Script) introduced two important new
JavaScript keywords: let and const.
These two keywords provide Block Scope in
JavaScript.
Variables declared inside a {}block cannot be
accessed from outside the block.
Example:
<script>
let x = 10;
// Here x is 10
OUTPUT:
{
let x = 2; Redeclaring a Variable Using var
// Here x is 2 10
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>
Local Scope:
Variables declared within a JavaScript function, become
LOCAL to the function.

Example: OUTPUT:
<script>
myFunction(); JavaScript Scope
Name is undefined outside myFunction():
function myFunction() { String Nishanth
let Name = “Nishanth"; undefined

document.getElementById("demo1").innerHTML
= typeof Name + " " + Name;
}

document.getElementById("demo2").innerHTML
= typeof Name;
</script>
Global Scope:
Variables declared Globally (outside any function) have
Global Scope.
Global variables can be accessed from anywhere in a
JavaScript program.
Variables declared with var, let, and const are quite similar
when declared outside a block.

They all have Global Scope:


var x = 2; // Global scope
let x = 2; / Global scope
const x = 2; // Global scope
Difference between var, let, const:

Scope Redeclare Reassign Hoisted

var Global Yes Yes Yes

let Block No Yes No

const Block No No No
<!DOCTYPE html> OUTPUT:
<html>
<body> JavaScript Arrays
<h1>JavaScript Arrays</h1> Abdul, Somesh, Sairaj, Aravind, Veera, Kishore
Arrays:
<p id="demo"></p>
An array is a special variable, which can hold more than one value:
Example:

<script>
const names = [“Abdul", “Somesh”, “Sairaj”,“Aravind", “Veera”,
“Kishore"];
document.getElementById("demo").innerHTML = names;
</script>

</body>
</html>
Why Use Array?

If you have a list of items(a list of names, for example),


storing the names in single variable could look like this:
let name1=“Aryaman”;
let name2=“Srujan”;
let name3=“Murali”;

An array can hold many values under a single name,


and you can access the values by referring to an index
number.
Accessing Array Elements: OUTPUT:

JavaScript Arrays
You <!DOCTYPE
access anhtml>
array element by referring to the index number.
Bracket Indexing
Example:
<html> JavaScript array elements are accessed using numeric indexes
<body> (starting from 0).
Abdul
<p>JavaScript array elements are accessed using numeric indexes
(starting from 0).</p>

<p id="demo"></p>

<script>
const names = [“Abdul", “Somesh”, “Sairaj”,“Aravind", “Veera”,
“Kishore"];
document.getElementById("demo").innerHTML = names[0];
</script>

</body>
</html>
OUTPUT:

JavaScript Arrays
Changing an Array Element
Bracket Indexing
<!DOCTYPE html> JavaScript array elements are accessed using numeric indexes (starting from 0).
This statement changes the value of the element in names:
<html>
<body>
Example: Nithyaraj, Somesh, Sairaj, Aravind, Veera, Kishore

<p>JavaScript array elements are accessed using numeric indexes (starting


from 0).</p>

<p id="demo"></p>

<script>
const names = [“Abdul", “Somesh”, “Sairaj”,“Aravind", “Veera”, “Kishore"];
names[0]=“Nithyaraj”
document.getElementById("demo").innerHTML = names[0];
</script>

</body>
</html>
Converting an Array to a String
OUTPUT:
The JavaScript
<!DOCTYPE html> method tostring() converts an array to a string of array values.
JavaScript Arrays
<html>
Example:
<body> The toString() Method
The toString() method returns an array as a comma separated
<p>The toString() method returns an string:
array as a comma separated string:</p> Abdul, Somesh, Sairaj, Aravind, Veera, Kishore

<p id="demo"></p>

<script>
const names = [“Abdul", “Somesh”,
“Sairaj”,“Aravind", “Veera”, “Kishore"];
document.getElementById("demo").inner
HTML = names.toString();
</script>

</body>
</html>
Arrays are Objects:

Arrays are a special type of objects


Examples:
<!DOCTYPE html>
OUTPUT:

<html> JavaScript Arrays


<body> Arrays use numbers to access its elements.

<h2>JavaScript Arrays</h2> Adhithya

<p>Arrays use numbers to access its elements.</p>

<p id="demo"></p>

<script>
const person = [“Adhithya", “Software Engineer",30];
document.getElementById("demo").innerHTML = person[0];
</script>

</body>
</html>
The Length Property:
OUTPUT:
The length property of an array returns the length of an array(the number of array
<!DOCTYPE html>
elements). JavaScript Arrays
<html> The length Property
Example:
<body> The length property returns the length of an array:
4
<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>
<!DOCTYPE html> OUTPUT:
<html>
Looping
<body>Array Elements:
<p id="demo"></p> JavaScript Arrays
One way to loop through an array, is using a for loop:
Looping an Array
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"]; •Banana
let fLen = fruits.length; •Orange
•Apple
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
•Mango
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>
END

You might also like