From 286fa19e191cb7867c203ea27d37691185dddc69 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Mon, 21 Sep 2020 15:21:57 -0300
Subject: [PATCH 1/6] mdn links

---
 1-js/99-js-misc/01-proxy/article.md              | 6 +++---
 1-js/99-js-misc/05-bigint/article.md             | 2 +-
 2-ui/99-ui-misc/02-selection-range/article.md    | 2 +-
 4-binary/01-arraybuffer-binary-arrays/article.md | 2 +-
 4-binary/03-blob/article.md                      | 6 +++---
 5-network/07-url/article.md                      | 8 ++++----
 5-network/08-xmlhttprequest/article.md           | 2 +-
 8-web-components/2-custom-elements/article.md    | 2 +-
 8 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/1-js/99-js-misc/01-proxy/article.md b/1-js/99-js-misc/01-proxy/article.md
index 4c8d328819..57ec4e58c1 100644
--- a/1-js/99-js-misc/01-proxy/article.md
+++ b/1-js/99-js-misc/01-proxy/article.md
@@ -994,7 +994,7 @@ We use `WeakMap` instead of `Map` here because it won't block garbage collection
 ## References
 
 - Specification: [Proxy](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots).
-- MDN: [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).
+- MDN: [Proxy](mdn:/JavaScript/Reference/Global_Objects/Proxy).
 
 ## Summary
 
@@ -1016,13 +1016,13 @@ We can trap:
 - Reading (`get`), writing (`set`), deleting (`deleteProperty`) a property (even a non-existing one).
 - Calling a function (`apply` trap).
 - The `new` operator (`construct` trap).
-- Many other operations (the full list is at the beginning of the article and in the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)).
+- Many other operations (the full list is at the beginning of the article and in the [docs](mdn:/JavaScript/Reference/Global_Objects/Proxy)).
 
 That allows us to create "virtual" properties and methods, implement default values, observable objects, function decorators and so much more.
 
 We can also wrap an object multiple times in different proxies, decorating it with various aspects of functionality.
 
-The [Reflect](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect) API is designed to complement [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). For any `Proxy` trap, there's a `Reflect` call with same arguments. We should use those to forward calls to target objects.
+The [Reflect](mdn:/JavaScript/Reference/Global_Objects/Reflect) API is designed to complement [Proxy](mdn:/JavaScript/Reference/Global_Objects/Proxy). For any `Proxy` trap, there's a `Reflect` call with same arguments. We should use those to forward calls to target objects.
 
 Proxies have some limitations:
 
diff --git a/1-js/99-js-misc/05-bigint/article.md b/1-js/99-js-misc/05-bigint/article.md
index 7f59ecb55e..ff99ded971 100644
--- a/1-js/99-js-misc/05-bigint/article.md
+++ b/1-js/99-js-misc/05-bigint/article.md
@@ -126,5 +126,5 @@ We can use such JSBI code "as is" for engines that don't support bigints and for
 
 ## 참고 자료
 
