Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav id="navbar">
  <header>
    <h1>JS Documentation</h1>
  </header>
  <ul>
    <li><a href="#Introduction" class="nav-link">Introduction</a></li>
    <li><a href="#What_you_should_already_know" class="nav-link">What you should already know</a></li>
    <li><a href="#JavaScript_and_Java" class="nav-link">JavaScript and Java</a></li>
    <li><a href="#Hello_world" class="nav-link">Hello world</a></li>
    <li><a href="#Variables" class="nav-link">Variables</a></li>
    <li><a href="#Declaring_variables" class="nav-link">Declaring variables</a></li>
    <li><a href="#Variable_scope" class="nav-link">Variable scope</a></li>
    <li><a href="#Global_variables" class="nav-link">Global variables</a></li>
    <li><a href="#Constants" class="nav-link">Constants</a></li>
    <li><a href="#Data_types" class="nav-link">Data types</a></li>
    <li><a href="#if...else_statement" class="nav-link">if...else statement</a></li>
    <li><a href="#switch_statement" class="nav-link">switch statement</a></li>
    <li><a href="#for_statement" class="nav-link">for statement</a></li>
    <li><a href="#while_statement" class="nav-link">while statement</a></li>
    <li><a href="#Function_declarations" class="nav-link">Function declarations</a></li>
    <li><a href="#Reference" class="nav-link">Reference</a></li>
  </ul>
