Gabriele Ferro Home

Reviewed the intermediate JavaScript concepts with Codecademy

For me today is the first day I officially go into lockdown, since Disneyland Paris is closed, I don't work and I have a lot of free time at my disposal.

Day 72: 31 October 2020

**Today’s Progress:**

Codecademy

ADVANCED OBJECTS

Review & Cheatsheet

Congratulations on finishing Advanced Objects!

Let’s review the concepts covered in this lesson:

  • The object that a method belongs to is called the calling object.
  • The this keyword refers the calling object and can be used to access properties of the calling object.
  • Methods do not automatically have access to other internal properties of the calling object.
  • The value of this depends on where the this is being accessed from.
  • We cannot use arrow functions as methods if we want to access other internal properties.
  • JavaScript objects do not have built-in privacy, rather there are conventions to follow to notify other developers about the intent of the code.
  • The usage of an underscore before a property name means that the original developer did not intend for that property to be directly changed.
  • Setters and getter methods allow for more detailed ways of accessing and assigning properties.
  • Factory functions allow us to create object instances quickly and repeatedly.
  • There are different ways to use object destructuring: one way is the property value shorthand and another is destructured assignment.
  • As with any concept, it is a good skill to learn how to use the documentation with objects!

You’re ready to start leveraging more elegant code for creating and accessing objects in your code!


CLASSES

Review & Cheatsheet

Way to go! Let’s review what you learned.

  • Classes are templates for objects.
  • Javascript calls a constructor method when we create a new instance of a class.
  • Inheritance is when we create a parent class with properties and methods that we can extend to child classes.
  • We use the extends keyword to create a subclass.
  • The super keyword calls the constructor() of a parent class.
  • Static methods are called on the class, but not on instances of the class.

In completing this lesson, you’ve taken one step closer to writing efficient, production-level JavaScript. Good luck as you continue to develop your skills and move into intermediate-level concepts.


BROWSER COMPATIBILITY AND TRANSPILATION

Review & Cheatsheet

In this lesson, you learned about browser compatibility and transpilation. Let’s review the key concepts:

  • ES5 — The old JavaScript version that is supported by all modern web browsers.
  • ES6 — The new(er) JavaScript version that is not supported by all modern web browsers. The syntax is more readable, similar to other programming languages, and addresses the source of common bugs in ES5.
  • caniuse.com — a website you can use to look up HTML, CSS, and JavaScript browser compatibility information.
  • Babel — A JavaScript package that transpiles JavaScript ES6+ code to ES5.
  • npm init — A terminal command that creates a package.json file.
  • package.json — A file that contains information about a JavaScript project.
  • npm install — A command that installs Node packages.
  • babel-cli — A Node package that contains command line tools for Babel.
  • babel-preset-env — A Node package that contains ES6+ to ES5 syntax mapping information.
  • .babelrc — A file that specifies the version of the JavaScript source code.
  • "build" script — A package.json script that you use to tranpsile ES6+ code to ES5.
  • npm run build — A command that runs the build script and transpiles ES6+ code to ES5.

For future reference, here is a list of the steps needed to set up a project for transpilation:

  1. Initialize your project using npm init and create a directory called src
  2. Install babel dependencies by running: npm install babel-cli -D & npm install babel-preset-env -D
  3. Create a .babelrc file inside your project and add the following code inside it:{ "presets": ["env"] }
  4. Add the following script to your scripts object in package.json: "build": "babel src -d lib"
  5. Run npm run build whenever you want to transpile your code from your src to lib directories.

INTERMEDIATE JAVASCRIPT MODULES

Review & Cheatsheet

We just learned how to use JavaScript modules. Let’s review what we learned:

Modules in Node.js are reusable pieces of code that can be exported from one program and imported for use in another program.

  • module.exports exports the module for use in another program.
  • require() imports the module for use in the current program.

ES6 introduced a more flexible, easier syntax to export modules:

  • default exports use export default to export JavaScript objects, functions, and primitive data types.
  • named exports use the export keyword to export data in variables.
  • named exports can be aliased with the as keyword.
  • import is a keyword that imports any object, function, or data type.

**Thoughts:**

I almost finished the JavaScript path offered by Codecademy!

**Link to tweet:**

[twitter-follow screen_name='20Gabriele20']

July 2024
MTWTFSS
1234567
891011121314
15161718192021
22232425262728
293031 

Archives

Gabriele Ferro Home
Copyright © Ferro Gabriele. All rights reserved.