mdn · wisedog · Jul 31, 2024 · Jul 28, 2024 · Jul 30, 2024 · Jul 31, 2024
@@ -99,7 +99,8 @@ JavaScript와 같은 고수준 언어들은 "[가비지 콜렉션](<https://en.w
 
 ### 참조-세기(Reference-counting) 가비지 콜렉션
 
-> **참고:** 최신 브라우저는 더 이상 참조-세기 가비지 콜렉션 방식을 사용하지 않습니다.
+> [!NOTE]
+> 최신 브라우저는 더 이상 참조-세기 가비지 콜렉션 방식을 사용하지 않습니다.
 
 참조-세기 알고리즘은 가장 단순하게 구현된 알고리즘입니다. 이 알고리즘은 '어떤 다른 객체도 참조하지 않는 객체'를 '더 이상 필요 없는 객체'라고 여깁니다. 이 객체를 "가비지"라 부르며, 이를 참조하는 다른 객체가 하나도 없는 경우, 수집이 가능합니다.
 
@@ -210,7 +211,8 @@ wm.set(key, { key });
 
 대략적인 멘탈 모델로, `WeakMap`을 아래와 같은 구현체로 생각해보면:
 
-> **Warning:** 아래는 폴리필도 아니고, 실제 가비지 콜렉션에 관계하는 엔진의 구현체 구조와는 거리가 멉니다.
+> [!WARNING]
+> 아래는 폴리필도 아니고, 실제 가비지 콜렉션에 관계하는 엔진의 구현체 구조와는 거리가 멉니다.
 
 ```js
 class MyWeakMap {

@@ -62,7 +62,8 @@ console.log(Rectangle.name);
 // 출력: "Rectangle2"
 ```
 
