JavaScript Cheat Sheet – A Basic Guide to JavaScript

console.log("Using var Keyword");
var x = 1;
if (x === 1) {
    var x = 2;
    console.log(x); // Output: 2
}
console.log(x); // Output: 2


// Using let keyword
console.log("Using let Keyword");
let x1 = 1;
if (x1 === 1) {
    let x1 = 2;
    console.log(x1); // Output: 2
}
console.log(x1); // Output: 1


// Using const keyword
console.log("Using const Keyword");
const number = 48;

// Changing const value will display TypeError
try {
    const number = 42;
} catch (err) {
    console.log(err);
}
console.log(number); // Output: 48

// String
let str = "hello geeks";
console.log(str);

// Number
const num = 10;
console.log(num);

// Boolean
const x = "true";
console.log(x);

// Undefined
let name;
console.log(name );

// Null
const number = null;
console.log(number);

// Symbol
const value1 = Symbol("hello");
const value2 = Symbol("hello");
console.log(value1);
console.log(value2);

// Here both values are different 
// as they are symbol type which 
// is immutable object
const object = {
    firstName: "geek",
    lastName: null,
    batch: 2,
};
console.log(object);

let x = 5;
let y = 3;

// Addition
console.log("x + y = ", x); // 8

// Subtraction
console.log("x - y = ", x - y); // 2

// Multiplication
console.log("x * y = ", x * y); // 15

// Division
console.log("x / y = ", x / y);

// Remainder
console.log("x % y = ", (x % y)); // 2

// Increment
console.log("++x = ", ++x); // x is now 6
console.log("x++ = ", x++);
console.log("x = ", x); // 7

// Decrement
console.log("--x = ", --x); // x is now 6
console.log("x-- = ", x--);
console.log("x = ", x); // 5

// Exponentiation
console.log("x ** y =", x ** y);

// Comparison
console.log(x > y); // true

// Equal operator
console.log((2 == 2)); // true

// Not equal operator
console.log((3 != 2)); // true

// Strict equal operator
console.log((2 === 2)); // true

// Strict not equal operator
console.log((2 !== 2)); // true

// Logical Operator

// Logical AND
console.log((x < 6 && y < 5)); // true

// Logical OR
console.log((x < 6 || y > 6)); // true

// Logical NOT
console.log(!(x < 6)); // false

let z = 3;

function foo() {
    if (true) {
        var x = '1';   // Exist in function scope
        const y = '2'; // Exist in block scope 
    }
    console.log(x);
    console.log(y);
    console.log(z);    // Exist in global scope
}

foo();

// JS parseInt function
const num1 = parseInt("3.14");
console.log('Using parseInt("3.14") = ' + num1);

// JS parsefloat function
// It returns floating point Number until 
// it encounters Not a Number character
const num2 = parseFloat("2018.12@geeksforgeeks");
console.log('parseFloat("2018@geeksforgeeks") = ' + num2);

// JS isNAN function
console.log(isNaN(12));

// JS number() function
const num3 = Number(true);
console.log("Value of 'true': " + num3);

// JS eval() function
function evalfn() {
    const a = 4;
    const b = 4;
    const value = eval(new String(a * b));
    console.log(value);
}
evalfn();

// JS encode URI function
const url = "https://www.google.com/search?q=geeks for geeks";
const encodedURL = encodeURI(url);
console.log(encodedURL);

// Declaring and initializing arrays

// Number Array
let arr = [10, 20, 30, 40, 50];
let arr1 = [110, 120, 130, 140];

// String array
let string_arr = ["Alex", "peter", "chloe"];

// push: Adding elements at the end of the array
arr.push(60);
console.log("After push op " + arr);

// unshift() Adding elements at the start of the array
arr.unshift(0, 10);
console.log("After unshift op " + arr );

// pop: removing elements from the end of the array
arr.pop();
console.log("After pop op" + arr);

// shift(): Removing elements from the start of the array
arr.shift();
console.log("After shift op " + arr);

// splice(x,y): removes x number of elements
// starting from index y
arr.splice(2, 1);
console.log("After splice op" + arr);

// reverse(): reverses the order of elements in array
arr.reverse();
console.log("After reverse op" + arr);

