{"id":111736,"date":"2025-09-04T13:56:23","date_gmt":"2025-09-04T08:26:23","guid":{"rendered":"https:\/\/www.mygreatlearning.com\/blog\/?page_id=111736"},"modified":"2025-09-04T12:59:27","modified_gmt":"2025-09-04T07:29:27","slug":"javascript-exercise","status":"publish","type":"page","link":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/","title":{"rendered":"JavaScript Exercises"},"content":{"rendered":"\n\n    <style>\n        \/* General styles *\/\n        .js-input {\n            border-bottom: 1px dashed #9CA3AF !important;\n\n        }\n        .js-input:focus {\n            outline: none;\n            background-color: #E0E7FF;\n            border-bottom: 1px solid #3B82F6;\n        }\n\n        .js-select {\n            font-family: monospace;\n            background-color: #F3F4F6;\n            border: 1px dashed #9CA3AF;\n            font-size: 0.875rem; \/* 14px *\/\n            color: #1D4ED8;\n            border-radius: 4px;\n            padding: 1px;\n        }\n        .js-select:focus {\n            outline: none;\n            border: 1px solid #3B82F6;\n        }\n        \n        .js-code-template {\n            background-color: #F9FAFB;\n            padding: 1rem;\n            border-radius: 0.375rem;\n            font-size: 0.95rem;\n            color: #374151;\n            line-height: 1.6;\n        }\n\n        \/* CSS class for topic buttons for cleaner HTML and hover effects *\/\n        .topic-item-btn {\n            background-color: #FFFFFF;\n            padding: 1.5rem;\n            border-radius: 0.5rem;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n            text-align: left;\n            width: 100%;\n            border: 1px solid #E5E7EB;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n        .topic-item-btn:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);\n       background-color: white;\n        }\n    <\/style>\n\n\n<div class=\"js-ex-container\" style=\"font-family: sans-serif; background-color: #FFFFFF; color: #1F2937; max-width: 56rem; width: 100%; margin: 2rem auto; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); padding: 1.5rem;\">\n\n    <div id=\"js-ex-topic-selection-view\">\n        <h1 style=\"font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; text-align: center; color: #111827; margin-bottom: 0.5rem;\" style=\"font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; text-align: center; color: #111827; margin-bottom: 0.5rem;\" id=\"javascript-practice-exercises\">JavaScript Practice Exercises<\/h1>\n        <p style=\"text-align: center; color: #6B7280;\">Explore 100 JavaScript practice questions, coding problems, and online exercises with solutions. Ideal for beginners to strengthen core JavaScript skills.<\/p>\n        <p style=\"text-align: center; color: #6B7280; margin-bottom: 2rem;\">Select a topic to start the exercise.<\/p>\n        \n        <div id=\"js-ex-topic-grid\" style=\"display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem;\">\n            <button class=\"topic-item-btn\" data-topic-key=\"JSBasics\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"js-basics\">JS Basics<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"Variablesvarletconst\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"variables-var-let-const\">Variables (var, let, const)<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"DataTypes\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"data-types\">Data Types<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"StringsMethods\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"strings-methods\">Strings & Methods<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"NumbersMath\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"numbers-math\">Numbers & Math<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"Arrays\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"arrays\">Arrays<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"ArrayMethods\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"array-methods\">Array Methods<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"Objects\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"objects\">Objects<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"Functions\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"functions\">Functions<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"ArrowFunctions\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"arrow-functions\">Arrow Functions<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"ControlFlowifelse\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"control-flow-if-else\">Control Flow (if\/else)<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"Loopsforwhile\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"loops-for-while\">Loops (for\/while)<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"DOMManipulation\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"dom-manipulation\">DOM Manipulation<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"EventHandling\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"event-handling\">Event Handling<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"ES6Features\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"es6-features\">ES6 Features<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"Callbacks\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"callbacks\">Callbacks<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"Promises\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"promises\">Promises<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"AsyncAwait\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"async-await\">Async\/Await<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"ErrorHandling\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"error-handling\">Error Handling<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <button class=\"topic-item-btn\" data-topic-key=\"JSON\">\n                <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" style=\"font-size: 1.25rem; font-weight: 700; color: #1F2937; margin: 0 0 0.25rem 0;\" id=\"json\">JSON<\/h3>\n                <p style=\"color: #6B7280; margin: 0;\">5 exercise questions<\/p>\n            <\/button>\n            <noscript>\n                <p style=\"text-align: center; background-color: #FEF2F2; color: #991B1B; padding: 1rem; border-radius: 0.5rem; grid-column: 1 \/ -1;\">\n                    The interactive exercises on this page require JavaScript. Please enable it in your browser to start practicing.\n                <\/p>\n            <\/noscript>\n        <\/div>\n    <\/div>\n\n    <div id=\"js-ex-exercise-views-container\">\n    <\/div>\n\n<\/div>\n\n<script>\n    const exercises = {\n        \"JS Basics\": [\n            { question: \"Print 'Hello, World!' to the console.\", template: [ { type: \"input\", size: 8, placeholder: \"object\" }, \".\", { type: \"input\", size: 4, placeholder: \"method\" }, \"('Hello, World!');\" ], solution: [\"console\", \"log\"] },\n            { question: \"Create a variable named `score` and assign the value `100`.\", template: [ { type: \"select\", options: [\"let\", \"const\", \"var\"] }, \" score = 100;\" ], solution: [\"let\"] },\n            { question: \"Which keyword is used to declare a constant variable?\", template: [ { type: \"input\", size: 6, placeholder: \"keyword\" }, \" PI = 3.14;\" ], solution: [\"const\"] },\n            { question: \"Write a single-line comment.\", template: [ { type: \"input\", size: 2, placeholder: \"\/\/\" }, \" This is a comment\" ], solution: [\"\/\/\"] },\n            { question: \"What is the result of `10 + '5'` in JavaScript?\", template: [ \"\/\/ The result is the string \", { type: \"input\", size: 5, placeholder: \"'...'\" } ], solution: [\"'105'\"] }\n        ],\n        \"Variables (var, let, const)\": [\n            { question: \"Which keyword declares a variable with function scope?\", template: [ { type: \"select\", options: [\"var\", \"let\", \"const\"] } ], solution: [\"var\"] },\n            { question: \"Which keyword declares a block-scoped variable that can be reassigned?\", template: [ { type: \"select\", options: [\"let\", \"const\", \"var\"] } ], solution: [\"let\"] },\n            { question: \"What happens if you try to reassign a `const` variable?\", template: [ \"It throws a \", { type: \"input\", size: 10, placeholder: \"ErrorType\" }, \".\" ], solution: [\"TypeError\"] },\n            { question: \"Declare a variable `userName` and assign it your name.\", template: [ { type: \"input\", size: 4, placeholder: \"let\" }, \" userName = 'YourName';\" ], solution: [\"let\"] },\n            { question: \"The concept that `let` and `const` variables are block-scoped but not accessible before their declaration is called the...\", template: [ \"...Temporal \", { type: \"input\", size: 10, placeholder: \"Zone\" }, \" Zone.\" ], solution: [\"Dead\"] }\n        ],\n        \"Data Types\": [\n            { question: \"What is the data type of `true`?\", template: [ { type: \"select\", options: [\"boolean\", \"string\", \"number\"] } ], solution: [\"boolean\"] },\n            { question: \"What is the data type of `null` according to `typeof`?\", template: [ \"\/\/ typeof null returns \", { type: \"input\", size: 7, placeholder: \"type\" } ], solution: [\"'object'\"] },\n            { question: \"Check the data type of a variable `x`.\", template: [ { type: \"input\", size: 7, placeholder: \"operator\" }, \" x;\" ], solution: [\"typeof\"] },\n            { question: \"What value does a declared but unassigned variable have?\", template: [ { type: \"input\", size: 10, placeholder: \"value\" } ], solution: [\"undefined\"] },\n            { question: \"What data type is used for unique identifiers introduced in ES6?\", template: [ { type: \"input\", size: 7, placeholder: \"type\" } ], solution: [\"symbol\"] }\n        ],\n        \"Strings & Methods\": [\n            { question: \"Given `let str = \\\"JavaScript\\\"`, get the character 'S'.\", template: [ \"str[\", { type: \"input\", size: 2, placeholder: \"idx\" }, \"];\" ], solution: [\"4\"] },\n            { question: \"Get the length of a string variable `message`.\", template: [ \"message.\", { type: \"input\", size: 7, placeholder: \"property\" }, \";\" ], solution: [\"length\"] },\n            { question: \"Combine `s1 = \\\"Java\\\"` and `s2 = \\\"Script\\\"`.\", template: [ \"s1 \", { type: \"input\", size: 2, placeholder: \"op\" }, \" s2;\" ], solution: [\"+\"] },\n            { question: \"Convert the string `s = \\\"hello\\\"` to uppercase.\", template: [ \"s.to\", { type: \"input\", size: 10, placeholder: \"MethodName\" }, \"();\" ], solution: [\"UpperCase\"] },\n            { question: \"Remove whitespace from both ends of `str`.\", template: [ \"str.\", { type: \"select\", options: [\"trim\", \"strip\", \"clean\"] }, \"();\" ], solution: [\"trim\"] }\n        ],\n        \"Numbers & Math\": [\n            { question: \"Convert the string `\\\"42\\\"` into a number.\", template: [ { type: \"input\", size: 9, placeholder: \"function\" }, \"(\\\"42\\\");\" ], solution: [\"parseInt\"] },\n            { question: \"Get a random number between 0 (inclusive) and 1 (exclusive).\", template: [ { type: \"input\", size: 5, placeholder: \"Obj\" }, \".random();\" ], solution: [\"Math\"] },\n            { question: \"Round the number `4.7` down to the nearest integer.\", template: [ \"Math.\", { type: \"input\", size: 6, placeholder: \"method\" }, \"(4.7);\" ], solution: [\"floor\"] },\n            { question: \"What is the exponentiation operator in JavaScript?\", template: [ \"2 \", { type: \"input\", size: 3, placeholder: \"op\" }, \" 3; \/\/ 8\" ], solution: [\"**\"] },\n            { question: \"Check if a value `num` is Not-a-Number.\", template: [ { type: \"input\", size: 6, placeholder: \"func\" }, \"(num);\" ], solution: [\"isNaN\"] }\n        ],\n        \"Arrays\": [\n            { question: \"Create an array `fruits` containing 'apple' and 'banana'.\", template: [ \"let fruits = [\", { type: \"input\", size: 20, placeholder: \"'apple', 'banana'\" }, \"];\" ], solution: [\"'apple', 'banana'\"] },\n            { question: \"From `let nums = [10, 20, 30]`, access the last element.\", template: [ \"nums[nums.\", { type: \"input\", size: 7, placeholder: \"prop\" }, \" - 1];\" ], solution: [\"length\"] },\n            { question: \"Add `'orange'` to the end of the `fruits` array.\", template: [ \"fruits.\", { type: \"select\", options: [\"push\", \"pop\", \"shift\"] }, \"('orange');\" ], solution: [\"push\"] },\n            { question: \"Remove the first element from the `fruits` array.\", template: [ \"fruits.\", { type: \"input\", size: 6, placeholder: \"method\" }, \"();\" ], solution: [\"shift\"] },\n            { question: \"Find the index of `'banana'` in the `fruits` array.\", template: [ \"fruits.\", { type: \"input\", size: 8, placeholder: \"method\" }, \"('banana');\" ], solution: [\"indexOf\"] }\n        ],\n        \"Array Methods\": [\n            { question: \"Create a new array with the squares of `[1, 2, 3]`.\", template: [ \"[1, 2, 3].\", { type: \"input\", size: 4, placeholder: \"map\" }, \"(n => n * n);\" ], solution: [\"map\"] },\n            { question: \"Get a new array of only the even numbers from `nums`.\", template: [ \"nums.\", { type: \"input\", size: 7, placeholder: \"filter\" }, \"(n => n % 2 === 0);\" ], solution: [\"filter\"] },\n            { question: \"Iterate over an array `items` without creating a new array.\", template: [ \"items.\", { type: \"select\", options: [\"forEach\", \"forEvery\", \"map\"] }, \"(item => { \/* code *\/ });\" ], solution: [\"forEach\"] },\n            { question: \"Check if every element in an array `ages` is greater than 18.\", template: [ \"ages.\", { type: \"input\", size: 6, placeholder: \"every\" }, \"(age => age > 18);\" ], solution: [\"every\"] },\n            { question: \"Calculate the sum of `[1, 2, 3, 4]` using an array method.\", template: [ \"[1, 2, 3, 4].\", { type: \"input\", size: 7, placeholder: \"reduce\" }, \"((sum, n) => sum + n, 0);\" ], solution: [\"reduce\"] }\n        ],\n        \"Objects\": [\n            { question: \"Create an object `user` with properties 'name' ('John') and 'age' (30).\", template: [ \"let user = { \", { type: \"input\", size: 20, placeholder: \"key: 'value', ...\" }, \" };\" ], solution: [\"name: 'John', age: 30\"] },\n            { question: \"Access the `name` property of the `user` object.\", template: [ \"user\", { type: \"input\", size: 2, placeholder: \".\" }, \"name;\" ], solution: [\".\"] },\n            { question: \"Add a new property, 'city': 'New York', to the `user` object.\", template: [ \"user.city = \", { type: \"input\", size: 12, placeholder: \"value\" }, \";\" ], solution: [\"'New York'\"] },\n            { question: \"Get an array of all keys from an object `myObj`.\", template: [ { type: \"input\", size: 7, placeholder: \"Object\" }, \".keys(myObj);\" ], solution: [\"Object\"] },\n            { question: \"Access the property 'full-name' on an object `person`.\", template: [ \"person[\", { type: \"input\", size: 12, placeholder: \"key\" }, \"];\" ], solution: [\"'full-name'\"] }\n        ],\n        \"Functions\": [\n            { question: \"Define a function `sayHello` that logs 'Hello!'.\", template: [ { type: \"input\", size: 9, placeholder: \"keyword\" }, \" sayHello() { console.log('Hello!'); }\" ], solution: [\"function\"] },\n            { question: \"Define a function `sum` that takes `a` and `b` and returns their total.\", template: [ \"function sum(a, b) { \", { type: \"input\", size: 7, placeholder: \"keyword\" }, \" a + b; }\" ], solution: [\"return\"] },\n            { question: \"Call the `sum` function with arguments 10 and 5.\", template: [ { type: \"input\", size: 10, placeholder: \"call\" }, \";\" ], solution: [\"sum(10, 5)\"] },\n            { question: \"A function passed as an argument to another function is called a...\", template: [ \"...is called a \", { type: \"input\", size: 9, placeholder: \"c...\" }, \" function.\" ], solution: [\"callback\"] },\n            { question: \"Write a function expression assigned to the `double` variable.\", template: [ \"const double = \", { type: \"input\", size: 10, placeholder: \"function\" }, \"(num) { return num * 2; };\" ], solution: [\"function\"] }\n        ],\n        \"Arrow Functions\": [\n            { question: \"Convert this to an arrow function: `function(a, b) { return a + b; }`\", template: [ \"(a, b) \", { type: \"input\", size: 3, placeholder: \"=>\" }, \" a + b;\" ], solution: [\"=>\"] },\n            { question: \"Write an arrow function `square` that squares a number.\", template: [ \"const square = n => n \", { type: \"input\", size: 3, placeholder: \"op\" }, \" n;\" ], solution: [\"*\"] },\n            { question: \"If an arrow function has one parameter, are parentheses `()` required?\", template: [ { type: \"select\", options: [\"No\", \"Yes\"] } ], solution: [\"No\"] },\n            { question: \"Write an arrow function with no parameters that returns 'OK'.\", template: [ { type: \"input\", size: 3, placeholder: \"()\" }, \" => 'OK';\" ], solution: [\"()\"] },\n            { question: \"Arrow functions do not have their own `this` context. True or False?\", template: [ { type: \"select\", options: [\"True\", \"False\"] } ], solution: [\"True\"] }\n        ],\n        \"Control Flow (if\/else)\": [\n            { question: \"Write an if statement that logs 'Positive' if `x` is greater than 0.\", template: [ { type: \"input\", size: 3, placeholder: \"if\" }, \" (x > 0) { console.log('Positive'); }\" ], solution: [\"if\"] },\n            { question: \"What operator is used for strict equality?\", template: [ \"if (a \", { type: \"input\", size: 4, placeholder: \"op\" }, \" b) { ... }\" ], solution: [\"===\"] },\n            { question: \"Complete the if-else statement.\", template: [ \"if (condition) { ... } \", { type: \"input\", size: 5, placeholder: \"else\" }, \" { ... }\" ], solution: [\"else\"] },\n            { question: \"Write a ternary operator for 'Pass'\/'Fail' logic.\", template: [ \"score >= 50 \", { type: \"input\", size: 2, placeholder: \"?\" }, \" 'Pass' \", { type: \"input\", size: 2, placeholder: \":\" }, \" 'Fail';\" ], solution: [\"?\", \":\"] },\n            { question: \"What is the logical operator for 'OR'?\", template: [ \"if (a > 10 \", { type: \"input\", size: 3, placeholder: \"op\" }, \" b < 5) { ... }\" ], solution: [\"||\"] }\n        ],\n        \"Loops (for\/while)\": [\n            { question: \"Write a `for` loop that prints numbers from 0 to 4.\", template: [ { type: \"input\", size: 4, placeholder: \"for\" }, \" (let i = 0; i < 5; i++) { ... }\" ], solution: [\"for\"] },\n            { question: \"Write a `while` loop that does the same (prints 0 to 4).\", template: [ \"let i = 0; \", { type: \"input\", size: 6, placeholder: \"while\" }, \" (i < 5) { ... i++; }\" ], solution: [\"while\"] },\n            { question: \"What keyword exits a loop prematurely?\", template: [ { type: \"select\", options: [\"break\", \"stop\", \"exit\"] } ], solution: [\"break\"] },\n            { question: \"What keyword skips the current iteration?\", template: [ { type: \"select\", options: [\"continue\", \"skip\", \"next\"] } ], solution: [\"continue\"] },\n            { question: \"How do you loop through the properties of an object `person`?\", template: [ \"for (const key \", { type: \"input\", size: 3, placeholder: \"in\" }, \" person) { ... }\" ], solution: [\"in\"] }\n        ],\n        \"DOM Manipulation\": [\n            { question: \"Select an element with the id 'header'.\", template: [ \"document.\", { type: \"input\", size: 15, placeholder: \"method\" }, \"('header');\" ], solution: [\"getElementById\"] },\n            { question: \"Select the first `<p>` element on the page.\", template: [ \"document.\", { type: \"input\", size: 12, placeholder: \"method\" }, \"('p');\" ], solution: [\"querySelector\"] },\n            { question: \"Change the text content of an element `el`.\", template: [ \"el.\", { type: \"input\", size: 12, placeholder: \"property\" }, \" = 'New Text';\" ], solution: [\"textContent\"] },\n            { question: \"Change the HTML content of an element `el`.\", template: [ \"el.\", { type: \"input\", size: 11, placeholder: \"property\" }, \" = '<span>Hi<\/span>';\" ], solution: [\"innerHTML\"] },\n            { question: \"Add the CSS class 'active' to an element `el`.\", template: [ \"el.classList.\", { type: \"input\", size: 4, placeholder: \"add\" }, \"('active');\" ], solution: [\"add\"] }\n        ],\n        \"Event Handling\": [\n            { question: \"Add a 'click' event listener to a button `btn`.\", template: [ \"btn.\", { type: \"input\", size: 15, placeholder: \"method\" }, \"('click', function() {});\" ], solution: [\"addEventListener\"] },\n            { question: \"Inside an event listener, what property refers to the element that triggered the event?\", template: [ \"event.\", { type: \"input\", size: 7, placeholder: \"prop\" } ], solution: [\"target\"] },\n            { question: \"What method stops an event from bubbling up the DOM tree?\", template: [ \"event.stop\", { type: \"input\", size: 12, placeholder: \"Method\" }, \"();\" ], solution: [\"Propagation\"] },\n            { question: \"What method prevents the default action of an event?\", template: [ \"event.prevent\", { type: \"input\", size: 8, placeholder: \"Method\" }, \"();\" ], solution: [\"Default\"] },\n            { question: \"Which event fires when a user presses a key?\", template: [ { type: \"select\", options: [\"keydown\", \"keypress\", \"key\"] } ], solution: [\"keydown\"] }\n        ],\n        \"ES6 Features\": [\n            { question: \"Use a template literal to create 'My name is Bob' with `name = 'Bob'`.\", template: [ { type: \"input\", size: 2, placeholder: \"`\" }, \"My name is ${name}\", { type: \"input\", size: 2, placeholder: \"`\" } ], solution: [\"`\", \"`\"] },\n            { question: \"Destructure the `name` property from `user = { name: 'Alice' }`.\", template: [ \"const { \", { type: \"input\", size: 5, placeholder: \"prop\" }, \" } = user;\" ], solution: [\"name\"] },\n            { question: \"What operator expands an array into individual elements?\", template: [ \"The \", { type: \"input\", size: 7, placeholder: \"s...\" }, \" operator (`...`).\" ], solution: [\"spread\"] },\n            { question: \"Set a default value 'guest' for a function parameter `user`.\", template: [ \"function greet(user \", { type: \"input\", size: 2, placeholder: \"=\" }, \" 'guest') {}\" ], solution: [\"=\"] },\n            { question: \"Use array destructuring to get the first two elements of `arr`.\", template: [ \"const [a, b] = \", { type: \"input\", size: 4, placeholder: \"arr\" }, \";\" ], solution: [\"arr\"] }\n        ],\n        \"Callbacks\": [\n            { question: \"Define a function `process` that takes a number and a callback, then invokes the callback.\", template: [ \"function process(num, cb) { \", { type: \"input\", size: 3, placeholder: \"cb\" }, \"(num); }\" ], solution: [\"cb\"] },\n            { question: \"Deeply nested callbacks that are hard to read are known as...\", template: [ \"...is known as \", { type: \"input\", size: 13, placeholder: \"...\" }, \" Hell.\" ], solution: [\"Callback\"] },\n            { question: \"Is `setTimeout` synchronous or asynchronous?\", template: [ { type: \"select\", options: [\"asynchronous\", \"synchronous\"] } ], solution: [\"asynchronous\"] },\n            { question: \"Call `fetchData` and pass it an anonymous function to handle the result.\", template: [ \"fetchData(\", { type: \"input\", size: 20, placeholder: \"function(res) { ... }\" }, \");\" ], solution: [\"function(result) { console.log(result); }\"] },\n            { question: \"What is a primary use case for callbacks?\", template: [ \"Handling \", { type: \"input\", size: 13, placeholder: \"...\" }, \" operations.\" ], solution: [\"asynchronous\"] }\n        ],\n        \"Promises\": [\n            { question: \"What are the three states of a Promise?\", template: [ \"pending, fulfilled, and \", { type: \"input\", size: 9, placeholder: \"state\" } ], solution: [\"rejected\"] },\n            { question: \"Which method handles a successful Promise?\", template: [ \"myPromise.\", { type: \"input\", size: 5, placeholder: \".then\" }, \"((result) => { ... });\" ], solution: [\".then\"] },\n            { question: \"Which method handles a rejected Promise?\", template: [ \"myPromise.\", { type: \"input\", size: 6, placeholder: \".catch\" }, \"((error) => { ... });\" ], solution: [\".catch\"] },\n            { question: \"Create a new Promise that immediately resolves.\", template: [ \"new Promise((\", { type: \"input\", size: 8, placeholder: \"resolve\" }, \", reject) => resolve(5));\" ], solution: [\"resolve\"] },\n            { question: \"What does `Promise.all()` do?\", template: [ \"Resolves when \", { type: \"select\", options: [\"all\", \"any\", \"the first\"] }, \" of the promises have resolved.\" ], solution: [\"all\"] }\n        ],\n        \"Async\/Await\": [\n            { question: \"What keyword must precede a function to use `await` inside it?\", template: [ { type: \"input\", size: 6, placeholder: \"async\" }, \" function myFunc() { ... }\" ], solution: [\"async\"] },\n            { question: \"What does the `await` keyword do?\", template: [ \"It \", { type: \"input\", size: 7, placeholder: \"pauses\" }, \" the function until a Promise settles.\" ], solution: [\"pauses\"] },\n            { question: \"Rewrite `.then()` with async\/await.\", template: [ \"const res = \", { type: \"input\", size: 6, placeholder: \"await\" }, \" fetchData();\" ], solution: [\"await\"] },\n            { question: \"How do you handle errors when using `await`?\", template: [ \"With a \", { type: \"input\", size: 12, placeholder: \"try...catch\" }, \" block.\" ], solution: [\"try...catch\"] },\n            { question: \"Is `async\/await` just syntactic sugar over Promises?\", template: [ { type: \"select\", options: [\"Yes\", \"No\"] } ], solution: [\"Yes\"] }\n        ],\n        \"Error Handling\": [\n            { question: \"What statement is used to handle exceptions?\", template: [ { type: \"input\", size: 12, placeholder: \"try...catch\" } ], solution: [\"try...catch\"] },\n            { question: \"Which block of a `try...catch...finally` statement always executes?\", template: [ { type: \"input\", size: 8, placeholder: \"block\" } ], solution: [\"finally\"] },\n            { question: \"How do you manually throw a new error?\", template: [ { type: \"input\", size: 6, placeholder: \"throw\" }, \" new Error('Invalid input');\" ], solution: [\"throw\"] },\n            { question: \"The error object is passed to which block?\", template: [ \"The \", { type: \"input\", size: 6, placeholder: \"block\" }, \" block.\" ], solution: [\"catch\"] },\n            { question: \"Is a `SyntaxError` typically catchable with `try...catch`?\", template: [ { type: \"select\", options: [\"No\", \"Yes\"] } ], solution: [\"No\"] }\n        ],\n        \"JSON\": [\n            { question: \"What does JSON stand for?\", template: [ \"JavaScript Object \", { type: \"input\", size: 9, placeholder: \"N...\" } ], solution: [\"Notation\"] },\n            { question: \"Convert a JavaScript object `obj` to a JSON string.\", template: [ \"JSON.\", { type: \"input\", size: 10, placeholder: \"method\" }, \"(obj);\" ], solution: [\"stringify\"] },\n            { question: \"Parse a JSON string `str` into a JavaScript object.\", template: [ \"JSON.\", { type: \"input\", size: 6, placeholder: \"method\" }, \"(str);\" ], solution: [\"parse\"] },\n            { question: \"In JSON, must property names (keys) be in double quotes?\", template: [ { type: \"select\", options: [\"Yes\", \"No\"] } ], solution: [\"Yes\"] },\n            { question: \"Can a JSON file contain functions?\", template: [ { type: \"select\", options: [\"No\", \"Yes\"] } ], solution: [\"No\"] }\n        ]\n    };\n\n    document.addEventListener('DOMContentLoaded', function() {\n        const topicSelectionView = document.getElementById('js-ex-topic-selection-view');\n        const exerciseViewsContainer = document.getElementById('js-ex-exercise-views-container');\n\n        \/\/ --- Utility Functions ---\n        function normalizeCode(codeStr) {\n            if (typeof codeStr !== 'string') return '';\n            return codeStr.replace(\/\u201c|\u201d|\u2018|\u2019|`|\"\/g, \"'\").trim().replace(\/;$\/, '');\n        }\n        \n        \/\/ --- View Switching Logic ---\n        function showTopicView(topicKey) {\n            topicSelectionView.style.display = 'none';\n            document.querySelectorAll('.js-ex-exercise-view').forEach(view => view.style.display = 'none');\n            const view = document.getElementById(`js-ex-view-${topicKey}`);\n            if (view) {\n                 view.style.display = 'block';\n            }\n        }\n\n        function showTopicSelection() {\n            topicSelectionView.style.display = 'block';\n            document.querySelectorAll('.js-ex-exercise-view').forEach(view => view.style.display = 'none');\n        }\n        \n        \/\/ --- Initialization ---\n        function initialize() {\n            const topics = Object.keys(exercises);\n\n            \/\/ Pre-build all Exercise Views (CSR part)\n            topics.forEach(topic => {\n                const topicKey = topic.replace(\/[^a-zA-Z0-9]\/g, '');\n                const questions = exercises[topic];\n\n                let questionsHTML = '';\n                questions.forEach((q, qIndex) => {\n                    let templateHTML = '';\n                    let inputCounter = 0;\n                    q.template.forEach(part => {\n                        if (typeof part === 'string') {\n                            templateHTML += part; \n                        } else if (part.type === 'input') {\n                            templateHTML += `<input type=\"text\" class=\"js-input\" id=\"js-ex-answer-${topicKey}-${qIndex}-${inputCounter}\" size=\"${part.size || 10}\" placeholder=\"${part.placeholder || '...'}\">`;\n                            inputCounter++;\n                        } else if (part.type === 'select') {\n                            const optionsHTML = part.options.map(opt => `<option value=\"${opt}\">${opt}<\/option>`).join('');\n                            templateHTML += `<select class=\"js-select\" id=\"js-ex-answer-${topicKey}-${qIndex}-${inputCounter}\">${optionsHTML}<\/select>`;\n                            inputCounter++;\n                        }\n                    });\n\n                    questionsHTML += `\n                        <div style=\"border: 1px solid #E5E7EB; border-radius: 0.5rem;\">\n                            <div style=\"padding: 1rem; border-bottom: 1px solid #E5E7EB;\">\n                                 <p style=\"font-weight: 500; margin:0; color: #374151;\">\n                                    <span style=\"font-weight: 700; color: #111827;\">Question ${qIndex + 1}:<\/span> ${q.question}\n                                <\/p>\n                            <\/div>\n                            <div class=\"js-code-template\"><pre style=\"margin:0; padding:0; white-space: pre-wrap;\"><code style=\"font-family: monospace;\">${templateHTML}<\/code><\/pre><\/div>\n                            <div id=\"js-ex-feedback-${topicKey}-${qIndex}\" style=\"margin-top: 0.5rem; padding: 0 1rem 0.5rem 1rem;\"><\/div>\n                        <\/div>\n                    `;\n                });\n\n                const exerciseViewHTML = `\n                    <div id=\"js-ex-view-${topicKey}\" class=\"js-ex-exercise-view\" style=\"display: none;\">\n                        <div style=\"display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem;\">\n                            <h2 style=\"font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #111827; margin:0;\" style=\"font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #111827; margin:0;\" id=\"topic\">${topic}<\/h2>\n                            <button class=\"js-ex-back-btn\" style=\"background-color: #E5E7EB; color: #374151; font-weight: 500; padding: 0.5rem 1rem; border-radius: 0.5rem; border: none; cursor: pointer;\" onmouseover=\"this.style.backgroundColor='#D1D5DB'\" onmouseout=\"this.style.backgroundColor='#E5E7EB'\">Back to Topics<\/button>\n                        <\/div>\n                        <div style=\"display: flex; flex-direction: column; gap: 1.5rem;\">${questionsHTML}<\/div>\n                        <div id=\"js-ex-result-container-${topicKey}\" style=\"text-align: center; margin-top: 2rem;\"><\/div>\n                        <div style=\"text-align: center; margin-top: 1.5rem;\">\n                             <button class=\"js-ex-check-answers-btn\" data-topic-key=\"${topicKey}\" data-topic-name=\"${topic}\" style=\"background-color: #2563EB; color: #FFFFFF; font-weight: 700; padding: 0.75rem 2rem; border-radius: 0.5rem; font-size: 1.125rem; border: none; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\" onmouseover=\"this.style.backgroundColor='#1D4ED8'\" onmouseout=\"this.style.backgroundColor='#2563EB'\">Check Answers<\/button>\n                        <\/div>\n                    <\/div>\n                `;\n                exerciseViewsContainer.innerHTML += exerciseViewHTML;\n            });\n\n            \/\/ --- Attach Event Listeners ---\n            document.querySelectorAll('.topic-item-btn').forEach(button => {\n                const topicKey = button.getAttribute('data-topic-key');\n                if (topicKey) {\n                    button.addEventListener('click', () => showTopicView(topicKey));\n                }\n            });\n\n            document.querySelectorAll('.js-ex-back-btn').forEach(btn => {\n                btn.addEventListener('click', showTopicSelection);\n            });\n\n            document.querySelectorAll('.js-ex-check-answers-btn').forEach(btn => {\n                btn.addEventListener('click', (event) => {\n                    const topicKey = event.currentTarget.getAttribute('data-topic-key');\n                    const topicName = event.currentTarget.getAttribute('data-topic-name');\n                    const questions = exercises[topicName];\n                    let correctCount = 0;\n\n                    questions.forEach((q, qIndex) => {\n                        const feedbackContainer = document.getElementById(`js-ex-feedback-${topicKey}-${qIndex}`);\n                        let isCorrect = true;\n                        let inputCounter = 0;\n\n                        q.template.forEach(part => {\n                            if (typeof part === 'object') {\n                                const userInputElem = document.getElementById(`js-ex-answer-${topicKey}-${qIndex}-${inputCounter}`);\n                                const userAnswer = normalizeCode(userInputElem.value);\n                                const correctAnswer = normalizeCode(q.solution[inputCounter]);\n                                if (userAnswer.toLowerCase() !== correctAnswer.toLowerCase()) {\n                                    isCorrect = false;\n                                }\n                                inputCounter++;\n                            }\n                        });\n\n                        if (isCorrect) {\n                            correctCount++;\n                            feedbackContainer.innerHTML = `<p style=\"color: #16A34A; font-weight: 600; margin:0;\">\u2713 Correct!<\/p>`;\n                        } else {\n                            \/\/ Reconstruct the correct answer string for display\n                            let correctAnswerHTML = '';\n                            let solutionCounter = 0;\n                            q.template.forEach(part => {\n                                if (typeof part === 'string') {\n                                    correctAnswerHTML += part.replace(\/<\/g, \"&lt;\").replace(\/>\/g, \"&gt;\");\n                                } else {\n                                    correctAnswerHTML += `<strong style=\"color: #166534;\">${q.solution[solutionCounter]}<\/strong>`;\n                                    solutionCounter++;\n                                }\n                            });\n\n                            feedbackContainer.innerHTML = `\n                                <p style=\"color: #DC2626; font-weight: 600; margin:0;\">\u2717 Incorrect.<\/p>\n                                <p style=\"color: #4B5563; margin-top: 0.25rem; margin-bottom: 0.25rem;\">The correct code is:<\/p>\n                                <div class=\"js-code-template\" style=\"background-color: #F0FDF4;\"><pre style=\"margin:0; padding:0; white-space: pre-wrap;\"><code style=\"font-family: monospace;\">${correctAnswerHTML}<\/code><\/pre><\/div>\n                            `;\n                        }\n                    });\n\n                    const resultContainer = document.getElementById(`js-ex-result-container-${topicKey}`);\n                    resultContainer.innerHTML = `\n                        <p style=\"font-size: 1.25rem; font-weight: 700;\">You answered ${correctCount} out of ${questions.length} questions correctly.<\/p>\n                        <p style=\"color: #6B7280; margin-top: 0.25rem;\">Review the feedback above and feel free to try again!<\/p>\n                    `;\n                });\n            });\n        }\n\n        \/\/ Run the initialization\n        initialize();\n    });\n<\/script>\n\n\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>Also Check:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/\">Online JavaScript Compiler<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/\">JavaScript Quiz and MCQs<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-interview-questions\/\">JavaScript Interview Questions and Answers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-projects\/\">JavaScript Projects with Source Code<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Explore 100 JavaScript practice questions, coding problems, and online exercises with solutions. Ideal for beginners to strengthen core JavaScript skills.<\/p>\n","protected":false},"author":41,"featured_media":111741,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25860],"tags":[36840],"class_list":["post-111736","page","type-page","status-publish","has-post-thumbnail","hentry","category-software","tag-javascript"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>JavaScript Practice Questions and Coding Exercises for Beginners<\/title>\n<meta name=\"description\" content=\"Explore 100 JavaScript practice questions, coding problems, and online exercises with solutions. Ideal for beginners to strengthen core JavaScript skills.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Exercises\" \/>\n<meta property=\"og:description\" content=\"Explore 100 JavaScript practice questions, coding problems, and online exercises with solutions. Ideal for beginners to strengthen core JavaScript skills.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/\" \/>\n<meta property=\"og:site_name\" content=\"Great Learning Blog: Free Resources what Matters to shape your Career!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GreatLearningOfficial\/\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1408\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Great_Learning\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/\"},\"author\":{\"name\":\"Great Learning Editorial Team\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\"},\"headline\":\"JavaScript Exercises\",\"datePublished\":\"2025-09-04T08:26:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/\"},\"wordCount\":146,\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/javascript-exercise.webp\",\"keywords\":[\"javascript\"],\"articleSection\":[\"IT\\\/Software Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/\",\"name\":\"JavaScript Practice Questions and Coding Exercises for Beginners\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/javascript-exercise.webp\",\"datePublished\":\"2025-09-04T08:26:23+00:00\",\"description\":\"Explore 100 JavaScript practice questions, coding problems, and online exercises with solutions. Ideal for beginners to strengthen core JavaScript skills.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/javascript-exercise.webp\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/javascript-exercise.webp\",\"width\":1408,\"height\":768,\"caption\":\"Javascript Exercise\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-exercise\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Exercises\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"name\":\"Great Learning Blog\",\"description\":\"Learn, Upskill &amp; Career Development Guide and Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"alternateName\":\"Great Learning\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\",\"name\":\"Great Learning\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"width\":900,\"height\":900,\"caption\":\"Great Learning\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/GreatLearningOfficial\\\/\",\"https:\\\/\\\/x.com\\\/Great_Learning\",\"https:\\\/\\\/www.instagram.com\\\/greatlearningofficial\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/in.pinterest.com\\\/greatlearning12\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/beaconelearning\\\/\"],\"description\":\"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.\",\"email\":\"info@mygreatlearning.com\",\"legalName\":\"Great Learning Education Services Pvt. Ltd\",\"foundingDate\":\"2013-11-29\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1001\",\"maxValue\":\"5000\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\",\"name\":\"Great Learning Editorial Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"caption\":\"Great Learning Editorial Team\"},\"description\":\"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.\",\"sameAs\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/\",\"https:\\\/\\\/in.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/Great_Learning\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCObs0kLIrDjX2LLSybqNaEA\"],\"award\":[\"Best EdTech Company of the Year 2024\",\"Education Economictimes Outstanding Education\\\/Edtech Solution Provider of the Year 2024\",\"Leading E-learning Platform 2024\"],\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/author\\\/greatlearning\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Practice Questions and Coding Exercises for Beginners","description":"Explore 100 JavaScript practice questions, coding problems, and online exercises with solutions. Ideal for beginners to strengthen core JavaScript skills.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Exercises","og_description":"Explore 100 JavaScript practice questions, coding problems, and online exercises with solutions. Ideal for beginners to strengthen core JavaScript skills.","og_url":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/","og_site_name":"Great Learning Blog: Free Resources what Matters to shape your Career!","article_publisher":"https:\/\/www.facebook.com\/GreatLearningOfficial\/","og_image":[{"width":1408,"height":768,"url":"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_site":"@Great_Learning","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/#article","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/"},"author":{"name":"Great Learning Editorial Team","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad"},"headline":"JavaScript Exercises","datePublished":"2025-09-04T08:26:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/"},"wordCount":146,"publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise.webp","keywords":["javascript"],"articleSection":["IT\/Software Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/","url":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/","name":"JavaScript Practice Questions and Coding Exercises for Beginners","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/#primaryimage"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise.webp","datePublished":"2025-09-04T08:26:23+00:00","description":"Explore 100 JavaScript practice questions, coding problems, and online exercises with solutions. Ideal for beginners to strengthen core JavaScript skills.","breadcrumb":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/#primaryimage","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise.webp","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise.webp","width":1408,"height":768,"caption":"Javascript Exercise"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.mygreatlearning.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Exercises"}]},{"@type":"WebSite","@id":"https:\/\/www.mygreatlearning.com\/blog\/#website","url":"https:\/\/www.mygreatlearning.com\/blog\/","name":"Great Learning Blog","description":"Learn, Upskill &amp; Career Development Guide and Resources","publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"alternateName":"Great Learning","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mygreatlearning.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization","name":"Great Learning","url":"https:\/\/www.mygreatlearning.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","width":900,"height":900,"caption":"Great Learning"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GreatLearningOfficial\/","https:\/\/x.com\/Great_Learning","https:\/\/www.instagram.com\/greatlearningofficial\/","https:\/\/www.linkedin.com\/school\/great-learning\/","https:\/\/in.pinterest.com\/greatlearning12\/","https:\/\/www.youtube.com\/user\/beaconelearning\/"],"description":"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.","email":"info@mygreatlearning.com","legalName":"Great Learning Education Services Pvt. Ltd","foundingDate":"2013-11-29","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1001","maxValue":"5000"}},{"@type":"Person","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad","name":"Great Learning Editorial Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","caption":"Great Learning Editorial Team"},"description":"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.","sameAs":["https:\/\/www.mygreatlearning.com\/","https:\/\/in.linkedin.com\/school\/great-learning\/","https:\/\/x.com\/https:\/\/twitter.com\/Great_Learning","https:\/\/www.youtube.com\/channel\/UCObs0kLIrDjX2LLSybqNaEA"],"award":["Best EdTech Company of the Year 2024","Education Economictimes Outstanding Education\/Edtech Solution Provider of the Year 2024","Leading E-learning Platform 2024"],"url":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise.webp",1408,768,false],"thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise-150x150.webp",150,150,true],"medium":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise-300x164.webp",300,164,true],"medium_large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise-768x419.webp",768,419,true],"large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise-1024x559.webp",1024,559,true],"1536x1536":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise.webp",1408,768,false],"2048x2048":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise.webp",1408,768,false],"web-stories-poster-portrait":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise-640x768.webp",640,768,true],"web-stories-publisher-logo":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise-96x96.webp",96,96,true],"web-stories-thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/09\/javascript-exercise-150x82.webp",150,82,true]},"uagb_author_info":{"display_name":"Great Learning Editorial Team","author_link":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"},"uagb_comment_info":0,"uagb_excerpt":"Explore 100 JavaScript practice questions, coding problems, and online exercises with solutions. Ideal for beginners to strengthen core JavaScript skills.","_links":{"self":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/111736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/comments?post=111736"}],"version-history":[{"count":9,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/111736\/revisions"}],"predecessor-version":[{"id":111740,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/111736\/revisions\/111740"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media\/111741"}],"wp:attachment":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=111736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=111736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=111736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}