Basic JavaScript Quiz

Test your understanding of the fundamental concepts and syntax of JavaScript, including variables, data types, conditionals, loops, and functions.

Question 1/15

What is the correct way to format a string in JavaScript using template literals?

Question 2/15

What is the correct way to create a new Date object in JavaScript?

Question 3/15

What is the correct way to prevent default behavior in an event handler in JavaScript?

Question 4/15

What is the correct way to append an element to the DOM in JavaScript?

Question 5/15

What is the correct way to add an element to the end of an array in JavaScript?

Question 6/15

What is the correct way to declare an array in JavaScript?

Question 7/15

Which of the following is the better way to compare two values in JavaScript?

Question 8/15

What is the correct way to declare an object in JavaScript?

Question 9/15

Which of these is a valid function declaration?

Question 10/15

Which of the following is a falsy value in JavaScript?

Question 11/15

What is the correct way to remove an element from an array in JavaScript?

Question 12/15

What is the correct way to convert a string to a number in JavaScript?

Question 13/15

What is the correct way to select an element by its id in JavaScript?

Question 14/15

Which of the following is a loop in JavaScript?

Question 15/15

Which of the following is a valid way to access an object property in JavaScript?
You did not answer any questions correctly.

Your Answers

Question 1/15

What is the correct way to format a string in JavaScript using template literals?

Template literals are a feature in JavaScript that allow you to easily format strings with variables. You can use the ${} syntax to embed variables directly in a string. Here's an example:

let name = 'Alice';
console.log(`My name is ${name}.`); // Output: "My name is Alice."

This code uses a template literal to create a string that includes the value of the name variable.

Question 2/15

What is the correct way to create a new Date object in JavaScript?

In JavaScript, you can create a new Date object using the Date constructor with no arguments (which creates a Date object with the current date and time), a string argument in the format 'YYYY-MM-DD' (which creates a Date object with the specified date), or multiple arguments for the year, month, and day (which creates a Date object with the specified date). Here are some examples:

console.log(new Date()); // Output: the current date and time
console.log(new Date('2022-01-01')); // Output: January 1, 2022
console.log(new Date(2022, 0, 1)); // Output: January 1, 2022

Question 3/15

What is the correct way to prevent default behavior in an event handler in JavaScript?

The preventDefault method is used in JavaScript event handlers to prevent the default behavior of the event from occurring. Here's an example:

let myLink = document.getElementById('my-link');
myLink.addEventListener('click', function(event) {
  event.preventDefault(); // Prevents the link from navigating to a new page
  console.log('The link was clicked!');
});

This code adds a click event listener to a link with the id "my-link". The event handler function includes a call to preventDefault to prevent the link from navigating to a new page when clicked.

Question 4/15

What is the correct way to append an element to the DOM in JavaScript?

The appendChild method is used in JavaScript to append a child element to a parent element in the DOM. Here's an example:

let parent = document.getElementById('parent');
let child = document.createElement('div');
parent.appendChild(child); // Appends the child element to the parent element

This code selects an element with the id "parent" and creates a new div element called "child". It then appends the child element to the parent element using the appendChild method.

Question 5/15

What is the correct way to add an element to the end of an array in JavaScript?

The push method is used in JavaScript to add an element to the end of an array. Here's an example:

let myArray = ['apple', 'banana'];
myArray.push('orange'); // Adds 'orange' to the end of the array
console.log(myArray); // Output: ["apple", "banana", "orange"]

This code uses the push method to add the string 'orange' to the end of the myArray array.

Question 6/15

What is the correct way to declare an array in JavaScript?

To declare an array in JavaScript, you can use array literal notation or the array constructor.

Array literal notation: This is the most common way to declare an array in JavaScript. Here's an example:

let myArray = [1, 2, 3, 4, 5];

This code declares an array called "myArray" with five elements: 1, 2, 3, 4, and 5.

You can also declare an empty array using array literal notation, like this:

let emptyArray = [];

This code declares an empty array called "emptyArray".

Array constructor: You can also use the Array constructor to declare an array in JavaScript. Here's an example:

let myArray = new Array(1, 2, 3, 4, 5);

This code declares an array called "myArray" with the same elements as the previous example.

You can also declare an empty array using the Array constructor, like this:

let emptyArray = new Array();

This code declares an empty array called "emptyArray".

Note that when using the Array constructor with a single argument, the argument is interpreted as the length of the array rather than an element of the array. For example:

let myArray = new Array(5);

This code declares an array called "myArray" with a length of 5 and no elements. To add elements to this array, you can use array indexing or other methods like push or unshift.

Question 7/15

Which of the following is the better way to compare two values in JavaScript?

In JavaScript, there are two types of equality operators: == (loose equality) and === (strict equality). The == operator compares the values of two operands without considering their data types, while the === operator compares both the values and the data types of the operands. The === operator is generally preferred because it is more reliable and prevents unexpected type coercion.

console.log(5 == "5"); // output: true (loose equality)
console.log(5 === "5"); // output: false (strict equality)

Question 8/15

What is the correct way to declare an object in JavaScript?

To declare a new object in JavaScript, you can use object literal notation or the object constructor.

Object literal notation: This is the most common way to declare a new object in JavaScript. Here's an example:

let myObject = { 
  name: 'John',
  age: 30,
  gender: 'male'
};

