CINXE.COM

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>ECMAScript, TC39, and the History of JavaScript</title><meta name="description" content="In this post, you'll learn the history of JavaScript as well as three distinct but important aspects of it - Ecma, EcmaScript, and the TC39."/><meta name="image" content="https://res.cloudinary.com/uidotdev/image/upload/c_fit,co_rgb:f9f4da,fl_text_no_trim,l_text:fonts:proxima-nova-extrabold.ttf_80_center_line_spacing_-18:ECMAScript%252C%20TC39%252C%20and%20the%20History%20of%20JavaScript,w_1100/c_fill,g_north,h_630,w_1200/bg"/><link rel="canonical" href="https://ui.dev/ecmascript"/><meta property="og:site_name" content="ui.dev"/><meta property="og:url" content="https://ui.dev/ecmascript"/><meta property="og:title" content="ECMAScript, TC39, and the History of JavaScript"/><meta property="og:description" content="In this post, you'll learn the history of JavaScript as well as three distinct but important aspects of it - Ecma, EcmaScript, and the TC39."/><meta property="og:image" content="https://res.cloudinary.com/uidotdev/image/upload/c_fit,co_rgb:f9f4da,fl_text_no_trim,l_text:fonts:proxima-nova-extrabold.ttf_80_center_line_spacing_-18:ECMAScript%252C%20TC39%252C%20and%20the%20History%20of%20JavaScript,w_1100/c_fill,g_north,h_630,w_1200/bg"/><meta content="website" property="og:type"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@uidotdev"/><meta name="twitter:creator" content="@uidotdev"/><meta name="twitter:title" content="ECMAScript, TC39, and the History of JavaScript"/><meta name="twitter:description" content="In this post, you'll learn the history of JavaScript as well as three distinct but important aspects of it - Ecma, EcmaScript, and the TC39."/><meta name="twitter:image" content="https://res.cloudinary.com/uidotdev/image/upload/c_fit,co_rgb:f9f4da,fl_text_no_trim,l_text:fonts:proxima-nova-extrabold.ttf_80_center_line_spacing_-18:ECMAScript%252C%20TC39%252C%20and%20the%20History%20of%20JavaScript,w_1100/c_fill,g_north,h_630,w_1200/bg"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><link rel="preload" href="/fonts/outfit-v4-latin-regular.woff2" as="font" crossorigin="anonymous"/><link rel="preload" href="/fonts/outfit-v4-latin-500.woff2" as="font" crossorigin="anonymous"/><link rel="preload" href="/fonts/outfit-v4-latin-700.woff2" as="font" crossorigin="anonymous"/><link rel="preload" href="/fonts/outfit-v4-latin-900.woff2" as="font" crossorigin="anonymous"/><link rel="preload" href="/fonts/paytone-one-v16-latin-regular.woff2" as="font" crossorigin="anonymous"/><meta name="next-head-count" content="27"/><noscript><img alt="fb" height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=312702129964814&ev=PageView&noscript=1"/></noscript><link data-next-font="" rel="preconnect" href="/" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/040c02bff0295dd3.css" as="style"/><link rel="stylesheet" href="/_next/static/css/040c02bff0295dd3.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-a8717e792c56bf15.js" defer=""></script><script src="/_next/static/chunks/framework-56eb74ff06128874.js" defer=""></script><script src="/_next/static/chunks/main-5d28cb0f54b40efe.js" defer=""></script><script src="/_next/static/chunks/pages/_app-f57e79cc768a3ae4.js" defer=""></script><script src="/_next/static/chunks/0c428ae2-a42fa7a98798433f.js" defer=""></script><script src="/_next/static/chunks/d7eeaac4-23a526e9c9fdafff.js" defer=""></script><script src="/_next/static/chunks/7765-b8c1c06bd60a06e8.js" defer=""></script><script src="/_next/static/chunks/7536-56869878f9c68c88.js" defer=""></script><script src="/_next/static/chunks/5675-27117e432f15e6c1.js" defer=""></script><script src="/_next/static/chunks/2881-92be9380d750c9cd.js" defer=""></script><script src="/_next/static/chunks/5787-139342ca278c536e.js" defer=""></script><script src="/_next/static/chunks/8745-0addc75c58f3c7aa.js" defer=""></script><script src="/_next/static/chunks/3323-bc436f4a22af8c85.js" defer=""></script><script src="/_next/static/chunks/pages/%5B...id%5D-24207a61de353851.js" defer=""></script><script src="/_next/static/x81nB9NAPB_rknpy9ix3x/_buildManifest.js" defer=""></script><script src="/_next/static/x81nB9NAPB_rknpy9ix3x/_ssgManifest.js" defer=""></script><style id="sandpack">--sxs{--sxs:1 sp-k-eyOShd sp-k-iOHdLQ}@media{@keyframes sp-k-eyOShd{0%{opacity:0}100%{opacity:1}}@keyframes sp-k-iOHdLQ{0%{transform:rotateX(-25.5deg) rotateY(45deg)}100%{transform:rotateX(-25.5deg) rotateY(405deg)}}}--sxs{--sxs:2 sp-c-gMfcns sp-c-bxeRRt sp-c-hfoyCM sp-c-fWymNx sp-c-euXojQ sp-c-bpmgvy sp-c-PJLV}@media{.sp-c-gMfcns svg{margin:auto}.sp-c-bxeRRt{-webkit-appearance:none;appearance:none;outline:none;display:flex;align-items:center;font-size:inherit;font-family:inherit;background-color:transparent;transition:color var(--sp-transitions-default), background var(--sp-transitions-default);cursor:pointer;color:var(--sp-colors-clickable);border:0;text-decoration:none}.sp-c-bxeRRt:disabled{color:var(--sp-colors-disabled)}.sp-c-bxeRRt:hover:not(:disabled,[data-active='true']){color:var(--sp-colors-hover)}.sp-c-bxeRRt[data-active="true"]{color:var(--sp-colors-accent)}.sp-c-bxeRRt svg{min-width:var(--sp-space-4);width:var(--sp-space-4);height:var(--sp-space-4)}.sp-c-bxeRRt.sp-c-gMfcns{padding:var(--sp-space-1);height:var(--sp-space-7);display:flex}.sp-c-bxeRRt.sp-c-gMfcns.sp-c-bxeRRt:not(:has(span)){width:var(--sp-space-7)}.sp-c-bxeRRt.sp-c-gMfcns.sp-c-bxeRRt:has(svg + span){padding-right:var(--sp-space-3);padding-left:var(--sp-space-2);gap:var(--sp-space-1)}.sp-c-hfoyCM{padding:0 var(--sp-space-1) 0 var(--sp-space-1);border-radius:var(--sp-border-radius);margin-left:var(--sp-space-1);width:var(--sp-space-5);visibility:hidden}.sp-c-hfoyCM svg{width:var(--sp-space-3);height:var(--sp-space-3);display:block;position:relative;top:1px}.sp-c-fWymNx{margin:0;display:block;font-family:var(--sp-font-mono);font-size:var(--sp-font-size);color:var(--sp-syntax-color-plain);line-height:var(--sp-font-lineHeight)}.sp-c-euXojQ{display:flex;flex-direction:column;width:100%;position:relative;background-color:var(--sp-colors-surface1);gap:1px}.sp-c-euXojQ:has(.sp-stack){background-color:var(--sp-colors-surface2)}.sp-c-bpmgvy{transform:translate(-4px, 9px) scale(0.13, 0.13)}.sp-c-bpmgvy *{position:absolute;width:96px;height:96px}}--sxs{--sxs:3 sp-c-PJLV-kCOVwI-status-pass sp-c-PJLV-kEzYsr-status-fail sp-c-PJLV-gHAhSA-status-skip sp-c-PJLV-jgnHyR-status-title sp-c-PJLV-iCgxLS-status-run sp-c-PJLV-bnDZSy-status-pass sp-c-PJLV-eYuGwt-status-fail}@media{.sp-c-PJLV-kCOVwI-status-pass{color:var(--test-pass)}.sp-c-PJLV-kEzYsr-status-fail{color:var(--test-fail)}.sp-c-PJLV-gHAhSA-status-skip{color:var(--test-skip)}.sp-c-PJLV-jgnHyR-status-title{color:var(--test-title)}.sp-c-PJLV-iCgxLS-status-run{background:var(--test-run);color:var(--sp-colors-surface1)}.sp-c-PJLV-bnDZSy-status-pass{background:var(--test-pass);color:var(--sp-colors-surface1)}.sp-c-PJLV-eYuGwt-status-fail{background:var(--test-fail);color:var(--sp-colors-surface1)}}</style></head><body class="dark"><div id="__next"><div style="position:fixed;z-index:9999;top:16px;left:16px;right:16px;bottom:16px;pointer-events:none"></div><nav class="mx-auto container p-8 flex justify-between items-center"><a class="grid place-items-center text-center bg-brand-charcoal rounded-full w-[56px] h-[56px] text-brand-beige hover:text-brand-yellow" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="32" viewBox="0 0 802.1 614.06"><title>ui.dev</title><path d="M661.36,193V593.65c0,138.7-110.7,213.38-281.21,213.38C208.38,807,99,732.35,99,593.65V193H275.82V586.54c0,45.05,39.44,75.87,104.33,75.87,66.17,0,105.61-30.82,105.61-75.87V193Z" transform="translate(-98.95 -192.97)" fill="currentColor"></path><path d="M752.45,380.19c-.53-38.12,33.17-69.21,74.3-69.21,39,0,73.77,31.09,74.3,69.21-.53,39.12-35.29,70.21-74.3,70.21-41.13,0-74.83-31.09-74.3-70.21" transform="translate(-98.95 -192.97)" fill="currentColor"></path><path d="M725.09,762.68c13.65-46.69,30.38-114.17,30.38-179.41L755,545.8l37.54,0H863.1l36.95,0v37.47c-6.27,81.57-38.22,158.15-58.29,202.45l-8.71,20.86L807.7,807H711.26Z" transform="translate(-98.95 -192.97)" fill="currentColor"></path></svg></a><div class="flex justify-end items-center gap-8"><button class="w-[40px] h-[40px] grid place-items-center relative bg-gray-75 hover:bg-gray-100 dark:bg-brand-charcoalMuted dark:hover:bg-brand-beige/10 text-xl text-brand-charcoal dark:text-brand-beige rounded-full transition-all duration-100"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path></svg></button><a class="px-8 py-2 border-brand-purple dark:border-brand-yellow bg-gray-25 dark:bg-brand-coal rounded-full uppercase font-medium border-2 cursor-pointer text-brand-purple dark:text-brand-yellow hover:bg-brand-purple hover:text-brand-beige dark:hover:bg-brand-yellow dark:hover:text-brand-charcoal" style="filter:drop-shadow(5px 5px 0px rgba(0,0,0,1)" href="/login"><span class="font-black">Login</span></a></div></nav><main class="px-2 sm:px-6"><section><div class="w-[900px] max-w-full mx-auto mb-8 md:mb-2 leading-[1.15]"><h1 class="text-[clamp(1.5rem,6vw,4.1rem)] font-extrabold text-center mb-0 pt-12">ECMAScript, TC39, and the History of JavaScript</h1></div></section><div class="relative xl:grid xl:grid-cols-1 xl:justify-items-center gap-4 container mx-auto md:p-8 min-w-0"><section class="words relative"><main class="post-content relative"><p metastring="">JavaScript is a living language that is constantly adding new features. As a JavaScript developer, it's important to understand the underlying process that's needed to take a new feature and transform it from a simple idea, to part of official language specification. To do that, we'll cover three topics - Ecma, EcmaScript, and the TC39.</p> <p metastring="">First, let's take ourselves back to 1995. The cult classic <a href="https://www.youtube.com/watch?v=uD4GclR6ZEo" metastring="">Heavy weights</a> was in theaters, Nicolas Cage won an Oscar, and websites typically looked <a href="http://berkshirehathaway.com/" metastring="">something like this</a>. Now, odds are the way you would view that website would be with <a href="https://en.wikipedia.org/wiki/Netscape_Navigator" metastring="">Netscape Navigator</a>. At the time, Netscape Navigator was the most popular web browser with almost 80% market share. The founder of Netscape, the company behind Netscape Navigator, was <a href="https://twitter.com/pmarca" metastring="">Marc Andreessen</a>. He has a vision for the future of the web and it was more than just a way to share and distribute documents. He envisioned a more dynamic platform with client side interactivity - a sort of “glue language” that was easy to use by both designers and developers. This is where <a href="https://twitter.com/BrendanEich" metastring="">Brendan Eich</a> comes into the picture.</p> <p metastring="">Brendan was recruited by Netscape with the goal of embedding the Scheme programming language into Netscape Navigator. However, before he could get started, Netscape collaborated with <a href="https://en.wikipedia.org/wiki/Sun_Microsystems" metastring="">Sun Microsystems</a> to make their up and coming programming language Java available in the browser. Now, if Java was already a suitable language, why bring on Brendan to create another one?. If you remember back to Netscape’s goal, they wanted "a scripting language that was simple enough for designers and amateurs to use" - sadly, Java wasn’t that. From there, the idea became that Java could be used by "professionals" and this new language “Mocha” (which was the initial name of JavaScript) would be used by everyone else. Because of this collaboration between languages, Netscape decided that Mocha needed to compliment Java and should have a relatively similar syntax.</p> <p metastring="">From there, as the legend states, in just 10 days Brendan created the first version of Mocha. This version had some functionality from Scheme, the object orientation of SmallTalk, and because of the collaboration, the syntax of Java. Eventually the name Mocha changed to LiveScript then LiveScript changed to JavaScript as a marketing ploy to ride the hype of Java. So at this point, JavaScript was marketed as a scripting language for the browser - accessible to both amateurs and designers while Java was the professional tool for building rich web components.</p> <p metastring="">Now, it’s important to understand the context of when these events were happening. Besides Nicolas Cage winning an Oscar, Microsoft was also working on Internet Explorer. Because JavaScript fundamentally changed the user experience of the web, if you were a competing browser, since there was no JavaScript specification, you had no choice but to come up with your own implementation. As history shows, that’s exactly what Microsoft did and they called it JScript.</p> <p metastring="">This then lead to a pretty famous problem in the history of the internet. JScript filled the same use case as JavaScript, but its implementation was different. This meant that you couldn’t build one website and expect it to work on both Internet Explorer and Netscape Navigator. In fact, the two implementations were so different that “Best viewed in Netscape” and “Best viewed in Internet Explorer” badges became common for most companies who couldn’t afford to build for both implementations. Finally, this is where Ecma comes into the picture.</p> <p metastring="">Ecma International is “an industry association founded in 1961, dedicated to the standardization of information and communication systems”. In November of 1996, Netscape submitted JavaScript to Ecma to build out a standard specification. By doing this, it gave other implementors a voice in the evolution of the language and, ideally, it would help keep other implementations consistent across browsers.</p> <p metastring="">Under Ecma, each new specification comes with a standard and a committee. In JavaScript’s case, the standard is ECMA-262 and the committee who works on the ECMA-262 standard is the TC39. If you look up the ECMA262 standard, you’ll notice that the term “JavaScript” is never used. Instead, they use the term “EcmaScript” to talk about the official language. The reason for this is because Oracle owns the trademark for the term “JavaScript”. To avoid legal issues, Ecma decided to use the term EcmaScript instead. In the real world, ECMAScript is usually used to refer to the official standard, ECMA-262, while JavaScript is used when talking about the language in practice. As mentioned earlier, the committee which oversees the evolution of the Ecma262 standard is the TC39, which stands for Technical Committee 39. The TC39 is made up of “members” who are typically browser vendors and large companies who’ve invested heavily in the web like Facebook and PayPal. To attend the meetings, “members” (again, large companies and browser vendors) will send “delegates” to represent said company or browser. It’s these delegates who are responsible for creating, approving, or denying language proposals.</p> <p metastring="">When a new proposal is created, that proposal has to go through certain stages before it becomes part of the official specification. It’s important to keep in mind that in order for any proposal to move from one stage to another, a consensus among the TC39 must be met. This means that a large majority must agree while nobody strongly disagrees enough to veto a specific proposal.</p> <p metastring="">Each new proposal starts off at Stage 0. This stage is called the "Straw man" stage. Stage 0 proposals are “proposals which are planned to be presented to the committee by a TC39 champion or, have been presented to the committee and not rejected definitively, but have not yet achieved any of the criteria to get into stage 1.” So the only requirement for becoming a Stage 0 proposal is that the document must be reviewed at a TC39 meeting. It’s important to note that using a Stage 0 feature in your codebase is fine, but even if it does continue on to become part of the official spec, it’ll almost certainly go through a few iterations before then.</p> <p metastring="">The next stage in the maturity of a new proposal is Stage 1. In order to progress to Stage 1, an official “champion” who is part of TC39 must be identified and is responsible for the proposal. In addition, the proposal needs to describe the problem it solves, have illustrative examples of usage, a high level API, and identify any potential concerns and implementation challenges. By accepting a proposal for stage 1, the committee signals they’re willing to spend resources to look into the proposal in more depth.</p> <p metastring="">The next stage is Stage 2. At this point, it’s more than likely that this feature will eventually become part of the official specification. In order to make it to stage 2, the proposal must, in formal language, have a description of the syntax and semantics of the new feature. In other words, a draft, or a first version of what will be in the official specification is written. This is the stage to really lock down all aspects of the feature. Future changes may still likely occur, but they should only be minor, incremental changes.</p> <p metastring="">Next up is Stage 3. At this point the proposal is mostly finished and now it just needs feedback from implementors and users to progress further. In order to progress to Stage 3, the spec text should be finished and at least two spec compliant implementations must be created.</p> <p metastring="">The last stage is Stage 4. At this point, the proposal is ready to be included in the official specification. To get to Stage 4, tests have to be written, two spec compliant implementations should pass those tests, members should have significant practical experience with the new feature, and the EcmaScript spec editor must sign off on the spec text. Basically once a proposal makes it to stage 4, it’s ready to stop being a proposal and make its way into the official specification. This brings up the last thing you need to know about this whole process and that is TC39s release schedule.</p> <p metastring="">As of 2016, a new version of ECMAScript is released every year with whatever features are ready at that time. What that means is that any Stage 4 proposals that exist when a new release happens, will be included in the release for that year. Because of this yearly release cycle, new features should be much more incremental and easier to adopt.</p></main></section></div><div class="bytes-pitch max-w-[600px] px-2 mx-auto relative"><hr class="bg-brand-yellow h-[100px] w-[4px] mx-auto my-[80px] rounded-full border-none"/><div class="text-center"><h3 class="font-black text-[calc(1rem + 2vw)] mx-0 mt-12 text-center text-4xl mb-8">Before you leave</h3><p>I know, <i class="text-brand-pink font-black">another newsletter pitch</i> - but hear me out. Most JavaScript newsletters are terrible. When’s the last time you actually looked forward to getting one? Even worse, when’s the last time you actually <strong>read</strong> one? We wanted to change that.</p><p class="my-8">We call it <a href="https://bytes.dev?s=uidotdev">Bytes</a>, but others call it <a href="https://twitter.com/uidotdev/timelines/1428028877129936899">their favorite newsletter</a>.</p><form class="p-8 bg-brand-white dark:bg-[rgba(0,0,0,.2)] shadow dark:shadow-none relative rounded-2xl w-full"><figure class="absolute top-[-12px] right-0"><img width="48" src="/images/bytes-logo.svg" alt="Bytes"/></figure><h6 class="mb-4 pr-4">Delivered to over <b>200,000</b> web developers every <b>Monday</b> and <b>Thursday</b></h6><div class="flex gap-2 items-start flex-wrap md:flex-nowrap"><div class="w-full"><div class="grid gap-2 flex-1 "><input id="bytes_email" placeholder="Enter your email" name="bytes_email" class="h-10 w-full !bg-[rgba(0,0,0,0)] border border-brand-charcoal/10 dark:border-brand-beige/10 rounded-md py-2 pl-4 placeholder:opacity-50 placeholder:text-brand-charcoal dark:placeholder:text-brand-beige focus:border-brand-purple dark:focus:border-brand-beige outline-none focus:ring-0 undefined"/></div></div><button type="submit" class="bg-brand-purple dark:bg-brand-yellow text-brand-white dark:text-brand-charcoal rounded py-2 px-4 font-bold w-full md:w-[200px] whitespace-nowrap"><span class="flex-grow">Get Bytes Today</span></button></div></form></div><div class="grid gap-8 mx-2 lg:-mx-40 mt-10 grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))]"><a class="tweet bg-brand-white dark:bg-brand-charcoal shadow dark:shadow-none hover:brightness-110 p-6 rounded-lg relative" href="https://twitter.com/sduduzo_g/status/1368960422708207617"><svg class="fill-brand-blue absolute right-4 top-4" width="20" height="20" fill="currentColor"><use href="/images/sprite.svg#fa-twitter"></use></svg><div class="flex gap-2 items-center"><img class="w-10 aspect-square rounded-full" alt="Avatar for @sduduzo_g" src="/images/bytes/sduduzo_g.jpeg"/><div><p class="text-lg leading-none">Sdu</p><p class="text-sm opacity-50">@sduduzo_g</p></div></div><p class="text-sm pt-6 opacity-80">This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.</p></a><a class="tweet bg-brand-white dark:bg-brand-charcoal shadow dark:shadow-none hover:brightness-110 p-6 rounded-lg relative" href="https://twitter.com/flybayer/status/1371569644151189505"><svg class="fill-brand-blue absolute right-4 top-4" width="20" height="20" fill="currentColor"><use href="/images/sprite.svg#fa-twitter"></use></svg><div class="flex gap-2 items-center"><img class="w-10 aspect-square rounded-full" alt="Avatar for @flybayer" src="/images/bytes/flybayer.jpeg"/><div><p class="text-lg leading-none">Brandon Bayer</p><p class="text-sm opacity-50">@flybayer</p></div></div><p class="text-sm pt-6 opacity-80">The Bytes newsletter is a work of art! It’s the only dev newsletter I’m subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.</p></a><a class="tweet bg-brand-white dark:bg-brand-charcoal shadow dark:shadow-none hover:brightness-110 p-6 rounded-lg relative" href="https://twitter.com/johnhawly/status/1295394100800348161"><svg class="fill-brand-blue absolute right-4 top-4" width="20" height="20" fill="currentColor"><use href="/images/sprite.svg#fa-twitter"></use></svg><div class="flex gap-2 items-center"><img class="w-10 aspect-square rounded-full" alt="Avatar for @johnhawly" src="/images/bytes/johnhawly.jpeg"/><div><p class="text-lg leading-none">John Hawley</p><p class="text-sm opacity-50">@johnhawly</p></div></div><p class="text-sm pt-6 opacity-80">Bytes has been my favorite newsletter since its inception. It’s my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!</p></a><a class="tweet bg-brand-white dark:bg-brand-charcoal shadow dark:shadow-none hover:brightness-110 p-6 rounded-lg relative" href="https://twitter.com/garrettgreen/status/1295722238382092290"><svg class="fill-brand-blue absolute right-4 top-4" width="20" height="20" fill="currentColor"><use href="/images/sprite.svg#fa-twitter"></use></svg><div class="flex gap-2 items-center"><img class="w-10 aspect-square rounded-full" alt="Avatar for @garrettgreen" src="/images/bytes/garrettgreen.jpeg"/><div><p class="text-lg leading-none">Garrett Green</p><p class="text-sm opacity-50">@garrettgreen</p></div></div><p class="text-sm pt-6 opacity-80">I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.</p></a><a class="tweet bg-brand-white dark:bg-brand-charcoal shadow dark:shadow-none hover:brightness-110 p-6 rounded-lg relative" href="https://twitter.com/mhashim6_/status/1296867490866368515"><svg class="fill-brand-blue absolute right-4 top-4" width="20" height="20" fill="currentColor"><use href="/images/sprite.svg#fa-twitter"></use></svg><div class="flex gap-2 items-center"><img class="w-10 aspect-square rounded-full" alt="Avatar for @mhashim6_" src="/images/bytes/mhashim6_.jpeg"/><div><p class="text-lg leading-none">Muhammad</p><p class="text-sm opacity-50">@mhashim6_</p></div></div><p class="text-sm pt-6 opacity-80">Literally the only newsletter I’m waiting for every week.</p></a><a class="tweet bg-brand-white dark:bg-brand-charcoal shadow dark:shadow-none hover:brightness-110 p-6 rounded-lg relative" href="https://twitter.com/graysonhicks/status/1295456519312609282"><svg class="fill-brand-blue absolute right-4 top-4" width="20" height="20" fill="currentColor"><use href="/images/sprite.svg#fa-twitter"></use></svg><div class="flex gap-2 items-center"><img class="w-10 aspect-square rounded-full" alt="Avatar for @graysonhicks" src="/images/bytes/graysonhicks.jpeg"/><div><p class="text-lg leading-none">Grayson Hicks</p><p class="text-sm opacity-50">@graysonhicks</p></div></div><p class="text-sm pt-6 opacity-80">Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.</p></a><a class="tweet bg-brand-white dark:bg-brand-charcoal shadow dark:shadow-none hover:brightness-110 p-6 rounded-lg relative" href="https://twitter.com/mitchellbwright/status/1428028877129936899"><svg class="fill-brand-blue absolute right-4 top-4" width="20" height="20" fill="currentColor"><use href="/images/sprite.svg#fa-twitter"></use></svg><div class="flex gap-2 items-center"><img class="w-10 aspect-square rounded-full" alt="Avatar for @mitchellbwright" src="/images/bytes/mitchellbwright.jpeg"/><div><p class="text-lg leading-none">Mitchell Wright</p><p class="text-sm opacity-50">@mitchellbwright</p></div></div><p class="text-sm pt-6 opacity-80">I know I’ve said it before, but @tylermcginnis doesn’t miss with the Bytes email. If you’re a developer, you really need to subscribe</p></a><a class="tweet bg-brand-white dark:bg-brand-charcoal shadow dark:shadow-none hover:brightness-110 p-6 rounded-lg relative" href="https://twitter.com/aspittel/status/1458468420828106755"><svg class="fill-brand-blue absolute right-4 top-4" width="20" height="20" fill="currentColor"><use href="/images/sprite.svg#fa-twitter"></use></svg><div class="flex gap-2 items-center"><img class="w-10 aspect-square rounded-full" alt="Avatar for @aspittel" src="/images/bytes/aspittel.jpeg"/><div><p class="text-lg leading-none">Ali Spittel</p><p class="text-sm opacity-50">@aspittel</p></div></div><p class="text-sm pt-6 opacity-80">Can I just say that I giggle every time I get the @uidotdev email each week? You should definitely subscribe.</p></a><a class="tweet bg-brand-white dark:bg-brand-charcoal shadow dark:shadow-none hover:brightness-110 p-6 rounded-lg relative" href="https://twitter.com/thefinnomenon/status/1295842745534361602"><svg class="fill-brand-blue absolute right-4 top-4" width="20" height="20" fill="currentColor"><use href="/images/sprite.svg#fa-twitter"></use></svg><div class="flex gap-2 items-center"><img class="w-10 aspect-square rounded-full" alt="Avatar for @thefinnomenon" src="/images/bytes/thefinnomenon.jpeg"/><div><p class="text-lg leading-none">Chris Finn</p><p class="text-sm opacity-50">@thefinnomenon</p></div></div><p class="text-sm pt-6 opacity-80">Every JavaScript programmer should be subscribed to the newsletter from @uidotdev. Not only do they manage to succinctly cover the hot news in the JavaScript world for the week but it they manage to add a refreshing humor to it all.</p></a></div></div></main><footer class="mt-20 mb-4 sm:mb-8 mx-4 sm:mx-8 py-8 lg:py-20 bg-brand-white dark:bg-brand-charcoal rounded-[20px] md:rounded-[50px] relative overflow-hidden shadow-md dark:shadow-none"><div class="container mx-auto px-8 mb-12"><svg xmlns="http://www.w3.org/2000/svg" width="40" viewBox="0 0 802.1 614.06"><title>ui.dev</title><path d="M661.36,193V593.65c0,138.7-110.7,213.38-281.21,213.38C208.38,807,99,732.35,99,593.65V193H275.82V586.54c0,45.05,39.44,75.87,104.33,75.87,66.17,0,105.61-30.82,105.61-75.87V193Z" transform="translate(-98.95 -192.97)" fill="var(--brand-yellow)"></path><path d="M752.45,380.19c-.53-38.12,33.17-69.21,74.3-69.21,39,0,73.77,31.09,74.3,69.21-.53,39.12-35.29,70.21-74.3,70.21-41.13,0-74.83-31.09-74.3-70.21" transform="translate(-98.95 -192.97)" fill="var(--brand-yellow)"></path><path d="M725.09,762.68c13.65-46.69,30.38-114.17,30.38-179.41L755,545.8l37.54,0H863.1l36.95,0v37.47c-6.27,81.57-38.22,158.15-58.29,202.45l-8.71,20.86L807.7,807H711.26Z" transform="translate(-98.95 -192.97)" fill="var(--brand-yellow)"></path></svg></div><div class="container mx-auto px-8 pb-8 grid grid-cols-2 lg:grid-cols-12 gap-20"><div class="lg:col-span-3"><ul class="mt-8 grid gap-4"><li><a class="underline" href="/login">Login</a></li><li><a class="underline" href="/blog">Blog</a></li><li><a class="underline" href="/reviews">Reviews</a></li><li><a class="underline" href="/terms">Terms</a></li><li><a class="underline" href="/privacy">Privacy</a></li><li><a class="underline" href="/code-of-conduct">Code of Conduct</a></li></ul></div><div class="lg:col-span-3"><ul class="mt-8 grid gap-4"><li><a href="https://npmtrends.com" target="_blank" class="underline">npmtrends</a></li><li><a href="https://usehooks.com" target="_blank" class="underline">useHooks</a></li><li><a href="https://bytes.dev" target="_blank" class="underline">Bytes</a></li><li><a href="https://reactnewsletter.com" target="_blank" class="underline">React Newsletter</a></li><li><a href="https://react.gg" target="_blank" class="underline">react.gg</a></li><li><a href="https://query.gg" target="_blank" class="underline">query.gg</a></li></ul></div><div class="col-span-2 lg:col-span-6"><h4 class="uppercase font-bold mb-8">Sign Up For Bytes</h4><form class="p-8 bg-brand-white dark:bg-[rgba(0,0,0,.2)] shadow dark:shadow-none relative rounded-2xl w-full"><figure class="absolute top-[-12px] right-0"><img width="48" src="/images/bytes-logo.svg" alt="Bytes"/></figure><h6 class="mb-4 pr-4">Delivered to over <b>200,000</b> web developers every <b>Monday</b> and <b>Thursday</b></h6><div class="flex gap-2 items-start flex-wrap md:flex-nowrap"><div class="w-full"><div class="grid gap-2 flex-1 "><input id="bytes_email" placeholder="Enter your email" name="bytes_email" class="h-10 w-full !bg-[rgba(0,0,0,0)] border border-brand-charcoal/10 dark:border-brand-beige/10 rounded-md py-2 pl-4 placeholder:opacity-50 placeholder:text-brand-charcoal dark:placeholder:text-brand-beige focus:border-brand-purple dark:focus:border-brand-beige outline-none focus:ring-0 undefined"/></div></div><button type="submit" class="bg-brand-purple dark:bg-brand-yellow text-brand-white dark:text-brand-charcoal rounded py-2 px-4 font-bold w-full md:w-[200px] whitespace-nowrap"><span class="flex-grow">Get Bytes Today</span></button></div></form></div></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"slug":"/ecmascript","title":"ECMAScript, TC39, and the History of JavaScript","description":"In this post, you'll learn the history of JavaScript as well as three distinct but important aspects of it - Ecma, EcmaScript, and the TC39.","image":"https://res.cloudinary.com/uidotdev/image/upload/c_fit,co_rgb:f9f4da,fl_text_no_trim,l_text:fonts:proxima-nova-extrabold.ttf_80_center_line_spacing_-18:ECMAScript%252C%20TC39%252C%20and%20the%20History%20of%20JavaScript,w_1100/c_fill,g_north,h_630,w_1200/bg","course":{"courseId":"modern-javascript","name":"modern-javascript"},"content":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n p: \"p\",\n a: \"a\"\n }, _provideComponents(), props.components);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.p, {\n metastring: \"\",\n children: \"JavaScript is a living language that is constantly adding new features. As a JavaScript developer, it's important to understand the underlying process that's needed to take a new feature and transform it from a simple idea, to part of official language specification. To do that, we'll cover three topics - Ecma, EcmaScript, and the TC39.\"\n }), \"\\n\", _jsxs(_components.p, {\n metastring: \"\",\n children: [\"First, let's take ourselves back to 1995. The cult classic \", _jsx(_components.a, {\n href: \"https://www.youtube.com/watch?v=uD4GclR6ZEo\",\n metastring: \"\",\n children: \"Heavy weights\"\n }), \" was in theaters, Nicolas Cage won an Oscar, and websites typically looked \", _jsx(_components.a, {\n href: \"http://berkshirehathaway.com/\",\n metastring: \"\",\n children: \"something like this\"\n }), \". Now, odds are the way you would view that website would be with \", _jsx(_components.a, {\n href: \"https://en.wikipedia.org/wiki/Netscape_Navigator\",\n metastring: \"\",\n children: \"Netscape Navigator\"\n }), \". At the time, Netscape Navigator was the most popular web browser with almost 80% market share. The founder of Netscape, the company behind Netscape Navigator, was \", _jsx(_components.a, {\n href: \"https://twitter.com/pmarca\",\n metastring: \"\",\n children: \"Marc Andreessen\"\n }), \". He has a vision for the future of the web and it was more than just a way to share and distribute documents. He envisioned a more dynamic platform with client side interactivity - a sort of “glue language” that was easy to use by both designers and developers. This is where \", _jsx(_components.a, {\n href: \"https://twitter.com/BrendanEich\",\n metastring: \"\",\n children: \"Brendan Eich\"\n }), \" comes into the picture.\"]\n }), \"\\n\", _jsxs(_components.p, {\n metastring: \"\",\n children: [\"Brendan was recruited by Netscape with the goal of embedding the Scheme programming language into Netscape Navigator. However, before he could get started, Netscape collaborated with \", _jsx(_components.a, {\n href: \"https://en.wikipedia.org/wiki/Sun_Microsystems\",\n metastring: \"\",\n children: \"Sun Microsystems\"\n }), \" to make their up and coming programming language Java available in the browser. Now, if Java was already a suitable language, why bring on Brendan to create another one?. If you remember back to Netscape’s goal, they wanted \\\"a scripting language that was simple enough for designers and amateurs to use\\\" - sadly, Java wasn’t that. From there, the idea became that Java could be used by \\\"professionals\\\" and this new language “Mocha” (which was the initial name of JavaScript) would be used by everyone else. Because of this collaboration between languages, Netscape decided that Mocha needed to compliment Java and should have a relatively similar syntax.\"]\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"From there, as the legend states, in just 10 days Brendan created the first version of Mocha. This version had some functionality from Scheme, the object orientation of SmallTalk, and because of the collaboration, the syntax of Java. Eventually the name Mocha changed to LiveScript then LiveScript changed to JavaScript as a marketing ploy to ride the hype of Java. So at this point, JavaScript was marketed as a scripting language for the browser - accessible to both amateurs and designers while Java was the professional tool for building rich web components.\"\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"Now, it’s important to understand the context of when these events were happening. Besides Nicolas Cage winning an Oscar, Microsoft was also working on Internet Explorer. Because JavaScript fundamentally changed the user experience of the web, if you were a competing browser, since there was no JavaScript specification, you had no choice but to come up with your own implementation. As history shows, that’s exactly what Microsoft did and they called it JScript.\"\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"This then lead to a pretty famous problem in the history of the internet. JScript filled the same use case as JavaScript, but its implementation was different. This meant that you couldn’t build one website and expect it to work on both Internet Explorer and Netscape Navigator. In fact, the two implementations were so different that “Best viewed in Netscape” and “Best viewed in Internet Explorer” badges became common for most companies who couldn’t afford to build for both implementations. Finally, this is where Ecma comes into the picture.\"\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"Ecma International is “an industry association founded in 1961, dedicated to the standardization of information and communication systems”. In November of 1996, Netscape submitted JavaScript to Ecma to build out a standard specification. By doing this, it gave other implementors a voice in the evolution of the language and, ideally, it would help keep other implementations consistent across browsers.\"\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"Under Ecma, each new specification comes with a standard and a committee. In JavaScript’s case, the standard is ECMA-262 and the committee who works on the ECMA-262 standard is the TC39. If you look up the ECMA262 standard, you’ll notice that the term “JavaScript” is never used. Instead, they use the term “EcmaScript” to talk about the official language. The reason for this is because Oracle owns the trademark for the term “JavaScript”. To avoid legal issues, Ecma decided to use the term EcmaScript instead. In the real world, ECMAScript is usually used to refer to the official standard, ECMA-262, while JavaScript is used when talking about the language in practice. As mentioned earlier, the committee which oversees the evolution of the Ecma262 standard is the TC39, which stands for Technical Committee 39. The TC39 is made up of “members” who are typically browser vendors and large companies who’ve invested heavily in the web like Facebook and PayPal. To attend the meetings, “members” (again, large companies and browser vendors) will send “delegates” to represent said company or browser. It’s these delegates who are responsible for creating, approving, or denying language proposals.\"\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"When a new proposal is created, that proposal has to go through certain stages before it becomes part of the official specification. It’s important to keep in mind that in order for any proposal to move from one stage to another, a consensus among the TC39 must be met. This means that a large majority must agree while nobody strongly disagrees enough to veto a specific proposal.\"\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"Each new proposal starts off at Stage 0. This stage is called the \\\"Straw man\\\" stage. Stage 0 proposals are “proposals which are planned to be presented to the committee by a TC39 champion or, have been presented to the committee and not rejected definitively, but have not yet achieved any of the criteria to get into stage 1.” So the only requirement for becoming a Stage 0 proposal is that the document must be reviewed at a TC39 meeting. It’s important to note that using a Stage 0 feature in your codebase is fine, but even if it does continue on to become part of the official spec, it’ll almost certainly go through a few iterations before then.\"\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"The next stage in the maturity of a new proposal is Stage 1. In order to progress to Stage 1, an official “champion” who is part of TC39 must be identified and is responsible for the proposal. In addition, the proposal needs to describe the problem it solves, have illustrative examples of usage, a high level API, and identify any potential concerns and implementation challenges. By accepting a proposal for stage 1, the committee signals they’re willing to spend resources to look into the proposal in more depth.\"\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"The next stage is Stage 2. At this point, it’s more than likely that this feature will eventually become part of the official specification. In order to make it to stage 2, the proposal must, in formal language, have a description of the syntax and semantics of the new feature. In other words, a draft, or a first version of what will be in the official specification is written. This is the stage to really lock down all aspects of the feature. Future changes may still likely occur, but they should only be minor, incremental changes.\"\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"Next up is Stage 3. At this point the proposal is mostly finished and now it just needs feedback from implementors and users to progress further. In order to progress to Stage 3, the spec text should be finished and at least two spec compliant implementations must be created.\"\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"The last stage is Stage 4. At this point, the proposal is ready to be included in the official specification. To get to Stage 4, tests have to be written, two spec compliant implementations should pass those tests, members should have significant practical experience with the new feature, and the EcmaScript spec editor must sign off on the spec text. Basically once a proposal makes it to stage 4, it’s ready to stop being a proposal and make its way into the official specification. This brings up the last thing you need to know about this whole process and that is TC39s release schedule.\"\n }), \"\\n\", _jsx(_components.p, {\n metastring: \"\",\n children: \"As of 2016, a new version of ECMAScript is released every year with whatever features are ready at that time. What that means is that any Stage 4 proposals that exist when a new release happens, will be included in the release for that year. Because of this yearly release cycle, new features should be much more incremental and easier to adopt.\"\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n"},"__N_SSG":true},"page":"/[...id]","query":{"id":["ecmascript"]},"buildId":"x81nB9NAPB_rknpy9ix3x","isFallback":false,"isExperimentalCompile":false,"gsp":true,"scriptLoader":[]}</script></body></html>