Collapsible or accordion is used to get various predefined visuals and behavioral enhancements to display various types of accordions. Materialize CSS provides different CSS classes to apply these collapsible. Index Class name Description collapsible It is used to identify an element as a materialize collapsible component. Required for ul element. collapsible-header It is used to set div as a section header. collapsible-body It is used to set div as a section content container. popout It is used to create a popout collapsible. active It is used to open a section. expandable It is used to mark a collapsible component as expandable. accordion It is used to mark a collapsible component as accordion. Example Let’s take an example to demonstrate collapsible in Materialize CSS: Output:

What is an Object? JavaScript is an object-based language and in JavaScript almost everything is an object or acts like an object. So, to work with JavaScript effectively and efficiently we need to understand how objects work as well as how to create your own objects and use them. A JavaScript object is just a collection of named values. These named values are usually referred to as properties of the object. If you remember from the JavaScript arrays chapter, an array is a collection of values, where each value has an index (a numeric key) that starts from zero and increments by one for each value. An object is similar to an array, but the difference is that you define the keys yourself, such as name, age, gender, and so on. In the following sections we’ll learn about objects in detail. Creating Objects An object can be created with curly brackets {} with an optional list of properties. A property is a “key: value” pair, where the key (or property name) is always a string, and value (or property value) can be any data type, like strings, numbers, Booleans or complex data type like arrays, functions, and other objects. Additionally, properties with functions as their values are often called methods to distinguish them from other properties. A typical JavaScript object may look like this: Example The above example creates an object called person that has three properties name, age, and gender and one method displayName(). The displayName() method displays the value of this.name, which resolves to person.name. This is the easiest and preferred way to create a new object in JavaScript, which is known as object literals syntax. The property names generally do not need to be quoted unless they are reserved words, or if they contain spaces or special characters (anything other than letters, numbers, and the _ and $ characters), or if they start with a number, as shown in the following example: Example Note: Since ECMAScript 5, reserved words can be used as object’s property names without quoting. However, you should avoid doing this for better compatibility. Accessing Object’s Properties To access or get the value of a property, you can use the dot (.), or square bracket ([]) notation, as demonstrated in the following example: Example The dot notation is easier to read and write, but it cannot always be used. If the name of the property is not valid (i.e. if it contains spaces or special characters), you cannot use the dot notation; you’ll have to use bracket notation, as shown in the following example: Example The square bracket notation offers much more flexibility than dot notation. It also allows you to specify property names as variables instead of just string literals, as shown in the example below: Example Looping Through Object’s Properties You can iterate through the key-value pairs of an object using the for…in loop. This loop is specially optimized for iterating over object’s properties. Here’s an example: Example Setting Object’s Properties Similarly, you can set the new properties or update the existing one using the dot (.) or bracket ([]) notation, as demonstrated in the following example: Example Deleting Object’s Properties The delete operator can be used to completely remove properties from an object. Deleting is the only way to actually remove a property from an object. Setting the property to undefined or null only changes the value of the property. It does not remove property from the object. Example Note: The delete operator only removes an object property or array element. It has no effect on variables or declared functions. However, you should avoid delete operator for deleting an array element, as it doesn’t change the array’s length, it just leaves a hole in the array. Calling Object’s Methods You can access an object’s method the same way as you would access properties—using the dot notation or using the square bracket notation. Here’s an example: Example Manipulating by Value vs. Reference JavaScript objects are reference types that mean when you make copies of them, you’re really just copying the references to that object. Whereas primitive values like strings and numbers are assigned or copied as a whole value. To better understand all this, let’s check out the following example: Example In the above example, we have made a copy of a variable message and changed the value of that copy (i.e. variable greet). The two variables remain distinct and separate. But, if we do the same thing with an object, we will get a different result, as you see in the following example: Example You can clearly see, any changes made to the variable user also change the person variable; it happens because both variables reference the same object. So, simply copying the object does not actually clone it but copies the reference to that object.