-- [MDN docs on BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt).
+- [MDN docs on BigInt](mdn:/JavaScript/Reference/Global_Objects/BigInt).
 - [Specification](https://tc39.es/ecma262/#sec-bigint-objects).
diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md
index b908eb6b4a..9b6deb0d33 100644
--- a/2-ui/99-ui-misc/02-selection-range/article.md
+++ b/2-ui/99-ui-misc/02-selection-range/article.md
@@ -259,7 +259,7 @@ Click buttons to run methods on the selection, "resetExample" to reset it.
 </script>
 ```
 
-There also exist methods to compare ranges, but these are rarely used. When you need them, please refer to the [spec](https://dom.spec.whatwg.org/#interface-range) or [MDN manual](https://developer.mozilla.org/en-US/docs/Web/API/Range).
+There also exist methods to compare ranges, but these are rarely used. When you need them, please refer to the [spec](https://dom.spec.whatwg.org/#interface-range) or [MDN manual](mdn:/api/Range).
 
 
 ## Selection
diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md
index 6e6ea8022f..4beb6f5cd9 100644
--- a/4-binary/01-arraybuffer-binary-arrays/article.md
+++ b/4-binary/01-arraybuffer-binary-arrays/article.md
@@ -209,7 +209,7 @@ These methods allow us to copy typed arrays, mix them, create new arrays from ex
 
 ## DataView
 
-[DataView](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView) is a special super-flexible "untyped" view over `ArrayBuffer`. It allows to access the data on any offset in any format.
+[DataView](mdn:/JavaScript/Reference/Global_Objects/DataView) is a special super-flexible "untyped" view over `ArrayBuffer`. It allows to access the data on any offset in any format.
 
 - For typed arrays, the constructor dictates what the format is. The whole array is supposed to be uniform. The i-th number is `arr[i]`.
 - With `DataView` we access the data with methods like `.getUint8(i)` or `.getUint16(i)`. We choose the format at method call time instead of the construction time.
diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md
index 84cf6f1cca..bb475bc7fa 100644
--- a/4-binary/03-blob/article.md
+++ b/4-binary/03-blob/article.md
@@ -119,7 +119,7 @@ An alternative to `URL.createObjectURL` is to convert a `Blob` into a base64-enc
 
 That encoding represents binary data as a string of ultra-safe "readable" characters with ASCII-codes from 0 to 64. And what's more important -- we can use this encoding in "data-urls".
 
-A [data url](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) has the form `data:[<mediatype>][;base64],<data>`. We can use such urls everywhere, on par with "regular" urls.
+A [data url](mdn:/http/Data_URIs) has the form `data:[<mediatype>][;base64],<data>`. We can use such urls everywhere, on par with "regular" urls.
 
 For instance, here's a smiley:
 
@@ -166,8 +166,8 @@ We can create a `Blob` of an image, an image part, or even make a page screensho
 
 Image operations are done via `<canvas>` element:
 
-1. Draw an image (or its part) on canvas using [canvas.drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage).
-2. Call canvas method [.toBlob(callback, format, quality)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) that creates a `Blob` and runs `callback` with it when done.
+1. Draw an image (or its part) on canvas using [canvas.drawImage](mdn:/api/CanvasRenderingContext2D/drawImage).
+2. Call canvas method [.toBlob(callback, format, quality)](mdn:/api/HTMLCanvasElement/toBlob) that creates a `Blob` and runs `callback` with it when done.
 
 In the example below, an image is just copied, but we could cut from it, or transform it on canvas prior to making a blob:
 
diff --git a/5-network/07-url/article.md b/5-network/07-url/article.md
index c41400451d..09a4696e73 100644
--- a/5-network/07-url/article.md
+++ b/5-network/07-url/article.md
@@ -145,10 +145,10 @@ If we use a string though, we need to encode/decode special characters manually.
 
 There are built-in functions for that:
 
-- [encodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) - encodes URL as a whole.
-- [decodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI) - decodes it back.
-- [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) - encodes a URL component, such as a search parameter, or a hash, or a pathname.
-- [decodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) - decodes it back.
+- [encodeURI](mdn:/JavaScript/Reference/Global_Objects/encodeURI) - encodes URL as a whole.
+- [decodeURI](mdn:/JavaScript/Reference/Global_Objects/decodeURI) - decodes it back.
+- [encodeURIComponent](mdn:/JavaScript/Reference/Global_Objects/encodeURIComponent) - encodes a URL component, such as a search parameter, or a hash, or a pathname.
+- [decodeURIComponent](mdn:/JavaScript/Reference/Global_Objects/decodeURIComponent) - decodes it back.
 
 A natural question is: "What's the difference between `encodeURIComponent` and `encodeURI`? When we should use either?"
 
diff --git a/5-network/08-xmlhttprequest/article.md b/5-network/08-xmlhttprequest/article.md
index 41b18ade04..1a2b754e0a 100644
--- a/5-network/08-xmlhttprequest/article.md
+++ b/5-network/08-xmlhttprequest/article.md
@@ -332,7 +332,7 @@ There are 3 methods for HTTP-headers:
 
 ## POST, FormData
 
-To make a POST request, we can use the built-in [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object.
+To make a POST request, we can use the built-in [FormData](mdn:api/FormData) object.
 
 The syntax:
 
diff --git a/8-web-components/2-custom-elements/article.md b/8-web-components/2-custom-elements/article.md
index 702ff90739..5a07cc6794 100644
--- a/8-web-components/2-custom-elements/article.md
+++ b/8-web-components/2-custom-elements/article.md
@@ -115,7 +115,7 @@ customElements.define("time-formatted", TimeFormatted); // (2)
 ></time-formatted>
 ```
 
-1. The class has only one method `connectedCallback()` -- the browser calls it when `<time-formatted>` element is added to page (or when HTML parser detects it), and it uses the built-in [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) data formatter, well-supported across the browsers, to show a nicely formatted time.
+1. The class has only one method `connectedCallback()` -- the browser calls it when `<time-formatted>` element is added to page (or when HTML parser detects it), and it uses the built-in [Intl.DateTimeFormat](mdn:/JavaScript/Reference/Global_Objects/DateTimeFormat) data formatter, well-supported across the browsers, to show a nicely formatted time.
 2. We need to register our new element by `customElements.define(tag, class)`.
 3. And then we can use it everywhere.
 

From d4bae669a2ce5ba3d5a91f314b5939b664c32f2a Mon Sep 17 00:00:00 2001
From: Vse Mozhe Buty <vsemozhetbyt@gmail.com>
Date: Wed, 25 Nov 2020 17:10:48 +0200
Subject: [PATCH 2/6] Fix possible typos in 4.1 (ArrayBuffer, binary arrays)

---
 4-binary/01-arraybuffer-binary-arrays/article.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md
index 4beb6f5cd9..accd3c5053 100644
--- a/4-binary/01-arraybuffer-binary-arrays/article.md
+++ b/4-binary/01-arraybuffer-binary-arrays/article.md
@@ -34,7 +34,7 @@ A view object does not store anything on it's own. It's the "eyeglasses" that gi
 
 For instance:
 
-- **`Uint8Array`** -- treats each byte in `ArrayBuffer` as a separate number, with possible values are from 0 to 255 (a byte is 8-bit, so it can hold only that much). Such value is called a "8-bit unsigned integer".
+- **`Uint8Array`** -- treats each byte in `ArrayBuffer` as a separate number, with possible values from 0 to 255 (a byte is 8-bit, so it can hold only that much). Such value is called a "8-bit unsigned integer".
 - **`Uint16Array`** -- treats every 2 bytes as an integer, with possible values from 0 to 65535. That's called a "16-bit unsigned integer".
 - **`Uint32Array`** -- treats every 4 bytes as an integer, with possible values from 0 to 4294967295. That's called a "32-bit unsigned integer".
 - **`Float64Array`** -- treats every 8 bytes as a floating point number with possible values from <code>5.0x10<sup>-324</sup></code> to <code>1.8x10<sup>308</sup></code>.
@@ -77,7 +77,7 @@ Please note, there's no constructor called `TypedArray`, it's just a common "umb
 
 When you see something like `new TypedArray`, it means any of `new Int8Array`, `new Uint8Array`, etc.
 
-Typed array behave like regular arrays: have indexes and iterable.
+Typed arrays behave like regular arrays: have indexes and are iterable.
 
 A typed array constructor (be it `Int8Array` or `Float64Array`, doesn't matter) behaves differently depending on argument types.
 
@@ -259,7 +259,7 @@ To do almost any operation on `ArrayBuffer`, we need a view.
     - `Float32Array`, `Float64Array` -- for signed floating-point numbers of 32 and 64 bits.
 - Or a `DataView` -- the view that uses methods to specify a format, e.g. `getUint8(offset)`.
 
-In most cases we create and operate directly on typed arrays, leaving `ArrayBuffer` under cover, as a "common discriminator". We can access it as `.buffer` and make another view if needed.
+In most cases we create and operate directly on typed arrays, leaving `ArrayBuffer` under cover, as a "common denominator". We can access it as `.buffer` and make another view if needed.
 
 There are also two additional terms, that are used in descriptions of methods that operate on binary data:
 - `ArrayBufferView` is an umbrella term for all these kinds of views.

From 7d4ae546e548a5bc5b90a090b98c45fe920ae881 Mon Sep 17 00:00:00 2001
From: Ilya Kantor <iliakan@gmail.com>
Date: Mon, 1 Nov 2021 23:15:10 +0300
Subject: [PATCH 3/6] minor fixes

---
 .../01-animate-circle-callback/solution.view/index.html     | 2 +-
 .../03-animate-circle-promise/solution.view/index.html      | 2 +-
 .../07-carousel/solution.view/index.html                    | 2 +-
 .../2-hoverintent/solution.view/hoverIntent.js              | 2 +-
 4-binary/01-arraybuffer-binary-arrays/article.md            | 6 +++---
 .../3-animate-circle/solution.view/index.html               | 2 +-
 .../3-animate-circle/source.view/index.html                 | 2 +-
 .../3-js-animation/1-animate-ball/solution.view/index.html  | 2 +-
 .../2-animate-ball-hops/solution.view/index.html            | 2 +-
 7-animation/3-js-animation/article.md                       | 2 +-
 7-animation/3-js-animation/bounce-easeinout.view/index.html | 2 +-
 7-animation/3-js-animation/bounce-easeout.view/index.html   | 2 +-
 7-animation/3-js-animation/bounce.view/index.html           | 2 +-
 7-animation/3-js-animation/text.view/index.html             | 2 +-
 14 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html b/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html
index 7fbb4efcab..ded047297c 100644
--- a/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html
+++ b/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html
@@ -10,7 +10,7 @@
       text-align: center;
     }
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);
diff --git a/1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html b/1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
index 3229daf89f..6052f009ee 100644
--- a/1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
+++ b/1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
@@ -10,7 +10,7 @@
       text-align: center;
     }
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
index 2c60733165..baf8676644 100644
--- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
+++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
@@ -10,7 +10,7 @@
   <div id="carousel" class="carousel">
     <button class="arrow prev">⇦</button>
     <div class="gallery">
-      <ul class="images">
+      <ul>
         <li><img src="https://en.js.cx/carousel/1.png"></li>
         <li><img src="https://en.js.cx/carousel/2.png"></li>
         <li><img src="https://en.js.cx/carousel/3.png"></li>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