// concat(): merges two or more array
console.log("After concat op" + arr.concat(arr1));

// Illustration of for loop
let x;

// for loop begins when x=2
// and runs till x <=4
for (x = 2; x <= 4; x++) {
    console.log("Value of x:" + x);
}

// Illustration of for..in loop
// creating an Object
let languages = {
    first: "C",
    second: "Java",
    third: "Python",
    fourth: "PHP",
    fifth: "JavaScript",
};

// Iterate through every property of 
// the object languages and print all
// of them using for..in loops
for (itr in languages) {
    console.log(languages[itr]);
}

// Illustration of while loop
let y = 1;

// Exit when x becomes greater than 4
while (y <= 4) {
    console.log("Value of y:" + y);

    // Increment the value of y for
    // next iteration
    x++;
}

// Illustration of do-while loop
let z = 21;

do {

    // The line while be printer even if 
    // the condition is false
    console.log("Value of z:" + z);

    z++;
} while (z < 20);

// JavaScript program to illustrate if-else statement
const i = 10;

if (i < 15)
    console.log("Value of i is less than 10");
else
    console.log("Value of i is greater than 10");

let gfg = 'GFG ';
let geeks = 'stands-for-GeeksforGeeks';

// Print the string as it is
console.log(gfg);
console.log(geeks);

// concat() method
console.log(gfg.concat(geeks));

// match() method
console.log(geeks.match(/eek/));

// charAt() method
console.log(geeks.charAt(5));

// valueOf() method
console.log(geeks.valueOf());

// lastIndexOf() method
console.log(geeks.lastIndexOf('for'));

// substr() method
console.log(geeks.substr(6));

// indexOf() method
console.log(gfg.indexOf('G'));

// replace() method
console.log(gfg.replace('FG', 'fg'));

// slice() method
console.log(geeks.slice(2, 8));

// split() method
console.log(geeks.split('-'));

// toUpperCase method
console.log(geeks.toUpperCase(geeks));

// toLowerCase method
console.log(geeks.toLowerCase(geeks));

// Program to validate the email address
function validateEmail(email) {

    // Regex pattern for email
    const re = /\S+@\S+\.\S+/g;

    // Check if the email is valid
    let result = re.test(email);

    if (result) {
        console.log("The email is valid.");
    } else {
        console.log("The email is not valid.");
    }
}

// Input Email Id
let email = "abc@gmail.com"
validateEmail(email);

email = "abc#$#@45com"
validateEmail(email);

const num = [16, 25];

/* Using JS map() Method */
console.log(num.map(Math.sqrt));

const ages = [19, 37, 16, 42];

/* Using JS filter() Method */
console.log(ages.filter(checkAdult));

function checkAdult(age) {
    return age >= 18;
}

/* Using JS reduce() Method */
const numbers = [165, 84, 35];
console.log(numbers.reduce(myFunc));

function myFunc(total, num) {
    return total - num;
}

// Here a date has been assigned by creating a date obj
let DateObj = new Date("October 13, 1996 05:35:32");

// getDate()
let A = DateObj.getDate();

// Printing date of the month
console.log(A);

// getTime()
let B = DateObj.getTime();

// Printing time in milliseconds.
console.log(B);

// getMinutes()
let minutes = DateObj.getMinutes();

// Printing minute.
console.log(minutes);

// getFullYear()
let C = DateObj.getFullYear();

// Printing year
console.log(C);

// getDay()
let Day = DateObj.getDay();

// Printing day of the week
console.log("Number of Day: " + Day);

// setDate
DateObj.setDate(15);

let D = DateObj.getDate();

// Printing new date of the month
console.log(D);

// parse(), taking wrong date string as input.
let date = "February 48, 2018 12:30 PM";

// calling parse function.
let msec = Date.parse(date);
console.log(msec);

<!DOCTYPE html>
<html>