This code declares a new object called "myObject" with three properties: name, age, and gender.

You can also declare an empty object using object literal notation, like this:

let emptyObject = {}; 

This code declares an empty object called "emptyObject".

Object constructor: You can also use the Object constructor to declare a new object in JavaScript. Here's an example:

let myObject = new Object();
myObject.name = 'John';
myObject.age = 30;
myObject.gender = 'male';

This code declares a new object called "myObject" with the same properties as the previous example, but it uses the Object constructor and dot notation to add the properties.

You can also declare an empty object using the Object constructor, like this:

let emptyObject = new Object(); 

This code declares an empty object called "emptyObject".

Note that object literal notation is generally preferred for declaring new objects in JavaScript because it is more concise and easier to read.

Question 9/15

Which of these is a valid function declaration?

You can declare a function in JavaScript using the function keyword followed by the function name and parentheses or by assigning a function expression to a variable using the assignment operator. In both cases, the function can be called by its name followed by parentheses.

// using the function keyword
function myFunction() {
  console.log("Hello, world!");
}
myFunction(); // output: Hello, world!

// using a function expression
var myFunction = function() {
  console.log("Hello, world!");
}
myFunction(); // output: Hello, world!

Question 10/15

Which of the following is a falsy value in JavaScript?

In JavaScript, the following values are considered falsy: false, null, undefined, 0, NaN, and an empty string (''). Here's an example:

let x = null;
if (x) {
  console.log('x is truthy');
} else {
  console.log('x is falsy');
}

This code assigns the value null to x, which is a falsy value. The if statement checks whether x is truthy or falsy, and outputs "x is falsy" to the console.

Question 11/15

What is the correct way to remove an element from an array in JavaScript?

In JavaScript, you can use the pop method, shift method, or splice method to remove an element from an array. Here are some examples:

let myArray = ['apple', 'banana', 'orange'];
myArray.pop(); // Removes the last element (in this case, 'orange')
console.log(myArray); // Output: ["apple", "banana"]

myArray.shift(); // Removes the first element (in this case, 'apple')
console.log(myArray); // Output: ["banana"]

myArray.splice(0, 1); // Removes the element at index 0 (in this case, 'banana')
console.log(myArray); // Output: []

These code snippets demonstrate the use of the pop, shift, and splice methods to remove elements from an array.

Question 12/15

What is the correct way to convert a string to a number in JavaScript?

In JavaScript, you can use the Number function, parseInt function, or parseFloat function to convert a string to a number. Here are some examples:

console.log(Number('42')); // Output: 42
console.log(parseInt('42')); // Output: 42
console.log(parseFloat('42.5')); // Output: 42.5

Question 13/15

What is the correct way to select an element by its id in JavaScript?

This is the correct method to select an element by its id in JavaScript. Here's an example:

let myElement = document.getElementById('my-element');
console.log(myElement.textContent); // Output the text content of the element with the id "my-element"

This code uses the getElementById method to select an element with the id "my-element", and then outputs its text content to the console.

Question 14/15

Which of the following is a loop in JavaScript?

for loop: A for loop is used to iterate over a set of instructions for a specified number of times. Here's an example:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

This code will output the numbers 0 through 4 to the console, because the loop iterates 5 times (starting at 0 and ending at 4).

while loop: A while loop is used to iterate over a set of instructions as long as a specified condition is true. Here's an example:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

This code will output the numbers 0 through 4 to the console, because the loop iterates as long as the value of i is less than 5.

do...while loop: A do...while loop is similar to a while loop, but the instructions are executed at least once before the condition is checked. Here's an example:

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

This code will also output the numbers 0 through 4 to the console, because the loop is executed at least once before checking if the value of i is less than 5.

In addition to these three options used in this question, you can also perform a loop using forEach and for...in.

Question 15/15

Which of the following is a valid way to access an object property in JavaScript?

Object properties in JavaScript can be accessed using either dot notation or bracket notation. In dot notation, the name of the property is preceded by the object name and a dot. In bracket notation, the property name is enclosed in quotes and inside square brackets, and the whole expression is preceded by the object name.

var myObject = {
  name: "John",
  age: 30,
  "favorite color": "blue"
};

console.log(myObject.name); // output: "John"
console.log(myObject["age"]); // output: 30
console.log(myObject["favorite color"]); // output: "blue"

Take Another Quiz

Advanced CSS Quiz

Advanced CSS Quiz designed to test your knowledge of advanced CSS concepts, including layout, positioning, blending, and responsive design. Start quiz

Agile Methodologies Quiz

Test your understanding of Agile methodologies, including Scrum, Kanban, and Lean. Understand how to use Agile principles to enhance the efficiency and productivity of your software development projects. Start quiz

Basic HTML & CSS Quiz

From basic tags and selectors to layout and positioning, this quiz covers essential topics that every beginner frontend web developer should know. Start quiz

CSS Box Model Quiz

Identify the correct box model properties for various layout scenarios and determine how changes to these properties affect the appearance of an element. Start quiz

CSS Flexbox Quiz

Test your knowledge of the CSS Flexbox layout module with multiple choice questions and their explanations. Start quiz

CSS Grid Quiz

Test your knowledge of CSS Grid with this quiz, covering topics such as grid properties, layout creation, and positioning of grid items. Start quiz