A little about ES6

ES6 is the new standard in JavaScript.

Declaring Variables in ES6

Const

ES6 introduced constants, and they are already supported in most browsers. A constant is a variable that cannot be changed. It is the same concept as constants in other language.
Before constants, all we had were variables, and variables could be overwritten.

var pizza = true
pizza = false
console.log(pizza) // false

We cannot reset the value of a constant variable, and it will generate a console error if we try to overwrite the value.

const pizza = true
pizza = false

Let

JavaScript now has lexical variable scoping. In JavaScript, we create code blocks with curly brackets. With functions, these curly brackets block off the scope of variables. On the other hand, think about if/else statements. If you come from other languages, you might assume that these blocks would also block variable scope. This is not the case.

If a variable is created inside of an if/else block, that variable is not scoped to the block.

var topic = "JavaScript"
if (topic) {
var topic = "React"
console.log('block', topic) // block React
}
console.log('global', topic) // global React

The topic variable inside the if block resets the value of topic.

With the let keyword, we can scope a variable to any code block. Using let protects the value of the global variable.

var topic = "JavaScript"
if (topic) {
let topic = "React"
console.log('block', topic) // React
}
console.log('global', topic) // JavaScript

The value of topic is not reset outside of the block.

Template Strings

Template strings provide us with an alternative to string concatenation. They also allow us to insert variables into a string. Traditional string concatenation uses plus signs or commas to compose a string using
variable values and strings.

console.log(lastName + ", " + firstName + “ “ + middleName)

With a template, we can create one string and insert the variable values by surrounding them with ${variable}.

console.log(`${lastName}, ${firstName} ${middleName}`)

Any JavaScript that returns a value can be added to a template string between the ${ } in a template string.

Default Parameters

Languages including C++ and Python allow developers to declare default values for function arguments. Default parameters are included in the ES6 spec, so in the event that a value is not provided for the argument, the default value will be used.

For example, we can set up default strings.

function logActivity(name="Shane McConkey", activity="skiing") {
console.log( `${name} loves ${activity}` )
}

If no arguments are provided to the logActivity function, it will run correctly using the default values. Default arguments can be any type, not just strings.

var defaultPerson = {
name: {
first: "Shane",
last: "McConkey"
},
favActivity: "skiing"
}
function logActivity(p=defaultPerson) {
console.log(`${p.name.first} loves ${p.favActivity}`)
}

Arrow Functions

Arrow functions are a useful new feature of ES6. With arrow functions, you can create functions without using the function keyword. You also often do not have to use the return keyword.

var lordify = function(firstname) {
return `${firstname} of Canterbury`
}
console.log( lordify("Dale") ) // Dale of Canterbury
console.log( lordify("Daryle") ) //Daryle of Canterbury

With an arrow function, we can simplify the syntax tremendously.

var lordify = firstname => `${firstname} of Canterbury`
Like what you read? Give Julián Cruz a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.