What is Function? A function is a group of statements that perform specific tasks and can be kept and maintained separately form main program. Functions provide a way to create reusable code packages which are more portable and easier to debug. Here are some advantages of using functions: The following section will show you how to define and call functions in your scripts. Defining and Calling a Function The declaration of a function start with the function keyword, followed by the name of the function you want to create, followed by parentheses i.e. () and finally place your function’s code between curly brackets {}. Here’s the basic syntax for declaring a function: function functionName() {// Code to be executed} Here is a simple example of a function, that will show a hello message: Example Once a function is defined it can be called (invoked) from anywhere in the document, by typing its name followed by a set of parentheses, like sayHello() in the example above. Note: A function name must start with a letter or underscore character not with a number, optionally followed by the more letters, numbers, or underscore characters. Function names are case sensitive, just like variable names. Adding Parameters to Functions You can specify parameters when you define your function to accept input values at run time. The parameters work like placeholder variables within a function; they’re replaced at run time by the values (known as argument) provided to the function at the time of invocation. Parameters are set on the first line of the function inside the set of parentheses, like this: function functionName(parameter1, parameter2, parameter3) {// Code to be executed} The displaySum() function in the following example takes two numbers as arguments, simply add them together and then display the result in the browser. Example You can define as many parameters as you like. However for each parameter you specify, a corresponding argument needs to be passed to the function when it is called, otherwise its value becomes undefined. Let’s consider the following example: Example Default Values for Function Parameters ES6 With ES6, now you can specify default values to the function parameters. This means that if no arguments are provided to function when it is called these default parameters values will be used. This is one of the most awaited features in JavaScript. Here’s an example: Example While prior to ES6, to achieve the same we had to write something like this: Example To learn about other ES6 features, please check out the JavaScript ES6 features chapter. Returning Values from a Function A function can return a value back to the script that called the function as a result using the return statement. The value may be of any type, including arrays and objects. The return statement usually placed as the last line of the function before the closing curly bracket and ends it with a semicolon, as shown in the following example. Example A function can not return multiple values. However, you can obtain similar results by returning an array of values, as demonstrated in the following example. Example Working with Function Expressions The syntax that we’ve used before to create functions is called function declaration. There is another syntax for creating a function that is called a function expression. Example Once function expression has been stored in a variable, the variable can be used as a function: Example Note: There is no need to put a semicolon after the closing curly bracket in a function declaration. But function expressions, on the other hand, should always end with a semicolon. Tip: In JavaScript functions can be stored in variables, passed into other functions as arguments, passed out of functions as return values, and constructed at run-time. The syntax of the function declaration and function expression looks very similar, but they differ in the way they are evaluated, check out the following example: Example As you can see in the above example, the function expression threw an exception when it was invoked before it is defined, but the function declaration executed successfully. JavaScript parse declaration function before the program executes. Therefore, it doesn’t matter if the program invokes the function before it is defined because JavaScript has hoisted the function to the top of the current scope behind the scenes. The function expression is not evaluated until it is assigned to a variable; therefore, it is still undefined when invoked. ES6 has introduced even shorter syntax for writing function expression which is called arrow function, please check out the JavaScript ES6 features chapter to learn more about it. Understanding the Variable Scope However, you can declare the variables anywhere in JavaScript. But, the location of the declaration determines the extent of a variable’s availability within the JavaScript program i.e. where the variable can be used or accessed. This accessibility is known as variable scope. By default, variables declared within a function have local scope that means they cannot be viewed or manipulated from outside of that function, as shown in the example below: Example However, any variables declared in a program outside of a function has global scope i.e. it will be available to all script, whether that script is inside a function or outside. Here’s an example: Example

Different Types of Loops in JavaScript Loops are used to execute the same block of code again and again, as long as a certain condition is met. The basic idea behind a loop is to automate the repetitive tasks within a program to save the time and effort. JavaScript now supports five different types of loops: In the following sections, we will discuss each of these loop statements in detail. The while Loop This is the simplest looping statement provided by JavaScript. The while loop loops through a block of code as long as the specified condition evaluates to true. As soon as the condition fails, the loop is stopped. The generic syntax of the while loop is: while(condition) {// Code to be executed} The following example defines a loop that will continue to run as long as the variable i is less than or equal to 5. The variable i will increase by 1 each time the loop runs: Example Note: Make sure that the condition specified in your loop eventually goes false. Otherwise, the loop will never stop iterating which is known as infinite loop. A common mistake is to forget to increment the counter variable (variable i in our case). The do…while Loop The do-while loop is a variant of the while loop, which evaluates the condition at the end of each loop iteration. With a do-while loop the block of code executed once, and then the condition is evaluated, if the condition is true, the statement is repeated as long as the specified condition evaluated to is true. The generic syntax of the do-while loop is: do {// Code to be executed}while(condition); The JavaScript code in the following example defines a loop that starts with i=1. It will then print the output and increase the value of variable i by 1. After that the condition is evaluated, and the loop will continue to run as long as the variable i is less than, or equal to 5. Example Difference Between while and do…while Loop The while loop differs from the do-while loop in one important way — with a while loop, the condition to be evaluated is tested at the beginning of each loop iteration, so if the conditional expression evaluates to false, the loop will never be executed. With a do-while loop, on the other hand, the loop will always be executed once even if the conditional expression evaluates to false, because unlike the while loop, the condition is evaluated at the end of the loop iteration rather than the beginning. The for Loop The for loop repeats a block of code as long as a certain condition is met. It is typically used to execute a block of code for certain number of times. Its syntax is: for(initialization; condition; increment) {// Code to be executed} The parameters of the for loop statement have following meanings: The following example defines a loop that starts with i=1. The loop will continued until the value of variable i is less than or equal to 5. The variable i will increase by 1 each time the loop runs: Example The for loop is particularly useful for iterating over an array. The following example will show you how to print each item or element of the JavaScript array. Exampl The for…in Loop The for-in loop is a special type of a loop that iterates over the properties of an object, or the elements of an array. The generic syntax of the for-in loop is: for(variable in object) {// Code to be executed} The loop counter i.e. variable in the for-in loop is a string, not a number. It contains the name of current property or the index of the current array element. The following example will show you how to loop through all properties of a JavaScript object. Example Similarly, you can loop through the elements of an array, like this: Example Note: The for-in loop should not be used to iterate over an array where the index order is important. You should better use a for loop with a numeric index. The for…of Loop ES6 ES6 introduces a new for-of loop which allows us to iterate over arrays or other iterable objects (e.g. strings) very easily. Also, the code inside the loop is executed for each element of the iterable object. The following example will show you how to loop through arrays and strings using this loop. Example To learn about other ES6 features, please check out the JavaScript ES6 features chapter.

Sorting an Array Sorting is a common task when working with arrays. It would be used, for instance, if you want to display the city or county names in alphabetical order. The JavaScript Array object has a built-in method sort() for sorting array elements in alphabetical order. The following example demonstrates how it works: Example Reversing an Array You can use the reverse() method to reverse the order of the elements of an array. This method reverses an array in such a way that the first array element becomes the last, and the last array element becomes the first. Here’s an example: Example Note: The sort() and reverse() method modifies the original array and return a reference to the same array, as you can see in the above examples. Sorting Numeric Arrays The sort() method may produce unexpected result when it is applied on the numeric arrays (i.e. arrays containing numeric values). For instance: Example As you can see, the result is different from what we’ve expected. It happens because, the sort() method sorts the numeric array elements by converting them to strings (i.e. 20 becomes “20”, 100 becomes “100”, and so on), and since the first character of string “20” (i.e. “2”) comes after the first character of string “100” (i.e. “1”), that’s why the value 20 is sorted after the 100. To fix this sorting problem with numeric array, you can pass a compare function, like this: Example As you can see, this time we’ve got the correct result. Let’s see how it works. When compare function is specified, array elements are sorted according to the return value of the compare function. For example, when comparing a and b: Hence, since 5 – 20 = -15 which is less than 0, therefore 5 comes first, similarly 20 – 10 = 10 which is greater than 0, therefore 10 comes before 20, likewise 20 – 75 = -55 which is less than 0, so 20 comes before 75, similarly 50 comes before 75, and so on. Finding the Maximum and Minimum Value in an Array You can use the apply() method in combination with the Math.max() and Math.min() to find the maximum and minimum value inside an array, like this: Example The apply() method provides a convenient way to pass array values as arguments to a function that accepts multiple arguments in an array-like manner, but not an array (e.g. Math.max() and Math.min() methods here). So, the resulting statement Math.max.apply(null, numbers) in the example above is equivalent to the Math.max(3, -7, 10, 8, 15, 2). Sorting an Array of Objects The sort() method can also be used for sorting object arrays using the compare function. The following example will show you how to sort an array of objects by property values: Example