-> **참고:** 클래스 **표현식**에는 [Class 선언](#class_선언) 섹션에 설명된 것과 동일한 호이스팅 제한이 적용됩니다.
+> [!NOTE]
+> 클래스 **표현식**에는 [Class 선언](#class_선언) 섹션에 설명된 것과 동일한 호이스팅 제한이 적용됩니다.
 
 ## Class body 와 메서드 정의
 
@@ -201,7 +202,8 @@ Rectangle.prototype.prototypeWidth = 25;
 
 ### Field 선언
 
-> **Warning:** public과 private 필드 선언은 JavaScript 표준화 위원회에 [실험적 기능 (stage 3)](https://github.com/tc39/proposal-class-fields) [TC39](https://tc39.es/) 로 제안되어있습니다. 현재 이를 지원하는 브라우져는 제한적인 상태입니다만, [Babel](https://babeljs.io/) 과 같은 build 시스템을 사용한다면 이 기능을 사용해볼 수 있습니다.
+> [!WARNING]
+> public과 private 필드 선언은 JavaScript 표준화 위원회에 [실험적 기능 (stage 3)](https://github.com/tc39/proposal-class-fields) [TC39](https://tc39.es/) 로 제안되어있습니다. 현재 이를 지원하는 브라우져는 제한적인 상태입니다만, [Babel](https://babeljs.io/) 과 같은 build 시스템을 사용한다면 이 기능을 사용해볼 수 있습니다.
 
 #### Public 필드 선언
 
@@ -241,7 +243,8 @@ class Rectangle {
 
 클래스의 바깥에서 private 필드를 접근하려고 하면 에러가 발생합니다. private필드는 클래스 내부에서만 읽고 쓰기가 가능합니다. 클래스 외부에서 보이지 않도록 정의하였으므로 클래스가 버젼업 되면서 내부 구현이 바뀌더라도 클래스 사용자 입장에서는 이에 아무런 영항을 받지 않도록 할 수 있습니다.
 
-> **Note:** Private 필드는 사용전에 선언되어야 합니다.
+> [!NOTE]
+> Private 필드는 사용전에 선언되어야 합니다.
 
 일반적인 프로퍼티와는 다르게 private 필드는 값을 할당하면서 만들어질 수 없습니다.
 

@@ -19,7 +19,8 @@ slug: Web/JavaScript/Reference/Errors/Not_defined
 
 존재하지 않는 변수를 참조하는 곳이 있습니다. 이 변수는 선언되어야 합니다. 또는, 현재 스크립트나 {{Glossary("scope")}} 에서 사용이 가능하도록 해야합니다.
 
-> **참고:** 라이브러리(예를 들면 jQuery와 같은)의 로딩은, 반드시 코드에서 "$"와 같은 라이브러리 변수에 접근하기 이전에 수행되어야 합니다. 라이브러리를 로딩하는 {{HTMLElement("script")}} 태그가 그 변수를 사용하는 코드보다 앞에 위치하도록 하세요.
+> [!NOTE]
+> 라이브러리(예를 들면 jQuery와 같은)의 로딩은, 반드시 코드에서 "$"와 같은 라이브러리 변수에 접근하기 이전에 수행되어야 합니다. 라이브러리를 로딩하는 {{HTMLElement("script")}} 태그가 그 변수를 사용하는 코드보다 앞에 위치하도록 하세요.
 
 ## 예
 

@@ -11,7 +11,8 @@ slug: Web/JavaScript/Reference/Functions/arguments/callee
 
 `callee`는 `arguments` 객체의 속성입니다. 그 함수의 몸통(body) 내에서 현재 실행 중인 함수를 참조하는 데 쓰일 수 있습니다. 이는 함수의 이름을 알 수 없는 경우에 유용합니다, 가령 이름 없는 함수 식(또한 "익명 함수"라 함) 내에서.
 
-> **경고:** ECMAScript 제5판(ES5) 은 [엄격 모드](/ko/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode)에서 `arguments.callee()`의 사용을 금합니다. function 식(expression)에 이름을 주거나 함수 자체를 호출해야 하는 곳에 function 선언을 사용하여 `arguments.callee()` 사용을 피하세요.
+> [!WARNING]
+> ECMAScript 제5판(ES5) 은 [엄격 모드](/ko/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode)에서 `arguments.callee()`의 사용을 금합니다. function 식(expression)에 이름을 주거나 함수 자체를 호출해야 하는 곳에 function 선언을 사용하여 `arguments.callee()` 사용을 피하세요.
 
 ### `arguments.callee`는 왜 ES5 엄격 모드에서 제거되었나요?
 

@@ -7,9 +7,11 @@ slug: Web/JavaScript/Reference/Functions/arguments
 
 **`arguments`** 객체는 함수에 전달된 인수에 해당하는 `Array` 형태의 객체입니다.
 
-> **참고:** ES6 호환 코드를 작성 중이라면 되도록 [나머지 매개변수](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters) 구문을 사용해야 합니다.
+> [!NOTE]
+> ES6 호환 코드를 작성 중이라면 되도록 [나머지 매개변수](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters) 구문을 사용해야 합니다.
 
-> **참고:** "`Array` 형태"란 `arguments`가 {{jsxref("Array.length", "length")}} 속성과 더불어 0부터 인덱스 된 다른 속성을 가지고 있지만, {{jsxref("Array")}}의 {{jsxref("Array.prototype.forEach()", "forEach")}}, {{jsxref("Array.prototype.map()", "map")}}과 같은 내장 메서드를 가지고 있지 않다는 뜻입니다.
+> [!NOTE]
+> "`Array` 형태"란 `arguments`가 {{jsxref("Array.length", "length")}} 속성과 더불어 0부터 인덱스 된 다른 속성을 가지고 있지만, {{jsxref("Array")}}의 {{jsxref("Array.prototype.forEach()", "forEach")}}, {{jsxref("Array.prototype.map()", "map")}}과 같은 내장 메서드를 가지고 있지 않다는 뜻입니다.
 
 {{EmbedInteractiveExample("pages/js/functions-arguments.html")}}
 

@@ -61,7 +61,8 @@ async (param1, param2, ...paramN) => {
 
 기존의 익명 함수를 가장 간단한 화살표 함수로 단계별로 분해해 보겠습니다. 이 과정에서 각 단계는 유효한 화살표 함수입니다.
 
-> **참고:** 기존 함수 표현식과 화살표 함수는 구문 외에도 더 많은 차이점이 있습니다. 다음 몇 개의 하위 섹션에서 두 함수의 동작 차이에 대해 자세히 소개하겠습니다.
+> [!NOTE]
+> 기존 함수 표현식과 화살표 함수는 구문 외에도 더 많은 차이점이 있습니다. 다음 몇 개의 하위 섹션에서 두 함수의 동작 차이에 대해 자세히 소개하겠습니다.
 
 ```js-nolint
 // 기존의 익명 함수
@@ -238,7 +239,8 @@ class C {
 }
 ```
 
-> **참고:** 클래스 필드는 프로토타입이 아닌 인스턴스에 정의되므로 인스턴스를 생성할 때마다 새 함수 참조가 생성되고 새 클로저가 할당되어 일반적인 언바운드 메서드보다 메모리 사용량이 늘어날 수 있습니다.
+> [!NOTE]
+> 클래스 필드는 프로토타입이 아닌 인스턴스에 정의되므로 인스턴스를 생성할 때마다 새 함수 참조가 생성되고 새 클로저가 할당되어 일반적인 언바운드 메서드보다 메모리 사용량이 늘어날 수 있습니다.
 
 비슷한 이유로 [`call()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call), [`apply()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply), [`bind()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) 메서드는 화살표 함수에서 호출할 때 유용하지 않습니다. 화살표 함수는 화살표 함수가 정의된 범위를 기반으로 `this`을 설정하고 함수가 호출되는 방식에 따라 `this` 값이 변하지 않기 때문입니다.
 

@@ -69,7 +69,8 @@ f(); // [1, undefined]
 f(2); // [2, undefined]
 ```
 
-> **참고:** 첫 번째 기본 매개변수와 그 이후의 모든 매개변수는 함수의 [`length`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/length)에 영향을 미치지 않습니다.
+> [!NOTE]
+> 첫 번째 기본 매개변수와 그 이후의 모든 매개변수는 함수의 [`length`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/length)에 영향을 미치지 않습니다.
 
 기본 매개변수 생성자는 함수 본문에서 생성된 범위의 상위인 자체 범위에서 동작합니다.
 

@@ -151,7 +151,8 @@ console.log(MyConstants.foo); // 'foo', 정적 접근자의 값 변경 불가
 - 값이 지금 당장 필요하지 않은 경우. 나중에 사용할 수도 있고, 경우에 따라 아예 사용되지 않을 수 있습니다.
 - 값을 사용하면 여러 번 접근하게 되므로 변경되지 않거나 다시 계산할 필요가 없는 값은 다시 계산할 필요가 없습니다.
 
-> **참고:** 즉, 값이 변경될 것으로 예상되는 속성에 대해 게으른 접근자를 작성하면 값을 다시 계산하지 않으므로 게으른 접근자를 작성해서는 안 됩니다.
+> [!NOTE]
+> 즉, 값이 변경될 것으로 예상되는 속성에 대해 게으른 접근자를 작성하면 값을 다시 계산하지 않으므로 게으른 접근자를 작성해서는 안 됩니다.
 >
 > 모든 접근자가 처음부터 '느긋'하며 '메모화'되는 것은 아닙니다. 이런 동작이 필요하면 직접 구현해야 합니다.
 

@@ -17,7 +17,8 @@ JavaScript에서 함수는 다른 함수로 전달되거나 반환받을 수 있
 
 함수 값은 일반적으로 [`함수`](/ko/docs/Web/JavaScript/Rference/Global_Objects/Function)의 인스턴스입니다. `함수` 객체의 속성 및 메서드에 대한 자세한 내용은 {{jsxref("Function")}}을 참조하세요. 호출 가능한 값으로 인해 [`typeof`](/ko/docs/Web/JavaScript/Rference/Operators/typeof)가 `"객체"` 대신 `"함수"`를 반환하게 됩니다.
 
-> **참고:** 모든 호출 가능한 값이 `instanceof Function`인 것은 아닙니다. 예를 들어, `Function.prototype` 객체는 호출 가능하지만 `Function`의 인스턴스는 아닙니다. 함수의 [프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)을 수동으로 설정하여 함수가 더 이상 `Function.prototype`에서 상속되지 않도록 할 수도 있습니다. 그러나 이러한 경우는 극히 드뭅니다.
+> [!NOTE]
+> 모든 호출 가능한 값이 `instanceof Function`인 것은 아닙니다. 예를 들어, `Function.prototype` 객체는 호출 가능하지만 `Function`의 인스턴스는 아닙니다. 함수의 [프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)을 수동으로 설정하여 함수가 더 이상 `Function.prototype`에서 상속되지 않도록 할 수도 있습니다. 그러나 이러한 경우는 극히 드뭅니다.
 
 ### 반환 값
 

@@ -49,7 +49,8 @@ every(callbackFn, thisArg)
 - 이미 방문한 인덱스를 변경해도 `callbackFn`이 다시 호출되지 않습니다.
 - 배열의 아직 방문하지 않은 기존 요소가 `callbackFn`에 의해 변경되는 경우, `callbackFn`에 전달된 값은 해당 요소가 방문될 당시의 값이 됩니다. [삭제된](/ko/docs/Web/JavaScript/Reference/Operators/delete) 요소는 방문되지 않습니다.
 
-> **경고:** 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외).
+> [!WARNING]
+> 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외).
 
 `every()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다.
 

@@ -47,7 +47,8 @@ fill(value, start, end)
 
 `fill()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. `this` 값에는 `length` 속성만 있을 것으로 예상합니다. 문자열도 유사 배열이지만, 문자열은 불변이므로 이 메서드를 적용하기에는 적합하지 않습니다.
 
-> **참고:** 빈 배열(`length = 0`)에 `Array.prototype.fill()`을 사용하면 배열에 수정할 내용이 없으므로 배열이 수정되지 않습니다.
+> [!NOTE]
+> 빈 배열(`length = 0`)에 `Array.prototype.fill()`을 사용하면 배열에 수정할 내용이 없으므로 배열이 수정되지 않습니다.
 > 배열을 선언할 때 `Array.prototype.fill()`을 사용하려면 배열의 길이가 0이 아닌지 확인하세요.
 > [예제](#fill을_사용하여_빈_배열_채우기)를 참조하십시오.
 

@@ -47,7 +47,8 @@ filter(callbackFn, thisArg)
 - 이미 방문한 인덱스를 변경해도 `callbackFn`이 해당 인덱스에 대해 다시 호출되지 않습니다.
 - 배열의 아직 방문하지 않은 기존 요소가 `callbackFn`에 의해 변경되는 경우, `callbackFn`에 전달된 값은 해당 요소가 방문될 당시의 값이 됩니다. [삭제된](/ko/docs/Web/JavaScript/Reference/Operators/delete) 요소는 방문되지 않습니다.
 
-> **경고:** 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외).
+> [!WARNING]
+> 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외).
 
 `filter()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다.
 

@@ -47,7 +47,8 @@ forEach(callbackFn, thisArg)
 - 이미 방문한 인덱스를 변경해도 `callbackFn`이 해당 인덱스에 대해 다시 호출되지 않습니다.
 - 배열의 아직 방문하지 않은 기존 요소가 `callbackFn`에 의해 변경되는 경우, `callbackFn`에 전달된 값은 해당 요소가 방문될 당시의 값이 됩니다. [삭제된](/ko/docs/Web/JavaScript/Reference/Operators/delete) 요소는 방문되지 않습니다.
 
-> **경고:** 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외).
+> [!WARNING]
+> 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외).
 
 `forEach()` 메서드는 [범용](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#범용_배열_메서드)입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다.
 
@@ -116,7 +117,8 @@ items.forEach((item) => {
 
 ### 배열 콘텐츠 출력
 
-> **참고:** 배열의 내용을 콘솔에 표시하려면,
+> [!NOTE]
+> 배열의 내용을 콘솔에 표시하려면,
 > 배열의 포멧된 버전을 출력하는 {{domxref("console/table", "console.table()")}}을 사용할 수 있습니다.
 >
 > 다음 예제는 `forEach()`를 사용하는 또다른 접근 방식을 보여줍니다.
@@ -164,7 +166,8 @@ console.log(obj.sum); // 16
 
 `thisArg` 매개변수(`this`)는 `forEach()`에 제공되므로 호출될 때마다 콜백에 전달됩니다. 콜백은 이를 `this` 값으로 사용합니다.
 
-> **참고:** 콜백 함수를 전달할 때
+> [!NOTE]
+> 콜백 함수를 전달할 때
 > [화살표 함수 표현식](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)을 사용하는 경우,
 > 모든 화살표 함수가 이 값을 문법적으로(lexical) 바인딩하므로
 > {{jsxref("Operators/this", "this")}} 매개 변수를 생략할 수 있습니다.

@@ -49,7 +49,8 @@ Array.from(arrayLike, mapFn, thisArg)
 
 `Array.from()`에는 생성되는 배열의 각 요소에 대해 함수를 실행할 수 있는 {{jsxref("Array/map", "map()")}}과 비슷한 선택적 매개변수 `mapFn`이 있습니다. 좀 더 명확하게 설명하자면, `Array.from(obj, mapFn, thisArg)`는 중간 배열을 생성하지 않는다는 점과 배열이 아직 생성 중이기 때문에 전체 배열 없이 두 개의 인수(`element`, `index`)만 받는다는 점을 제외하면 `Array.from(obj).map(mapFn, thisArg)`과 동일한 결과를 가져옵니다.
 
-> **참고:** 이 동작은 [형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays)에서 더 중요한데, 중간 배열에는 적절한 형식에 맞게 잘린 값이 있어야 하기 때문입니다. `Array.from()`은 {{jsxref("TypedArray.from()")}}과 동일한 동작을 하도록 구현되었습니다.
+> [!NOTE]
+> 이 동작은 [형식화 배열](/ko/docs/Web/JavaScript/Guide/Typed_arrays)에서 더 중요한데, 중간 배열에는 적절한 형식에 맞게 잘린 값이 있어야 하기 때문입니다. `Array.from()`은 {{jsxref("TypedArray.from()")}}과 동일한 동작을 하도록 구현되었습니다.
 
 `Array.from()` 메서드는 범용 팩토리 메서드입니다. 예를 들어, `Array`의 하위 클래스가 `from()` 메서드를 상속하는 경우, 상속된 `from()` 메서드는 `Array` 인스턴스 대신 하위 클래스의 새 인스턴스를 반환합니다. 실제로 `this` 값은 새 배열의 길이를 나타내는 단일 인수를 받는 모든 생성자 함수가 될 수 있습니다. 순회 가능이 `arrayLike`로 전달되면 인수 없이 생성자가 호출되고, 배열형 객체가 전달되면 배열형 객체의 [정규화된 length](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#length_속성_일반화)를 사용하여 생성자가 호출됩니다. 최종 `length`는 순회가 완료되면 다시 설정됩니다. `this` 값이 생성자 함수가 아닌 경우, 일반 `Array` 생성자가 대신 사용됩니다.
 

@@ -379,7 +379,8 @@ f("a", "b"); // 'a+b'
 
 이 구획은 JavaScript에서 흔히 사용되는 배열 연산에 대한 몇 가지 예제를 제공합니다.
 
-> **참고:** 배열의 기초가 아직 익숙하지 않다면, 먼저 [JavaScript 첫걸음: 배열](/ko/docs/Learn/JavaScript/First_steps/Arrays)을 읽어보세요. 이곳은 [배열이 무엇인지](/ko/docs/Learn/JavaScript/First_steps/Arrays#배열이란) 설명하고 일반적인 배열 연산에 대한 다른 예제를 포함하고 있습니다.
+> [!NOTE]
+> 배열의 기초가 아직 익숙하지 않다면, 먼저 [JavaScript 첫걸음: 배열](/ko/docs/Learn/JavaScript/First_steps/Arrays)을 읽어보세요. 이곳은 [배열이 무엇인지](/ko/docs/Learn/JavaScript/First_steps/Arrays#배열이란) 설명하고 일반적인 배열 연산에 대한 다른 예제를 포함하고 있습니다.
 
 ### 배열 만들기
 

@@ -286,7 +286,8 @@ var allbooks = friends.reduce(
 
 ### 배열의 중복 항목 제거
 
-> **참고:** 참고: {{jsxref("Set")}}과 {{jsxref("Array.from()")}}을 사용할 수 있는 환경이라면, `let orderedArray = Array.from(new Set(myArray));`를 사용해 중복 요소를 제거할 수도 있습니다.
+> [!NOTE]
+> 참고: {{jsxref("Set")}}과 {{jsxref("Array.from()")}}을 사용할 수 있는 환경이라면, `let orderedArray = Array.from(new Set(myArray));`를 사용해 중복 요소를 제거할 수도 있습니다.
 
 ```js
 let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];