JavaScript ES5

“use strict”

"use strict" is a directive that can be added at the top of a JavaScript file or a function to enable strict mode. In strict mode, certain actions that were previously ignored or silently failed are now treated as errors, which can help you catch and fix potential issues in your code.

String[number] access

In JavaScript, you can access individual characters in a string using bracket notation, just as you would with an array.

However, starting with ES2015 (ES6), you can access individual characters in a string using dot notation, using the string as an object and the character index as a property name .

Example

<!DOCTYPE html>
<html>
<body>

<h1>String[number] access</h1>
<script>
    const str = "Hello, world!";
    document.write(str.charAt(0));
</script>

</body>
</html>

Preview

Multiline strings

In JavaScript, you can create multiline strings using template literals, which were introduced in ES6 (ES2015).

Template literals are enclosed by backticks (`) instead of single or double quotes. They allow you to include line breaks and variables directly in a string, without the need to concatenate them or use escape characters.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Multiline strings</h1>
<script>
    document.write("Hello," + "world!");
</script>

</body>
</html>

Preview

String.trim()

In JavaScript, the trim() method is used to remove whitespace (spaces, tabs, and line breaks) from both ends of a string. It returns a new string with spaces removed.

The trim() does not modify the original string, but instead returns a new string with whitespace removed. If you want to modify the original string, you can assign the result of trim() back to the original variable.

Example

<!DOCTYPE html>
<html>
<body>

<h1>String.trim()</h1>
<script>
    const str1 = "   Hello, world!   ";
    const str2 = str1.trim();

    document.write("Length Str1 = " + str1.length + "<br>" +
        "Length Str2 = " + str2.length);
</script>

</body>
</html>

Preview

Array.isArray()

In JavaScript, Array.isArray() is a built-in method that allows you to test whether a given value is an array. It returns true if the value is an array, and false otherwise.

Array.isArray() is a safer and more reliable way to test whether a value is an array than using the typeof operator. This is because typeof returns "object" for arrays, objects, and null values, so it cannot distinguish between them.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array.isArray()</h1>
<script>
    const lang = ["HTML", "CSS", "JavaScript"];
    document.write(Array.isArray(lang))
</script>

</body>
</html>

Preview

Array forEach()

In JavaScript, forEach() is an array method that allows you to iterate over the elements of an array and perform a specified action on each element. It takes a callback function as an argument, which is called for each element in the array.

The callback function takes three arguments: the current element being processed, the index of the current element, and the array on which forEach() was called.

forEach() doesn't return anything, and it doesn't modify the original array. If you need to modify the array, you can use other methods such as map(), filter(), or reduce().

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array forEach()</h1>
<script>
    const lang = ["HTML", "CSS", "JavaScript"];
    lang.forEach(myFunction);

    function myFunction(items){
        document.write(items + "<br>");
    }
</script>

</body>
</html>

Preview

Array map()

In JavaScript, map() is an array method that creates a new array by applying a function to each element of the original array. The function is called for each element in the array, and the result of the function is added to the new array.

The callback function that is passed to map() takes three arguments: the current element being processed, the index of the current element, and the array on which map() was called. The return value of the callback function is added to the new array.

Here's an example of using map() to create a new array that contains the classes of the elements in the original array.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array map()</h1>
<script>
    const num1 = [4, 6, 10, 30, 15];
    const num2 = num1.map(myFunction);

    document.write(num2 + "<br>");

    function myFunction(value, index){
        return value * 2;
    }
</script>

</body>
</html>

Preview

Array filter()

In JavaScript, filter() is an array method that creates a new array with all elements that pass the test specified by a callback function. The callback function is called for each element in the array, and if it returns true, the element is added to the new array. If it returns false, the element is not included in the new array.

The callback function that is passed to filter() takes three arguments: the current element being processed, the index of the current element, and the array that filter() was called on. The return value of the callback function must be a boolean value.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array filter()</h1>
<script>
    const num1 = [4, 6, 10, 30, 15];
    const result = num1.filter(myFunction);

    document.write(result);

    function myFunction(value) {
        return value < 12;
    }
</script>

</body>
</html>

Preview

Array reduce()

In JavaScript, reduce() is an array method that performs a reducer function on each element of an array, resulting in a single output value.

The reducer function takes two arguments: an accumulator and the current value. The accumulator is the result of the previous iteration of the function, or the initial value if specified. The current value is the current element in the array to be processed.

The callback function takes an accumulator and adds the current element to it. The initial value of the accumulator is not specified, so it defaults to the first element of the array.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array reduce()</h1>
<script>
    const num1 = [4, 6, 10, 30, 15];
    const result = num1.reduce(myFunction);

    document.write(result);

    function myFunction(total, value) {
        return total +  value;
    }
</script>

</body>
</html>

Preview

Array reduceRight()

In JavaScript, reduceRight() is an array method that works similarly to the reduce() method, but it processes the array from right to left instead of left to right. This means that the reducer function starts from the last element in the array and works towards the first element.

The syntax of reduceRight() is similar to that of reduce(). The callback function takes two arguments: the accumulator and the current value. The accumulator is the result of the previous iteration of the function, or the initial value if specified. The current value is the current element in the array to be processed.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array reduceRight()</h1>
<script>
    const num1 = [4, 6, 10, 30, 15];
    const result = num1.reduceRight(myFunction);

    document.write(result);

    function myFunction(total, value) {
        return total +  value;
    }
</script>

</body>
</html>

Preview

Array every()

In JavaScript, every() is an array method that checks whether all elements in the array pass a test implemented by a given function. It returns a boolean value indicating whether all elements passed the test.

The syntax for every() is as follows: array.every(callback(element[, index[, array]])[, thisArg])

The callback function takes three arguments: the current element being processed in the array, its index, and the array itself. The thisArg parameter is optional and sets this value within the callback function.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array every()</h1>
<script>
    const num1 = [4, 6, 10, 30, 15];
    const result = num1.every(myFunction);

    document.write(result);

    function myFunction(value) {
        return value < 12;
    }
</script>

</body>
</html>

Preview

Array some()

In JavaScript, some() is an array method that checks whether at least one element in the array passes a test implemented by a provided function. Returns a boolean value indicating whether an element passed the test.

The syntax for some() is as follows: array.some(callback(element[, index[, array]])[, thisArg])

The callback function takes three arguments: the current element being processed in the array, its index, and the array itself. ThisArg parameter is optional and sets this value within the callback function.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array some()</h1>
<script>
    const num1 = [4, 6, 10, 30, 15];
    const result = num1.some(myFunction);

    document.write(result);

    function myFunction(value) {
        return value < 12;
    }
</script>

</body>
</html>

Preview

Array indexOf()

In JavaScript, indexOf() is an array method that returns the index of the first occurrence of a specified element in an array. If the element is not found, it returns -1.

The syntax for indexOf() is as follows: array.indexOf(searchElement[, fromIndex])

The search Element parameter is the value to search for in the array. The from Index parameter is optional and specifies the starting index for the search.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array indexOf()</h1>
<script>
    const lang = ["HTML", "CSS", "JavaScript", "jQuery"];
    const result = lang.indexOf("CSS");

    document.write(result);
</script>

</body>
</html>

Preview

Array lastIndexOf()

In JavaScript, lastIndexOf() is an array method that returns the index of the last occurrence of the specified element in an array. If the element is not found, it returns -1.

The syntax of LastIndexOf() is as follows: array.lastIndexOf(searchElement[, from index])

The searchElement parameter is the value to be searched for in the array. The FromIndex parameter is optional and specifies the starting index for the search. Using lastIndexOf() to find the index of the last occurrence of a specific element in an array

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array lastIndexOf()</h1>
<script>
    const lang = ["HTML", "CSS", "HTML", "jQuery"];
    const result = lang.lastIndexOf("HTML");

    document.write(result);
</script>

</body>
</html>

Preview

JSON.parse()

In JavaScript, JSON.parse() is a built-in method used to parse a JSON string and convert it into a JavaScript object.

The syntax for JSON.parse() is: JSON.parse(text[, reviver])

The text parameter is the JSON string you want to parse. The reviver parameter is optional and can be a function that transforms the parsed object before returning it.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JSON.parse()</h1>
<script>
    const prson = '{"name":"Peter", "age":26, "city":"Surat"}'
    const result = JSON.parse(prson);
    document.write(result.name + "<br>" + result.age + "<br>" + result.city);
</script>

</body>
</html>

Preview

JSON.stringify()

In JavaScript, JSON.stringify() is a built-in method used to convert a JavaScript object into a JSON string.

The syntax for JSON.stringify() is as follows: JSON.stringify(value [, replace[, space]])

The value parameter is the JavaScript object you want to convert to a JSON string. The replica parameter is optional and can be a function or an array that specifies how to transform the object before serialisation. The space parameter is also optional and specifies the number of spaces to use for indentation.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JSON.stringify()</h1>
<script>
    const prson = {name:"Peter", age:26, city:"Surat"}
    const result = JSON.stringify(prson);
    document.write(result);
</script>

</body>
</html>

Preview

Date.now()

In JavaScript, Date.now() is a built-in method that returns the current timestamp in milliseconds since the Unix Epoch (January 1, 1970, 00:00:00 UTC).

The syntax of date.now() is as follows: date.now()

The date.now() method returns the current timestamp in milliseconds since the Unix epoch. You can use the Date.now() method in your code to measure the elapsed time between two points.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Date.now()</h1>
<script>
    const date = Date.now();
    document.write(date);
</script>

</body>
</html>

Preview

Date toISOString()

In JavaScript, the toISOString() method is a built-in method of the Date object that returns a string representation of the date in ISO format.

The syntax for toISOString() is as follows: dateObject.toISOString()

The toISOString() method is called on a Date object to get a string representation of the date in ISO format.

The ISO format returned by toISOString() is a standardized representation of the date and time. The format is as follows: YYYY-MM-DDTHH:mm:ss.sssZ, where:

YYYY: The four-digit year
MM: The two-digit month (01-12)
DD: The two-digit day of the month (01-31)
T: The letter "T" to separate the date and time
HH: The two-digit hour (00-23)
mm: The two-digit minute (00-59)
ss: The two-digit second (00-59)
sss: The three-digit millisecond (000-999)
Z: The letter "Z" to indicate that the time is in UTC

The toISOString() method is useful when you need to pass a date in ISO format to an API or to store the date in a database.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Date toISOString()</h1>
<script>
    const date = new Date();
    document.write(date.toISOString());
</script>

</body>
</html>

Preview

Date toJSON()

In JavaScript, the toJSON() method is a built-in method of the Date object that returns a string representation of the date in a format that can be serialized to JSON.

The syntax for toJSON() is as follows: dateObject.toJSON()

The toJSON() method is called on a Date object to obtain a string representation of the date that is serialized to JSON using the JSON.stringify() method.

The format of the string returned by toJSON() is the same as the ISO format returned by the toISOString() method, but with slightly different syntax. The format is as follows: YYYY-MM-DDTHH:mm:ss.sssZ, where:

YYYY: The four-digit year
MM: The two-digit month (01-12)
DD: The two-digit day of the month (01-31)
T: The letter "T" to separate the date and time
HH: The two-digit hour (00-23)
mm: The two-digit minute (00-59)
ss: The two-digit second (00-59)
sss: The three-digit millisecond (000-999)
Z: The letter "Z" to indicate that the time is in UTC

ToJSON() method returns a string, not an object. If you need to serialize a Date object to JSON, you can use the toJSON() method or you can define a custom toJSON() method for your object that returns a string in the desired format .

Example

<!DOCTYPE html>
<html>
<body>

<h1>Date toJSON()</h1>
<script>
    const date = new Date();
    document.write(date.toJSON());
</script>

</body>
</html>

Preview

Property getters and setters

In JavaScript, you can define getter and setter methods for object properties using the get and set keywords, respectively. Getters and setters provide a way to access and modify object properties with additional logic, such as validation or enumeration.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Property getters and setters</h1>
<script>
    const prson = {
        name:'Peter',
        get getName() {
            return this.name;
        }
    }
    document.write(prson.name + '<br>' + prson.getName);
</script>

</body>
</html>

Preview

Reserved words as property names

In JavaScript, you can use reserved words as property names by enclosing them in quotes. While using reserved words as property names is generally discouraged, it can be useful in some cases. When accessing properties with reserved words as names, you should use bracket notation instead of dot notation.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Reserved words as property names</h1>
<script>
    var emp = {fname: "Peter", lname: "Baker"};
    document.write(emp.lname);
</script>

</body>
</html>

Preview

Object methods

In JavaScript, objects can have methods, which are functions that are defined as properties of the object. Methods are generally used to perform operations on the data of an object or to encapsulate behaviour related to the object.

ES5 added several new methods to the Object prototype, including Object.keys(), Object.defineProperty(), and Object.create(). These methods make it easier to work with objects in JavaScript.

Object defineProperty()

In JavaScript, the Object.defineProperty() method can be used to define a new property on an object or modify an existing one. This method allows you to specify various attributes of the property, such as whether it can be modified, enumerated, or deleted

Example

<!DOCTYPE html>
<html>
<body>

<h1>Object.defineProperty()</h1>
<script>
    const prson = {
        name:"Peter",
        age:26,
        city:"Surat"
    };
    Object.defineProperty(prson, "city", {
        value : "Mumbai",
        writable: true,
        enumerable: true,
        configurable: true
    })
    result = "";
    for (var x in prson) {
        result += prson[x] + "<br>";
    }
    document.write(result);
</script>

</body>
</html>

Preview

Function bind()

In JavaScript, the bind() method can be used to create a new function that has this value fixed and, optionally, one or more arguments pre-filled.

The bind() method creates a new function that has the same behaviour as the original method, but with this value set to Person. We can then call the original method on our own, and it will use the name property of the Person object.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Function bind()</h1>
<script>
    const prson = {
        fname:"Peter",
        lname:"Baker",
        fullname : function() {
            return this.fname + " " + this.lname;
        }
    };
    const member = {
        fname:"Vikram",
        lname:"Sampath"
    }
    let fullname = prson.fullname.bind(member);
    document.write(fullname());
</script>

</body>
</html>

Preview

Trailing commas

In JavaScript, a trailing comma is a comma that appears after the last element in an array or object literal.

Trailing commas can be convenient in code because they allow you to easily add or remove elements at the end of an array or object without having to worry about adding or removing commas elsewhere in the code. They can also help avoid errors caused by accidentally leaving a comma after the last element when copying and pasting code.

However, it is important to note that some earlier versions of Internet Explorer do not support trailing commas in object literals. If you need to support these older browsers, you should avoid using trailing commas in your code.

In general, it is a matter of personal preference whether or not to use a trailing comma. Many developers choose to use them for the convenience they provide, while others prefer to avoid them to ensure compatibility with older browsers.

JS Debugging

JS ES6