I did a lot of coding today.
I’m not sure what to write about today. I have a medication management appointment on Monday. I’m looking forward to this. I’d like to get back onto my medication. Being off my medication doesn’t do well with my moods and focus. I just want to feel happy and if meds help then I’d like to be back on them. My moods have been all over the place.
Like I said, I don’t have much to write about today. I feel if I write about how I’m feeling right now or my moods, it will just bring everyone down. So it’s best not to write.
On a happier note, my foot is feeling a little better. In not as much pain as it was in yesterday. And tomorrow is Friday! So that is always something to look forward to. I have therapy on Monday also, my appointments are back to back but medication management only takes about 20 minutes.
Still trying to decide what is for dinner. We had an idea but now not too sure about it.
JavaScript notes…
——————————————-
In some cases, you can destructure the object in a function argument itself.
Consider the code below:
const profileUpdate = (profileData) => {
const { name, age, nationality, location } = profileData;
}
This effectively destructures the object sent into the function. This can also be done in-place:
const profileUpdate = ({ name, age, nationality, location }) => {
}
When profileData is passed to the above function, the values are destructured from the function parameter for use within the function.
A new feature of ES6 is the template literal. This is a special type of string that makes creating complex strings easier.
Template literals allow you to create multi-line strings and to use string interpolation features to create strings.
Consider the code below:
const person = {
name: "Zodiac Hasbro",
age: 56
};
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;
console.log(greeting);
The console will display the strings Hello, my name is Zodiac Hasbro! and I am 56 years old..
A lot of things happened there. Firstly, the example uses backticks (`), not quotes (‘ or “), to wrap the string. Secondly, notice that the string is multi-line, both in the code and the output. This saves inserting \n within strings. The ${variable} syntax used above is a placeholder. Basically, you won’t have to use concatenation with the + operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with ${ and }. Similarly, you can include other expressions in your string literal, for example ${a + b}. This new way of creating strings gives you more flexibility to create robust strings.
ES6 adds some nice support for easily defining object literals.
Consider the following code:
const getMousePosition = (x, y) => ({
x: x,
y: y
});
getMousePosition is a simple function that returns an object containing two properties. ES6 provides the syntactic sugar to eliminate the redundancy of having to write x: x. You can simply write x once, and it will be converted tox: x (or something equivalent) under the hood. Here is the same function from above rewritten to use this new syntax:
const getMousePosition = (x, y) => ({ x, y });
getMousePosition is a simple function that returns an object containing two properties. ES6 provides the syntactic sugar to eliminate the redundancy of having to write x: x. You can simply write x once, and it will be converted tox: x (or something equivalent) under the hood. Here is the same function from above rewritten to use this new syntax:
const getMousePosition = (x, y) => ({ x, y });
When defining functions within objects in ES5, we have to use the keyword function as follows:
const person = {
name: "Taylor",
sayHello: function() {
return `Hello! My name is ${this.name}.`;
}
};
With ES6, you can remove the function keyword and colon altogether when defining functions in objects. Here’s an example of this syntax:
const person = {
name: "Taylor",
sayHello() {
return `Hello! My name is ${this.name}.`;
}
};
ES6 provides a new syntax to create objects, using the class keyword.
In ES5, an object can be created by defining a constructor function and using the new keyword to instantiate the object.
In ES6, a class declaration has a constructor method that is invoked with the new keyword. If the constructor method is not explicitly defined, then it is implicitly defined with no arguments.
// Explicit constructor
class SpaceShuttle {
constructor(targetPlanet) {
this.targetPlanet = targetPlanet;
}
takeOff() {
console.log("To " + this.targetPlanet + "!");
}
}
// Implicit constructor
class Rocket {
launch() {
console.log("To the moon!");
}
}
const zeus = new SpaceShuttle('Jupiter');
// prints To Jupiter! in console
zeus.takeOff();
const atlas = new Rocket();
// prints To the moon! in console
atlas.launch();
It should be noted that the class keyword declares a new function, to which a constructor is added. This constructor is invoked when new is called to create a new object.
Note: UpperCamelCase should be used by convention for ES6 class names, as in SpaceShuttle used above.
The constructor method is a special method for creating and initializing an object created with a class. You will learn more about it in the Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification.
You can obtain values from an object and set the value of a property within an object.
These are classically called getters and setters.
Getter functions are meant to simply return (get) the value of an object’s private variable to the user without the user directly accessing the private variable.
Setter functions are meant to modify (set) the value of an object’s private variable based on the value passed into the setter function. This change could involve calculations, or even overwriting the previous value completely.
class Book {
constructor(author) {
this._author = author;
}
// getter
get writer() {
return this._author;
}
// setter
set writer(updatedAuthor) {
this._author = updatedAuthor;
}
}
const novel = new Book('anonymous');
console.log(novel.writer);
novel.writer = 'newAuthor';
console.log(novel.writer);
The console would display the strings anonymous and newAuthor.
Notice the syntax used to invoke the getter and setter. They do not even look like functions. Getters and setters are important because they hide internal implementation details.
Note: It is convention to precede the name of a private variable with an underscore (_). However, the practice itself does not make a variable private.
JavaScript started with a small role to play on an otherwise mostly HTML web. Today, it’s huge, and some websites are built almost entirely with JavaScript. In order to make JavaScript more modular, clean, and maintainable; ES6 introduced a way to easily share code among JavaScript files. This involves exporting parts of a file for use in one or more other files, and importing the parts you need, where you need them. In order to take advantage of this functionality, you need to create a script in your HTML document with a type of module. Here’s an example:
A script that uses this module type can now use the import and export features you will learn about in the upcoming challenges.
Imagine a file called math_functions.js that contains several functions related to mathematical operations. One of them is stored in a variable, add, that takes in two numbers and returns their sum. You want to use this function in several different JavaScript files. In order to share it with these other files, you first need to export it.
export const add = (x, y) => {
return x + y;
}
The above is a common way to export a single function, but you can achieve the same thing like this:
const add = (x, y) => {
return x + y;
}
export { add };
When you export a variable or function, you can import it in another file and use it without having to rewrite the code. You can export multiple things by repeating the first example for each thing you want to export, or by placing them all in the export statement of the second example, like this:
export { add, subtract };
import allows you to choose which parts of a file or module to load. In the previous lesson, the examples exported add from the math_functions.js file. Here’s how you can import it to use in another file:
import { add } from './math_functions.js';
Here, import will find add in math_functions.js, import just that function for you to use, and ignore the rest. The ./ tells the import to look for the math_functions.js file in the same folder as the current file. The relative file path (./) and file extension (.js) are required when using import in this way.
You can import more than one item from the file by adding them in the import statement like this:
import { add, subtract } from './math_functions.js';
Suppose you have a file and you wish to import all of its contents into the current file. This can be done with the import * as syntax. Here’s an example where the contents of a file named math_functions.js are imported into a file in the same directory:
import * as myMathModule from "./math_functions.js";
The above import statement will create an object called myMathModule. This is just a variable name, you can name it anything. The object will contain all of the exports from math_functions.js in it, so you can access the functions like you would any other object property. Here’s how you can use the add and subtract functions that were imported:
myMathModule.add(2,3); myMathModule.subtract(5,3);
In the export lesson, you learned about the syntax referred to as a named export. This allowed you to make multiple functions and variables available for use in other files.
There is another export syntax you need to know, known as export default. Usually you will use this syntax if only one value is being exported from a file. It is also used to create a fallback value for a file or module.
Below are examples using export default:
export default function add(x, y) {
return x + y;
}
export default function(x, y) {
return x + y;
}
The first is a named function, and the second is an anonymous function.
Since export default is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use export default with var, let, or const
In the last challenge, you learned about export default and its uses. To import a default export, you need to use a different import syntax. In the following example, add is the default export of the math_functions.js file. Here is how to import it:
import add from "./math_functions.js";
The syntax differs in one key place. The imported value, add, is not surrounded by curly braces ({}). add here is simply a variable name for whatever the default export of the math_functions.js file is. You can use any name here when importing a default.
