Upgrading My JavaScript Fundamentals (ES6 and Beyond)

Abstraction Layers

• As I use AI (and other methods) to learn React, I’m noticing that I’m adding layers of abstraction
• I knew that React was going to be abstract some vanilla web dev concepts away from me - in fact that’s largely the point, it’s a tool to help make reactive web pages easier to create - but now I’m also abstracting away React by using AI
• While using coding examples and snippets from forums and guides was always arguably a form of abstraction, the snippets that we found were rarely tuned to exactly what we needed… and so we needed to understand what was going on (to some extent) and then code in the required modifications
  • With AI that understand and modify step is almost completely gone - we can keep prompting to get virtually exactly what we want.

Let vs Const – “I Knew This… But Did I?”

• I’ve been using let instead of var for quite a while but I didn’t really know why
• I changed over from var because I constantly saw code examples and AI code using let and const
• But here’s the rusty part:
  • I knew that I should be using let and const
  • But I didn’t know why (and I was mostly just using let because I saw it as the modern equivalent to var)

Fundamentals To Know

• var is function scoped
  • Lives and dies within the function in which it was declared, it does not care about blocks
• let and const are block scoped
  • If I declare a variable, it lives and dies within the curly braces it was declared in
• const is for variables whose value needs to remain constant, but they are still mutable.
  • It means the variable binding can’t change. For example, you can push values into a const array, but I can’t reassign the array itself
  • Visualization: A box and a label. The variable name is the label and the value is the box. A const stops the contents of the box from changing.

Arrow Functions – Cleaner, But Not Simpler

• A way to write shorter functions (in less lines) than the traditional function keyword method
• I used to always use the function keyword as I find the syntax more readable
• But as I dabble into React, I’m seeing more arrow functions and therefore want them to become more second nature to me (reading and writing them)

// Function Keyword 
function add(num1, num2) {
	return num1 + num2;
}

// Arrow Function - same as above, less lines
const add = (num1, num2) => num1 + num2;

‍

Concise Body (no curly braces, implicit return)

// Concise body
const add = (num1, num2) => num1 + num2;

add(2, 3); // 5

‍

Block Body (curly braces, explicit return required)

//Block Body with curly braces, explicit return required
const add = (num1, num2) => {
	return num1 + num2;
};

add(2, 3); // 5

‍

Returning an object literal

//Returning an object literal
const getUser = () => ({ name: "Matt", role: "Creator" });

getUser(); 
// { name: "Matt", role: "Creator" }

‍

This vs This

‍In JavaScript, regular functions and arrow functions treat the word this very differently. A regular function decides what this means at the moment you call it. An arrow function doesn’t do that at all - instead, it permanently borrows this from wherever it was originally created.

Imagine I have a user object with two methods. One is a normal function, and one is an arrow function. When I call the normal method — the regular function — it looks at the object it’s sitting inside and says: ‘Great, that’s my this.’ So it prints the user’s name just fine.

But the arrow function doesn’t do that. Arrow functions don’t bind their own this at all. Instead, they reach outward and grab whatever this meant in the surrounding scope — which, in this case, is not the user object. So when I call the arrow method, it tries to read this.name, but this isn’t the user anymore. That’s why it prints undefined.

“So the rule of thumb is: if you need a method on an object to use this, don’t use an arrow function. Arrow functions are great for callbacks and utilities, but not for object methods that rely on this.”

const user = {
  name: "Matt",

  regularMethod: function () {
    console.log("regularMethod says:", this.name);
  },

  arrowMethod: () => {
    console.log("arrowMethod says:", this.name);
  }
};

user.regularMethod(); // Console: Matt
user.arrowMethod(); // Console: Undefined 

Destructuring – A Readability Upgrade

• Destructuring lets us unpack values from arrays or objects into individual variables, without individually reaching for values
• We’ll cover both array destructuring and object destructuring below

// Array Destructuring
const bethesdaGames = ["Fallout 3", "Oblivion", "Doom 3"];

const [fallout, tes, doom] = bethesdaGames;
/* 
 fallout = Fallout 3
 tes = Oblivion
 doom = Doom 3 
*/    

• If I have an array called bethesdaGames with three values in it (fallout 3, oblivion, and doom 3
  • I can unpack these in one line by using destructuring. It’s almost like making an “array” of variable names.
  • In our destructuring I can put the variables fallout, tes, and doom in there and what that’s saying is:
    • Give me the first value Fallout 3, and put it inside the fallout variable
    • The second value Oblivion, goes into the variable tes
    • And the the third value Doom 3, goes inside the variable doom

Object Destructuring

• Object destructuring is very similar to array destructuring, but instead of grabbing array values, we’re grabbing the values of the object’s properties (keys)

const fallout = {
	type: "TV Show",
	seasons: 2,
	distribution: "Prime Video"
}

const { type, seasons, distribution } = fallout;
/*
 type = TV show
 seasons = 2
 distribution = Prime Video
*/

Let’s say I have an object that describes the Fallout TV show. It has three properties: the type of show, how many seasons it has, and where it’s distributed.

“Now, normally, if I wanted to use those values, I’d have to write things like fallout.type or fallout.seasons. But JavaScript gives us a shortcut called destructuring. It lets us pull those values out into their own variables in one clean move.”

“So I write: const { type, seasons, distribution } = fallout;And just like that, I now have three standalone variables — type, seasons, and distribution — each holding the matching value from the object.”

“After destructuring, type is literally the string ‘TV Show,’ seasons is the number 2, and distribution is ‘Prime Video.’ It’s like unpacking a suitcase: the object stays intact, but now you’ve laid out the items you need right on the table.

Question for Mike

Is there any other fundamental or “meta” concept(s) that I should explore because they’re used constantly in modern web dev tooling (ie Svelte, React)?

• Mike's answer:
  
  • Array operators
    • .map, .reduce, .filter, find, findIndex
  • async, await
  • spread operator (…)
  • template literals ${}
  • Ternary
  • Optional chaining
  • Imports/exports (ES Modules)

How to support the show

Patreon

Prices subject to change and are listed in USD

• Support the show from as little as ~$1/month
• Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
• Help support the HTML All The Things Podcast: Click Here

Scrimba Discount - Coding Courses!

Learn to code using Scrimba with their interactive follow-along code editor.

Join their exclusive discord communities and network to find your first job!

Use our affiliate link for a 20% discount!!

• Click the link to take you to the Scrimba site
• A pop-up should appear on your screen with the discount amount and instructions on how to claim it
• Discount is for new accounts only

We receive a monetary kickback if you use our affiliate link and make a purchase.