Const is exactly like let, but defines a constant reference for a variable. We can't change the value of a constant reference. If we put a primitive value in a constant, then the value will be protected from getting changed. Note that if the constant is an object, like this one, we can still change the properties of the object, but we can't change the object itself. If we want a completely immutable object, then we'll have to use something else, like object.freeze or Immutable JS.
Constants are popularly used when importing things from other libraries so that they don't get changed accidentally. They're also used to define functions because we rarely need to update a function after we define it the first time. Speaking of functions, I think someone on the TC39 committee hates the word function, because with the latest ECMAScript features, we can completely avoid typing it. Instead, we can use the new arrow functions and text. The arrow comes after the arguments.
The arrow functions and text is even more concise when the function takes one argument that has one line to return something. We can omit the parentheses, the curly braces, and even the return keyword, and the function will be the same. These one-liner functions are usually used for callbacks in simple map reduced filter operations and functional programming in general. Also, when defining a function as a property on an object, we can use this new shorthand notation, which I really like, even more than the arrow functions.
Arrow functions, beside being shorter and more fun to type, are lexically scoped, which is a fancy way of saying that they close over the this keyword available on their parent, while regular functions use the caller to determine what's inside their this keyword. For example, in a Node module, the top level, this keyword, is the exports object, which is empty by default. I'm adding a property i here just to identify it. In here, I have a util object, which defines two functions.
F1 is regular scope, f2 is arrow scope. When we normally call f1, the this keyword in f1 will be the caller, which is the util object, while the this keyword in f2 will be the parent scope, which is the exports object. This is a huge benefit when working with closures and we will be taking advantage of that. When we define an object like X here and we have other objects, functions, or modules that we want to export as properties on the X object, we can omit the values when the property name and the values are the same just like this, which is equivalent to the commented version here.
When we want to read properties from X and assign them as variables with the same name, we can use the destructure syntax instead of typing the name twice, like this. This is much more impressive when we need to destructure multiple properties from the same object. Without destructure, this line would need to be three lines. You'll see me using this pattern to import objects and functions from libraries when I use Node's require function. For example, the React library has a component property.
So instead of doing const Component = require('react').component, we can destructure the component out of the required line like this. Destructuring works inside function arguments, too. If the argument is an object, instead of having one variable to represent the object, we can destructure the properties that we want from that object into variables available in the function body. Function arguments, including destructured one, also get default values if we don't specify a value for them when we call the function, like this.
We can still specify a default value here. We can also use rest parameters to capture the remaining arguments into an array like numbers here, which has the three binary numbers left after naming the first base argument. Numbers will be an array thanks to rest parameters. We can also use a three dots operator to pass array elements as positional arguments. For example, to clone an array and add elements to it. This is very helpful when we work with immutable objects and it's also widely popular with React components properties.
- Configuring webpack and Babel
- Working with native Node modules
- Creating an Express server
- Working with React components and JSX
- Loading and working with test mock data
- Fetching data from a remote API
- Working with data in MongoDB
- Isomorphic rendering on the server
- Front-end routing and back-end routing