let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
console.log(z);| result |
|---|
| 11 |
- JavaScript statement are composed of :
valuess,Operators,Expressions,KeywordsandComments.
This statement tells the browser to write "Hello World!" inside an HTML element with id="demo".
document.getElementById("demo").innerHTML = "Hello World!";Add a semicolon at the end of each executable statement.
let a, b, c; // Declare 3 variables
a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c| result |
|---|
| 11 |
When separated by semicolons, multiple statements on one line are allowed:
JavaScript statements often start with a keyword to identify the JavaScript action to be performed.
| Keyword | Description |
|---|---|
| var | Declares a variable |
| let | Declares a block variable |
| const | Declares a block constant |
| if | Marks a block of statements to be executed on a condition |
| switch | Marks a block of statements to be executed in different cases |
| for | Marks a block of statements to be executed in a loop |
| function | Declares a function |
| return | Exist a function |
| try | Implements error handling to a block of statements |
// create variables:
var x;
let y;
// use variables:
x = 5;
y = 6;
let z = x + y;- Single line comment.
- Multiple line comment.
Single line comments.
// Change Heading:
document.getElementById("myH").innerHTML = "My first page.";
let x = 5; // Declare x, give it the value of 5.Multiple line comments.
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";Variables are Containers for storing Data.
JavaScript variables can be declared in 4 ways:
- Automatically
- Using
var - Using
let - Using
const
// Using var
var x = 5;
var y = 6;
var z = x + y;📝 Note :
- It is considered good programming practice to always declare variables before use.
- The
varkeyword was used in all JavaScript code from 1995 to 2015. - The
letandconstkeywords were added to JavaScript in 2015. - The
varkeyword should only be used in code written for older browsers.
// using let
let x = 5;
let y = 6;
let z = x + y;
console.log(z);| result |
|---|
| 11 |
// using const
const a = "Hello";
const b = "World!";
const c = a + " " + b;
console.log(c);| result |
|---|
| Hello World! |
- Always declare variables
- Always use
constif the value should not be changed - Always use
constif the type should not be changed (Arrays and Objects) - Only use
letif you can't useconst - Only use
varif you MUST support old browsers.
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>Since JavaScript treats a dollar sign as a letter, identifiers containing $ are valid variable names:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;Since JavaScript treats underscore as a letter, identifiers containing_ are valid variable names:
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;Variables declared inside a { } block cannot be accessed from outside the block:
{
let x = 2;
}
// x can not be use here!Redeclaring a variable inside a block will not redeclare the variable outside the block:
let x = 10;
// x is here 10
{
let x = 2;
// x is here 2
}
// x is here 10const x = 10;
// x here is 10
{
const x = 5;
// x here is 5
}
// x is here is 10The Assignment Operator (=) assign value a varibale.
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z:
let z = x + y;The Addition Operators (+) adds numbers:
let x = 5;
let y = 2;
let z = x + y;The Multiplication Operators (*) multiplees numbers:
let x = 5;
let y = 2;
let z = x * y;| Operator | Description |
|---|---|
| + | Addition |
| - | Subtraction |
| * | Multiplication |
| ** | Exponentiation |
| / | Division |
| % | Modulus |
| ++ | Increment |
| -- | Decrement |
The adding operator (+) adds numbers:
let x = 5;
let y = 2;
let z = x + y;| result |
|---|
| 7 |
The subtraction operator (-) subtracts nymbers.
let x = 5;
let y = 2;
let z = x - y;| result |
|---|
| 3 |
The multiplication operator (*) multiplies numbers.
let x = 5;
let y = 2;
let z = x * y;| result |
|---|
| 10 |
The division operator (/) divides numbers.
let x = 5;
let y = 2;
let z = x / y;| result |
|---|
| 2.5 |
The modulus operator (%) returns the division remainder.
let x = 5;
let y = 2;
let z = x % y;| result |
|---|
| 1 |
The increment operator (++) increments numbers.
let x = 5;
x++;
let z = x;| result |
|---|
| 6 |
The decrement operator (--) decrements numbers.
let x = 5;
x--;
let z = x;| result |
|---|
| 4 |
The exponentiation operator (**) raises the first operand to the power of the second operand.
let x = 5;
let z = x ** 2;| result |
|---|
| 25 |
x ** y produces the same result as Math.pow(x,y):
let x = 5;
let z = Math.pow(x, 2);| result |
|---|
| 25 |
Assignment operators assign values to JavaScript variables.
| Operator | Example | Same As |
|---|---|---|
| = | x=y | x=y |
| += | x + = y | x = x + y |
| -= | x - = y | x = x - y |
| *= | x * = y | x = x * y |
| /= | x / = y | x = x / y |
| %= | x % = y | x = x % y |
| **= | x ** = y | x = x ** y |
The Simple Assignment Operator assigns a value to a variable.
let x = 10;
// For debugging
console.log(x);| result |
|---|
| 10 |
let x = 10;
let y = 5 + x;
console.log(y);| result |
|---|
| 15 |
The Addition Assignment Operator adds a value to a variable.
let x = 10;
x += 6;
console.log(x);| result |
|---|
| 16 |
<p id="demo"></p>let text = "Hello";
text += "World!";
document.getElementById("demo").innerHTML = text;| result |
|---|
| HelloWorld! |
The Subtraction Assignment Operator subtracts a value from a variable.
let x = 10;
x -= 5;The Multiplication Assignment Operator multiplies a variable.
let x = 10;
x *= 5;| result |
|---|
| 50 |
The Exponentiation Assignment Operator raises a variable to the power of the operand.
let x = 10;
x **= 5;| Result |
|---|
| 100000 |
The Division Assignment Operator divides a variable.
let x = 10;
x /= 5;| Result |
|---|
| 2 |
The Remainder Assignment Operator assigns a remainder to a variable.
let x = 10;
x %= 5;| Result |
|---|
| 0 |
1. String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object
The Object data type can contain:
1. An Object
2. An array
3. A date
// Numbers:
let length = 16;
let weight = 7.5;
// String:
let x = "Hello";
let y = "John Doe";
// Booleans:
let x = true;
let y = false;
// Object:
const person = { firstName: "John", lastName: "Doe" };
// Array object:
const cars = ["Saad", "volvo", "BMW"];
// Date Object:
const date = new Date("2023-09-11");Note : A JavaScript variable can hold any type of data.
In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the type.
Without data types, a computer cannot safely solve this:
let x = 16 + "Volvo";| result |
|---|
| 16Volvo |
Does it make any sense to add "Volvo" to sixteen? Will it produce an error or will it produce a result?
JavaScript will treat the example above as:
let x = "16" + "Volvo";| result |
|---|
| 16Volvo |
Note : When adding a number and a string, JavaScript will treat the number as a string.
JavaScript evaluates expressions from left to right. Different sequences can produce different results:
let x = 16 + 4 + "Volvo";| result |
|---|
| 20Volvo |
Note : When adding a number and a string, JavaScript will treat the number as a string.
let x = "Volvo" + 16 + 4;| result |
|---|
| Volvo164 |
JavaScript has dynamic types. This means that the same variable can be used to hold different data types:
let x;
x = 5;
x = "John";
console.log(x);| result |
|---|
| john |
let x;
x = 5;
console.log(x);
x = "John";| result |
|---|
| 5 |
A string (or a text string) is a series of characters like "John Doe".
Strings are written with quotes. You can use single or double quotes:
// Using dubble quotes:
let carName = "Volvo xc60";
// Using single quotes:
let carName = "Volvo xc60";You can use quotes inside a string, as long as they don't match the quotes surrounding the string:
// Single quote inside double quotes:
let answer1 = "It's alright";
// Single quotes inside double quotes:
let answer2 = "He is called 'Johnny'";
// Double quotes inside single quotes:
let answer3 = 'He is called "Johnny"';All JavaScript numbers are stored as decimal numbers (floating point).
Numbers can be written with, or without decimals:
// With decimals:
let x1 = 34.0;
// Without decimals:
let x2 = 34;All JavaScript numbers are stored in a a 64-bit floating-point format.
JavaScript BigInt is a new datatype (ES2020) that can be used to store integer values that are too big to be represented by a normal JavaScript Number.
let x = BigInt("123456789012345678901234567890");Booleans can only have two values: true or false.
let x = 5;
let y = 5;
let z = 6;
console.log(x == y); // true
console.log(x == z); // falseJavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code declares (creates) an array called cars, containing three items (car names):
const cars = ["Saab", "Volvo", "BMW"];
console.log(cars[0]);| result |
|---|
| Saab |
Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
JavaScript objects are written with curly braces {}.
Object properties are written as name:value pairs, separated by commas.
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue",
};
console.log(person.firstName + " is " + person.age + " years old.");| result |
|---|
| John is 50 years old. |
In JavaScript, a variable without a value, has the value undefined. The type is also undefined.
let car;
console.log(car);| result |
|---|
| undefined |
An empty value has nothing to do with undefined.
An empty string has both a legal value and a type.
let car = ""; // The value is "", the typeof is "string"A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
function myFunction(p1, p2) {
return p1 * p2;
}
let result = myFunction(4, 7);
console.log(result);| result |
|---|
| 28 |
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3) {
// code to be executed
}- A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
- Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
- The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...)
- Function
parametersare listed inside the parentheses () in the function definition. - Function
argumentsare the values received by the function when it is invoked. - Inside the function, the arguments (the parameters) behave as local variables.
The code inside the function will execute when "something" invokes (calls) the function:
- When an event occurs (when a user clicks a button)
- When it is invoked (called) from JavaScript code
- Automatically (self invoked)
You will learn a lot more about function invocation later in this tutorial.
let x = myFunction(4, 3);
console.log(x);
function myFunction(a, b) {
return a * b;
}| result |
|---|
| 12 |
With functions you can reuse code
You can write code that can be used many times.
You can use the same code with different arguments, to produce different results.
The () operators invokes (calls) the function:
function toCelsius(f) {
return (5 / 9) * (f - 32);
}
let value = toCelsius(77);
console.log(value); // result : 25Variables declared within a JavaScript function, become LOCAL to the function.
Local variables can only be accessed from within the function.
let text = "Outside : " + typeof car;
console.log(text);
function carDetail() {
let car = "Volvo";
let text = "Inside : " + typeof car + " " + car;
console.log(text);
}
carDetail();| result |
|---|
| Outside : undefined |
| Inside : string Volvo |
Arrow functions were introduced in ES6.
Arrow functions allow us to write shorter function syntax:
let myFunction = (a, b) => {
a * b;
};
console.log(myFunction(2, 5));Before Arrow
let hello = function () {
return "Hello world";
};
console.log(hello());
// Hello World!With Arrow Function
let hello = () => {
return "Hello World!";
};
console.log(hello());
// Hello World!It gets shorter! If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword:
let hello = (value) => {
return "Hello " + value;
};
console.log(hello("World!"));
// Hello World!In fact, if you have only one parameter, you can skip the parentheses as well:
Arrow Function Without Parentheses:
let hello = (value) => "Hello " + value;
console.log(hello("World!"));
// Hello World!This code assigns a simple value (John) to a variable named person:
let person = "John";This code assigns a many values (John, Doe, 24) to a variable named car:
const person = { firstName: "John", lastName: "Doe", age: 24 };
console.log(person.firstName + " " + person.lastName);
console.log(person.firstName + " is " + person.age + " years old.");| result |
|---|
| John Doe |
| John is 24 years old. |
Objects can also have methods.
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
| Property | Property Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 24 |
| eyeColor | Brown |
| fullName | function() {return this.firstName + " " + this.lastName} |
A method is function stored as a property.
const person = {
firstName: "John",
lastName: "Doe",
age: 24,
eyeColor: "Brown",
fullName: function () {
return this.firstName + " " + this.lastName;
},
};
console.log(person.fullName());| result |
|---|
| John Doe |
In the example above, this refer to person object.
this.firstName means this firstName propery of this.
this.firstName means the firstName property of person.
A JavaScript string is zero or more characters written inside quotes.
let text = "Hello World";You can use single or duble quotes :
let text01 = "Hello World";
let text02 = "Hello World";You can use quotes inside a string, as long as they don't match the quotes surrounding the string:
let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';To find the length of a string, use the built-in length property:
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log(text.length);| result |
|---|
| 26 |
Because strings must be written within quotes, JavaScript will misunderstand this string:
let text = "We are the so-called "Vikings" from the north.";The string will be chopped to "We are the so-called ".
The solution to avoid this problem, is to use the backslash escape character.
The backslash (\) escape character turns special characters into string characters:
| Code | Result | Description |
|---|---|---|
| ' | ' | Single Quote |
| " | " | Dubble Quote |
| \ | \ | Backslash |
The sequence \" inserts a double quote in a string:
let text = 'We are the so-called "Vikings" from the north.';The sequence \' inserts a single quote in a string:
let text = "It's alright.";The sequence \\ inserts a backslash in a string:
let text = "The character \\ is called backslash.";You can also break up a code line within a text string with a single backslash:
document.getElementById("demo").innerHTML =
"Hello \
World!";Normally, JavaScript strings are primitive value, created from literals:
But stringscan be also defined as object with the keyword new:
let x = "John Doe";
let y = new String(x);
console.log(typeof y);| result |
|---|
| object |
Do not create Strings objects.
The new keyword complicates the code and slows down execution speed.
String objects can produce unexpected results:
When using the == operator, x and y are equal:
let x = "John Doe";
let y = new String(x);
console.log(x == y); // trueWhen using the === operator, x and y are not equal:
let x = "John Doe";
let y = new String(x);
console.log(x === y); // falseNote the difference between (x==y) and (x===y).
| String length | String concat() |
| String slice() | String trim() |
| String substring() | String trimStart() |
| String substr() | String trimEnd() |
| String replace() | String padStart() |
| String replaceAll() | String padEnd() |
| String toUpperCase() | String charAt() |
| String toLowerCase() | String charCodeAt() |
| String split() |
The length property returns the length of a string.
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;
console.log(length); // 26slice() extracts a part of a string and returns the extracted part in a new string.
The method takes 2 parameters: start position, and end position (end not included).
let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13); // Banana📝 Note
JavaScript counts positions from zero.
First position is 0.
Second position is 1.
If you omit the second parameter, the method will slice out the rest of the string:
let text = "Apple, Banana, Kiwi";
let part = text.slice(7); // banana, KiwiIf a parameter is negative, the position is counted from the end of the string:
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12); // Banana, KiwiThis example slices out a portion of a string from position -12 to position -6:
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12, -6); // Bananasubstring() is similar to slice().
The difference is that start and end values less than 0 are treated as 0 in substring().
let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13); // BananaThe replace() method replaces a specified value with another value in a string:
let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "CodeWithDw");
console.log(newText);
// Please visit CodeWithDw!📝 Note
The replace() method does not change the string it is called on.
The replace() method returns a new string.
The replace() method replaces only the first match
If you want to replace all matches, use a regular expression with the /g flag set. See examples below.
To replace all matches, use a regular expression with a /g flag (global match):
let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "CodeWithDw");
// Please visit CodeWithDw and CodeWithDw!To replace case insensitive, use a regular expression with an /i flag (insensitive):
let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "CodeWithDw");
// Please visit CodeWithDw!In 2021, JavaScript introduced the string method replaceAll():
let text = "I love cats. Cats are very easy to love. Cats are very popular.";
text = text.replaceAll("Cats", "Dogs");
text = text.replaceAll("cats", "dogs");
console.log(text);
// I love dogs. Dogs are very easy to love. Dogs are very popular.The replaceAll() method allows you to specify a regular expression instead of a string to be replaced.
If the parameter is a regular expression, the global flag (g) must be set, otherwise a TypeError is thrown.
let text = "I love cats. Cats are very easy to love. Cats are very popular";
text = text.replaceAll(/Cats/g, "Dogs");
text = text.replaceAll(/cats/g, "dogs");let text1 = "Hello World!";
let text2 = text1.toUpperCase(); // HELLO WORLD!let text1 = "Hello World!";
let text2 = text1.toLowerCase(); // hello world!concat() joins two or more strings:
let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);
console.log(text3);| result |
|---|
| Hello World |
The concat() method can be used instead of the plus operator. These two lines do the same:
text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");The trim() method removes whitespace from both sides of a string:
let text1 = " Hello World! "; // length 22
let text2 = text1.trim(); // length 12The trimStart() method works like trim(), but removes whitespace only from the start of a string.
let text1 = " Hello World! "; // length 22
let text2 = text1.trimStart(); // length 17The trimEnd() method works like trim(), but removes whitespace only from the end of a string.
let text1 = " Hello World! "; // length 22
let text2 = text1.trimEnd(); // length 17The padStart() method pads a string from the start.
It pads a string with another string (multiple times) until it reaches a given length.
Pad a string with "0" until it reaches the length 4:
let text = "5";
let padded = text.padStart(4, "0"); // 0005Pad a string with "x" until it reaches the length 4:
let text = "5";
let padded = text.padStart(4, "x"); // xxx5The padEnd() method pads a string from the end.
It pads a string with another string (multiple times) until it reaches a given length.
let text = "5";
let padded = text.padEnd(4, "0"); // 5000let text = "5";
let padded = text.padEnd(4, "x"); // 5xxx📝 Note
The padStart() end padEnd() method is a string method.
To pad a number, convert the number to a string first.
How to convert number to string ?
let x = 5;
x = toString(x);
console.log(typeof x); // stringThe charAt() method returns the character at a specified index (position) in a string:
let text = "HELLO WORLD";
let char = text.charAt(0); // HA string can be converted to an array with the split() method:
let text = "a,b,c,d,e,f";
console.log(text[1]); // ,
const myArray = text.split(",");
console.log(myArray[1]); // bIf the separator is omitted, the returned array will contain the whole string in index [0].
If the separator is "", the returned array will be an array of single characters:
let word = "H,e,l,l,o";
word = word.split(",");
let len = word.length;
let text = "";
for (let x = 0; x < len; x++) {
text += word[x] + "<br>";
}
document.getElementById("demo").innerHTML = text;
/*
H
e
l
l
o
*/| String indexOf() | String lastIndexOf() |
| String search() | String match() |
| String matchAll() | String includes() |
| String startsWith() | String endsWith() |
The indexOf() method returns the index (position) the first occurrence of a string in a string:
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate"); // 7📝 Note
JavaScript counts positions from zero.
0 is the first position in a string, 1 is the second, 2 is the third, ...
The lastIndexOf() method returns the index of the last occurrence of a specified text in a string:
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate"); // 21Both indexOf(), and lastIndexOf() return -1 if the text is not found:
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("John"); // -1Both methods accept a second parameter as the starting position for the search:
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate", 15); // 21The lastIndexOf() methods searches backwards (from the end to the beginning), meaning: if the second parameter is 15, the search starts at position 15, and searches to the beginning of the string.
let text = "Please locate where 'locate' occurs!";
let lastIndex = text.lastIndexOf("locate", 15); // 7The search() method searches a string for a string (or a regular expression) and returns the position of the match:
let text = "Please locate where 'locate' occurs!";
console.log(text.search("locate")); // 7let text = "Please locate where 'locate' occurs!";
console.log(text.search(/locate/)); // 7📝 Did You Notice?
The two methods, indexOf() and search(), are equal?
The two methods, indexOf() and search(), are equal?
The two methods are NOT equal. These are the differences:
- The
search()method cannot take a second start position argument. - The
indexOf()method cannot take powerful search values (regular expressions).
You will learn more about regular expressions in a later chapter.
The match() method returns an array containing the results of matching a string against a string (or a regular expression).
Perform a search for "ain":
let text = "The rain in SPAIN stays mainly in the plain";
text.match("ain"); // 5Perform a global, case-insensitive search for "ain":
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g); // 3 [ 'ain', 'ain', 'ain' ]Perform a global, case-insensitive search for "ain":
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/gi); // 4 [ 'ain', 'AIN', 'ain', 'ain' ]Synonyms:
- Template
- Literals
- Template Strings
- String Templates
- Back-Tics Syntax
Template Literals use back-ticks (``) rather than the quotes ("") to define a string:
let text = `Hello World!`;With template literals, you can use both single and double quotes inside a string:
let text = `He's often called "Johnny"`;Template literals allows multiline strings:
let text = `The quick
brown fox
jumps over
the lazy dog`;Template literals provide an easy way to interpolate variables and expressions into strings.
The method is called string interpolation.
The syntax is:
${...}Template literals allow variables in strings:
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
document.getElementById("demo").innerHTML = html;let x = 3.14; // A number with decimals
let y = 3; // A number without decimalsExtra large or extra small numbers can be written with scientific (exponent) notation:
let x = 123e5; // 12300000
let y = 123e-5; // 0.00123Integers (numbers without a period or exponent notation) are accurate up to 15 digits.
let x = 999999999999999; // x will be 999999999999999
let y = 9999999999999999; // y will be 10000000000000000JavaScript uses the + operator for both addition and concatenation.
Numbers are added. Strings are concatenated.
If you add two numbers, the result will be a number:
let x = 10;
let y = 20;
let z = x + y;
console.log(z);| result |
|---|
| 30 |
If you add two strings, the result will be a string concatenation:
let x = "10";
let y = "20";
let z = x + y;
console.log(z);| result |
|---|
| 1020 |
If you add a number and a string, the result will be a string concatenation:
let x = 10;
let y = "20";
let z = x + y;
console.log(z);| result |
|---|
| 1020 |
A common mistake is to expect this result to be 30:
let x = 10;
let y = 20;
let z = "The result is: " + x + y;A common mistake is to expect this result to be 102030:
let x = 10;
let y = 20;
let z = "30";
let result = x + y + z;
console.log(result);| result |
|---|
| 3030 |
The JavaScript interpreter works from left to right.
First 10 + 20 is added because x and y are both numbers.
Then 30 + "30" is concatenated because z is a string.
JavaScript strings can have numeric content:
let x = 100; // x is a number
let y = "100"; // y is a stringNaN is a JavaScript reserved word indicating that a number is not a legal number.
Trying to do arithmetic with a non-numeric string will result in NaN (Not a Number):
let x = 100 / "Apple";
console.log(x);| result |
|---|
| NaN |
But numbers can also be defined as objects with the keyword new:
let x = 123;
let y = new Number(x);
console.log(typeof y);| Method | Description |
|---|---|
| toString() | Return a number as a string |
| toFixed() | Returns a number written with a number of decimals |
| toPrecision() | Returns a number written with a specified length |
| ValueOf() | Returns a number as a number |
The toString() method returns a number as a string.
All number methods can be used on any type of numbers (literals, variables, or expressions):
let x = 12;
x = toString(x);
console.log(typeof x); // stringtoFixed() returns a string, with the number written with a specified number of decimals:
let num = 9.656;
const number =
num.toFixed(0) +
"<br>" +
num.toFixed(2) +
"<br>" +
num.toFixed(4) +
"<br>" +
num.toFixed(6);
document.getElementById("demo").innerHTML = number;
/*
10
9.66
9.6560
9.656000
*/📝 toFixed(2) is perfect for working with money.
document.getElementById("demo").innerHTML =
Number(true) +
"<br>" + // 1
Number(false) +
"<br>" + // 0
Number("10") +
"<br>" + // 10
Number(" 10 ") +
"<br>" + // 10
Number(" 10") +
"<br>" + // 10
Number("10 ") +
"<br>" + // 10
Number("10.33") +
"<br>" + // 10.33
Number("10,33") +
"<br>" + // NaN
Number("10 33") +
"<br>" + // NaN
Number("John"); // NaNparseInt() parses a string and returns a whole number. Spaces are allowed. Only the first number is returned:
document.getElementById("demo").innerHTML =
parseInt("-10") +
"<br>" + // -10
parseInt("-10.33") +
"<br>" + // -10
parseInt("10") +
"<br>" + // 10
parseInt("10.33") +
"<br>" + // 10
parseInt("10 6") +
"<br>" + // 10
parseInt("10 years") +
"<br>" + // 10
parseInt("years 10"); // NaNThe Number.isInteger() method returns true if the argument is an integer.
toPrecision() returns a string, with a number written with a specified length:
let num = 9.656;
const number =
num.toPrecision() +
"<br>" +
num.toPrecision(2) +
"<br>" +
num.toPrecision(4) +
"<br>" +
num.toPrecision(6);
document.getElementById("demo").innerHTML = number;valueOf() returns a number as a number.
let x = 123;
x.valueOf(); // 123
(345).valueOf(); // 345
(100 + 23).valueOf(); // 123In JavaScript, a number can be a primitive value (typeof = number) or an object (typeof = object).
The valueOf() method is used internally in JavaScript to convert Number objects to primitive values.
There is no reason to use it in your code.
📝 Whay use arrays ?
If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?
The solution is an array!
An array can hold many values under a single name, and you can access the values by referring to an index number.
Using an array literal is the easiest way to create a JavaScript Array.
Syntax:
const array_name = [item1, item2, ...];const cars = ["Saab", "Volvo", "BMW"];Spaces and line breaks are not important. A declaration can span multiple lines:
const cars = ["Saab", "Volvo", "BMW"];You can also create an array, and then provide the elements:
const cars = [];
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";The following example also creates an Array, and assigns values to it:
const cars = new Array("Saab", "Volvo", "BMW");The two examples above do exactly the same.
There is no need to use new Array().
For simplicity, readability and execution speed, use the array literal method.
You access an array element by referring to the index number:
const cars = ["Saab", "Volvo", "BMW"];
console.log(cars[0]); // Saab📝 Note Array indexes start with 0
[0] is the first element. [1] is the second element.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits[fruits.length - 1]); // MangoThis statement changes the value of the first element in cars:
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
console.log(cars);The JavaScript method toString() converts an array to a string of (comma separated) array values.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.toString());With JavaScript, the full array can be accessed by referring to the array name:
const cars = ["Saab", "Volvo", "BMW"];
console.log(cars);Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.
But, JavaScript arrays are best described as arrays.
Arrays use numbers to access its "elements". In this example, person[0] returns John:
Array :
const person = ["John", "Doe", 46];Objects use names to access its "members". In this example, person.firstName returns John:
Object :
const person = { firstName: "John", lastName: "Doe", age: 46 };The length property of an array returns the length of an array (the number of array elements).
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.length); // 4const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits[0]);One way to loop through an array, is using a for loop:
let Language = ["html", "css", "JavaScript"];
let Len = Language.length;
let text = "<ul>";
for (let i = 0; i < Len; i++) {
text += "<li>" + Language[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;You can also use the Array.forEach() function:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFruits);
text += "</ul>";
document.getElementById("demo").innerHTML = text;
function myFruits(value) {
text += "<li>" + value + "</li>";
}The easiest way to add a new element to an array is using the push() method:
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.push("Lemon");
document.getElementById("demo").innerHTML = fruits;
}New element can also be added to an array using the length property:
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits[fruits.length] = "Lemon";
document.getElementById("demo").innerHTML = fruits;
}Adding elements with high indexes can create undefined "holes" in an array:
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";
let fLen = fruits.length;
let text = "";
for (i = 0; i < fLen; i++) {
text += fruits[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
/*
Banana
Orange
Apple
undefined
undefined
undefined
Lemon
*/Many programming languages support arrays with named indexes.
Arrays with named indexes are called associative arrays (or hashes).
JavaScript does not support arrays with named indexes.
In JavaScript, arrays always use numbered indexes.
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
console.log(person[0] + " " + person.length); // John 3📝 The Difference Between Arrays and Objects
In JavaScript, arrays use numbered indexes.
In JavaScript, objects use named indexes.
JavaScript has a built-in array constructor new Array().
But you can safely use [] instead.
These two different statements both create a new empty array named points:
const points = new Array();
const points = [];These two different statements both create a new array containing 6 numbers:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
console.log(points[0]); // 40A common question is: How do I know if a variable is an array?
The problem is that the JavaScript operator typeof returns "object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits; // objectThe typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
const fruits = ["Banana", "Orange", "Apple"];
console.log(Array.isArray(fruits)); // trueSolution 2:
The instanceof operator returns true if an object is created by a given constructor:
var fruits = ["Banana", "Orange", "Apple"];
console.log(fruits instanceof Array); // true| Array length | Array toString() |
| Array pop() | Array push() |
| Array shift() | Array unshift() |
| Array join() | Array delete() |
| Array concat() | Array slice() |
| Array splice() |
The length property returns the length (size) of an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length; // 4The JavaScript method toString() converts an array to a string of (comma separated) array values.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let convertString = fruits.toString();
// Banana,Orange,Apple,MangoThe join() method also joins all array elements into a string.
It behaves just like toString(), but in addition you can specify the separator:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join("*");
// Banana * Orange * Apple * MangoPopping and Pushing
When you work with arrays, it is easy to remove elements and add new elements.
This is what popping and pushing is:
Popping items out of an array, or pushing items into an array.
The pop() method removes the last element from an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
fruits.pop();
document.getElementById("demo").innerHTML = fruits;The pop() method returns the value that was "popped out":
The push() method adds a new element to an array (at the end):
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
// Banana,Orange,Apple,Mango,KiwiShifting is equivalent to popping, but working on the first element instead of the last.
The shift() method removes the first array element and "shifts" all other elements to a lower index.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);
// [ 'Banana', 'Orange', 'Apple', 'Mango' ]
fruits.shift();
console.log(fruits);
// [ 'Orange', 'Apple', 'Mango' ]The shift() method returns the value that was "shifted out":
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);
// [ 'Banana', 'Orange', 'Apple', 'Mango' ]
fruits.unshift("Kiwi");
console.log(fruits);
// [ 'Kiwi', 'Banana', 'Orange', 'Apple', 'Mango' ]📝 Array indexes start with 0:
[0] is the first array element [1] is the second [2] is the third ...
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);
// [ 'Banana', 'Orange', 'Apple', 'Mango' ]
fruits[0] = "Kiwi";
console.log(fruits);
// [ 'Kiwi', 'Orange', 'Apple', 'Mango' ]The length property provides an easy way to append a new element to an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);
// [ 'Banana', 'Orange', 'Apple', 'Mango' ]
fruits[fruits.length] = "Kiwi";
console.log(fruits);
// [ 'Banana', 'Orange', 'Apple', 'Mango', 'Kiwi' ]Array elements can be deleted using the JavaScript operator delete.
Using delete leaves undefined holes in the array.
Use pop() or shift() instead.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits[0]);
// Banana
delete fruits[0];
console.log(fruits[0]);
// undefinedThe concat() method creates a new array by merging (concatenating) existing arrays:
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
console.log(myChildren);
// [ 'Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus' ]The concat() method does not change the existing arrays. It always returns a new array.
The concat() method can take any number of array arguments:
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
console.log(myChildren);
// [ 'Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus', 'Robin', 'Morgan' ]The concat() method can also take strings as arguments:
const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter");
console.log(myChildren);
// [ 'Emil', 'Tobias', 'Linus', 'Peter' ]The splice() method can be used to add new items to an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits);
// [ 'Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango' ]The first parameter (2) defines the position where new elements should be added (spliced in).
The second parameter (0) defines how many elements should be removed.
The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.
The splice() method returns an array with the deleted items:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
console.log(fruits);
// [ 'Banana', 'Orange', 'Lemon', 'Kiwi' ]
/*
Remove item : Apple,Mango
*/With clever parameter setting, you can use splice() to remove elements without leaving "holes" in the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
console.log(fruits);
// [ 'Orange', 'Apple', 'Mango' ]The first parameter (0) defines the position where new elements should be added (spliced in).
The second parameter (1) defines how many elements should be removed.
The rest of the parameters are omitted. No new elements will be added.
The slice() method slices out a piece of an array into a new array.
This example slices out a part of an array starting from array element 1 ("Orange"):
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.slice(1));
// [ 'Orange', 'Apple', 'Mango' ]📝 Note
The slice() method creates a new array.
The slice() method does not remove any elements from the source array.
This example slices out a part of an array starting from array element 3 ("Apple"):
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
console.log(fruits.slice(3));
// [ 'Apple', 'Mango' ]The slice() method can take two arguments like slice(1, 3).
The method then selects elements from the start argument, and up to (but not including) the end argument.
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
console.log(fruits.slice(1, 3));
// [ 'Orange', 'Lemon' ]If the end argument is omitted, like in the first examples, the slice() method slices out the rest of the array.
JavaScript automatically converts an array to a comma separated string when a primitive value is expected.
This is always the case when you try to output an array.
These two examples will produce the same result:
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let x = fruits.toString();
console.log(typeof x); // stringThe sort() method sorts an array alphabetically:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits);
// [ 'Apple', 'Banana', 'Mango', 'Orange' ]The reverse() method reverses the elements in an array.
You can use it to sort an array in descending order:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
console.log(fruits);
// [ 'Orange', 'Mango', 'Banana', 'Apple' ]By default, the sort() function sorts values as strings.
This works well for strings ("Apple" comes before "Banana").
However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1".
Because of this, the sort() method will produce incorrect result when sorting numbers.
You can fix this by providing a compare function:
const points = [40, 100, 1, 5, 25, 10];
console.log(points); // [ 40, 100, 1, 5, 25, 10 ]
let sorted = points.sort(function (a, b) {
return a - b;
});
console.log(sorted); // [ 1, 5, 10, 25, 40, 100 ]The purpose of the compare function is to define an alternative sort order.
The compare function should return a negative, zero, or positive value, depending on the arguments:
function(a, b){return a - b}When the sort() function compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.
If the result is negative, a is sorted before b.
If the result is positive, b is sorted before a.
If the result is 0, no changes are done with the sort order of the two values.
Example:
The compare function compares all the values in the array, two values at a time (a, b).
When comparing 40 and 100, the sort() method calls the compare function(40, 100).
The function calculates 40 - 100 (a - b), and since the result is negative (-60), the sort function will sort 40 as a value lower than 100.
You can use this code snippet to experiment with numerically and alphabetically sorting:
<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script><!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>Click the button (again and again) to sort the array in random order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function () {
return 0.5 - Math.random();
});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>You can use Math.max.apply to find the highest number in an array:
const points = [40, 100, 1, 5, 25, 10];
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
console.log(myArrayMax(points));
// 100You can use Math.min.apply to find the lowest number in an array:
const points = [40, 100, 1, 5, 25, 10];
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}
console.log(myArrayMin(points));
// 1JavaScript arrays often contain objects:
Even if objects have properties of different data types, the sort() method can be used to sort the array.
The solution is to write a compare function to compare the property values:
const cars = [
{ type: "Volvo", year: 2016 },
{ type: "Saab", year: 2001 },
{ type: "BMW", year: 2010 },
];
cars.sort((a, b) => {
return a.year - b.year;
});
let result = "";
for (let x = 0; x < cars.length; x++) {
result += cars[x].type + " " + cars[x].year + "<br>";
}
demo.innerHTML = result;The forEach() method calls a function (a callback function) once for each array element.
const numbers = [45, 4, 9, 16, 25];
let text = "";
numbers.forEach((value, index, array) => {
return (text += value + "<br>");
});
document.getElementById("demo").innerHTML = text;
/*
45
4
9
16
25
*/Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
The example above uses only the value parameter. The example can be rewritten to:
const numbers = [45, 4, 9, 16, 25];
let text = "";
numbers.forEach((value) => {
return (text += value + "<br>");
});
document.getElementById("demo").innerHTML = text;The map() method creates a new array by performing a function on each array element.
The map() method does not execute the function for array elements without values.
The map() method does not change the original array.
This example multiplies each array value by 2:
const numbers = [45, 4, 9, 16, 25];
const number2 = numbers.map((value) => {
return value * 2;
});
document.getElementById("demo").innerHTML = number2;
/*
90,
8,
18,
32,
50
*/The filter() method creates a new array with array elements that pass a test.
This example creates a new array from elements with a value larger than 18:
const numbers = [45, 4, 9, 16, 25];
const numFilter = numbers.filter((value) => {
return value > 18;
});
console.log(numFilter);
// 45, 25The reduce() method runs a function on each array element to produce (reduce it to) a single value.
The reduce() method works from left-to-right in the array. See also reduceRight().
The reduce() method does not reduce the original array.
This example finds the sum of all numbers in an array:
const numbers = [45, 4, 9, 16, 25];
console.log(
numbers.reduce((total, value, index, array) => {
return total + value;
})
);
// 99Note that the function takes 4 arguments:
The total (the initial value / previously returned value) The item value The item index The array itself The example above does not use the index and array parameters. It can be rewritten to:
const numbers = [45, 4, 9, 16, 25];
console.log(
numbers.reduce((total, value) => {
return total + value;
})
);
// 99The reduceRight() method runs a function on each array element to produce (reduce it to) a single value.
The reduceRight() works from right-to-left in the array. See also reduce().
The reduceRight() method does not reduce the original array.
const numbers = [45, 4, 9, 16, 25];
console.log(
numbers.reduceRight((total, value) => {
return total + value;
})
);
// 99The every() method checks if all array values pass a test.
This example checks if all array values are larger than 18:
const numbers = [45, 4, 9, 16, 25];
let result = numbers.every((value, index, array) => {
return value > 18;
});
console.log("All over 18 is " + result);
// All over 18 is falseThe some() method checks if some array values pass a test.
This example checks if some array values are larger than 18:
const numbers = [45, 4, 9, 16, 25];
let result = numbers.some((value, index, array) => {
return value > 18;
});
console.log("All over 18 is " + result);
// All over 18 is trueThe find() method returns the value of the first array element that passes a test function.
This example finds (returns the value of) the first element that is larger than 18:
const numbers = [4, 9, 16, 25, 29];
let result = numbers.find((value, index, array) => {
return value > 18;
});
console.log("First number over 18 is " + result);
// First number over 18 is 25The findIndex() method returns the index of the first array element that passes a test function.
This example finds the index of the first element that is larger than 18:
const numbers = [4, 9, 16, 25, 29];
let result = numbers.findIndex((value, index, array) => {
return value > 18;
});
console.log("First number over 18 has index " + result);
// First number over 18 has index 3The Array.from() method returns an Array object from any object with a length property or any iterable object.
const myArr = Array.from("ABCDEFG");
console.log(myArr);
// ['A', 'B', 'C', 'D', 'E', 'F', 'G']The Array.keys() method returns an Array Iterator object with the keys of an array.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const key = fruits.keys();
let text = "";
for (let x of key) {
text += x + "<br>";
}
console.log(text);
/* 0<br>1<br>2<br>3<br> */const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
text = "";
for (let x of f) {
text += x + "<br>";
}
console.log(text);
// 0,Banana<br>1,Orange<br>2,Apple<br>3,Mango<br>ECMAScript 2016 introduced Array.includes() to arrays. This allows us to check if an element is present in an array (including NaN, unlike indexOf).
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.includes("Apple"));
// trueThe ... operator expands an iterable (like an array) into more elements:
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
console.log(year);
// [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'May' ]const d = new Date();const d = new Date("2023-9-1");📝 Note
Date objects are static. The "clock" is not "running".
The computer clock is ticking, date objects are not.
By default, JavaScript will use the browser's time zone and display a date as a full text string:
Fri Sep 01 2023 09:24:22 GMT+0530 (India Standard Time)
You will learn much more about how to display dates, later in this tutorial.
Date objects are created with the new Date() constructor.
There are 9 ways to create a new date object:
new Date()
new Date(date string)
new Date(year,month)
new Date(year,month,day)
new Date(year,month,day,hours)
new Date(year,month,day,hours,minutes)
new Date(year,month,day,hours,minutes,seconds)
new Date(year,month,day,hours,minutes,seconds,ms)
new Date(milliseconds)new Date(date string) creates a date object from a date string:
const d = new Date("September 01, 2023 09:28:44");new Date(year, month, ...) creates a date object with a specified date and time.
7 numbers specify year, month, day, hour, minute, second, and millisecond (in that order):
const d = new Date(2023, 11, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
// Sun Dec 24 2023 10:33:30 GMT+0530 (India Standard Time)📝 Note
JavaScript counts months from 0 to 11:
January = 0.
December = 11.
6 numbers specify year, month, day, hour, minute, second:
const d = new Date(2023, 11, 24, 10, 33, 30);5 numbers specify year, month, day, hour, and minute:
const d = new Date(2023, 11, 24, 10, 33);4 numbers specify year, month, day, and hour:
const d = new Date(2023, 11, 24, 10);3 numbers specify year, month, and day:
const d = new Date(2023, 11, 24);2 numbers specify year and month:
const d = new Date(2023, 11);There are generally 3 types of JavaScript date input formats:
| Type | Example |
|---|---|
| ISO Date | "2015-03-25" (The International Standard) |
| Short Date | "03/25/2015" |
| Long Date | "Mar 25 2015" or "25 Mar 2015" |
Independent of input format, JavaScript will (by default) output dates in full text string format:
Fri Sep 01 2023 12:17:14 GMT+0530 (India Standard Time)ISO 8601 is the international standard for the representation of dates and times.
The ISO 8601 syntax (YYYY-MM-DD) is also the preferred JavaScript date format:
const d = new Date("2015-03-25");The computed date will be relative to your time zone.
Depending on your time zone, the result above will vary between March 24 and March 25.
ISO dates can be written without specifying the day (YYYY-MM):
const d = new Date("2015-03");Time zones will vary the result above between February 28 and March 01.
ISO dates can be written without month and day (YYYY):
const d = new Date("2015");Time zones will vary the result above between December 31 2014 and January 01 2015.
Short dates are written with an "MM/DD/YYYY" syntax like this:
const d = new Date("03/25/2015");If you have a valid date string, you can use the Date.parse() method to convert it to milliseconds.
Date.parse() returns the number of milliseconds between the date and January 1, 1970:
let msec = Date.parse("March 21, 2012");You can then use the number of milliseconds to convert it to a date object:
let msec = Date.parse("March 21, 2012");
const d = new Date(msec);| Method | Description |
|---|---|
| getFullYear | Get year as a four digit number (yyyy) |
| getMonth() | Get month as a number (0-11) |
| getDate() | Get day as a number (1-31) |
| getDay() | Get weekday as a number (0-6) |
| getHours() | Get hour (0-23) |
| getMinutes() | Get minute (0-59) |
| getSeconds() | Get second (0-59) |
| getMilliseconds() | Get millisecond (0-999) |
| getTime() | Get time (milliseconds since January 1, 1970) |
📝 Note 1 The get methods above return Local time.
Universal time (UTC) is documented at the bottom of this page.
📝 Note 2 The get methods return information from existing date objects.
In a date object, the time is static. The "clock" is not "running".
The time in a date object is NOT the same as current time.
The getFullYear() method returns the year of a date as a four digit number:
const d = new Date();
console.log(d.getFullYear());
// 2023Old JavaScript code might use the non-standard method getYear().
getYear() is supposed to return a 2-digit year.
getYear() is deprecated. Do not use it!
The getMonth() method returns the month of a date as a number (0-11).
📝 Note
In JavaScript, January is month number 0, February is number 1, ...
Finally, December is month number 11.
const d = new Date();
console.log(d.getMonth() + 1);
// 9📝 Note
You can use an array of names to return the month as a name:
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const d = new Date();
let month = months[d.getMonth()];
console.log(month);
// SeptemberThe getDate() method returns the day of a date as a number (1-31):
const d = new Date();
console.log(d.getDate());
// 1The getHours() method returns the hours of a date as a number (0-23):
const d = new Date();
console.log(d.getHours());
// 22The getMinutes() method returns the minutes of a date as a number (0-59):
const d = new Date();
console.log(d.getMinutes());
// 15The getSeconds() method returns the seconds of a date as a number (0-59):
const d = new Date();
console.log(d.getSeconds());
// 20The getMilliseconds() method returns the milliseconds of a date as a number (0-999):
const d = new Date();
console.log(d.getMilliseconds());
// 609The getDay() method returns the weekday of a date as a number (0-6).
const d = new Date();
console.log(d.getDay());
// 5📝 Note
You can use an array of names, and getDay() to return weekday as a name:
const days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
const d = new Date();
console.log(days[d.getDay()]);
// FridayThe getTime() method returns the number of milliseconds since January 1, 1970:
const d = new Date("1970-01-01");
console.log(d.getTime());
// 0const d = new Date();
console.log(d.getTime());
// 1693587194392Date.now() returns the number of milliseconds since January 1, 1970.
// Calculate milliseconds in a year
const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const year = day * 365;
let years = Math.random(Date.now() / year);
console.log(years);
// 54Set Date methods are used for setting a part of a date:
| Method | Description |
|---|---|
| setDate() | Set the day as a number (1-31) |
| setFullYear() | Set the year (optionally month and day) |
| setHours() | Set the hour (0-23) |
| setMilliseconds() | Set the milliseconds (0-999) |
| setMinutes() | Set the minutes (0-59) |
| setMonth() | Set the month (0-11) |
| setSeconds() | Set the seconds (0-59) |
| setTime() | Set the time (milliseconds since January 1, 1970) |
The setFullYear() method sets the year of a date object. In this example to 2020:
const d = new Date();
d.setFullYear(2023);
document.getElementById("demo").innerHTML = d;
// Sat Sep 02 2023 02:05:29 GMT+0530 (India Standard Time)The setMonth() method sets the month of a date object (0-11):
const d = new Date();
d.setMonth(8);
// Sat Sep 02 2023 10:05:53 GMT+0530 (India Standard Time)The setDate() method sets the day of a date object (1-31):
const d = new Date();
d.setDate(3);
// Sun Sep 03 2023 10:08:08 GMT+0530 (India Standard Time)The setHours() method sets the hours of a date object (0-23):
const d = new Date();
d.setHours(11);
// Sat Sep 02 2023 11:08:24 GMT+0530 (India Standard Time)The setMinutes() method sets the minutes of a date object (0-59):
const d = new Date();
d.setMinutes(15);
// Sat Sep 02 2023 10:15:58 GMT+0530 (India Standard Time)The setSeconds() method sets the seconds of a date object (0-59):
const d = new Date();
d.setSeconds(30);
document.getElementById("demo").innerHTML = d;
// Sat Sep 02 2023 11:33:30 GMT+0530 (India Standard Time)Dates can easily be compared.
The following example compares today's date with January 14, 2100:
let text;
const today = new Date();
const someDay = new Date();
someDay.setFullYear(2100, 0, 14);
if (someDay > today) {
text = "Today is before January 14, 2100.";
} else {
text = "Today is after January 14, 2100.";
}
console.log(text);
// Today is before January 14, 2100.JavaScript counts months from 0 to 11. January is 0. December is 11.
There are 4 common methods to round a number to an integer:
| Math.round(x) | Returns x rounded to its nearest integer |
| Math.ceil(x) | Returns x rounded up to its nearest integer |
| Math.floor(x) | Returns x rounded down to its nearest integer |
| Math.trunc(x) | Returns the integer part of x |
Math.round(x) returns the nearest integer:
console.log(Math.round(4.6));
// 5
console.log(Math.round(4.5));
// 5
console.log(Math.round(4.4));
// 4Math.ceil(x) returns the value of x rounded up to its nearest integer:
console.log(Math.ceil(4.3));
// 5
console.log(Math.ceil(4.5));
// 5
console.log(Math.ceil(4.6));
// 5
console.log(Math.ceil(4));
// 4
console.log(Math.ceil(-4.3));
// -4
console.log(Math.ceil(-4));
// -4Math.floor(x) returns the value of x rounded down to its nearest integer:
console.log(Math.floor(4.9));
// 4
console.log(Math.floor(4.7));
// 4
console.log(Math.floor(4.4));
// 4
console.log(Math.floor(4.2));
// 4
console.log(Math.floor(-4.2));
// -5Math.trunc(x) returns the integer part of x:
console.log(Math.trunc(4.9));
// 4
console.log(Math.trunc(4.7));
// 4
console.log(Math.trunc(4.4));
// 4
console.log(Math.trunc(4.2));
// 4
console.log(Math.trunc(-4.2));
// -4Math.random() returns a random number between 0 (inclusive), and 1 (exclusive):
<p id="demo"></p>
<button onclick="randomValue()">Click!</button>
<script>
let randomValue = () => {
document.getElementById("demo").innerHTML = Math.random()
}
</script>
// Returns a random number:Math.random() used with Math.floor() can be used to return random integers.
There is no such thing as JavaScript integers.
We are talking about numbers with no decimals here.
// Returns a random integer from 0 to 9:
Math.floor(Math.random() * 10);
// Returns a random integer from 0 to 10:
Math.floor(Math.random() * 11);
// Returns a random integer from 1 to 10:
Math.floor(Math.random() * 10) + 1;
// Returns a random integer from 1 to 100:
Math.floor(Math.random() * 100) + 1;As you can see from the examples above, it might be a good idea to create a proper random function to use for all random integer purposes.
This JavaScript function always returns a random number between min (included) and max (excluded):
<button onclick="document.getElementById('demo').innerHTML = getRndInteger(0,10)">Click Me</button>
<p id="demo"></p>
<script>
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
</script><button onclick="document.getElementById('demo').innerHTML = getRndInteger(1,10)">Click Me</button>
<p id="demo"></p>
<script>
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
</script>Very often, in programming, you will need a data type that can only have one of two values, like
- YES / NO
- ON / OFF
- TRUE / FALSE
For this, JavaScript has a Boolean data type. It can only take the values true or false.
You can use the Boolean() function to find out if an expression (or a variable) is true:
console.log(Boolean(10 > 9));
// trueconsole.log(Boolean(10 < 9));
// falseThe chapter JS Comparisons gives a full overview of comparison operators.
The chapter JS Conditions gives a full overview of conditional statements.
Here are some examples:
| Operator | Description | Example |
|---|---|---|
| == | equal to | if (day == "Monday") |
| > | greater than | if (salary > 9000) |
| < | less than | if (age < 18) |
The Boolean value of 0 (zero) is false:
let x = 0;
console.log(Boolean(x));
// falseThe Boolean value of "" (empty string) is false:
let x = "";
console.log(Boolean(x));
// falseThe Boolean value of undefined is false:
let x;
console.log(Boolean(x));
// falseThe Boolean value of null is false:
let x = null;
console.log(Boolean(x));
// falseThe Boolean value of false is (you guessed it) false:
let x = false;
console.log(Boolean(x));
// falselet x = 5;
let y = 5;
console.log(Boolean(x == y));
// truelet x = 5;
let y = 6;
console.log(Boolean(x == y));
// falselet x = 5;
let y = "5";
console.log(Boolean(x === y));
// falseComparison operators can be used in conditional statements to compare values and take action depending on the result:
if (age < 18) text = "Too young to buy alcohol";JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
Syntax
variablename = (condition) ? value1:value2
let age = 28;
let compare = age > 18 ? "Too Young" : "To Small";
console.log(compare);
// Too Younglet age = 18;
let compare = age > 18 ? "Too Young" : "To Small";
console.log(compare);
// Too Smalllet age = 18;
let compare = age >= 18 ? "Too Young" : "To Small";
console.log(compare);
// Too Young<input type="text" id="age" />
<input type="submit" value="Submit" onclick="arrowFunction()" />
<p id="demo"></p>
<script>
let arrowFunction = () => {
let text = "";
let age = Number(document.getElementById("age").value);
if (isNaN(age)) {
text = "Input is a not a number";
} else {
text = age >= 18 ? "Yes You can vote." : "Too young";
}
document.getElementById("demo").innerHTML = text + " to vote";
};
</script>Conditional statements are used to perform different actions based on different conditions.
Very often when you write code, you want to perform different actions for different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
-
Use
ifto specify a block of code to be executed, if a specified condition is true -
Use
elseto specify a block of code to be executed, if the same condition is false -
Use
else ifto specify a new condition to test, if the first condition is false -
Use
switchto specify many alternative blocks of code to be executed
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
Syntax
if (condition) {
// block of code to be executed if the condition is true
}That if is in lowercase letters. Uppercase letters (If or IF) will generate a JavaScript error.
Make a "Good day" greeting if the hour is less than 18:00:
if (hours < 18) {
console.log("Good Day");
}Use the else statement to specify a block of code to be executed if the condition is false.
Syntax
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}If the hour is less than 18, create a "Good day" greeting, otherwise "Good evening":
const hours = new Date().getHours();
let greeting = "";
if (hours < 18) {
greeting = "Good Day";
} else {
greeting = "Good Evening";
}
console.log(greeting);if (new Date().getHours() < 18) {
document.getElementById("time").innerHTML = "Good Day";
} else {
document.getElementById("time").innerHTML = "Good Evening";
}Use the else if statement to specify a new condition if the first condition is false.
Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00, create a "Good day" greeting, otherwise a "Good evening":
const hours = new Date().getHours();
let greeting = "";
if (hours < 10) {
greeting = "Good Morning";
} else if (hours < 20) {
greeting = "Good Day";
} else {
greeting = "Good Evening";
}
console.log(greeting);The switch statement is used to perform different actions based on different conditions.
Use the switch statement to select one of many code blocks to be executed.
Syntax
switch (expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}This is how it works:
- The switch expression is evaluated once.
- The value of the expression is compared with the values of each case.
- If there is a match, the associated block of code is executed.
- If there is no match, the default code block is executed.
The getDay() method returns the weekday as a number between 0 and 6.
(Sunday=0, Monday=1, Tuesday=2 ..)
This example uses the weekday number to calculate the weekday name:
const x = new Date().getDay();
let days;
switch (x) {
case 0:
days = "Sunday";
break;
case 1:
days = "Monday";
break;
case 2:
days = "Tuesday";
break;
case 3:
days = "Wednesday";
break;
case 4:
days = "Thursday";
break;
case 5:
days = "Friday";
break;
case 6:
days = "Saturday";
}
console.log("Today is " + days);When JavaScript reaches a break keyword, it breaks out of the switch block.
This will stop the execution inside the switch block.
It is not necessary to break the last case in a switch block. The block breaks (ends) there anyway.
📝 Note If you omit the break statement, the next case will be executed even if the evaluation does not match the case.
The default keyword specifies the code to run if there is no case match:
The getDay() method returns the weekday as a number between 0 and 6.
If today is neither Saturday (6) nor Sunday (0), write a default message:
const x = new Date().getDay();
let days;
switch (x) {
case 6:
days = "Saturday";
break;
case 0:
days = "Sunday";
break;
default:
days = "Looking forward to the Weekend";
}
console.log(days);The default case does not have to be the last case in a switch block:
let days;
switch (new Date().getDay()) {
default:
days = "Looking forward to the Weekend";
break;
case 6:
days = "Saturday";
break;
case 0:
days = "Sunday";
}
console.log(days);If default is not the last case in the switch block, remember to end the default case with a break.
Sometimes you will want different switch cases to use the same code.
In this example case 4 and 5 share the same code block, and 0 and 6 share another code block:
let text;
switch (new Date().getDay()) {
case 4:
case 5:
text = "Soon it is Weekend";
break;
case 0:
case 6:
text = "It is weekend";
break;
default:
text = "Looking forward to the Weekend";
}
console.log(text);If multiple cases matches a case value, the first case is selected.
If no matching cases are found, the program continues to the default label.
If no default label is found, the program continues to the statement(s) after the switch.
Switch cases use strict comparison (===).
The values must be of the same type to match.
A strict comparison can only be true if the operands are of the same type.
In this example there will be no match for x:
<input type="number" id="text">
<button type="submit" onclick="myValue()">Submit</button>
<p id="result"></p>
<script>
let myValue = () => {
let value = Number(document.getElementById("text").value)
switch (value) {
case 0:
text = "Off"
break
case 1:
text = "On"
break
default:
text = "Value is not found"
}
document.getElementById("result").innerHTML = text
}
</script>Loops can execute a block of code a number of times.
Loops are handy, if you want to run the same code over and over again, each time with a different value.
Often this is the case when working with arrays:
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text = "";
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
console.log(text);
// BMW<br>Volvo<br>Saab<br>Ford<br>Fiat<br>Audi<br>JavaScript supports different kinds of loops:
for- loops through a block of code a number of timesfor/in- loops through the properties of an objectfor/of- loops through the values of an iterable objectwhile- loops through a block of code while a specified condition is truedo/while- also loops through a block of code while a specified condition is true
The for statement creates a loop with 3 optional expressions:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}Expression 1 is executed (one time) before the execution of the code block.
Expression 2 defines the condition for executing the code block.
Expression 3 is executed (every time) after the code block has been executed.
for (let x = 0; x < 5; x++) {
console.log(x);
}
/*
0
1
2
3
4
*/From the example above, you can read:
Expression 1 sets a variable before the loop starts (let i = 0).
Expression 2 defines the condition for the loop to run (i must be less than 5).
Expression 3 increases a value (i++) each time the code block in the loop has been executed.
Expression 1
Normally you will use expression 1 to initialize the variable used in the loop (let i = 0).
This is not always the case. JavaScript doesn't care. Expression 1 is optional.
You can initiate many values in expression 1 (separated by comma):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;Expression 2
Often expression 2 is used to evaluate the condition of the initial variable.
This is not always the case. JavaScript doesn't care. Expression 2 is also optional.
If expression 2 returns true, the loop will start over again. If it returns false, the loop will end.
If you omit expression 2, you must provide a break inside the loop. Otherwise the loop will never end. This will crash your browser. Read about breaks in a later chapter of this tutorial.
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2,
len = cars.length,
text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
/*
Saab
Ford
*/Expression 3
Often expression 3 increments the value of the initial variable.
This is not always the case. JavaScript doesn't care. Expression 3 is optional.
Expression 3 can do anything like negative increment (i--), positive increment (i = i + 15), or anything else.
Expression 3 can also be omitted (like when you increment your values inside the loop):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2,
len = cars.length,
text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
/*
Saab
Ford
*/The JavaScript for in statement loops through the properties of an Object:
Syntax
for (key in object) {
// code block to be executed
}const person = { fname: "John", lname: "Doe", age: 25 };
let text = "";
for (let x in person) {
text += person[x];
}
console.log(text);
// JohnDoe25Example Explained
- The for in loop iterates over a person object
- Each iteration returns a key (x)
- The key is used to access the value of the key
- The value of the key is person[x]
const numbers = [45, 4, 9, 16, 25];
let text = "";
for (let x in numbers) {
text += numbers[x];
}
console.log(text);
// 45491625The index order is implementation-dependent, and array values may not be accessed in the order you expect.
It is better to use a for loop, a for of loop, or Array.forEach() when the order is important.
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach((value, index, array) => {
txt += value;
});
console.log(txt);
// 45491625The JavaScript for of statement loops through the values of an iterable object.
It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more:
Syntax
for (variable of iterable) {
// code block to be executed
}variable - For every iteration the value of the next property is assigned to the variable. Variable can be declared with const, let, or var.
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + "<br>";
}
console.log(text);
// BMW<br>Volvo<br>Mini<br>const cars = "JavaScript";
let text = "";
for (let x of cars) {
text += x + "<br>";
}
console.log(text);
// J<br>a<br>v<br>a<br>S<br>c<br>r<br>i<br>p<br>t<br>Loops can execute a block of code as long as a specified condition is true.
The while loop loops through a block of code as long as a specified condition is true.
Syntax
while (condition) {
// code block to be executed
}In the following example, the code in the loop will run, over and over again, as long as a variable (i) is less than 10:
let text = "";
let i = 0;
while (i < 10) {
text += "<br>The Number is " + i;
i++;
}
console.log(text);
/*
<br>The Number is 0
<br>The Number is 1
<br>The Number is 2
<br>The Number is 3
<br>The Number is 4
<br>The Number is 5
<br>The Number is 6
<br>The Number is 7
<br>The Number is 8
<br>The Number is 9
*/The do while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.
do {
// code block to be executed
} while (condition);The example below uses a do while loop. The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested:
let text = "";
let i = 0;
do {
text += "<br>The Number is " + i;
i++;
} while (i < 10);
console.log(text);
/*
<br>The Number is 0
<br>The Number is 1
<br>The Number is 2
<br>The Number is 3
<br>The Number is 4
<br>The Number is 5
<br>The Number is 6
<br>The Number is 7
<br>The Number is 8
<br>The Number is 9
*/If you have read the previous chapter, about the for loop, you will discover that a while loop is much the same as a for loop, with statement 1 and statement 3 omitted.
The loop in this example uses a for loop to collect the car names from the cars array:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
let i = 0;
for (; cars[i]; ) {
text += cars[i] + "<br>";
i++;
}
console.log(text);
// BMW<br>Volvo<br>Saab<br>Ford<br>const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
let i = 0;
while (cars[i]) {
text += cars[i] + "<br>";
i++;
}
console.log(text);
// BMW<br>Volvo<br>Saab<br>Ford<br>The break statement "jumps out" of a loop.
The continue statement "jumps over" one iteration in the loop.
You have already seen the break statement used in an earlier chapter of this tutorial. It was used to "jump out" of a switch() statement.
The break statement can also be used to jump out of a loop:
let text = "";
for (let i = 0; i < 10; i++) {
if (i === 3) {
break;
}
text += i + "<br>";
}
document.getElementById("demo").innerHTML = text;
/*
0
1
2
*/In the example above, the break statement ends the loop ("breaks" the loop) when the loop counter (i) is 3.
The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop.
This example skips the value of 3:
let text = "";
for (let i = 0; i < 10; i++) {
if (i === 3) {
continue;
}
text += i + "<br>";
}
document.getElementById("demo").innerHTML = text;
/*
0
1
2
4
5
6
7
8
9
*/To label JavaScript statements you precede the statements with a label name and a colon:
label:
statements
The break and the continue statements are the only JavaScript statements that can "jump out of" a code block.
Syntax
break labelname;
continue labelname;
The continue statement (with or without a label reference) can only be used to skip one loop iteration.
The break statement, without a label reference, can only be used to jump out of a loop or a switch.
With a label reference, the break statement can be used to jump out of any code block:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
list: {
text += cars[0] + "<br>";
text += cars[1] + "<br>";
break list;
text += cars[2] + "<br>";
text += cars[3] + "<br>";
}
document.getElementById("demo").innerHTML = text;
/*
BMW
Volvo
*/Throw, and Try...Catch...Finally
The try statement defines a code block to run (to try).
The catch statement defines a code block to handle any error.
The finally statement defines a code block to run regardless of the result.
The throw statement defines a custom error.
When executing JavaScript code, different errors can occur.
Errors can be coding errors made by the programmer, errors due to wrong input, and other unforeseeable things.
In this example we misspelled "alert" as "adddlert" to deliberately produce an error:
try {
textAlert("Hello World");
} catch (err) {
console.log(err.message);
}The try statement allows you to define a block of code to be tested for errors while it is being executed.
The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.
The JavaScript statements try and catch come in pairs:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
The throw statement allows you to create a custom error.
Technically you can throw an exception (throw an error).
The exception can be a JavaScript String, a Number, a Boolean or an Object:
throw "Too big"; // throw a text
throw 500; // throw a numberIf you use throw together with try and catch, you can control program flow and generate custom error messages.
<input type="text" id="input">
<button type="submit" onclick="resultFunction()">Test Input!</button>
<p id="result"></p>
<script>
let resultFunction = () => {
const result = document.getElementById("result")
result.innerHTML = ""
let input = document.getElementById("input").value
try {
if (input.trim() == "") throw "empty"
if (isNaN(input)) throw "Not a Number!"
input = Number(input)
if (input < 5) throw "too low"
if (input > 10) throw "too high"
} catch (err) {
result.innerHTML = "input is " + err
}
}
</script>The finally statement lets you execute code, after try and catch, regardless of the result:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}<input type="text" id="input">
<input type="submit" onclick="submitButton()" />
<p id="result"></p>
<script>
function submitButton() {
let result = document.getElementById("result")
let input = document.getElementById("input").value
input.innerHTML = ""
try {
if (input.trim() == "") throw "Input is blank";
if (isNaN(input)) throw "Not a Number";
input = Number(input)
if (input > 10) throw "to high"
if (input < 5) throw "to low"
if (5 < input && 10 > input) throw "Value is submitted"
} catch (err) {
result.innerHTML = err
} finally {
if (5 < input && 10 > input) {
document.getElementById("input").value = ""
}
}
}
</script>| Property | Description |
|---|---|
| name | set or returns an error name |
| message | set or returns and error message (a string) |
Six different values can be returned by the error name property:
| Error name | Description |
|---|---|
| EvalError | An error has occurred in the eval() function |
| RangeError | A number "out of range" has occurred |
| ReferenceError | An illegal reference has occurred |
| SyntaxError | A syntax error has occurred |
| TypeError | A type error has occurred |
| URIError | An error in encodeURI() has occurred |
The six different values are described below.
A RangeError is thrown if you use a number that is outside the range of legal values.
For example: You cannot set the number of significant digits of a number to 500.
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500 significate digits
} catch (err) {
console.log(err.name);
}
// RangeErrorA ReferenceError is thrown if you use (reference) a variable that has not been declared:
let x = 5;
try {
x = y + 1; // y cannot be used (reference)
} catch (err) {
console.log(err.name);
}
// ReferenceErrorA SyntaxError is thrown if you try to evaluate code with a syntax error.
try {
eval("alert('Hello World)"); //
} catch (err) {
console.log(err.name);
}
// SyntaxErrorA TypeError is thrown if you use a value that is outside the range of expected types:
let num = 1;
try {
num.toUpperCase(); // You can not convert a number to upper case.
} catch (err) {
console.log(err.name);
}
// TypeError- syntax
localStorage- save data to localStorage
localStorage.setItem("key", "value")- Read Data from Local Storage
localStorage.getItem("key")- Remove Data from Local Storage
localStorage.removeItem("key")- Remove All (Clear Local Storage)
localStorage.clear()- the key is "person" and the value is the stringified version of the person object. JSON.stringify() is used to convert the JavaScript object into a JSON string because localStorage can only store strings.
const person = { name: "John Doe", age: 32 }
localStorage.setItem("person", JSON.stringify(person))- localStorage stores data as strings, we use JSON.parse() to convert the JSON string back into a JavaScript object.
const storedPerson = JSON.parse(localStorage.getItem("person"))
console.log(storedPerson);setTimeout(() => {
console.log("Hello World!");
}, 5000)So, to summarize, this code will log the string "Hello World!" to the console after a delay of 5 seconds.
setInterval(() => {
console.log("Hello World!");
}, 2000);So, to summarize, this code will log the string "Hello World!" to the console every 2 seconds, repeatedly, until the page is refreshed or the interval is cleared using the clearInterval function.
// Set up the interval to log a message to the console every 2 seconds
const intervalId = setInterval(() => {
console.log("Hello World!");
}, 2000);
// Clear the interval after 10 seconds
setTimeout(() => {
clearInterval(intervalId);
}, 10000);So, to summarize, this code will log the string "Hello World!" to the console every 2 seconds for 10 seconds, and then stop logging the message to the console.
The HTML DOM model is constructed as a tree of Objects:
With the object model, JavaScript gets all the power it needs to create dynamic HTML:
- JavaScript can change all the HTML elements in the page
- JavaScript can change all the HTML attributes in the page
- JavaScript can change all the CSS styles in the page
- JavaScript can remove existing HTML elements and attributes
- JavaScript can add new HTML elements and attributes
- JavaScript can react to all existing HTML events in the page
- JavaScript can create new HTML events in the page
The HTML DOM is a standard object model and programming interface for HTML. It defines:
- The HTML elements as objects
- The properties of all HTML elements
- The methods to access all HTML elements
- The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
The following example changes the content (the innerHTML) of the <p> element with id="demo":
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>In the example above, getElementById is a method, while innerHTML is a property.
The document object represents your web page.
If you want to access any element in an HTML page, you always start with accessing the document object.
Below are some examples of how you can use the document object to access and manipulate HTML.
Finding HTML Elements
| Method | Description |
|---|---|
| document.getElementById(id) | Find an element by element id |
| document.getElementByTagName(name) | Find Element by tag name |
| document.getElementByClassName(name) | Find Element bt class name |
Changing HTML Element
| Property | Description |
|---|---|
| element.innerHTML = new html content | Change the inner HTML of an element |
| element.attribute = new value | Change the attribute value of an HTMl element |
| element.style.property = new style | Change the style of an HTML element |
| Method | Description |
| element.setAttribute | Change the attribute value of an HTML element |
Adding and Deleting Elements
| Method | Description |
|---|---|
| document.createElement(element) | Create an HTML element |
| document.removeChild(element) | Remove an HTML element |
| document.appendChild(element) | Add an HTML element |
| document.replaceChild(new, old) | Replace an HTML element |
| document.write(text) | Write into the HTML output stream |
Adding Events Handlers
| Method | Description |
|---|---|
| document.getElementById(id).onclick = function(){code} | Adding event handler code to an onclick event |
Finding HTML Objects
The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5.
Later, in HTML DOM Level 3, more objects, collections, and properties were added.
| Property | Description | DOM |
|---|---|---|
| document.anchors | Returns all elements that have a name attribute | 1 |
| document.applets | Deprecated |
1 |
| document.baseURI | Returns the absolute base URI of the document | 3 |
| document.body | Returns the element | 1 |
| document.cookie | Returns the document's cookie | 1 |
| document.doctype | Returns the document's doctype | 3 |
| document.documentElement | Returns the element | 3 |
| document.documentMode | Returns the mode used by the browser | 3 |
| document.documentURI | Returns the URI of the document | 3 |
| document.domain | Returns the domain name of the document server | 1 |
| document.domConfig | Obsolete. |
3 |
| document.embeds | Returns all elements | 3 |
| document.forms | Returns all elements | 1 |
| document.head | Returns the element | 3 |
| document.images | Returns all |
1 |
| document.implementation | Returns the DOM implementation | 3 |
| document.inputEncoding | Returns the document's encoding (character set) | 3 |
| document.lastModified | Returns the date and time the document was updated | 3 |
| document.links | Returns all and elements that have a href attribute | 1 |
| document.readyState | Returns the (loading) status of the document | 3 |
| document.referrer | Returns the URI of the referrer (the linking document) | 1 |
| document.scripts | Returns all <script> elements | 3 |
| document.strictErrorChecking | Returns if error checking is enforced | 3 |
| document.title | Returns the <title> element | 1 |
| document.URL | Returns the complete URL of the document | 1 |
Finding Element by id
The easiest way to find an HTML element in the DOM, is by using the element id.
This example finds the element with id="intro":
<p id="intro">Finding HTML Element bt id</p>
<p id="demo"></p>
<script>
const element = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"The text from the intro paragraph is: " + element.innerHTML;
</script>| Result |
|---|
| The text from the intro paragraph is: Finding HTML Element bt id |
If the element is found, the return method will return the element as an object (in element).
If the element is not found, element will contain null.
Finding Element by Tag Name
This example finds all <p> elements:
<p>Hello World</p>
<p>John Doe</p>
<p>My Age is 22</p>
<p id="demo"></p>
<script>
const element = document.getElementsByTagName("P");
document.getElementById("demo").innerHTML =
"The text in first paragraph (index 0) is: " + element[0].innerHTML;
</script>| result |
|---|
| The text in first paragraph (index 0) is: Hello World |
This example finds the element with id="main", and then finds all <p> elements inside "main":
<div id="main">
<p>Hello World</p>
<p>John Doe</p>
</div>
<p>My Age is 22</p>
<p id="demo"></p>
<script>
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'This second paragraph (index 0) inside "main" is: ' + y[1].innerHTML;
</script>| result |
|---|
| This second paragraph (index 0) inside "main" is: John Doe |
Finding Elements by Class Name
If you want to find all elements with the same class name, use getElementByClassName().
This example returns a list of all elements with class-"intro".
<p class="into">Hello World</p>
<p class="into">John Doe</p>
<p>My Age is 22</p>
<p id="demo"></p>
<script>
const x = document.getElementsByClassName("into");
document.getElementById(
"demo"
).innerHTML = `My name is <b>${x[1].innerHTML}</b>`;
</script>| result |
|---|
| My name is John Doe |
Using document.anchors
<a name="HTML" href=""></a>
<a name="CSS" href=""></a>
<a name="JavaScript" href=""></a>
<p id="demo"></p>
<script>
document.getElementById(
"demo"
).innerHTML = `Number of anchor are: ${document.anchors.length}`;
</script>| result |
|---|
| Number of anchor are: 3 |
document.body
<h1>Hello World</h1>
<p>This is a paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>| result |
|---|
| Hello World |
| This is a paragraph. |
| Hello World |
| This is a paragraph. |
document.forms
<form action="">
<label for="fName">First name : </label>
<input type="text" name="fName" id="fName" />
</form>
<p id="demo"></p>
<script>
document.getElementById(
"demo"
).innerHTML = `Number Of Forms : ${document.forms.length}`;
</script>| result |
|---|
| Number Of Forms : 1 |
document.head
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.head;
</script>| result |
|---|
| [object HTMLHeadElement] |
document.image
<img src="./code_black_bg.png" alt="CodeImage" />
<img src="./code_white_bg.png" alt="CodeImage" />
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of images: " + document.images.length;
</script>| result |
|---|
| Number of images: 2 |
document.links
<p>
<a href="./html/intro.html">HTML</a><br /><a href="./css/intro.html">CSS</a>
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of links: " + document.links.length;
</script>| result |
|---|
| Number of links: 2 |
document.title
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Documentation</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById(
"demo"
).innerHTML = `The title of this document is: <b>${document.title}</b>`;
</script>
</body>
</html>| result |
|---|
| The title of this document is: JavaScript Documentation |
To change the style of an HTML element, use this syntax:
document.getElementById(*id*).style.property = *new style*
The following example changes the style of a <p> element.
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>Using Events
The HTML DOM allows you to execute code when an event occurs.
Events are generated by the browser when "things happen" to HTML elements:
- An element is clicked on
- The page has loaded
- Input fields are changed
You will learn more about events in the next chapter of this tutorial.
This example changes the style of the HTML element with id="id1", when the user clicks a button:
<h1 id="demo">Hello World!</h1>
<button
type="button"
onclick="document.getElementById('demo').style.color = 'red'"
>
Click!
</button>- Copy End pest in your device.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animation</title>
<style>
#container {
height: 400px;
width: 400px;
background-color: yellow;
position: relative;
}
#animation {
height: 50px;
width: 50px;
background-color: red;
position: absolute;
}
button {
margin: 0 0 10px 0;
}
</style>
</head>
<body>
<button onclick="action()">Click!</button>
<section id="container">
<div id="animation"></div>
</section>
<script>
function action() {
let animation = document.getElementById("animation");
let id = null;
let pos = 0;
clearInterval(0);
id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
animation.style.top = pos + "px";
animation.style.left = pos + "px";
}
}
}
</script>
</body>
</html>Reacting to Events
A JavaScript can be executed when an events occurs, like when a user clicks on HTML element.
To execute code when a user on an element, add JavaScript code to an HTML event attribute:
click=JavaScript
Example of HTML events:
- When a user click to mouse
- When a web page has loaded
- When an image has been loaded
- When the mouse moves over an element
- When an input field changed
- When an HTML form submitted
- When a user strokes a key
In a example, the content of the <h1> element is changed when a user clicks on it:
<h1 onclick="this.innerHTML = 'Hello World!'">Click on this text!</h1>In this example, a function is called from the event handler:
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Hello World";
}
</script>Event Attribute
To assign events to HTML elements you can use event attributes.
<button onclick="timing()">Click!</button>
<script>
function timing() {
document.getElementById("time").innerHTML = Date();
}
</script>
<p id="time"></p>Assign Events Using the HTML DOM
<button id="btn">Click!</button>
<p id="time"></p>
<script>
document.getElementById("btn").onclick = function myTiming() {
document.getElementById("time").innerHTML = Date();
};
</script>The onchange Event
The onchange event is often used in combination with validation of input fields
<input type="text" name="name" id="name" onchange="upperCase()" />
<script>
function upperCase() {
const x = document.getElementById("name");
x.value = x.value.toUpperCase();
}
</script>The onmouseover and onmouseout Events
The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element:
<div onmouseover="mOn(this)" onmouseout="mOff(this)">Mouse Over me!</div>
<script>
function mOn(obj) {
obj.innerHTML = "Hello World!";
}
function mOff(obj) {
obj.innerHTML = "Mouse Over me!";
}
</script>The onmousedown, onmouseup and onclick Events
<h1 id="heading">Click The button</h1>
<button onmousedown="mDown()" onmouseup="mUp()">Click!</button>
<script>
let heading = document.getElementById("heading");
function mDown() {
heading.innerHTML = "Hello World!";
}
function mUp() {
heading.innerHTML = "Click The button";
}
</script>addEventListener()
Add an event listener that fires when a user clicks a button:
<button id="button">Click!</button>
<p id="date"></p>
<script>
document.getElementById("button").addEventListener("click", showDate);
function showDate() {
document.getElementById("date").innerHTML = Date();
}
</script>-
The
addEventListener()method attaches an event handler to the specified element. -
The
addEventListener()method attaches an event handler to an element without overwriting existing event handlers. -
You can add many event handlers to one element.
-
You can add many event handlers of the same type to one element, i.e two "click" events.
-
You can add event listeners to any DOM object not only HTML elements. i.e the window object.
-
The
addEventListener()method makes it easier to control how the event reacts to bubbling. -
When using the
addEventListener()method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup. -
You can easily remove an event listener by using the
removeEventListener()method.
<button onclick="addEventListener('click', function () {
alert('Hello World!')
})">Click!</button>The addEventListener() method allows you to add many events to the same element, without overwriting existing events:
🚧 Under Working
- API
https://res.cloudinary.com/dpiiduvvx/raw/upload/v1703580765/API/productsAPI
- Array Object products data :- Click Here!
- Json products data :- Click Here!
GNU License : JavaScript-README Copyright (C) 2023 Dev_eLoper