[JavaScript] ECMAScript 6
Scopes of the var and let Keywords
var i = 'global scope'
function checkScope() {
let i = 'function scope';
console.log(i); // function scope
if (true) {
i = 'block scope';
console.log(i); // block scope
}
console.log(i); // block scope
return i;
}
console.log(checkScope()); // block scope
console.log(i); // global scope
When you declare a variable with the var
keyword, it is declared globally, or locally if declared inside a function.
When you declare a variable with the let
keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.
Mutate an Array Declared with const
const s = [5, 6, 7];
s = [1, 2, 3]; // error
s[2] = 45;
console.log(s); // [5, 6, 45]
The const
keyword in JavaScript to declare variables whose value can be initialized only at the time of declaration.
Some developers prefer to assign all their variables using const
by default unless they know they will need to reassign the value. Only in that case, they use let
.
However, objects (including arrays and functions) assigned to a variable using const
are still mutable.
Object.freeze()
let obj = {
name:"Jame",
age:45
};
Object.freeze(obj);
obj.name = "Mike"; // error
obj.age = 32; // error
const
declaration alone doesn't protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze
to prevent data mutation.
Arrow Functions
// Function
function func() {
//Your Code Here
}
// Anonymous function
function() {
//Your Code Here
}
// Inline function
var func = function() {
//Your Code Here
};
We often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else. ES6 allows us to not have to write anonymous functions this way.
// arrow function
const myFunc = () => {
const myVar = "value";
return myVar;
}
// When there's only a return value
const myFunc = () => "value";
Instead, you can use the arrow function syntax. When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword return
as well as the brackets surrounding the code.
Default Parameters
const greeting = (name = "Anonymous") => "Hello " + name;
console.log(greeting("John")); // Hello John
console.log(greeting()); // Hello Anonymous
ES6 allows function parameters to have default values.
Rest Parameter
function howMany(...args) {
return args.length;
}
console.log(howMany(0, 1, 2)); // 3
console.log(howMany("string", null, [1, 2, 3], { })); //4
The rest parameter (...) allows a function to treat an indefinite number of arguments as an array.
The Spread Operator
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
console.log(one); // 1
console.log(two); // 2
console.log(rest); // [ 3, 4, 5, 6 ]
The spread operator ( ... ) allows us to quickly copy all or part of an existing array or object into another array or object.
Destructuring Assignment
//Array destructuring
[x, y, ...rest] = [10, 20, 30, 40, 50];
console.log(x); // 10
console.log(y); // 20
console.log(rest); // [30, 40, 50]
//Object destructuring
({x, y, ...rest} = {x: 10, y: 20, m: 30, n: 40});
console.log(x); // 10
console.log(y); // 20
console.log(rest); // {m: 30, n: 40}
Destructuring Assignment is a JavaScript expression that allows us to unpack values from arrays, or properties from objects, into distinct variables data can be extracted from arrays, objects, nested objects and assigned to variables.
Template Literals
let text = `He's called "James"`;
Template Literals use back-ticks (``) rather than quotes ("") to define a string. With template literals, you can use both single and double quotes inside a string.
let firstName = "firstName";
let lastName = "lastName";
let text =
`Hello,
my name is ${firstName}, ${lastName}!`;
Template literals allow you to create multi-line strings and to use string interpolation features to create strings.