ES6

ES6 (also called "ECMAScript 6" and "ECMAScript 2015") has introduced some new features to JavaScript. We shall use ES6 throughout these notes.

semi-colon at the end of a statement

Semicolons are optional in ES6. We do not need to place a ; semi-colon at the end of a statement if the statement is terminated by a linebreak. If multiple statements are on the same line, then semi-colons are needed to separate the statements.

An example that does not include semi-colons at the end of each line (Run Example)

<!DOCTYPE html> 
<html> 
    <head>
        <title>Example removing semi-colons function</title>
        <script>
            let x = 20
            let y = 30
            let total = x + y

            console.log(`x + y = ${total}`)
        </script>
    </head>
    <body> 
        <p>View the console output in browser's Web DevTools (F12)</p>
    </body> 
</html>

What happens if you place the four highlighted statements onto one line without using any semicolons?

What happens if you place the four highlighted statements onto one line while using semicolons to separate each statement?

let and const

The let statement is used to declare a variable. let is the same as var in older versions of JavaScript. We should always use let.

The const statement is used to declare a constant. The value of a const can only be set once. It cannot be changed afterwards.

Multiple Variable Declaration

When declaring multiple variables, we can use a , comma as a separator between the variables.

Example using a , comma as a separator between variables (Run Example)

<!DOCTYPE html> 
<html> 
    <head>
        <title>Example removing semi-colons function</title>
        <script>
            let x = 20, 
                y = 30, 
                total = x + y 

            console.log(`x + y = ${total}`)
        </script>
    </head>
    <body> 
        <p>View the console output in browser's Web DevTools (F12)</p>
    </body> 
</html>

Default Parameter Values

ES6 allows function parameters to have default values.

Example of a function with a default parameter value (Run Example)

<!DOCTYPE html> 
<html> 
    <head>
        <title>Example using reduce() function</title>
        <script>
            function setCountry(country = "Ireland") // set default parameter to Ireland
            {
                console.log(`Country is: ${country}`)
            }
            
            setCountry("France")
            setCountry() // use default parameter
        </script>
    </head>
    <body> 
        <p>View the console output in browser's Web DevTools (F12)</p>
    </body> 
</html>