</nav>
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>
      <h2>Introduction</h2>
    </header>
    <p>
      JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.
    </p>
    <p>
      JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:
    </p>
    <ul>
      <li>
        Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.
      </li>
      <li>
        Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.
      </li>
    </ul>
    <section class="main-section" id="What_you_should_already_know">
      <header>
        <h2>What you should already know</h2>
      </header>
      <p>
        This guide assumes you have the following basic background:
      </p>
      <ul>
        <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
        <li>Good working knowledge of HyperText Markup Language (HTML).</li>
        <li>Some programming experience. If you are new to programming, try one of the tutorials linked on the main page about JavaScript.</li>
      </ul>
    </section>
  </section>
  <section class="main-section" id="JavaScript_and_Java">
    <header>
      <h2>JavaScript and Java</h2>
    </header>
    <p>
      JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.
    </p>
    <p>
      In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.
    </p>
    <p>
      JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed.
    </p>
  </section>
  <section class="main-section" id="Hello_world">
    <header>
      <h2>Hello world</h2>
    </header>
    <p>
      To get started with writing JavaScript, open the Developer Console (press F12 on the keyboard) and write your first "Hello world" JavaScript code:
    </p>
    <code>
      <pre>
        function greetMe(yourName) {
          alert('Hello ' + yourName);
        }
        
        greetMe('World');
      </pre>
    </code>
    <p>
      Then just press Enter to watch it unfold in your browser!
    </p>
  </section>
  <section class="main-section" id="Variables">
    <header>
      <h2>Variables</h2>
    </header>
    <p>
      You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.
    </p>
    <p>
      A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($). Subsequent characters can also be digits (0–9).
    </p>
    <p>
      Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) as well as "a" through "z" (lowercase).
    </p>
    <p>You can use most of ISO 8859-1 or Unicode letters such as å and ü in identifiers. (For more details, see <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6" target="_blank">this blog post</a>.) You can also use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals" target="_blank">Unicode escape sequences</a> as characters in identifiers.</p>
    <p>
      Some examples of legal names are Number_hits, temp99, $credit, and _name.
    </p>
  </section>
  <section class="main-section" id="Declaring_variables">
    <header>
      <h2>Declaring variables</h2>
    </header>
    <p>
      You can declare a variable in three ways:
    </p>
    <ul>
      <li>
        With the keyword var. For example, <code>var x = 42</code>. This syntax can be used to declare both local and global variables, depending on the execution context.
      </li>
      <li>
        With the keyword const or let. For example, <code>let y = 13</code>. This syntax can be used to declare a block-scope local variable. (See <a href="#Variable_scope">Variable scope</a> below.)
      </li>
      <li>
        By simply assigning it a value.  For example, <code>x = 42;</code>.  This form creates an <b>undeclared global</b> variable. It also generates a strict JavaScript warning (under "strict mode" ("use strict;")). Undeclared global variables can often lead to unexpected behavior. Thus, it is discouraged to use undeclared global variables.
      </li>
    </ul>
  </section>
  <section class="main-section" id="Variable_scope">
    <header>
      <h2>Variable scope</h2>
    </header>
    <p>
      When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available only within that function.
    </p>
    <p>
      JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared within a block is local to the <i>function (or global scope)</i> that the block resides within.
    </p>
    <p>
      For example, the following code will log 5, because the scope of x is the global context (or the function context if the code is part of a function). The scope of x is not limited to the immediate if statement block.
    </p>
    <code>
      <pre>
        if (true) {
          var x = 5;
        }
      
        console.log(x);  // x is 5
      </pre>
    </code>
    <p>
      This is an example of <b>hoisting</b>, and it also happens with functions declared using the function keyword. When you use let or const to declare a variable, this will not happen:
    </p>
    <code>
      <pre>
        if (true) { 
          let y = 5; 
        } 
        
        console.log(y); // ReferenceError: y is not defined
      </pre>
    </code>
    <p>or:</p>
    <code>
      <pre>
        if (true) { 
          const y = 5; 
        } 
        
        console.log(y); // ReferenceError: y is not defined
      </pre>
    </code>
    <p>
      <b>Note about hoisting:</b> Variables that are hoisted return a value of undefined. So even if you declare and initialize after you use or refer to this variable, it still returns undefined.
    </p>
    <code>
      <pre>
        /**
         * Example 1
         */
        console.log(x === undefined); // true
        var x = 3;

        /**
         * Example 2
         */
        // will return a value of undefined
        var myvar = 'my value';
 
        (function() {
          console.log(myvar); // undefined
          var myvar = 'local value';
        })();
      </pre>
    </code>
  </section>
  <section class="main-section" id="Global_variables">
    <header>
      <h2>Global variables</h2>
    </header>
    <p>
      Global variables are in fact properties of the global object.
    </p>
    <p>
      In web pages, the global object is window, so you can set and access global variables using the window.variable syntax.
    </p>
    <p>
      Consequently, you can access global variables declared in one window or frame from another window or frame by specifying the window or frame name. For example, if a variable called phoneNumber is declared in a document, you can refer to this variable from an iframe as parent.phoneNumber.
    </p>
  </section>
  <section class="main-section" id="Constants">
    <header>
      <h2>Constants</h2>
    </header>
    <p>
      You can create a read-only, named constant with the const keyword.
    </p>
    <p>
      The syntax of a constant identifier is the same as any variable identifier: it must start with a letter, underscore, or dollar sign ($), and can contain alphabetic, numeric, or underscore characters.
    </p>
    <code>
      <pre>const PI = 3.14;</pre>
    </code>
    <p>
      A constant cannot change value through assignment or be re-declared while the script is running. It must be initialized to a value.
    </p>
    <p>
      The scope rules for constants are the same as those for let block-scope variables. If the const keyword is omitted, the identifier is assumed to represent a variable.
    </p>
    <p>
      You cannot declare a constant with the same name as a function or variable in the same scope. 
      <br />
      For example:
    </p>
    <code>
      <pre>
        // THIS WILL CAUSE AN ERROR
        function f() {};
        const f = 5;

        // THIS WILL CAUSE AN ERROR TOO
        function f() {
          const g = 5;
          var g;

          //statements
        }
      </pre>
    </code>
    <p>
      However, the properties of objects assigned to constants are not protected, so the following statement is executed without problems.
    </p>
    <code>
      <pre>
        const MY_OBJECT = {'key': 'value'};
        MY_OBJECT.key = 'otherValue';
      </pre>
    </code>
    <p>
      Also, the contents of an array are not protected, so the following statement is executed without problems.
    </p>
    <code>
      <pre>
        const MY_ARRAY = ['HTML','CSS'];
        MY_ARRAY.push('JAVASCRIPT');
        console.log(MY_ARRAY); //logs ['HTML','CSS','JAVASCRIPT'];
      </pre>
    </code>
  </section>
  <section class="main-section" id="Data_types">
    <header>
      <h2>Data types</h2>
    </header>
    <p>
      The latest ECMAScript standard defines eight data types:
    </p>
    <ul>
      <li>Seven data types that are primitives:</li>
        <ol>
          <li>Boolean. true and false.</li>
          <li>null. A special keyword denoting a null value. (Because JavaScript is case-sensitive, null is <i>not</i> the same as Null, NULL, or any other variant.)</li>
          <li>undefined. A top-level property whose value is not defined.</li>
          <li>Number. An integer or floating point number. For example: 42 or 3.14159.</li>
          <li>BigInt. An integer with arbitrary precision. For example: 9007199254740992n.</li>
          <li>String. A sequence of characters that represent a text value. For example: "Howdy"</li>
          <li>Symbol (new in ECMAScript 2015). A data type whose instances are unique and immutable.</li>
        </ol>
      <li>and Object</li>
    </ul>
    <p>
      Although these data types are relatively few, they enable you to perform useful functions with your applications. Objects and functions are the other fundamental elements in the language. You can think of objects as named containers for values, and functions as procedures that your script can perform.
    </p>
  </section>
  <section class="main-section" id="if...else_statement">
    <header>
      <h2>if...else statement</h2>
    </header>
    <p>
      Use the if statement to execute a statement if a logical condition is <code>true</code>. Use the optional else clause to execute a statement if the condition is false.
    </p>
    <p>An if statement looks like this:</p>
    <code>
      <pre>
        if (condition) {
          statement_1;
        } else {
          statement_2;
        }
      </pre>
    </code>
    <p>Here, the condition can be any expression that evaluates to true or false. (See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description" target="_blank">Boolean</a> for an explanation of what evaluates to true and false.)</p>
      <p>
        If condition evaluates to true, statement_1 is executed. Otherwise, statement_2 is executed. statement_1 and statement_2 can be any statement, including further nested if statements.
      </p>
      <p>
        You can also compound the statements using else if to have multiple conditions tested in sequence, as follows:
      </p>
      <code>
        <pre>
          if (condition_1) {
            statement_1;
          } else if (condition_2) {
            statement_2;
          } else if (condition_n) {
            statement_n;
          } else {
            statement_last;
          } 
        </pre>
      </code>
      <p>
        In the case of multiple conditions, only the first logical condition which evaluates to true will be executed. To execute multiple statements, group them within a block statement ({ … }).
      </p>
      <h4>Best practice</h4>
      <p>In general, it's good practice to always use block statements—<i>especially</i> when nesting if statements:</p>
      <code>
        <pre>
          if (condition) {
            statement_1_runs_if_condition_is_true;
            statement_2_runs_if_condition_is_true;
          } else {
            statement_3_runs_if_condition_is_false;
            statement_4_runs_if_condition_is_false;
          }
        </pre>
      </code>
      <p>
        It's unwise to use simple assignments in a conditional expression, because the assignment can be confused with equality when glancing over the code.
      </p>
      <p>
        For example, do <i>not</i> write code like this:
      </p>
      <code>
        <pre>
          // Prone to being misread as "x == y"
          if (x = y) {
            /* statements here */
          }
        </pre>
      </code>
      <p>
        If you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment, like this:
      </p>
      <code>
        <pre>
          if ((x = y)) {
            /* statements here */
          }
        </pre>
      </code>
    <h4>Falsy values</h4>
    <p>
      The following values evaluate to false (also known as Falsy values):
    </p>
    <ul>
      <li>false</li>
      <li>undefined</li>
      <li>null</li>
      <li>0</li>
      <li>NaN</li>
      <li>the empty string ("")</li>
    </ul>
    <p>All other values—including all objects—evaluate to true when passed to a conditional statement.</p>
    <p>
      <b>Caution:</b> Do not confuse the primitive boolean values true and false with the true and false values of the Boolean object!
    </p>
    <p>
      For example:
    </p>
    <code>
      <pre>
        var b = new Boolean(false);
        if (b)         // this condition evaluates to true
        if (b == true) // this condition evaluates to false
      </pre>
    </code>
    <h4>Example</h4>
    <p>
      In the following example, the function checkData returns true if the number of characters in a Text object is three. Otherwise, it displays an alert and returns false.
    </p>
    <code>
      <pre>
        function checkData() {
          if (document.form1.threeChar.value.length == 3) {
            return true;
          } else {
            alert(
                'Enter exactly three characters. ' +
                `${document.form1.threeChar.value} is not valid.`);
            return false;
          }
        }
      </pre>
    </code>
  </section>
  <section class="main-section" id="switch_statement">
    <header>
      <h2>switch statement</h2>
    </header>
    <p>
      A switch statement allows a program to evaluate an expression and attempt to match the expression's value to a case label. If a match is found, the program executes the associated statement.
    </p>
    <p>
      A switch statement looks like this:
    </p>
    <code>
      <pre>
        switch (expression) {
          case label_1:
            statements_1
            [break;]
          case label_2:
            statements_2
            [break;]
            …
          default:
            statements_def
            [break;]
        }
      </pre>
    </code>
    <p>
      JavaScript evaluates the above switch statement as follows:
    </p>
    <ul>
      <li>
        The program first looks for a case clause with a label matching the value of expression and then transfers control to that clause, executing the associated statements.
      </li>
      <li>
        If no matching label is found, the program looks for the optional default clause:
        <ul>
          <li>If a default clause is found, the program transfers control to that clause, executing the associated statements.</li>
          <li>If no default clause is found, the program resumes execution at the statement following the end of switch.</li>
          <li>(By convention, the default clause is written as the last clause, but it does not need to be so.)</li>
        </ul>
      </li>
    </ul>
    <h3>break statements</h3>
    <p>
      The optional break statement associated with each case clause ensures that the program breaks out of switch once the matched statement is executed, and then continues execution at the statement following switch. If break is omitted, the program continues execution inside the switch statement (and will evaluate the next case, and so on).
    </p>
    <h4>Example</h4>
    <p>
      In the following example, if fruittype evaluates to 'Bananas', the program matches the value with case 'Bananas' and executes the associated statement. When break is encountered, the program exits the switch and continues execution from the statement following switch. If break were omitted, the statement for case 'Cherries' would also be executed.
    </p>
    <code>
      <pre>
        switch (fruittype) {
          case 'Oranges':
            console.log('Oranges are $0.59 a pound.');
            break;
          case 'Apples':
            console.log('Apples are $0.32 a pound.');
            break;
          case 'Bananas':
            console.log('Bananas are $0.48 a pound.');
            break;
          case 'Cherries':
            console.log('Cherries are $3.00 a pound.');
            break;
          case 'Mangoes':
            console.log('Mangoes are $0.56 a pound.');
            break;
          case 'Papayas':
            console.log('Mangoes and papayas are $2.79 a pound.');
            break;
          default:
            console.log(`Sorry, we are out of ${fruittype}.`);
        }
        console.log("Is there anything else you'd like?");
      </pre>
    </code>
  </section>
  <section class="main-section" id="for_statement">
    <header>
      <h2>for statement</h2>
    </header>
    <p>
      A for loop repeats until a specified condition evaluates to false. The JavaScript for loop is similar to the Java and C for loop.
    </p>
    <p>
      A for statement looks as follows:
    </p>
    <code>
      <pre>
        for ([initialExpression]; [condition]; [incrementExpression])
          statement
      </pre>
    </code>
    <p>
      When a for loop executes, the following occurs:
    </p>
    <ol>
      <li>
        The initializing expression initialExpression, if any, is executed. This expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. This expression can also declare variables.
      </li>
      <li>
        The condition expression is evaluated. If the value of condition is true, the loop statements execute. If the value of condition is false, the for loop terminates. (If the condition expression is omitted entirely, the condition is assumed to be true.  This creates an infinite loop.)
      </li>
      <li>
        The statement executes. To execute multiple statements, use a block statement ({ ... }) to group those statements.
      </li>
      <li>
        If present, the update expression incrementExpression is executed.
      </li>
      <li>
        Control returns to Step 2.
      </li>
    </ol>
    <h4>Example</h4>
    <p>
      In the example below, there is a for loop that continues as long as the variable i is less than or equal to 10, and prints out doubles of i to the console.
    </p>
    <code>
      <pre>
        for (let i = 1; i <= 10; i++) {
          console.log(i * 2);
        }
      </pre>
    </code>
  </section>
  <section class="main-section" id="while_statement">
    <header>
      <h2>while statement</h2>
    </header>
    <p>
      A while statement executes its statements as long as a specified condition evaluates to true. A while statement looks as follows:
    </p>
    <code>
      <pre>
        while (condition)
          statement
      </pre>
    </code>
    <p>
      If the <i>condition</i> becomes false, statement within the loop stops executing and control passes to the statement following the loop.
    </p>
    <p>
      The condition test occurs <i>before</i> statement in the loop is executed. If the condition returns true, statement is executed and the <i>condition</i> is tested again. If the condition returns false, execution stops, and control is passed to the statement following while.
    </p>
    <p>
      To execute multiple statements, use a block statement (<code>{ ... }</code>) to group those statements.
    </p>
    <h4>Example 1</h4>
    <p>
      The following while loop iterates as long as n is less than 3:
    </p>
    <code>
      <pre>
        let n = 0;
        let x = 0;
        while (n < 3) {
          n++;
          x += n;
        }
      </pre>
    </code>
      With each iteration, the loop increments n and adds that value to x. Therefore, x and n take on the following values:
      <ul>
        <li>After the first pass: n = 1 and x = 1</li>
        <li>After the second pass: n = 2 and x = 3</li>
        <li>After the third pass: n = 3 and x = 6</li>
      </ul>
      <p>
        After completing the third pass, the condition n &lt; 3 is no longer true, so the loop terminates.
      </p>
      <h4>Example 2</h4>
      <p>
        Avoid infinite loops. Make sure the condition in a loop eventually becomes false—otherwise, the loop will never terminate! The statements in the following while loop execute forever because the condition never becomes false:
      </p>
      <code>
        <pre>
          // Infinite loops are bad!
          while (true) {
            console.log('Hello, world!');
          }
        </pre>
      </code>
  </section>
  <section class="main-section" id="Function_declarations">
    <header>
      <h2>Function declarations</h2>
    </header>
    <p>
      A <b>function definition</b> (also called a <b>function declaration</b>, or <b>function statement</b>) consists of the <code>function</code> keyword, followed by:
    </p>
    <ul>
      <li>The name of the function.</li>
      <li>
        A list of parameters to the function, enclosed in parentheses and separated by commas.
      </li>
      <li>The JavaScript statements that define the function, enclosed in curly brackets, {...}.</li>
    </ul>
    <p>
      For example, the following code defines a simple function named <code>square</code>:
    </p>
    <code>
      <pre>
        function square(number) {
          return number * number;
        }
      </pre>
    </code>
    <p>
      The function square takes one parameter, called number The function consists of one statement that says to return the parameter of the function (that is, number) multiplied by itself. The statement return specifies the value returned by the function:
    </p>
    <code>
      <pre>
        return number * number;
      </pre>
    </code>
    <p>
      Primitive parameters (such as a number) are passed to functions <b>by value</b>; the value is passed to the function, but if the function changes the value of the parameter, <b>this change is not reflected globally or in the calling function</b>.
    </p>
    <p>
      If you pass an object (i.e. a non-primitive value, such as <code>Array</code> or a user-defined object) as a parameter and the function changes the object's properties, that change is visible outside the function, as shown in the following example:
    </p>
    <code>
      <pre>
        function myFunc(theObject) {
          theObject.make = 'Toyota';
        }

        let mycar = {make: 'Honda', model: 'Accord', year: 1998};
        let x, y;

        x = mycar.make; // x gets the value "Honda"

        myFunc(mycar);
        y = mycar.make; // y gets the value "Toyota"
                        // (the make property was changed by the function)
      </pre>
    </code>
    <h3>Function expressions</h3>
    <p>
      While the function declaration above is syntactically a statement, functions can also be created by a function expression.
    </p>
    <p>
      Such a function can be <b>anonymous</b>; it does not have to have a name. For example, the function square could have been defined as:
    </p>
      <code>
        <pre>
          const square = function(number) { return number * number };
          let x = square(4); // x gets the value 16
        </pre>
      </code>
      <p>
        However, a name can be provided with a function expression. Providing a name allows the function to refer to itself, and also makes it easier to identify the function in a debugger's stack traces:
      </p>
      <code>
        <pre>
          const factorial = function fac(n) { return n &lt; 2 ? 1 : n * fac(n - 1) };
          
          console.log(factorial(3));
        </pre>
      </code>
      <p>
        Function expressions are convenient when passing a function as an argument to another function. The following example shows a map function that should receive a function as first argument and an array as second argument. 
      </p>
      <code>
        <pre>
          function map(f, a) {
            let result = []; // Create a new Array
            let i; // Declare variable
            for (i = 0; i != a.length; i++)
              result[i] = f(a[i]);
            return result;
          }
        </pre>
      </code>
      <p>
        In the following code, the function receives a function defined by a function expression and executes it for every element of the array received as a second argument.
      </p>
      <code>
        <pre>
          function map(f, a) {
            let result = []; // Create a new Array
            let i; // Declare variable
            for (i = 0; i != a.length; i++)
              result[i] = f(a[i]);
            return result;
          }
          const f = function(x) {
            return x * x * x; 
          }
          let numbers = [0, 1, 2, 5, 10];
          let cube = map(f,numbers);
          console.log(cube);
        </pre>
      </code>
      <p>
        Function returns: [0, 1, 8, 125, 1000].
      </p>
      <p>
        In JavaScript, a function can be defined based on a condition. For example, the following function definition defines myFunc only if num equals 0:
      </p>
      <code>
        <pre>
          let myFunc;
          if (num === 0) {
            myFunc = function(theObject) {
              theObject.make = 'Toyota';
            }
          }
        </pre>
      </code>
      <p>
        In addition to defining functions as described here, you can also use the Function constructor to create functions from a string at runtime, much like eval().
      </p>
      <p>
        A <b>method</b> is a function that is a property of an object. Read more about objects and methods in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects" target="_blank">Working with objects</a>.
      </p>
  </section>
  <section class="main-section" id="Reference">
    <header>
      <h2>Reference</h2>
    </header>
    <p>
      Information taken from <a href="https://developer.mozilla.org/en-US" target="_blank">MDN</a>'s docs.
    </p>
  </section>
</main>
              
            
!

CSS

              
                html, body {
  width: 290px;
  font-family: Helvetica-Neue, Arial, sans-serif;
  color: #4d4d4d;
}

#navbar {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 290px;
  width: 300px;
  height: 100%;
  font-weight: thin;
  border-right: 2px solid;
}

.nav-link {
  display: block;
  padding: 10px 30px;
  text-decoration: none;
  color: #333333;
}

header {
  margin: 15px;
  text-align: center;
  margin: 10px;
  font-weight: thin;
}

#main-doc header {
  text-align: left;
  margin: 0;
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

nav {
  display: block;
}

#navbar li {
  list-style-type: none;
  width: 100%;
  border-top: 1px solid;
  position: relative;
  padding: 10px;
}

code {
  display: block;
  background-color: #cccccc;
  padding: 20px 25px;
  margin: 10px;
  position: relative;
  text-align: left;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
  border-radius: 5px;
}

li {
  display: list-item;
  text-align: --webkit-match-parent;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 10px;
}

@media screen and (max-width: 815px) {
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
    width: 100%;
    padding-right: 170px;
    text-align: left;
  }
  
  code {
    width: 100%;
    padding: 15px 100px 16px 15px;
    min-width: 233px;
    overflow: auto;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console