In this video, we take a deep dive into one of the most POWERFUL APIs in the ECMAScript spec, the ES6 Proxy.
Proxies are the magic behind many popular frontend libraries such as Vue 3 and Immer.js. But what is this mysterious object? And how does it work?
Join The Peer Dependency as we take an in-depth look at Proxies, Reflection, and one of the core utilities in implementing reactive programming logic in JavaScript. You'll learn how to CORRECTLY implement a Proxy to intercept object reads & writes using the Reflect API. You'll learn about the ACTUAL implementation of objects in the JavaScript engine, and how it leverages slots to manage variable state. Along the way, we'll look at some use cases including how to implement a Pythonic range function that works with the `in` operator.
This is part 1 of a 2-part series. Be sure to subscribe so you can catch part 2, where we'll use TypeScript to implement our very own subscribable datatype much in the same vein as Vue 3's `reactive` function.
⏱️ Chapters ⏱️
0:00 Introduction
1:06 What kinds of Proxy traps are there?
3:36 Intercepting reads with the get trap
5:50 Manipulating writes with the set trap
8:06 Controlling enumeration with the ownKeys and getOwnPropertyDescriptor traps
12:02 Implementing real internal / protected properties with the deleteProperty trap
14:06 Implementing a range function with the has trap
15:30 Intercepting function calls with the apply trap
📚 Resources 📚
ECMAScript Spec: Internal Slots https://262.ecma-international.org/6.0/#sec-object-internal-methods-and-internal-slots