<head>
    /* CSS is used to make the output looks good */
    <style>
        #sudo {
            border: 1px solid green;
            background-color: green;
            margin-bottom: 10px;
            color: white;
            font-weight: bold;
        }

        h1,
        h2 {
            text-align: center;
            color: green;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM appendChild() Method</h2>
    <div id="sudo">
        The Good Website is learning for Computer Science is-
    </div>
    <button onclick="geeks()">Submit</button>
    <br />
    <div style="border: 3px solid green">
        <h1>GeeksforGeeks</h1>
        <h2>A computer science portal for geeks</h2>
    </div>
    <h2>DOM cloneNode() Method</h2>
    <button onclick="nClone()">
        Click here to clone the above elements.
    </button>
    <br />
    <h2>DOM hasAttributes() Method</h2>
    <p id="gfg">
        Click on the button to check if that
        body element has any attributes
    </p>
    <button type="button" onclick="hasAttr()">
        Submit
    </button>
    <br />
    <h2>DOM removeChild() Method</h2>
    <p>Sorting Algorithm</p>
    <ul id="listitem">
        <li>Insertion sort</li>
        <li>Merge sort</li>
        <li>Quick sort</li>
    </ul>
    <button onclick="Geeks()">
        Click Here!
    </button>
    <br />
    <h2>DOM getAttribute() Method</h2>
    <br />
    <button id="button" onclick="getAttr()">
        Submit
    </button>
    <p id="gfg1"></p>
    <br />
    <h2>DOM getElementsByTagName()</h2>
    <p>A computer science portal for geeks.</p>
    <button onclick="getElememt()">
        Try it
    </button>
    <h3>DOM isEqualNode() method .</h3>
    <!-- 3 div elements-->
    <div>GeeksforGeeks</div>
    <div>GfG</div>
    <div>GeeksforGeeks</div>
    <button onclick="isequal()">
        Check
    </button>
    <p id="result"></p>
    <script>
        function geeks() {
            var node = document.createElement("P");
            var t = document.createTextNode("GeeksforGeeks");
            node.appendChild(t);
            document.getElementById("sudo").appendChild(node);
        }
        function nClone() {
            // Accessing div attribute using a variable geek
            var geek = document.getElementsByTagName("DIV")[0];

            // Cloning geek variable into a variable named clone
            var clone = geek.cloneNode(true);

            // Adding our clone variable to end of the document
            document.body.appendChild(clone);
        }
        function hasAttr() {
            var s = document.body.hasAttributes();
            document.getElementById("gfg").innerHTML = s;
        }

        function Geeks() {
            var doc = document.getElementById("listitem");
            doc.removeChild(doc.childNodes[0]);
        }

        /* Using getElementById */
        function getAttr() {
            var rk = document.getElementById("button").getAttribute("onClick");
            document.getElementById("gfg1").innerHTML = rk;
        }

        /* Using getElementsByTagName */
        function getElement() {
            var doc = document.getElementsByTagName("p");
            doc[0].style.background = "green";
            doc[0].style.color = "white";
        }

        /* Cheacking the equality */
        function isequal() {
            var out = document.getElementById("result");
            var divele = document.getElementsByTagName("div");
            out.innerHTML +=
                "element 1 equals element 1: " +
                divele[0].isEqualNode(divele[0]) +
                "<br/>";
            out.innerHTML +=
                "element 1 equals element 2: " +
                divele[0].isEqualNode(divele[1]) +
                "<br/>";
            out.innerHTML +=
                "element 1 equals element 3: " +
                divele[0].isEqualNode(divele[2]) +
                "<br/>";
        }
    </script>
</body>

</html>

<script type="text/javascript">
    var num = 213;
    var num1 = 213.3456711;

    // JS valueof() Method
    console.log("Output : " + num.valueOf());

    // JS tostring() Method
    console.log("Output : " + num.toString(2));

    // JS tofixed() Method
    console.log("Output : " + num1.toString(2));

    // JS topricision() Method
    console.log("Output : " + num1.toPrecision(3));

    // JS toexponential() Method
    console.log("Output : " + num1.toExponential(4));
</script>

<script>
    document.getElementById("GFG").innerHTML =
        "Math.LN10: " + Math.LN10 + "<br>" +
        "Math.LOG2E: " + Math.LOG2E + "<br>" +
        "Math.Log10E: " + Math.LOG10E + "<br>" +
        "Math.SQRT2: " + Math.SQRT2 + "<br>" +
        "Math.SQRT1_2: " + Math.SQRT1_2 + "<br>" +
        "Math.LN2: " + Math.LN2 + "<br>" +
        "Math.E: " + Math.E + "<br>" +
        "Math.round: " + Math.round(5.8) + "<br>" +
        "Math.PI: " + Math.PI + "<br>" +
        "
        < p > <b>Math.sin(90 * Math.PI / 180):</b> " +
    Math.sin(90 * Math.PI / 180) + "</p>
    " +
    "
        < p > <b>Math.tan(90 * Math.PI / 180):</b> " +
    Math.tan(90 * Math.PI / 180) + "</p>
    " +
    "
        < p > <b>Math.max(0, 150, 30, 20, -8, -200):</b> " +
    Math.max(0, 150, 30, 20, -8, -200) + "</p>
    " +
    "
        < p > <b>Math.min(0, 150, 30, 20, -8, -200):</b> " +
    Math.min(0, 150, 30, 20, -8, -200) + "</p>
    " +
    "
        < p > <b>Math.pow(3,4):</b> " + Math.pow(3, 4) + "</p >
            ";
</script>

<!DOCTYPE html>
<html>

<head>
    /* CSS is used to make the output looks good */
    <style>
        #geeks {
            border: 1px solid black;
            padding: 15px;
            width: 60%;
        }

        h1 {
            color: green;
        }
    </style>
    <script>
        function hiThere() {
            alert("Hi there!");
        }
        function focused() {
            var e = document.getElementById("inp");
            if (confirm("Got it?")) {
                e.blur();
            }
        }

        /* Mouseover event */
        document.getElementById("hID").addEventListener("mouseover", over);

        /* Mouseoout event */
        document.getElementById("hID").addEventListener("mouseout", out);

        /* Over on green */
        function over() {
            document.getElementById("hID").style.color = "green";
        }

        /* Leaving Out Black */
        function out() {
            document.getElementById("hID").style.color = "black";
        }

        function Geeks() {
            var x = document.getElementById("GFG").value;
            document.getElementById("sudo").innerHTML = "Selected Subject: " + x;
        }

        /* Success alert */
        function Geek() {
            alert("Form submitted successfully.");
        }
        function Function() {
            document.getElementById("geeks").style.fontSize = "30px";
            document.getElementById("geeks").style.color = "green";
        }
    </script>
