ES6 JavaScript
The first native AI agent for mobile is here.
Droidrun is the first native mobile AI agent that lets LLMs control iOS and Android devices. The framework is the most powerful option available for mobile agents. It is also fully open source.
Note: This is a guest post by Matt Lawrence, a co-host of the HTML All The Things podcast.
Recently I’ve been dipping my toes into the world of React as a beginner, with AI as my guide.
As someone that primarily works for small and medium businesses, my web development career largely focuses on WordPress, Webflow, and SEO. While I do code to extend and enhance these tools sometimes (ie adding custom code to extend Webflow’s native form handling), I typically need to code in vanilla HTML/CSS/JS in order to have my snippets work within the confines of a page builder.
Lately, I’ve been interested in expanding my skills by learning React, and so with AI as my guide I kicked off my learning journey in late 2025. Unfortunately, it didn’t take me long to discover that my JavaScript coding knowledge has become quite dated. I rarely use modern JavaScript methodologies that are typically found in ES6 and above.
As I “knock the rust off” my JavaScript skills, I’ve been finding some ES6 features that I find quite essential to my journey so far including:
- Variable declarations with
letandconst - Arrow functions
- Destructuring
Let’s explore these JavaScript features one-by-one to unlock their potential.
Let and Const
Back before I started my React learning journey, I actually published a piece on the difference between var, let and const in JavaScript.
I had been using let instead of var for quite a while in my code snippets, but hadn’t really thought much about why it mattered before writing my guide, so let’s break it down here:
varis the old school way of declaring variables in JavaScript, it is still valid (browsers still understand it), however it is largely relegated to use in older codebases that have compatibility concerns (ie running on old browser versions). It is function-scoped – accessible throughout the entire function where it is declared.letis the new school way of declaring variables in JavaScript. You can almost consider it a “var 2.0” of sorts, with the main difference being that it is block-scoped – it is accessible only within the{ }block in which it is defined.constis a new way to declare a variable whose value will be constant. It cannot be reassigned a new value. This prevents accidental reassignment (which can cause bugs).constis also block-scoped, just likelet.
In modern JavaScript programs, you should be using const wherever possible, leaving let for variables that need to have their values reassigned. This practice helps reduce bugs by “locking in” variable values wherever applicable, preventing the accidental changing of a variable that’s supposed to have a different value.
Arrow Functions
Arrow functions are a shorter way to write a function in JavaScript by using an equal sign = and greater than symbol > put together to form an arrow =>.
Let’s take a look at adding two numbers with a function. If you’re a beginner (or like me) you’re probably very familiar with this sort of syntax:
function add(num1, num2) {
return num1 + num2;
}
The equivalent as an arrow function is this:
const add = (num1, num2) => num1 + num2;
Furthermore, arrow functions treat the
keyword differently than a standard function declaration. This difference is illustrated in the below example:
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
Regular functions (using the function keyword) set this to the object that called them. In our example user called the the regularMethod which means that this is Matt.
Arrow functions do not set their own this, it’s whatever this is in the outer environment – which ends up being undefined in our case (because strict mode is on).
Destructuring
We can use destructuring to pull values out of an array or object and store them inside variables. We can think of this as unpacking data using some short and readable syntax.
In my work, I would typically grab my values individually (ie let num1 = arrayName[0];) but destructuring can really help if you want to quickly unpack multiple values in fewer lines.
Array Destructuring
In array destructuring, we use square brackets [] on the left side of our assignment operator = and the name of the array we’re destructuring on the right bethesdaGames.
Inside the [] we place the variables we want our array values to unpack into.
// Array Destructuring
const bethesdaGames = ["Fallout 3", "Oblivion", "Doom 3"];
const [fallout, tes, doom] = bethesdaGames;
/*
fallout = Fallout 3
tes = Oblivion
doom = Doom 3
*/
Object Destructuring
In object destructuring we use curly braces {} on the left side of our assignment operator = and the name of the object we’re destructuring on the right fallout.
Inside the {} we place the variables we cant our object key values to unpack into.
const fallout = {
type: "TV Show",
seasons: 2,
distribution: "Prime Video"
}
const { type, seasons, distribution } = fallout;
/*
type = TV show
seasons = 2
distribution = Prime Video
*/
Conclusion
Many of these ES6+ features and methods may seem simple if you’re an experienced developer, but I know that these small tweaks (among others not covered here) will help me approach and learn React with a fresh set of modern JavaScript skills. And if you’re a beginner, these tips can help you begin to understand how to approach some fundamental concepts with modern syntax.
Do you have any JavaScript skills that would be helpful on my React journey? Let me know on LinkedIn or X.