index 4e6e2a3e95..7503ca9c2f 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
@@ -88,7 +88,7 @@ class HoverIntent {
     if (speed < this.sensitivity) {
       clearInterval(this.checkSpeedInterval);
       this.isHover = true;
-      this.over.call(this.elem, event);
+      this.over.call(this.elem);
     } else {
       // speed fast, remember new coordinates as the previous ones
       this.prevX = this.lastX;
diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md
index accd3c5053..95c18dda9c 100644
--- a/4-binary/01-arraybuffer-binary-arrays/article.md
+++ b/4-binary/01-arraybuffer-binary-arrays/article.md
@@ -126,9 +126,9 @@ new TypedArray();
 
 We can create a `TypedArray` directly, without mentioning `ArrayBuffer`. But a view cannot exist without an underlying `ArrayBuffer`, so gets created automatically in all these cases except the first one (when provided).
 
-To access the `ArrayBuffer`, there are properties:
-- `arr.buffer` -- references the `ArrayBuffer`.
-- `arr.byteLength` -- the length of the `ArrayBuffer`.
+To access the underlying `ArrayBuffer`, there are following properties in `TypedArray`:
+- `buffer` -- references the `ArrayBuffer`.
+- `byteLength` -- the length of the `ArrayBuffer`.
 
 So, we can always move from one view to another:
 ```js
diff --git a/7-animation/2-css-animations/3-animate-circle/solution.view/index.html b/7-animation/2-css-animations/3-animate-circle/solution.view/index.html
index 88b1542545..43b927e8ab 100644
--- a/7-animation/2-css-animations/3-animate-circle/solution.view/index.html
+++ b/7-animation/2-css-animations/3-animate-circle/solution.view/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <style>
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);
diff --git a/7-animation/2-css-animations/3-animate-circle/source.view/index.html b/7-animation/2-css-animations/3-animate-circle/source.view/index.html
index a423280de0..e305f4cf61 100644
--- a/7-animation/2-css-animations/3-animate-circle/source.view/index.html
+++ b/7-animation/2-css-animations/3-animate-circle/source.view/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <style>
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);
diff --git a/7-animation/3-js-animation/1-animate-ball/solution.view/index.html b/7-animation/3-js-animation/1-animate-ball/solution.view/index.html
index 7e031e8d13..146033cf72 100644
--- a/7-animation/3-js-animation/1-animate-ball/solution.view/index.html
+++ b/7-animation/3-js-animation/1-animate-ball/solution.view/index.html
@@ -21,7 +21,7 @@
     }
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }
diff --git a/7-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html b/7-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html
index b246f422f0..f587ff607a 100644
--- a/7-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html
+++ b/7-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html
@@ -21,7 +21,7 @@
     }
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }
diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md
index 0049543401..b94ccbd9a4 100644
--- a/7-animation/3-js-animation/article.md
+++ b/7-animation/3-js-animation/article.md
@@ -283,7 +283,7 @@ The `bounce` function does the same, but in the reverse order: "bouncing" starts
 
 ```js
 function bounce(timeFraction) {
-  for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+  for (let a = 0, b = 1; 1; a += b, b /= 2) {
     if (timeFraction >= (7 - 4 * a) / 11) {
       return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
     }
diff --git a/7-animation/3-js-animation/bounce-easeinout.view/index.html b/7-animation/3-js-animation/bounce-easeinout.view/index.html
index 837c50db1c..aed3d9d081 100644
--- a/7-animation/3-js-animation/bounce-easeinout.view/index.html
+++ b/7-animation/3-js-animation/bounce-easeinout.view/index.html
@@ -26,7 +26,7 @@
 
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }
diff --git a/7-animation/3-js-animation/bounce-easeout.view/index.html b/7-animation/3-js-animation/bounce-easeout.view/index.html
index e52eae8deb..69dbb7ce08 100644
--- a/7-animation/3-js-animation/bounce-easeout.view/index.html
+++ b/7-animation/3-js-animation/bounce-easeout.view/index.html
@@ -22,7 +22,7 @@
     }
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }
diff --git a/7-animation/3-js-animation/bounce.view/index.html b/7-animation/3-js-animation/bounce.view/index.html
index 1be2580d98..3575ed8205 100644
--- a/7-animation/3-js-animation/bounce.view/index.html
+++ b/7-animation/3-js-animation/bounce.view/index.html
@@ -19,7 +19,7 @@
       animate({
         duration: 3000,
         timing: function bounce(timeFraction) {
-          for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+          for (let a = 0, b = 1; 1; a += b, b /= 2) {
             if (timeFraction >= (7 - 4 * a) / 11) {
               return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
             }
diff --git a/7-animation/3-js-animation/text.view/index.html b/7-animation/3-js-animation/text.view/index.html
index e404fe5c40..001b0ae94c 100644
--- a/7-animation/3-js-animation/text.view/index.html
+++ b/7-animation/3-js-animation/text.view/index.html
@@ -36,7 +36,7 @@
 
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }

From aa8f6ff40eacc13a69b30dfaf3eef59736ebf9f2 Mon Sep 17 00:00:00 2001
From: Dan Wallis <mrdanwallis@gmail.com>
Date: Wed, 13 Apr 2022 11:43:59 +0100
Subject: [PATCH 4/6] Correct mis-use of "it's"

---
 .../10-destructuring-assignment/article.md             |  2 +-
 2-ui/1-document/09-size-and-scroll/article.md          |  4 ++--
 3-frames-and-windows/01-popup-windows/article.md       | 10 +++++-----
 .../03-cross-window-communication/article.md           |  2 +-
 4-binary/01-arraybuffer-binary-arrays/article.md       |  2 +-
 5-network/06-fetch-api/article.md                      |  2 +-
 7-animation/3-js-animation/article.md                  |  2 +-
 9-regular-expressions/04-regexp-anchors/article.md     |  2 +-
 8 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md
index e8076ec788..42842f08a1 100644
--- a/1-js/05-data-types/10-destructuring-assignment/article.md
+++ b/1-js/05-data-types/10-destructuring-assignment/article.md
@@ -7,6 +7,7 @@
 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 하죠.
 
 이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법인 *구조 분해 할당(destructuring assignment)* 을 사용할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘합니다.
+*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient.
 
 ## 배열 분해하기
 
@@ -69,7 +70,6 @@ alert( title ); // Consul
 let [a, b, c] = "abc"; // ["a", "b", "c"]
 let [one, two, three] = new Set([1, 2, 3]);
 ```
-
 ````
 
 
diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md
index 1bf3e861e3..58f633c5e3 100644
--- a/2-ui/1-document/09-size-and-scroll/article.md
+++ b/2-ui/1-document/09-size-and-scroll/article.md
@@ -17,8 +17,8 @@
     width: 300px;
     height: 200px;
     border: 25px solid #E8C48F;
-    padding: 20px;              
-    overflow: auto;             
+    padding: 20px;
+    overflow: auto;
   }
 </style>
 ```
diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md
index 7540b03045..3abccac791 100644
--- a/3-frames-and-windows/01-popup-windows/article.md
+++ b/3-frames-and-windows/01-popup-windows/article.md
@@ -87,7 +87,7 @@ Settings for `params`:
 
 There is also a number of less supported browser-specific features, which are usually not used. Check <a href="https://developer.mozilla.org/en/DOM/window.open">window.open in MDN</a> for examples.
 
-## Example: a minimalistic window   
+## Example: a minimalistic window
 
 Let's open a window with minimal set of features, just to see which of them browser allows to disable:
 
@@ -120,7 +120,7 @@ Rules for omitted settings:
 
 ## Accessing popup from window
 
-The `open` call returns a reference to the new window. It can be used to manipulate it's properties, change location and even more.
+The `open` call returns a reference to the new window. It can be used to manipulate its properties, change location and even more.
 
 In this example, we generate popup content from JavaScript:
 
@@ -239,7 +239,7 @@ There's also `window.onscroll` event.
 
 Theoretically, there are `window.focus()` and `window.blur()` methods to focus/unfocus on a window. And there are also `focus/blur` events that allow to catch the moment when the visitor focuses on a window and switches elsewhere.
 
-Although, in practice they are severely limited, because in the past evil pages abused them. 
+Although, in practice they are severely limited, because in the past evil pages abused them.
 
 For instance, look at this code:
 
@@ -257,10 +257,10 @@ Still, there are some use cases when such calls do work and can be useful.
 
 For instance:
 
-- When we open a popup, it's might be a good idea to run a `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
+- When we open a popup, it might be a good idea to run `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
 - If we want to track when a visitor actually uses our web-app, we can track `window.onfocus/onblur`. That allows us to suspend/resume in-page activities, animations etc. But please note that the `blur` event means that the visitor switched out from the window, but they still may observe it. The window is in the background, but still may be visible.
 
-## Summary   
+## Summary
 
 Popup windows are used rarely, as there are alternatives: loading and displaying information in-page, or in iframe.
 
diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index 53f5f55fc4..bac89621ee 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -268,7 +268,7 @@ Arguments:
 `targetOrigin`
 : Specifies the origin for the target window, so that only a window from the given origin will get the message.
 
-The `targetOrigin` is a safety measure. Remember, if the target window comes from another origin, we can't read it's `location` in the sender window. So we can't be sure which site is open in the intended window right now: the user could navigate away, and the sender window has no idea about it.
+The `targetOrigin` is a safety measure. Remember, if the target window comes from another origin, we can't read its `location` in the sender window. So we can't be sure which site is open in the intended window right now: the user could navigate away, and the sender window has no idea about it.
 
 Specifying `targetOrigin` ensures that the window only receives the data if it's still at the right site. Important when the data is sensitive.
 
diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md
index 95c18dda9c..baec993bfb 100644
--- a/4-binary/01-arraybuffer-binary-arrays/article.md
+++ b/4-binary/01-arraybuffer-binary-arrays/article.md
@@ -30,7 +30,7 @@ Let's eliminate a possible source of confusion. `ArrayBuffer` has nothing in com
 
 **To manipulate an `ArrayBuffer`, we need to use a "view" object.**
 
-A view object does not store anything on it's own. It's the "eyeglasses" that give an interpretation of the bytes stored in the `ArrayBuffer`.
+A view object does not store anything on its own. It's the "eyeglasses" that give an interpretation of the bytes stored in the `ArrayBuffer`.
 
 For instance:
 
diff --git a/5-network/06-fetch-api/article.md b/5-network/06-fetch-api/article.md
index 413aa47b06..2ce43e11a8 100644
--- a/5-network/06-fetch-api/article.md
+++ b/5-network/06-fetch-api/article.md
@@ -179,7 +179,7 @@ The `integrity` option allows to check if the response matches the known-ahead c
 
 As described in the [specification](https://w3c.github.io/webappsec-subresource-integrity/), supported hash-functions are SHA-256, SHA-384, and SHA-512, there might be others depending on a browser.
 
-For example, we're downloading a file, and we know that it's SHA-256 checksum is "abcdef" (a real checksum is longer, of course).
+For example, we're downloading a file, and we know that its SHA-256 checksum is "abcdef" (a real checksum is longer, of course).
 
 We can put it in the `integrity` option, like this:
 
diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md
index b94ccbd9a4..bb56244f44 100644
--- a/7-animation/3-js-animation/article.md
+++ b/7-animation/3-js-animation/article.md
@@ -159,7 +159,7 @@ Function `animate` accepts 3 parameters that essentially describes the animation
     }
     ```
 
-    It's graph:
+    Its graph:
     ![](linear.svg)
 
     That's just like `transition-timing-function: linear`. There are more interesting variants shown below.
diff --git a/9-regular-expressions/04-regexp-anchors/article.md b/9-regular-expressions/04-regexp-anchors/article.md
index f0796d928f..edd221c0a0 100644
--- a/9-regular-expressions/04-regexp-anchors/article.md
+++ b/9-regular-expressions/04-regexp-anchors/article.md
@@ -16,7 +16,7 @@ alert( /^Mary/.test(str1) ); // true
 위와 유사하게 `pattern:snow$`를 사용해서 문자열이 `snow`로 끝나는지 검사할 수 있습니다.
 
 ```js run
-let str1 = "it's fleece was white as snow";
+let str1 = "its fleece was white as snow";
 alert( /snow$/.test(str1) ); // true
 ```
 

From ec6fe4c2029e8236bad059ec5226d4416d7a707f Mon Sep 17 00:00:00 2001
From: icarrington <isaiah.carrington@uconn.edu>
Date: Sun, 10 Jul 2022 22:49:40 -0400
Subject: [PATCH 5/6] Fix Typo

---
 4-binary/01-arraybuffer-binary-arrays/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md
index baec993bfb..2827e277e2 100644
--- a/4-binary/01-arraybuffer-binary-arrays/article.md
+++ b/4-binary/01-arraybuffer-binary-arrays/article.md
@@ -71,7 +71,7 @@ for(let num of view) {
 
 ## TypedArray
 
-The common term for all these views (`Uint8Array`, `Uint32Array`, etc) is [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). They share the same set of methods and properities.
+The common term for all these views (`Uint8Array`, `Uint32Array`, etc) is [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). They share the same set of methods and properties.
 
 Please note, there's no constructor called `TypedArray`, it's just a common "umbrella" term to represent one of views over `ArrayBuffer`: `Int8Array`, `Uint8Array` and so on, the full list will soon follow.
 

From 30cac10ac71db0a3924a04658d99989bcb6df286 Mon Sep 17 00:00:00 2001
From: HoonDongKang <d159123@naver.com>
Date: Wed, 3 Jun 2026 14:32:13 +0900
Subject: [PATCH 6/6] =?UTF-8?q?Part=203.=202.1=20ArrayBuffer,=20binary=20a?=
 =?UTF-8?q?rrays=20=EB=B2=88=EC=97=AD(#1876)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01-arraybuffer-binary-arrays/article.md   | 236 +++++++++---------
 1 file changed, 118 insertions(+), 118 deletions(-)

diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md
index 2827e277e2..ea6e9c87ab 100644
--- a/4-binary/01-arraybuffer-binary-arrays/article.md
+++ b/4-binary/01-arraybuffer-binary-arrays/article.md
@@ -1,87 +1,87 @@
-# ArrayBuffer, binary arrays
+# ArrayBuffer와 이진 배열
 
-In web-development we meet binary data mostly while dealing with files (create, upload, download). Another typical use case is image processing.
+웹 개발에서 파일 생성, 업로드, 다운로드를 처리할 때 이진 데이터를 주로 사용합니다. 이미지 처리 또한 대표적인 이진 데이터 사용 사례 중 하나입니다.
 
-That's all possible in JavaScript, and binary operations are high-performant.
+자바스크립트에서는 이 모든 작업이 가능하며 이진 연산에서도 뛰어난 성능을 보여줍니다.
 
-Although, there's a bit of confusion, because there are many classes. To name a few:
-- `ArrayBuffer`, `Uint8Array`, `DataView`, `Blob`, `File`, etc.
+다만 아래와 같은 다양한 클래스로 인해 약간 혼란스러울 수 있습니다.
+- `ArrayBuffer`, `Uint8Array`, `DataView`, `Blob`, `File` 등
 
-Binary data in JavaScript is implemented in a non-standard way, compared to other languages. But when we sort things out, everything becomes fairly simple.
+자바스크립트에서 이진 데이터는 다른 프로그래밍 언어에 비해 표준적이지 않은 방식으로 구현되어 있습니다. 하지만 개념을 하나씩 정리하고 나면 꽤 단순하게 이해할 수 있습니다.
 
-**The basic binary object is `ArrayBuffer` -- a reference to a fixed-length contiguous memory area.**
+**가장 기본이 되는 이진 객체는 `ArrayBuffer`입니다. `ArrayBuffer`는 고정 길이의 연속된 메모리 영역을 참조합니다.**
 
-We create it like this:
+다음과 같이 `ArrayBuffer`를 생성할 수 있습니다.
 ```js run
-let buffer = new ArrayBuffer(16); // create a buffer of length 16
+let buffer = new ArrayBuffer(16); // 길이가 16바이트인 버퍼 생성
 alert(buffer.byteLength); // 16
 ```
 
-This allocates a contiguous memory area of 16 bytes and pre-fills it with zeroes.
+이 코드는 16바이트의 연속된 메모리 공간을 할당하고 0으로 미리 채웁니다.
 
-```warn header="`ArrayBuffer` is not an array of something"
-Let's eliminate a possible source of confusion. `ArrayBuffer` has nothing in common with `Array`:
-- It has a fixed length, we can't increase or decrease it.
-- It takes exactly that much space in the memory.
-- To access individual bytes, another "view" object is needed, not `buffer[index]`.
+```warn header="`ArrayBuffer`는 배열이 아닙니다."
+혼동할 수 있는 부분을 먼저 짚고 넘어갑시다. `ArrayBuffer`는 `Array`와 전혀 공통점이 없습니다.
+- `ArrayBuffer`는 길이가 고정되어 있어, 늘리거나 줄일 수 없습니다.
+- `ArrayBuffer`는 메모리에서 정확히 선언된 길이만큼만 차지합니다.
+- 개별 바이트에 접근하려면 `buffer[index]`가 아닌 별도의 '뷰(view)' 객체가 필요합니다.
 ```
 
-`ArrayBuffer` is a memory area. What's stored in it? It has no clue. Just a raw sequence of bytes.
+`ArrayBuffer`는 메모리 영역입니다. 이 영역 안에 어떤 것이 저장될까요? `ArrayBuffer`는 알지 못합니다. 그저 가공되지 않은 일련의 바이트일 뿐입니다.
 
-**To manipulate an `ArrayBuffer`, we need to use a "view" object.**
+**`ArrayBuffer`를 조작하기 위해 '뷰' 객체가 필요합니다.**
 
-A view object does not store anything on its own. It's the "eyeglasses" that give an interpretation of the bytes stored in the `ArrayBuffer`.
+뷰 객체는 자체적으로 어떤 것도 저장하지 않으며 `ArrayBuffer`에 저장된 바이트를 해석하는 '안경' 역할을 수행합니다.
 
-For instance:
+예시:
 
-- **`Uint8Array`** -- treats each byte in `ArrayBuffer` as a separate number, with possible values from 0 to 255 (a byte is 8-bit, so it can hold only that much). Such value is called a "8-bit unsigned integer".
-- **`Uint16Array`** -- treats every 2 bytes as an integer, with possible values from 0 to 65535. That's called a "16-bit unsigned integer".
-- **`Uint32Array`** -- treats every 4 bytes as an integer, with possible values from 0 to 4294967295. That's called a "32-bit unsigned integer".
-- **`Float64Array`** -- treats every 8 bytes as a floating point number with possible values from <code>5.0x10<sup>-324</sup></code> to <code>1.8x10<sup>308</sup></code>.
+- **`Uint8Array`** -- `ArrayBuffer`의 각 바이트를 별개의 숫자로 취급합니다. 1바이트는 8비트이므로 0부터 255까지의 값을 가질 수 있으며 이러한 값을 '8비트 부호 없는 정수(8-bit unsigned integer)'라고 부릅니다.
+- **`Uint16Array`** -- 2바이트마다 하나의 정수로 취급합니다. 0부터 65535까지의 값을 가질 수 있으며 이러한 값을 '16비트 부호 없는 정수(16-bit unsigned integer)'라고 부릅니다.
+- **`Uint32Array`** -- 4바이트마다 하나의 정수로 취급합니다. 0부터 4294967295까지의 값을 가질 수 있으며 이러한 값을 '32비트 부호 없는 정수(32-bit unsigned integer)'라고 부릅니다.
+- **`Float64Array`** -- 8바이트마다 하나의 부동 소수점 숫자로 취급합니다. <code>5.0x10<sup>-324</sup></code>부터 <code>1.8x10<sup>308</sup></code>까지의 값을 가질 수 있습니다.
 
-So, the binary data in an `ArrayBuffer` of 16 bytes can be interpreted as 16 "tiny numbers", or 8 bigger numbers (2 bytes each), or 4 even bigger (4 bytes each), or 2 floating-point values with high precision (8 bytes each).
+따라서 16바이트 `ArrayBuffer`의 이진 데이터는 16개의 '작은 숫자', 8개의 더 큰 숫자(각 2바이트), 4개의 더 큰 숫자(각 4바이트), 정밀도가 높은 부동 소수점 값 2개(각 8바이트)로 해석할 수 있습니다.
 
 ![](arraybuffer-views.svg)
 
-`ArrayBuffer` is the core object, the root of everything, the raw binary data.
+`ArrayBuffer`는 이진 데이터 처리의 근간이 되는 핵심 객체이며, 가공되지 않은 이진 데이터를 저장하고 있습니다.
 
-But if we're going to write into it, or iterate over it, basically for almost any operation – we must use a view, e.g:
+하지만 `ArrayBuffer`에 값을 쓰거나 순회와 같은 기본 연산을 수행하려면 다음과 같이 뷰를 사용해야 합니다.
 
 ```js run
-let buffer = new ArrayBuffer(16); // create a buffer of length 16
+let buffer = new ArrayBuffer(16); // 길이가 16바이트인 버퍼 생성
 
 *!*
-let view = new Uint32Array(buffer); // treat buffer as a sequence of 32-bit integers
+let view = new Uint32Array(buffer); // 버퍼를 32비트 정수의 연속으로 취급
 
-alert(Uint32Array.BYTES_PER_ELEMENT); // 4 bytes per integer
+alert(Uint32Array.BYTES_PER_ELEMENT); // 정수 하나당 4바이트
 */!*
 
-alert(view.length); // 4, it stores that many integers
-alert(view.byteLength); // 16, the size in bytes
+alert(view.length); // 4, 정수 4개 저장 가능
+alert(view.byteLength); // 16, 전체 바이트 길이
 
-// let's write a value
+// 값을 저장해봅시다.
 view[0] = 123456;
 
-// iterate over values
+// 값을 순회해봅시다.
 for(let num of view) {
-  alert(num); // 123456, then 0, 0, 0 (4 values total)
+  alert(num); // 123456, 그 뒤 0, 0, 0 (총 4개의 값)
 }
 
 ```
 
 ## TypedArray
 
-The common term for all these views (`Uint8Array`, `Uint32Array`, etc) is [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). They share the same set of methods and properties.
+지금까지 살펴본 모든 뷰(`Uint8Array`, `Uint32Array` 등)를 통칭하는 용어는 [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects)입니다. 앞서 살펴본 뷰들은 같은 메서드와 프로퍼티를 공유합니다.
 
-Please note, there's no constructor called `TypedArray`, it's just a common "umbrella" term to represent one of views over `ArrayBuffer`: `Int8Array`, `Uint8Array` and so on, the full list will soon follow.
+참고로 `TypedArray`라는 생성자는 존재하지 않습니다. `TypedArray`는 `ArrayBuffer`의 여러 뷰를 아울러 지칭하는 상위 용어입니다. 예를 들어 `Int8Array`, `Uint8Array` 등이 있으며 전체 목록은 곧 살펴보겠습니다.
 
-When you see something like `new TypedArray`, it means any of `new Int8Array`, `new Uint8Array`, etc.
+`new TypedArray`와 같은 표현을 본다면 `new Int8Array`, `new Uint8Array`와 같은 뷰 중 하나를 뜻한다고 이해하면 됩니다.
 
-Typed arrays behave like regular arrays: have indexes and are iterable.
+타입이 지정된 배열(typed array)은 일반 배열처럼 인덱스가 있고 반복 가능(iterable, 이터러블)합니다.
 
-A typed array constructor (be it `Int8Array` or `Float64Array`, doesn't matter) behaves differently depending on argument types.
+타입이 지정된 배열의 생성자는 `Int8Array`나 `Float64Array`든 상관없이 주어진 인수 타입에 따라 다르게 동작합니다.
 
-There are 5 variants of arguments:
+5가지 방식으로 인수를 넘길 수 있습니다.
 
 ```js
 new TypedArray(buffer, [byteOffset], [length]);
@@ -91,92 +91,92 @@ new TypedArray(length);
 new TypedArray();
 ```
 
-1. If an `ArrayBuffer` argument is supplied, the view is created over it. We used that syntax already.
+1. `ArrayBuffer` 인수를 전달하면 그 위에 뷰를 바로 생성합니다. 이 문법은 이미 위에서 사용해 보았습니다.
 
-    Optionally we can provide `byteOffset` to start from (0 by default) and the `length` (till the end of the buffer by default), then the view will cover only a part of the `buffer`.
+    선택적으로 시작 위치를 나타내는 `byteOffset`(기본값 0)과 `length`(기본값 버퍼의 끝)를 제공하면 `buffer`의 일부분만 뷰로 지정할 수 있습니다.
 
-2. If an `Array`, or any array-like object is given, it creates a typed array of the same length and copies the content.
+2. `Array`나 유사 배열 객체(array-like object)를 전달하면 타입이 지정된 배열을 동일한 길이로 생성하고 내용을 복사합니다.
 
-    We can use it to pre-fill the array with the data:
+    다음과 같이 사용하여 배열에 미리 값을 채워 넣을 수 있습니다.
     ```js run
     *!*
     let arr = new Uint8Array([0, 1, 2, 3]);
     */!*
-    alert( arr.length ); // 4, created binary array of the same length
-    alert( arr[1] ); // 1, filled with 4 bytes (unsigned 8-bit integers) with given values
+    alert( arr.length ); // 4, 동일한 길이의 이진 배열을 생성
+    alert( arr[1] ); // 1, 주어진 값으로 4바이트 (8비트 부호 없는 정수)를 채움
     ```
-3. If another `TypedArray` is supplied, it does the same: creates a typed array of the same length and copies values. Values are converted to the new type in the process, if needed.
+3. 또 다른 `TypedArray`를 전달해도 동일하게 동작합니다. 타입이 지정된 배열을 동일한 길이로 생성하고 값을 복사합니다. 필요하다면 새로운 타입으로 변환할 수 있습니다.
     ```js run
     let arr16 = new Uint16Array([1, 1000]);
     *!*
     let arr8 = new Uint8Array(arr16);
     */!*
     alert( arr8[0] ); // 1
-    alert( arr8[1] ); // 232, tried to copy 1000, but can't fit 1000 into 8 bits (explanations below)
+    alert( arr8[1] ); // 232, 1000을 복사하려 했지만 1000은 8비트에 담을 수 없습니다(아래 설명 참조).
     ```
 
-4. For a numeric argument `length` -- creates the typed array to contain that many elements. Its byte length will be `length` multiplied by the number of bytes in a single item `TypedArray.BYTES_PER_ELEMENT`:
+4. 숫자 인수 `length`를 전달하면 그만큼의 요소를 저장할 타입이 지정된 배열을 생성합니다. 전체 바이트 길이는 `length` 값에 단일 요소에 대한 바이트 수를 반환하는 `TypedArray.BYTES_PER_ELEMENT`를 곱한 값입니다.
     ```js run
-    let arr = new Uint16Array(4); // create typed array for 4 integers
-    alert( Uint16Array.BYTES_PER_ELEMENT ); // 2 bytes per integer
-    alert( arr.byteLength ); // 8 (size in bytes)
+    let arr = new Uint16Array(4); // 4개의 정수를 저장할 타입이 지정된 배열을 생성
+    alert( Uint16Array.BYTES_PER_ELEMENT ); // 정수 하나당 2바이트로 취급
+    alert( arr.byteLength ); // 8 (전체 바이트 길이)
     ```
 
-5. Without arguments, creates an zero-length typed array.
+5. 인수를 전달하지 않으면 길이가 0인 타입이 지정된 배열을 만듭니다.
 
-We can create a `TypedArray` directly, without mentioning `ArrayBuffer`. But a view cannot exist without an underlying `ArrayBuffer`, so gets created automatically in all these cases except the first one (when provided).
+`ArrayBuffer` 없이 `TypedArray`를 직접 생성할 수 있습니다. 하지만 뷰는 그 기반이 되는 `ArrayBuffer` 없이 존재할 수 없기 때문에 `ArrayBuffer`를 직접 전달하는 첫 번째 경우를 제외하고는 위 경우 모두 `ArrayBuffer`가 자동으로 생성됩니다.
 
-To access the underlying `ArrayBuffer`, there are following properties in `TypedArray`:
-- `buffer` -- references the `ArrayBuffer`.
-- `byteLength` -- the length of the `ArrayBuffer`.
+기반이 되는 `ArrayBuffer`에 접근하기 위해 `TypedArray`의 프로퍼티를 사용할 수 있습니다.
+- `buffer` -- `ArrayBuffer`의 참조
+- `byteLength` -- `ArrayBuffer`의 길이
 
-So, we can always move from one view to another:
+그렇기에 아래와 같이 하나의 뷰에서 다른 뷰를 만들 수 있습니다.
 ```js
 let arr8 = new Uint8Array([0, 1, 2, 3]);
 
-// another view on the same data
+// 동일한 값을 가진 또 다른 뷰
 let arr16 = new Uint16Array(arr8.buffer);
 ```
 
 
-Here's the list of typed arrays:
+타입이 지정된 배열의 목록은 다음과 같습니다.
 
-- `Uint8Array`, `Uint16Array`, `Uint32Array` -- for integer numbers of 8, 16 and 32 bits.
-  - `Uint8ClampedArray` -- for 8-bit integers, "clamps" them on assignment (see below).
-- `Int8Array`, `Int16Array`, `Int32Array` -- for signed integer numbers (can be negative).
-- `Float32Array`, `Float64Array` -- for signed floating-point numbers of 32 and 64 bits.
+- `Uint8Array`, `Uint16Array`, `Uint32Array` -- 8비트, 16비트, 32비트 정수에 사용합니다.
+  - `Uint8ClampedArray` -- 8비트 정수에 사용하며, 값을 할당할 때 값의 범위를 '고정(clamp)'합니다(아래 참조).
+- `Int8Array`, `Int16Array`, `Int32Array` -- 음수를 포함한 부호 있는 정수에 사용합니다.
+- `Float32Array`, `Float64Array` -- 32비트, 64비트 부호 있는 부동 소수점 숫자에 사용합니다.
 
-```warn header="No `int8` or similar single-valued types"
-Please note, despite of the names like `Int8Array`, there's no single-value type like `int`, or `int8` in JavaScript.
+```warn header="`int8`과 같이 단일 값을 나타내는 타입은 없습니다."
+`Int8Array`라는 이름과 달리 자바스크립트에는 `int`나 `int8`과 같은 단일 값 타입이 없다는 것에 유의하세요.
 
-That's logical, as `Int8Array` is not an array of these individual values, but rather a view on `ArrayBuffer`.
+`Int8Array`는 개별 값을 갖는 배열이 아닌 `ArrayBuffer` 위의 뷰입니다.
 ```
 
-### Out-of-bounds behavior
+### 범위를 벗어난 값의 동작
 
-What if we attempt to write an out-of-bounds value into a typed array? There will be no error. But extra bits are cut-off.
+타입이 지정된 배열에 범위를 벗어난 값을 쓰려고 하면 어떻게 될까요? 에러는 발생하지 않습니다. 하지만 범위를 초과한 비트는 잘립니다.
 
-For instance, let's try to put 256 into `Uint8Array`. In binary form, 256 is `100000000` (9 bits), but `Uint8Array` only provides 8 bits per value, that makes the available range from 0 to 255.
+`Uint8Array`에 256을 넣는다고 생각해 봅시다. 256의 이진 형태는 `100000000` (9비트)이지만 `Uint8Array`는 값 하나당 8비트만 제공하기 때문에 0부터 255까지의 값만 가질 수 있습니다.
 
-For bigger numbers, only the rightmost (less significant) 8 bits are stored, and the rest is cut off:
+표현할 수 있는 값의 범위를 초과하는 수에 대해 오른쪽 끝의 하위 8비트만 저장하고 나머지 비트는 잘립니다.
 
 ![](8bit-integer-256.svg)
 
-So we'll get zero.
+결과적으로 0이 나옵니다.
 
-For 257, the binary form is `100000001` (9 bits), the rightmost 8 get stored, so we'll have `1` in the array:
+만약 257을 넣으면 257의 이진 형태는 `100000001` (9비트)이므로 오른쪽 끝의 8비트만 저장하여 배열에 `1`이 들어갑니다.
 
 ![](8bit-integer-257.svg)
 
-In other words, the number modulo 2<sup>8</sup> is saved.
+다시 말해 숫자를 2<sup>8</sup>로 나눈 나머지가 저장됩니다.
 
-Here's the demo:
+아래 사례를 살펴봅시다.
 
 ```js run
 let uint8array = new Uint8Array(16);
 
 let num = 256;
-alert(num.toString(2)); // 100000000 (binary representation)
+alert(num.toString(2)); // 100000000 (이진 표기법)
 
 uint8array[0] = 256;
 uint8array[1] = 257;
@@ -185,88 +185,88 @@ alert(uint8array[0]); // 0
 alert(uint8array[1]); // 1
 ```
 
-`Uint8ClampedArray` is special in this aspect, its behavior is different. It saves 255 for any number that is greater than 255, and 0 for any negative number. That behavior is useful for image processing.
+이 점에서 `Uint8ClampedArray`는 특별하게 동작합니다. `Uint8ClampedArray`는 255보다 큰 숫자는 255로, 음수는 0으로 저장합니다. 이러한 동작은 이미지 처리에 유용합니다.
 
-## TypedArray methods
+## TypedArray 메서드
 
-`TypedArray` has regular `Array` methods, with notable exceptions.
+`TypedArray`는 일반 `Array` 메서드를 사용할 수 있지만 몇 가지 주목할 만한 예외가 존재합니다.
 
-We can iterate, `map`, `slice`, `find`, `reduce` etc.
+기본적으로 `TypedArray`는 배열처럼 순회하거나 `map`, `slice`, `find`, `reduce` 메서드를 사용할 수 있습니다.
 
-There are few things we can't do though:
+하지만 배열처럼 동작하지 않는 부분도 있습니다.
 
-- No `splice` -- we can't "delete" a value, because typed arrays are views on a buffer, and these are fixed, contiguous areas of memory. All we can do is to assign a zero.
-- No `concat` method.
+- `splice` 메서드를 사용할 수 없습니다. 타입이 지정된 배열은 버퍼에 대한 뷰이고, 버퍼는 고정된 일련의 메모리 영역이기 때문에 값을 '제거'할 수 없습니다. 할 수 있는 일이라고는 0을 할당하는 것뿐입니다.
+- `concat` 메서드를 사용할 수 없습니다.
 
-There are two additional methods:
+그 외에 두 가지 메서드가 더 있습니다.
 
-- `arr.set(fromArr, [offset])` copies all elements from `fromArr` to the `arr`, starting at position `offset` (0 by default).
-- `arr.subarray([begin, end])` creates a new view of the same type from `begin` to `end` (exclusive). That's similar to `slice` method (that's also supported), but doesn't copy anything -- just creates a new view, to operate on the given piece of data.
+- `arr.set(fromArr, [offset])`는 `fromArr`의 `offset`(기본값 0) 위치부터 모든 요소를 `arr`에 복사합니다.
+- `arr.subarray([begin, end])`는 `begin`부터 `end` 이전까지 동일한 타입의 새로운 뷰를 생성합니다. `slice` 메서드와 유사하지만(`slice`도 지원합니다) 범위 내 요소를 복사하지 않고 별도의 새로운 뷰를 생성합니다.
 
-These methods allow us to copy typed arrays, mix them, create new arrays from existing ones, and so on.
+지금까지 본 메서드를 통해 타입이 지정된 배열을 복사하거나 조합하고 기존 배열에서 새로운 배열을 생성하는 등 여러 작업을 수행할 수 있습니다.
 
 
 
 ## DataView
 
-[DataView](mdn:/JavaScript/Reference/Global_Objects/DataView) is a special super-flexible "untyped" view over `ArrayBuffer`. It allows to access the data on any offset in any format.
+[DataView](mdn:/JavaScript/Reference/Global_Objects/DataView)는 `ArrayBuffer` 위에 놓이는 특별하고 매우 유연한 '타입이 없는(untyped)' 뷰입니다. `DataView`는 임의의 오프셋에 있는 데이터를 원하는 형식으로 읽고 쓸 수 있게 합니다.
 
-- For typed arrays, the constructor dictates what the format is. The whole array is supposed to be uniform. The i-th number is `arr[i]`.
-- With `DataView` we access the data with methods like `.getUint8(i)` or `.getUint16(i)`. We choose the format at method call time instead of the construction time.
+- 타입이 지정된 배열에서는 생성자가 데이터 형식을 결정합니다. 배열 전체가 같은 타입이라고 가정하며 i번째 숫자는 `arr[i]`를 통해 접근합니다.
+- `DataView`는 `.getUint8(i)`나 `.getUint16(i)`와 같은 메서드를 사용하여 데이터에 접근합니다. 데이터 형식은 생성 시점이 아닌 메서드 호출 시점에 결정됩니다.
 
-The syntax:
+문법:
 
 ```js
 new DataView(buffer, [byteOffset], [byteLength])
 ```
 
-- **`buffer`** -- the underlying `ArrayBuffer`. Unlike typed arrays, `DataView` doesn't create a buffer on its own. We need to have it ready.
-- **`byteOffset`** -- the starting byte position of the view (by default 0).
-- **`byteLength`** -- the byte length of the view (by default till the end of `buffer`).
+- **`buffer`** -- 뷰의 기반이 되는 `ArrayBuffer`입니다. 타입이 지정된 배열과 달리 `DataView`는 스스로 새로운 버퍼를 만들지 않기 때문에 전달할 버퍼가 필요합니다.
+- **`byteOffset`** -- 뷰의 시작 바이트 지점(기본값 0)
+- **`byteLength`** -- 뷰의 바이트 길이(기본값 `buffer`의 끝)
 
-For instance, here we extract numbers in different formats from the same buffer:
+예를 들어 아래와 같이 동일한 버퍼에서 다른 데이터 형식의 숫자를 추출할 수 있습니다.
 
 ```js run
-// binary array of 4 bytes, all have the maximal value 255
+// 모든 값이 최댓값 255인 4바이트 이진 배열
 let buffer = new Uint8Array([255, 255, 255, 255]).buffer;
 
 let dataView = new DataView(buffer);
 
-// get 8-bit number at offset 0
+// 오프셋 0에서 8비트 숫자를 가져옵니다.
 alert( dataView.getUint8(0) ); // 255
 
-// now get 16-bit number at offset 0, it consists of 2 bytes, together interpreted as 65535
-alert( dataView.getUint16(0) ); // 65535 (biggest 16-bit unsigned int)
+// 오프셋 0에서 16비트 숫자를 가져옵니다. 이 숫자는 2바이트로 구성되며 두 바이트를 함께 해석하여 65535가 됩니다.
+alert( dataView.getUint16(0) ); // 65535 (16비트 부호 없는 정수 중 가장 큰 값)
 
-// get 32-bit number at offset 0
-alert( dataView.getUint32(0) ); // 4294967295 (biggest 32-bit unsigned int)
+// 오프셋 0에서 32비트 숫자를 가져옵니다.
+alert( dataView.getUint32(0) ); // 4294967295 (32비트 부호 없는 정수 중 가장 큰 값)
 
-dataView.setUint32(0, 0); // set 4-byte number to zero, thus setting all bytes to 0
+dataView.setUint32(0, 0); // 4바이트 숫자를 0으로 설정하여 모든 바이트를 0으로 만듭니다.
 ```
 
-`DataView` is great when we store mixed-format data in the same buffer. For example, when we store a sequence of pairs (16-bit integer, 32-bit float), `DataView` allows to access them easily.
+`DataView`는 동일한 버퍼에 여러 데이터 형식의 데이터를 저장할 때 유용합니다. 예를 들어 16비트 정수와 32비트 부동 소수점 값을 한 쌍으로 묶어 연속해서 저장할 때, `DataView`를 사용하면 쉽게 데이터에 접근할 수 있습니다.
 
-## Summary
+## 요약
 
-`ArrayBuffer` is the core object, a reference to the fixed-length contiguous memory area.
+`ArrayBuffer`는 고정 길이의 연속된 메모리 영역을 참조하는 핵심 객체입니다.
 
-To do almost any operation on `ArrayBuffer`, we need a view.
+`ArrayBuffer`의 데이터를 조작하기 위해 뷰가 필요합니다.
 
-- It can be a `TypedArray`:
-    - `Uint8Array`, `Uint16Array`, `Uint32Array` -- for unsigned integers of 8, 16, and 32 bits.
-    - `Uint8ClampedArray` -- for 8-bit integers, "clamps" them on assignment.
-    - `Int8Array`, `Int16Array`, `Int32Array` -- for signed integer numbers (can be negative).
-    - `Float32Array`, `Float64Array` -- for signed floating-point numbers of 32 and 64 bits.
-- Or a `DataView` -- the view that uses methods to specify a format, e.g. `getUint8(offset)`.
+- `TypedArray`가 뷰의 역할을 수행합니다.
+    - `Uint8Array`, `Uint16Array`, `Uint32Array` -- 8비트, 16비트, 32비트 부호 없는 정수에 사용합니다.
+    - `Uint8ClampedArray` -- 8비트 정수에 사용하며, 값을 할당할 때 값을 '고정'합니다.
+    - `Int8Array`, `Int16Array`, `Int32Array` -- 음수를 포함한 부호 있는 정수에 사용합니다.
+    - `Float32Array`, `Float64Array` -- 32비트, 64비트 부호 있는 부동 소수점 숫자에 사용합니다.
+- 또는 `DataView` -- `DataView`는 `getUint8(offset)` 같은 메서드로 형식을 지정하는 뷰입니다.
 
-In most cases we create and operate directly on typed arrays, leaving `ArrayBuffer` under cover, as a "common denominator". We can access it as `.buffer` and make another view if needed.
+대부분의 경우 `ArrayBuffer`를 내부에 감춘 채 타입이 지정된 배열을 직접 생성하고 값을 다룹니다. 이때 `ArrayBuffer`는 '공통분모(common denominator)' 역할을 합니다. 필요하다면 `.buffer`로 `ArrayBuffer`에 접근하여 또 다른 뷰를 만들 수 있습니다.
 
-There are also two additional terms, that are used in descriptions of methods that operate on binary data:
-- `ArrayBufferView` is an umbrella term for all these kinds of views.
-- `BufferSource` is an umbrella term for `ArrayBuffer` or `ArrayBufferView`.
+이진 데이터를 다루는 메서드를 설명할 때 사용하는 용어가 두 가지 더 있습니다.
+- `ArrayBufferView`는 이런 모든 종류의 뷰를 아울러 지칭하는 상위 용어입니다.
+- `BufferSource`는 `ArrayBuffer` 또는 `ArrayBufferView`를 아울러 지칭하는 상위 용어입니다.
 
-We'll see these terms in the next chapters. `BufferSource` is one of the most common terms, as it means "any kind of binary data" -- an `ArrayBuffer` or a view over it.
+다음 챕터에서 이런 용어들에 대해 더 자세히 살펴보겠습니다. `BufferSource`는 가장 흔하게 쓰이는 용어 중 하나로, `ArrayBuffer`나 그 위의 뷰처럼 '모든 종류의 이진 데이터'를 의미합니다.
 
-Here's a cheatsheet:
+요약표는 다음과 같습니다.
 
 ![](arraybuffer-view-buffersource.svg)