</head>

<body>
    <!-- onload event -->
    <img onload="alert('Image completely loaded')" alt="GFG-Logo"
        src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png" />
    <br />

    <!-- onclick event -->
    <h2>onclick event</h2>
    <button type="button" onclick="hiThere()" on>
        Click me
    </button>

    <!-- onfocus event -->
    <h2>onfocus event</h2>
    <p>Take the focus into the input box below:</p>
    <input id="inp" onfocus="focused()" />

    <!-- onblur Event -->
    <h2>onblur event</h2>
    <p>
        Write something in the input box and
        then click elsewhere in the document
        body.
    </p>
    <input onblur="alert(this.value)" />

    <!-- onmouseover and onmouseout event -->
    <h2 id="hID">onmouseover event</h2>
    <h2>onchange Event</h2>
    <p>Choose Subject:</p>
    <select id="GFG" onchange="Geeks()">
        <option value="Data Structure">
            Data Structure
        </option>
        <option value="Algorithm">
            Algorithm
        </option>
        <option value="Computer Network">
            Computer Network
        </option>
        <option value="Operating System">
            Operating System
        </option>
        <option value="HTML">
            HTML
        </option>
    </select>

    <p id="sudo"></p>

    <!-- onsubmit event -->
    <h2>onsubmit event</h2>
    <form onsubmit="Geek()">
        First Name:<input type="text" value="" />
        <br />
        Last Name:<input type="text" value="" />
        <br />
        <input type="submit" value="Submit" />
    </form>

    <!--ondrag event -->
    <h2>ondrag event attribute</h2>
    <div id="geeks" ondrag="Function()">
        GeeksforGeeks: A computer science portal for geeks
    </div>
</body>

</html>

<!DOCTYPE html>
<html>

<body>
    <h2>
        JavaScript throw try catch finally keywords
    </h2>
    <p>Please enter a number:</p>
    <input id="demo" type="text" />
    <button type="button" onclick="myFunction()">
        Test Input
    </button>
    <p id="p01"></p>
    <script>
        function myFunction() {
            const message = document.getElementById("p01");
            message.innerHTML = "";
            let x = document.getElementById("demo").value;

            /* Using try.. catch.. with conditions*/
            try {
                if (x == "") throw "is empty";
                if (isNaN(x)) throw "is not a number";
                x = Number(x);
                if (x > 20) throw "is too high";
                if (x <= 20) throw "is too low";
            } catch (err) {
                message.innerHTML = "Input " + err;
            } finally {
                document.getElementById("demo").value = "";
            }
        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<body>
    <h1>The Window properties</h1>
    <h2>The origin Property</h2>

    <p id="demo"></p>
    <br />
    <button type="button" onclick="getResolution();">
        Get Resolution
    </button>
    <br />
    <button type="button" onclick="checkConnectionStatus();">
        Check Connection Status
    </button>
    <br />
    <button type="button" onclick="getViews();">
        Get Views Count</button>
    <br />
    <p>
        <button onclick="closeWin()">
            Close "myWindow"
        </button>
    </p>

    <script>
        // JS location property
        let origin = window.location.origin;
        document.getElementById("demo").innerHTML = origin;

        // JS screen property
        function getResolution() {
            alert("Your screen is: " + screen.width + "x" + screen.height);
        }

        // JS toolbar property
        var visible = window.toolbar.visible;

        // JS navigator property
        function checkConnectionStatus() {
            if (navigator.onLine) {
                alert("Application is online.");
            } else {
                alert("Application is offline.");
            }
        }
        // JS history property
        function getViews() {
            alert(
                "You've accessed " + history.length + " web pages in this session."
            );
        }
        // JS close property
        let myWindow;
        function closeWin() {
            if (myWindow) {
                myWindow.close();
            }
        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript Window Methods</title>
    /* CSS is used to make the output looks good */
    <style>
        .gfg {
            font-size: 36px;
        }

        form {
            float: right;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="gfg">JavaScript Window Methods</div>
    <br />
    <button onclick="windowOpen()">
        JavaScript window Open
    </button>
    <button onclick="resizeWin()">
        JavaScript window resizeTo
    </button>
    <button onclick="windowBlur()">
        JavaScript window Blur
    </button>
    <button onclick="windowFocus()">
        JavaScript window Focus
    </button>
    <button onclick="windowClose()">
        JavaScript window Close
    </button>
    <br />
    <br />
    <p id="g"></p>
    <form>
        <button onclick="setTimeout(wlcm, 2000);">
            Alert after 2 Second
        </button>
        <button onclick="geek()">Click me!</button>
        <input type="button" value="Print" onclick="window.print()" />
    </form>
    <br /><br />
    <button id="btn" onclick="fun()" style="color: green">
        JavaScript Used setTimeOut
    </button>
    <button id="btn" onclick="stop()">
        JavaScript clearTimeout
    </button>
    <script>
        var gfgWindow;

        // Function that open the new Window
        function windowOpen() {
            gfgWindow = window.open(
                "https://www.geeksforgeeks.org/",
                "_blank",
                "width=200, height=200"
            );
        }

        // Function that Resize the open Window
        function resizeWin() {
            gfgWindow.resizeTo(400, 400);
            gfgWindow.focus();
        }

        // Function that Closes the open Window
        function windowClose() {
            gfgWindow.close();
        }

        // Function that blur the open Window
        function windowBlur() {
            gfgWindow.blur();
        }

        // Function that focus on open Window
        function windowFocus() {
            gfgWindow.focus();
        }

        // Alert function
        function wlcm() {
            alert("Welcome to GeeksforGeeks");
        }

        // Prompt function
        function geek() {
            var doc = prompt("Please enter some text", "GeeksforGeeks");
            if (doc != null) {
                document.getElementById("g").innerHTML = "Welcome to " + doc;
            }
        }

        // Function setTimeout and clearTimeout
        var t;
        function color() {
            if (document.getElementById("btn").style.color == "blue") {
                document.getElementById("btn").style.color = "green";
            } else {
                document.getElementById("btn").style.color = "blue";
            }
        }
        function fun() {
            t = setTimeout(color, 3000);
        }
        function stop() {
            clearTimeout(t);
        }
    </script>
</body>

</html>