diff --git a/files/ko/web/javascript/reference/global_objects/string/valueof/index.md b/files/ko/web/javascript/reference/global_objects/string/valueof/index.md index 6e97ef82f11e87..081e72152e34e7 100644 --- a/files/ko/web/javascript/reference/global_objects/string/valueof/index.md +++ b/files/ko/web/javascript/reference/global_objects/string/valueof/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Global_Objects/String/valueOf ## 구문 ```js -str.valueOf() +str.valueOf(); ``` ### 반환 값 @@ -30,7 +30,7 @@ str.valueOf() ### `valueOf()` 사용 ```js -var x = new String('Hello world'); +var x = new String("Hello world"); console.log(x.valueOf()); // 'Hello world' 가 보여집니다. ``` diff --git a/files/ko/web/javascript/reference/global_objects/symbol/for/index.md b/files/ko/web/javascript/reference/global_objects/symbol/for/index.md index cc0178e6e4aa9a..545c941fdfb0df 100644 --- a/files/ko/web/javascript/reference/global_objects/symbol/for/index.md +++ b/files/ko/web/javascript/reference/global_objects/symbol/for/index.md @@ -39,23 +39,23 @@ Symbol.for(key) ### Symbol.for() 사용하기 ```js -Symbol.for('foo'); // 새로운 전역 심볼을 생성 -Symbol.for('foo'); // 이미 생성된 심볼을 반환 +Symbol.for("foo"); // 새로운 전역 심볼을 생성 +Symbol.for("foo"); // 이미 생성된 심볼을 반환 // 동일한 전역 심볼이지만 지역적으로는 그렇지 않음 -Symbol.for('bar') === Symbol.for('bar'); // true -Symbol('bar') === Symbol('bar'); // false +Symbol.for("bar") === Symbol.for("bar"); // true +Symbol("bar") === Symbol("bar"); // false // 키는 설명으로 사용되기도 함 -var sym = Symbol.for('mario'); +var sym = Symbol.for("mario"); sym.toString(); // "Symbol(mario)" ``` 전역 심볼 키와 다른 (라이브러리 코드) 전역 심볼의 이름 충돌을 피하려면, 심볼에 접두어를 붙이는 것이 좋습니다. ```js -Symbol.for('mdn.foo'); -Symbol.for('mdn.bar'); +Symbol.for("mdn.foo"); +Symbol.for("mdn.bar"); ``` ## 명세 diff --git a/files/ko/web/javascript/reference/global_objects/symbol/hasinstance/index.md b/files/ko/web/javascript/reference/global_objects/symbol/hasinstance/index.md index a4570c083d0587..9e7d3bd4068f43 100644 --- a/files/ko/web/javascript/reference/global_objects/symbol/hasinstance/index.md +++ b/files/ko/web/javascript/reference/global_objects/symbol/hasinstance/index.md @@ -24,11 +24,11 @@ l10n: `instanceof` 연산자는 다음 알고리즘을 사용하여 `object instanceof constructor`의 반환 값을 계산합니다. 1. `constructor`에 `@@hasInstance` 메서드가 있는 경우, 첫 번째 인수로 `object`를 사용하여 호출하고 [불리언으로 강제 변환](/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean#boolean_coercion)된 결과를 반환합니다. -`constructor`가 객체가 아니거나 `constructor[@@hasInstance]`가 `null`, `undefined`, 함수 중 하나가 아닌 경우 {{jsxref("TypeError")}}가 발생합니다. + `constructor`가 객체가 아니거나 `constructor[@@hasInstance]`가 `null`, `undefined`, 함수 중 하나가 아닌 경우 {{jsxref("TypeError")}}가 발생합니다. 2. 그렇지 않으면, `constructor`에 `@@hasInstance` 메서드가 없는 경우(`constructor[@@hasInstance]`가 `null` 또는 `undefined`), -[`Function.prototype[@@hasInstance]`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance)와 동일한 알고리즘을 사용하여 결과를 결정합니다. -`constructor`가 함수가 아닌 경우 {{jsxref("TypeError")}}가 발생합니다. + [`Function.prototype[@@hasInstance]`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance)와 동일한 알고리즘을 사용하여 결과를 결정합니다. + `constructor`가 함수가 아닌 경우 {{jsxref("TypeError")}}가 발생합니다. 모든 함수는 기본적으로 `Function.prototype`을 상속하기 때문에, 대부분의 경우 [`Function.prototype[@@hasInstance]`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance) 메서드는 오른쪽이 함수인 경우 `instanceof`의 동작을 지정합니다. diff --git a/files/ko/web/javascript/reference/global_objects/symbol/iterator/index.md b/files/ko/web/javascript/reference/global_objects/symbol/iterator/index.md index 3038b29ee4ac5f..963b97ff825fb2 100644 --- a/files/ko/web/javascript/reference/global_objects/symbol/iterator/index.md +++ b/files/ko/web/javascript/reference/global_objects/symbol/iterator/index.md @@ -30,13 +30,13 @@ slug: Web/JavaScript/Reference/Global_Objects/Symbol/iterator 앞에서 기술한 바와 같이 독자적으로 이터레이터를 만드는 것이 가능합니다. ```js -var myIterable = {} +var myIterable = {}; myIterable[Symbol.iterator] = function* () { - yield 1; - yield 2; - yield 3; + yield 1; + yield 2; + yield 3; }; -[...myIterable] // [1, 2, 3] +[...myIterable]; // [1, 2, 3] ``` ### 비정형 이터레이터 diff --git a/files/ko/web/javascript/reference/global_objects/syntaxerror/index.md b/files/ko/web/javascript/reference/global_objects/syntaxerror/index.md index e3677ce445cf0b..9d1a6208e31f98 100644 --- a/files/ko/web/javascript/reference/global_objects/syntaxerror/index.md +++ b/files/ko/web/javascript/reference/global_objects/syntaxerror/index.md @@ -38,7 +38,7 @@ slug: Web/JavaScript/Reference/Global_Objects/SyntaxError ```js try { - eval('hoo bar'); + eval("hoo bar"); } catch (e) { console.error(e instanceof SyntaxError); console.error(e.message); @@ -54,15 +54,15 @@ try { ```js try { - throw new SyntaxError('Hello', 'someFile.js', 10); + throw new SyntaxError("Hello", "someFile.js", 10); } catch (e) { console.error(e instanceof SyntaxError); // true - console.error(e.message); // Hello - console.error(e.name); // SyntaxError - console.error(e.fileName); // someFile.js - console.error(e.lineNumber); // 10 - console.error(e.columnNumber); // 0 - console.error(e.stack); // @debugger eval code:3:9 + console.error(e.message); // Hello + console.error(e.name); // SyntaxError + console.error(e.fileName); // someFile.js + console.error(e.lineNumber); // 10 + console.error(e.columnNumber); // 0 + console.error(e.stack); // @debugger eval code:3:9 } ``` diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.md index 3035ebc403d0ff..ecede1a85a657c 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.md @@ -10,7 +10,7 @@ slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator ## 구문 ```js -arr[Symbol.iterator]() +arr[Symbol.iterator](); ``` ## 예 diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/@@species/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/@@species/index.md index d30f35556b6b80..ff67a28735b3cb 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/@@species/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/@@species/index.md @@ -18,8 +18,8 @@ slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species `species` 속성은 지정된 [형식화 배열](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#typedarray_객체) 객체에 대한 형식화 배열 생성자 중 하나인 기본 생성자 함수를 반환합니다. ```js -Int8Array[Symbol.species]; // function Int8Array() -Uint8Array[Symbol.species]; // function Uint8Array() +Int8Array[Symbol.species]; // function Int8Array() +Uint8Array[Symbol.species]; // function Uint8Array() Float32Array[Symbol.species]; // function Float32Array() ``` @@ -30,7 +30,9 @@ Float32Array[Symbol.species]; // function Float32Array() ```js class MyTypedArray extends Uint8Array { // Overwrite MyTypedArray species to the parent Uint8Array constructor - static get [Symbol.species]() { return Uint8Array; } + static get [Symbol.species]() { + return Uint8Array; + } } ``` diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/byteoffset/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/byteoffset/index.md index 3d3204fd1a4335..9cf127aaffbf1f 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/byteoffset/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/byteoffset/index.md @@ -2,6 +2,7 @@ title: TypedArray.prototype.byteOffset slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset --- + {{JSRef}} **`byteOffset`** 접근자(accessor) 속성(property)은 그 {{jsxref("ArrayBuffer")}}의 시작점에서 형식화 배열의 오프셋(단위 바이트)을 나타냅니다. @@ -9,7 +10,7 @@ slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset ## 구문 ```js -typedarray.byteOffset +typedarray.byteOffset; ``` ## 설명 diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/fill/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/fill/index.md index d028461a96d606..1e53da9243b66b 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/fill/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/fill/index.md @@ -2,6 +2,7 @@ title: TypedArray.prototype.fill() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/fill --- + {{JSRef}} **`fill()`** 메서드는 배열의 모든 요소를 지정한 시작 인덱스부터 종료 인덱스까지 정적인 값으로 채웁니다. `fill()`은 {{jsxref("Array.prototype.fill()")}}과 동일한 알고리즘을 가지고 있습니다. TypedArray 는 [typed array types](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects) 이곳에 있는 것 중 하나 입니다. @@ -34,10 +35,10 @@ start 와 end 사이에 요소들을 채웁니다. ## 예제 ```js -new Uint8Array([1, 2, 3]).fill(4); // Uint8Array [4, 4, 4] -new Uint8Array([1, 2, 3]).fill(4, 1); // Uint8Array [1, 4, 4] -new Uint8Array([1, 2, 3]).fill(4, 1, 2); // Uint8Array [1, 4, 3] -new Uint8Array([1, 2, 3]).fill(4, 1, 1); // Uint8Array [1, 2, 3] +new Uint8Array([1, 2, 3]).fill(4); // Uint8Array [4, 4, 4] +new Uint8Array([1, 2, 3]).fill(4, 1); // Uint8Array [1, 4, 4] +new Uint8Array([1, 2, 3]).fill(4, 1, 2); // Uint8Array [1, 4, 3] +new Uint8Array([1, 2, 3]).fill(4, 1, 1); // Uint8Array [1, 2, 3] new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3] ``` diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/index.md index 414ad72c62371b..a5ae134672f1b4 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/index.md @@ -19,33 +19,33 @@ slug: Web/JavaScript/Reference/Global_Objects/TypedArray ## TypedArray 객체 -| 형식 | 값 범위 | 바이트 크기| 설명 | Web IDL 형식 | 동일한 C 형식 | -| ---------------------------------------- | --------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------- | --------------------- | ------------------------------- | -| {{jsxref("Int8Array")}} | -128 to 127 | 1 | 부호 있는 8비트 2의 보수 정수 | `byte` | `int8_t` | -| {{jsxref("Uint8Array")}} | 0 to 255 | 1 | 부호 없는 8비트 정수 | `octet` | `uint8_t` | -| {{jsxref("Uint8ClampedArray")}} | 0 to 255 | 1 | 부호 없는 8비트 정수 (고정) | `octet` | `uint8_t` | -| {{jsxref("Int16Array")}} | -32768 to 32767 | 2 | 부호 있는 16비트 2의 보수 정수 | `short` | `int16_t` | -| {{jsxref("Uint16Array")}} | 0 to 65535 | 2 | 부호 없는 16비트 정수 | `unsigned short` | `uint16_t` | -| {{jsxref("Int32Array")}} | -2147483648 to 2147483647 | 4 | 부호 있는 32비트 2의 보수 정수 | `long` | `int32_t` | -| {{jsxref("Uint32Array")}} | 0 to 4294967295 | 4 | 부호 없는 32비트 정수 | `unsigned long` | `uint32_t` | -| {{jsxref("Float32Array")}} | `-3.4E38`에서 `3.4E38`. `1.2E-38`은 최초 양수 | 4 | 32비트 IEEE 부동 소수점 숫자 (유효한 7자리 숫자, 예: `1.234567`) | `unrestricted float` | `float` | -| {{jsxref("Float64Array")}} | `-1.8E308`에서 `1.8E308`. `5E-324`는 최소 양수 | 8 | 64비트 IEEE 부동 소수점 숫자 (유효한 16자리 숫자, 예: `1.23456789012345`) | `unrestricted double` | `double` | -| {{jsxref("BigInt64Array")}} | -263에서 263 - 1 | 8 | 부호 있는 64비트 2의 보수 정수 | `bigint` | `int64_t (signed long long)` | -| {{jsxref("BigUint64Array")}} | 0 에서 264 - 1 | 8 | 부호 없는 64비트 정수 | `bigint` | `uint64_t (unsigned long long)` | +| 형식 | 값 범위 | 바이트 크기 | 설명 | Web IDL 형식 | 동일한 C 형식 | +| ------------------------------- | ---------------------------------------------- | ----------- | ------------------------------------------------------------------------- | --------------------- | ------------------------------- | +| {{jsxref("Int8Array")}} | -128 to 127 | 1 | 부호 있는 8비트 2의 보수 정수 | `byte` | `int8_t` | +| {{jsxref("Uint8Array")}} | 0 to 255 | 1 | 부호 없는 8비트 정수 | `octet` | `uint8_t` | +| {{jsxref("Uint8ClampedArray")}} | 0 to 255 | 1 | 부호 없는 8비트 정수 (고정) | `octet` | `uint8_t` | +| {{jsxref("Int16Array")}} | -32768 to 32767 | 2 | 부호 있는 16비트 2의 보수 정수 | `short` | `int16_t` | +| {{jsxref("Uint16Array")}} | 0 to 65535 | 2 | 부호 없는 16비트 정수 | `unsigned short` | `uint16_t` | +| {{jsxref("Int32Array")}} | -2147483648 to 2147483647 | 4 | 부호 있는 32비트 2의 보수 정수 | `long` | `int32_t` | +| {{jsxref("Uint32Array")}} | 0 to 4294967295 | 4 | 부호 없는 32비트 정수 | `unsigned long` | `uint32_t` | +| {{jsxref("Float32Array")}} | `-3.4E38`에서 `3.4E38`. `1.2E-38`은 최초 양수 | 4 | 32비트 IEEE 부동 소수점 숫자 (유효한 7자리 숫자, 예: `1.234567`) | `unrestricted float` | `float` | +| {{jsxref("Float64Array")}} | `-1.8E308`에서 `1.8E308`. `5E-324`는 최소 양수 | 8 | 64비트 IEEE 부동 소수점 숫자 (유효한 16자리 숫자, 예: `1.23456789012345`) | `unrestricted double` | `double` | +| {{jsxref("BigInt64Array")}} | -263에서 263 - 1 | 8 | 부호 있는 64비트 2의 보수 정수 | `bigint` | `int64_t (signed long long)` | +| {{jsxref("BigUint64Array")}} | 0 에서 264 - 1 | 8 | 부호 없는 64비트 정수 | `bigint` | `uint64_t (unsigned long long)` | ## 생성자 이 객체는 직접 인스턴스화할 수 없습니다. 대신 {{jsxref("Int8Array")}} 또는 {{jsxref("BigInt64Array")}}와 같은 특정 유형의 배열 인스턴스를 만들 수 있습니다. 이러한 객체에는 모두 생성자에 대한 공통적인 구문이 있습니다. ```js -new TypedArray() -new TypedArray(length) -new TypedArray(typedArray) -new TypedArray(object) - -new TypedArray(buffer) -new TypedArray(buffer, byteOffset) -new TypedArray(buffer, byteOffset, length) +new TypedArray(); +new TypedArray(length); +new TypedArray(typedArray); +new TypedArray(object); + +new TypedArray(buffer); +new TypedArray(buffer, byteOffset); +new TypedArray(buffer, byteOffset, length); ``` 여기서 _TypedArray_ 는 구체적인 유형 중 하나의 생성자입니다. @@ -171,18 +171,18 @@ int16[0] = 42; console.log(int16[0]); // 42 // 프로토타입의 인덱싱된 속성이 참조되지 않음 (Fx 25) -Int8Array.prototype[20] = 'foo'; -(new Int8Array(32))[20]; // 0 +Int8Array.prototype[20] = "foo"; +new Int8Array(32)[20]; // 0 // 범위를 벗어나더라도 -Int8Array.prototype[20] = 'foo'; -(new Int8Array(8))[20]; // undefined +Int8Array.prototype[20] = "foo"; +new Int8Array(8)[20]; // undefined // 또는 음수를 사용하더라도 -Int8Array.prototype[-1] = 'foo'; -(new Int8Array(8))[-1]; // undefined +Int8Array.prototype[-1] = "foo"; +new Int8Array(8)[-1]; // undefined // 그래도 이름을 지정한 속성은 허용됨 (Fx 30) -Int8Array.prototype.foo = 'bar'; -(new Int8Array(32)).foo; // "bar" +Int8Array.prototype.foo = "bar"; +new Int8Array(32).foo; // "bar" ``` ### 고정될 수 없음 diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/indexof/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/indexof/index.md index 2b40c5257b0810..1b54b5937c27c8 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/indexof/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/indexof/index.md @@ -2,6 +2,7 @@ title: TypedArray.prototype.indexOf() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf --- + {{JSRef}} **`indexOf()`** 메소드는 형식화 배열(typed array)에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없으면 -1을 반환한다. 이 메소드는 {{jsxref("Array.prototype.indexOf()")}} 와 동일한 알고리즘을 가지고 있다*.* *TypedArray*는 [TypedArray 객체 유형](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_%EA%B0%9D%EC%B2%B4) 중 하나이다. @@ -33,9 +34,9 @@ typedarray.indexOf(searchElement[, fromIndex = 0]) ```js var uint8 = new Uint8Array([2, 5, 9]); -uint8.indexOf(2); // 0 -uint8.indexOf(7); // -1 -uint8.indexOf(9, 2); // 2 +uint8.indexOf(2); // 0 +uint8.indexOf(7); // -1 +uint8.indexOf(9, 2); // 2 uint8.indexOf(2, -1); // -1 uint8.indexOf(2, -3); // 0 ``` diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/length/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/length/index.md index 64c3363697b95e..85fbef6ef17f32 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/length/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/length/index.md @@ -2,6 +2,7 @@ title: TypedArray.prototype.length slug: Web/JavaScript/Reference/Global_Objects/TypedArray/length --- + {{JSRef}} **`length`** 접근자(accessor) 속성(property)은 형식화 배열의 (요소) 길이를 나타냅니다. diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/of/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/of/index.md index c55010d54ec695..f36bad8e73b5fa 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/of/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/of/index.md @@ -49,10 +49,10 @@ where TypedArray is one of: ## 예제 ```js -Uint8Array.of(1); // Uint8Array [ 1 ] -Int8Array.of('1', '2', '3'); // Int8Array [ 1, 2, 3 ] -Float32Array.of(1, 2, 3); // Float32Array [ 1, 2, 3 ] -Int16Array.of(undefined); // IntArray [ 0 ] +Uint8Array.of(1); // Uint8Array [ 1 ] +Int8Array.of("1", "2", "3"); // Int8Array [ 1, 2, 3 ] +Float32Array.of(1, 2, 3); // Float32Array [ 1, 2, 3 ] +Int16Array.of(undefined); // IntArray [ 0 ] ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/reverse/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/reverse/index.md index b97da37fbe737b..56a55adac49dc7 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/reverse/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/reverse/index.md @@ -2,6 +2,7 @@ title: TypedArray.prototype.reverse() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse --- + {{JSRef}} **`reverse()`** 메서드는 제자리에서 형식화 배열을 뒤집습니다. 형식화 배열 첫 요소는 마지막이 되고 마지막은 첫 요소가 됩니다. 이 메서드는 {{jsxref("Array.prototype.reverse()")}}와 같은 알고리즘입니다. *TypedArray*는 여기 [TypedArray 객체 유형](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects) 중 하나입니다. diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/set/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/set/index.md index eb370667162cbe..b5357360a5bb1c 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/set/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/set/index.md @@ -2,6 +2,7 @@ title: TypedArray.prototype.set() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/set --- + {{JSRef}} **`set()`** 메서드는 지정된 배열로부터 입력 값을 읽어 형식화 배열 내에 여러 값을 저장합니다. @@ -37,7 +38,7 @@ typedarr.set(typedarray[, offset]) var buffer = new ArrayBuffer(8); var uint8 = new Uint8Array(buffer); -uint8.set([1,2,3], 3); +uint8.set([1, 2, 3], 3); console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ] ``` diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/slice/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/slice/index.md index 935fca8ae4098f..81d31749431378 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/slice/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/slice/index.md @@ -2,6 +2,7 @@ title: TypedArray.prototype.slice() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/slice --- + {{JSRef}} **`slice()`** 메서드는 형식화 배열의 일부를 얕게 복사(shallow copy)한 새로운 형식화 배열 객체를 반환합니다. 이 메서드는 {{jsxref("Array.prototype.slice()")}}와 같은 알고리즘입니다. *TypedArray*는 여기 [TypedArray 객체 유형](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체) 중 하나입니다. @@ -34,11 +35,11 @@ typedarray.slice([begin[, end]]) ### 기존 형식화 배열의 일부를 반환 ```js -var uint8 = new Uint8Array([1,2,3]); -uint8.slice(1); // Uint8Array [ 2, 3 ] -uint8.slice(2); // Uint8Array [ 3 ] -uint8.slice(-2); // Uint8Array [ 2, 3 ] -uint8.slice(0,1); // Uint8Array [ 1 ] +var uint8 = new Uint8Array([1, 2, 3]); +uint8.slice(1); // Uint8Array [ 2, 3 ] +uint8.slice(2); // Uint8Array [ 3 ] +uint8.slice(-2); // Uint8Array [ 2, 3 ] +uint8.slice(0, 1); // Uint8Array [ 1 ] ``` ## 명세 diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/some/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/some/index.md index a39d5a5084fc5b..f9c53d10143502 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/some/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/some/index.md @@ -2,6 +2,7 @@ title: TypedArray.prototype.some() slug: Web/JavaScript/Reference/Global_Objects/TypedArray/some --- + {{JSRef}} **`some()`** 메서드는 형식화 배열 내 일부 요소가 제공되는 함수에 의해 구현되는 테스트를 통과하는지 여부를 테스트합니다. 이 메서드는 {{jsxref("Array.prototype.some()")}}과 같은 알고리즘입니다. *TypedArray*는 여기 [TypedArray 객체 유형](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects) 중 하나입니다. @@ -55,8 +56,8 @@ new Uint8Array([12, 5, 8, 1, 4]).some(isBiggerThan10); // true [화살표 함수](/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션)는 같은 테스트에 대해 더 짧은 구문을 제공합니다. ```js -new Uint8Array([2, 5, 8, 1, 4]).some(elem => elem > 10); // false -new Uint8Array([12, 5, 8, 1, 4]).some(elem => elem > 10); // true +new Uint8Array([2, 5, 8, 1, 4]).some((elem) => elem > 10); // false +new Uint8Array([12, 5, 8, 1, 4]).some((elem) => elem > 10); // true ``` ## 명세 diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/sort/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/sort/index.md index f877927f4a4555..79ffe07d182980 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/sort/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/sort/index.md @@ -10,7 +10,7 @@ slug: Web/JavaScript/Reference/Global_Objects/TypedArray/sort ## 구문 ```js -typedarray.sort([compareFunction]) +typedarray.sort([compareFunction]); ``` ### 매개변수 diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/values/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/values/index.md index 88a80c99585749..5e212d84d328b3 100644 --- a/files/ko/web/javascript/reference/global_objects/typedarray/values/index.md +++ b/files/ko/web/javascript/reference/global_objects/typedarray/values/index.md @@ -4,6 +4,7 @@ slug: Web/JavaScript/Reference/Global_Objects/TypedArray/values l10n: sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381 --- + {{JSRef}} **`values()`** 메서드는 배열 내 각 인덱스에 대한 값을 포함하는 새로운 배열 반복자 객체를 반환합니다. diff --git a/files/ko/web/javascript/reference/global_objects/typeerror/index.md b/files/ko/web/javascript/reference/global_objects/typeerror/index.md index 01704cabe53a81..3bbc5e1f65cc1d 100644 --- a/files/ko/web/javascript/reference/global_objects/typeerror/index.md +++ b/files/ko/web/javascript/reference/global_objects/typeerror/index.md @@ -49,12 +49,12 @@ try { null.f(); } catch (e) { console.log(e instanceof TypeError); // true - console.log(e.message); // "null has no properties" - console.log(e.name); // "TypeError" - console.log(e.fileName); // "Scratchpad/1" - console.log(e.lineNumber); // 2 - console.log(e.columnNumber); // 2 - console.log(e.stack); // "@Scratchpad/2:2:3\n" + console.log(e.message); // "null has no properties" + console.log(e.name); // "TypeError" + console.log(e.fileName); // "Scratchpad/1" + console.log(e.lineNumber); // 2 + console.log(e.columnNumber); // 2 + console.log(e.stack); // "@Scratchpad/2:2:3\n" } ``` @@ -62,15 +62,15 @@ try { ```js try { - throw new TypeError('Hello', "someFile.js", 10); + throw new TypeError("Hello", "someFile.js", 10); } catch (e) { console.log(e instanceof TypeError); // true - console.log(e.message); // "Hello" - console.log(e.name); // "TypeError" - console.log(e.fileName); // "someFile.js" - console.log(e.lineNumber); // 10 - console.log(e.columnNumber); // 0 - console.log(e.stack); // "@Scratchpad/2:2:9\n" + console.log(e.message); // "Hello" + console.log(e.name); // "TypeError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:2:9\n" } ``` diff --git a/files/ko/web/javascript/reference/global_objects/typeerror/typeerror/index.md b/files/ko/web/javascript/reference/global_objects/typeerror/typeerror/index.md index 6c103d998c6900..29ffdc391a98fd 100644 --- a/files/ko/web/javascript/reference/global_objects/typeerror/typeerror/index.md +++ b/files/ko/web/javascript/reference/global_objects/typeerror/typeerror/index.md @@ -45,15 +45,15 @@ TypeError(message, fileName, lineNumber) ```js try { - null.f() + null.f(); } catch (e) { - console.log(e instanceof TypeError) // true - console.log(e.message) // "null has no properties" - console.log(e.name) // "TypeError" - console.log(e.fileName) // "Scratchpad/1" - console.log(e.lineNumber) // 2 - console.log(e.columnNumber) // 2 - console.log(e.stack) // "@Scratchpad/2:2:3\n" + console.log(e instanceof TypeError); // true + console.log(e.message); // "null has no properties" + console.log(e.name); // "TypeError" + console.log(e.fileName); // "Scratchpad/1" + console.log(e.lineNumber); // 2 + console.log(e.columnNumber); // 2 + console.log(e.stack); // "@Scratchpad/2:2:3\n" } ``` @@ -61,15 +61,15 @@ try { ```js try { - throw new TypeError('Hello', "someFile.js", 10) + throw new TypeError("Hello", "someFile.js", 10); } catch (e) { - console.log(e instanceof TypeError) // true - console.log(e.message) // "Hello" - console.log(e.name) // "TypeError" - console.log(e.fileName) // "someFile.js" - console.log(e.lineNumber) // 10 - console.log(e.columnNumber) // 0 - console.log(e.stack) // "@Scratchpad/2:2:9\n" + console.log(e instanceof TypeError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "TypeError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:2:9\n" } ``` diff --git a/files/ko/web/javascript/reference/global_objects/undefined/index.md b/files/ko/web/javascript/reference/global_objects/undefined/index.md index cc30835bc45aab..eb1e33e8204294 100644 --- a/files/ko/web/javascript/reference/global_objects/undefined/index.md +++ b/files/ko/web/javascript/reference/global_objects/undefined/index.md @@ -48,10 +48,9 @@ JavaScript의 {{Glossary("Primitive", "원시 자료형")}} 중 하나입니다. ```js let x; if (x === undefined) { - // 이 문이 실행됨 -} -else { - // 이 문이 실행되지 않음 + // 이 문이 실행됨 +} else { + // 이 문이 실행되지 않음 } ``` @@ -66,8 +65,8 @@ else { ```js let x; -if (typeof x === 'undefined') { - // 이 문이 실행됨 +if (typeof x === "undefined") { + // 이 문이 실행됨 } ``` @@ -76,13 +75,12 @@ if (typeof x === 'undefined') { ```js // x를 선언한 적 없음 // 오류 없이 true로 평가 -if (typeof x === 'undefined') { - // 이 문이 실행됨 +if (typeof x === "undefined") { + // 이 문이 실행됨 } // ReferenceError 발생 -if(x === undefined) { - +if (x === undefined) { } ``` diff --git a/files/ko/web/javascript/reference/global_objects/urierror/index.md b/files/ko/web/javascript/reference/global_objects/urierror/index.md index b9687a6722b2dd..5abb1584a6eb23 100644 --- a/files/ko/web/javascript/reference/global_objects/urierror/index.md +++ b/files/ko/web/javascript/reference/global_objects/urierror/index.md @@ -2,6 +2,7 @@ title: URIError slug: Web/JavaScript/Reference/Global_Objects/URIError --- + {{JSRef}} **`URIError`** 객체는 전역 URI 핸들링 함수가 잘못된 방식으로 사용되었을 때의 오류를 표현합니다. @@ -33,15 +34,15 @@ slug: Web/JavaScript/Reference/Global_Objects/URIError ```js try { - decodeURIComponent('%') + decodeURIComponent("%"); } catch (e) { - console.log(e instanceof URIError) // true - console.log(e.message) // "malformed URI sequence" - console.log(e.name) // "URIError" - console.log(e.fileName) // "Scratchpad/1" - console.log(e.lineNumber) // 2 - console.log(e.columnNumber) // 2 - console.log(e.stack) // "@Scratchpad/2:2:3\n" + console.log(e instanceof URIError); // true + console.log(e.message); // "malformed URI sequence" + console.log(e.name); // "URIError" + console.log(e.fileName); // "Scratchpad/1" + console.log(e.lineNumber); // 2 + console.log(e.columnNumber); // 2 + console.log(e.stack); // "@Scratchpad/2:2:3\n" } ``` @@ -49,15 +50,15 @@ try { ```js try { - throw new URIError('Hello', 'someFile.js', 10) + throw new URIError("Hello", "someFile.js", 10); } catch (e) { - console.log(e instanceof URIError) // true - console.log(e.message) // "Hello" - console.log(e.name) // "URIError" - console.log(e.fileName) // "someFile.js" - console.log(e.lineNumber) // 10 - console.log(e.columnNumber) // 0 - console.log(e.stack) // "@Scratchpad/2:2:9\n" + console.log(e instanceof URIError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "URIError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:2:9\n" } ``` diff --git a/files/ko/web/javascript/reference/global_objects/urierror/urierror/index.md b/files/ko/web/javascript/reference/global_objects/urierror/urierror/index.md index e509ff1cf4036a..42457b0bd65902 100644 --- a/files/ko/web/javascript/reference/global_objects/urierror/urierror/index.md +++ b/files/ko/web/javascript/reference/global_objects/urierror/urierror/index.md @@ -2,6 +2,7 @@ title: URIError() constructor slug: Web/JavaScript/Reference/Global_Objects/URIError/URIError --- + {{JSRef}} **`URIError()`** 생성자는 전역 URI 핸들링 함수가 잘못 사용될 때 오류를 생성합니다. @@ -9,10 +10,10 @@ slug: Web/JavaScript/Reference/Global_Objects/URIError/URIError ## 구문 ```js -new URIError() -new URIError(message) -new URIError(message, fileName) -new URIError(message, fileName, lineNumber) +new URIError(); +new URIError(message); +new URIError(message, fileName); +new URIError(message, fileName, lineNumber); ``` ### 매개변수 @@ -30,15 +31,15 @@ new URIError(message, fileName, lineNumber) ```js try { - decodeURIComponent('%') + decodeURIComponent("%"); } catch (e) { - console.log(e instanceof URIError) // true - console.log(e.message) // "malformed URI sequence" - console.log(e.name) // "URIError" - console.log(e.fileName) // "Scratchpad/1" - console.log(e.lineNumber) // 2 - console.log(e.columnNumber) // 2 - console.log(e.stack) // "@Scratchpad/2:2:3\n" + console.log(e instanceof URIError); // true + console.log(e.message); // "malformed URI sequence" + console.log(e.name); // "URIError" + console.log(e.fileName); // "Scratchpad/1" + console.log(e.lineNumber); // 2 + console.log(e.columnNumber); // 2 + console.log(e.stack); // "@Scratchpad/2:2:3\n" } ``` @@ -46,15 +47,15 @@ try { ```js try { - throw new URIError('Hello', 'someFile.js', 10) + throw new URIError("Hello", "someFile.js", 10); } catch (e) { - console.log(e instanceof URIError) // true - console.log(e.message) // "Hello" - console.log(e.name) // "URIError" - console.log(e.fileName) // "someFile.js" - console.log(e.lineNumber) // 10 - console.log(e.columnNumber) // 0 - console.log(e.stack) // "@Scratchpad/2:2:9\n" + console.log(e instanceof URIError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "URIError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:2:9\n" } ``` diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/delete/index.md b/files/ko/web/javascript/reference/global_objects/weakmap/delete/index.md index dc16f585d62a79..7f23722e2ab10f 100644 --- a/files/ko/web/javascript/reference/global_objects/weakmap/delete/index.md +++ b/files/ko/web/javascript/reference/global_objects/weakmap/delete/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakMap/delete ## 구문 ```js -delete(key) +delete key; ``` ### 매개변수 @@ -30,11 +30,11 @@ delete(key) ```js const wm = new WeakMap(); -wm.set(window, 'foo'); +wm.set(window, "foo"); wm.delete(window); // true 반환. 성공적으로 제거됨. -wm.has(window); // false 반환. window 객체는 더이상 WeakMap에 있지않음. +wm.has(window); // false 반환. window 객체는 더이상 WeakMap에 있지않음. ``` ## 명세 diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/get/index.md b/files/ko/web/javascript/reference/global_objects/weakmap/get/index.md index 4a96587497d6ef..baf39e995b2dac 100644 --- a/files/ko/web/javascript/reference/global_objects/weakmap/get/index.md +++ b/files/ko/web/javascript/reference/global_objects/weakmap/get/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakMap/get ## 구문 ```js -get(key) +get(key); ``` ### 매개변수 @@ -30,10 +30,10 @@ get(key) ```js const wm = new WeakMap(); -wm.set(window, 'foo'); +wm.set(window, "foo"); wm.get(window); // "foo" 반환. -wm.get('baz'); // undefined 반환. +wm.get("baz"); // undefined 반환. ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/has/index.md b/files/ko/web/javascript/reference/global_objects/weakmap/has/index.md index 8ed700b35db939..5ef6e33f533597 100644 --- a/files/ko/web/javascript/reference/global_objects/weakmap/has/index.md +++ b/files/ko/web/javascript/reference/global_objects/weakmap/has/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakMap/has ## 구문 ```js -has(key) +has(key); ``` ### 매개변수 @@ -31,10 +31,10 @@ has(key) ```js const wm = new WeakMap(); -wm.set(window, 'foo'); +wm.set(window, "foo"); wm.has(window); // true 반환 -wm.has('baz'); // false 반환 +wm.has("baz"); // false 반환 ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/index.md b/files/ko/web/javascript/reference/global_objects/weakmap/index.md index 745c33b8bec08e..5ee20be9d2b3c5 100644 --- a/files/ko/web/javascript/reference/global_objects/weakmap/index.md +++ b/files/ko/web/javascript/reference/global_objects/weakmap/index.md @@ -175,7 +175,7 @@ class Thing { static #counter = 0; #hidden; constructor() { - this.someProperty = 'foo'; + this.someProperty = "foo"; this.#hidden = ++Thing.#counter; } showPublic() { diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/set/index.md b/files/ko/web/javascript/reference/global_objects/weakmap/set/index.md index af762adc8cdfd6..de33698f893205 100644 --- a/files/ko/web/javascript/reference/global_objects/weakmap/set/index.md +++ b/files/ko/web/javascript/reference/global_objects/weakmap/set/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Global_Objects/WeakMap/set ## 구문 ```js -set(key, value) +set(key, value); ``` ### 매개변수 @@ -35,10 +35,10 @@ const wm = new WeakMap(); const obj = {}; // WeakMap에 새 요소를 추가합니다 -wm.set(obj, 'foo').set(window, 'bar'); // 체인가능 +wm.set(obj, "foo").set(window, "bar"); // 체인가능 // WeakMap 요소 업데이트 -wm.set(obj, 'baz'); +wm.set(obj, "baz"); ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/global_objects/weakset/index.md b/files/ko/web/javascript/reference/global_objects/weakset/index.md index 21df51cfda7cee..c8d0db9bd611c1 100644 --- a/files/ko/web/javascript/reference/global_objects/weakset/index.md +++ b/files/ko/web/javascript/reference/global_objects/weakset/index.md @@ -2,6 +2,7 @@ title: WeakSet slug: Web/JavaScript/Reference/Global_Objects/WeakSet --- + {{JSRef}} **`WeakSet`** 객체는 약하게 유지되는(held, 잡아두는) *객체*를 컬렉션에 저장할 수 있습니다. @@ -42,10 +43,10 @@ ws.add(window); ws.add(obj); ws.has(window); // true -ws.has(foo); // false, foo가 집합에 추가되지 않았음 +ws.has(foo); // false, foo가 집합에 추가되지 않았음 ws.delete(window); // 집합에서 window 제거함 -ws.has(window); // false, window가 제거되었음 +ws.has(window); // false, window가 제거되었음 ``` ## 명세 diff --git a/files/ko/web/javascript/reference/iteration_protocols/index.md b/files/ko/web/javascript/reference/iteration_protocols/index.md index f6298e9efdd3bf..55505521a9ced4 100644 --- a/files/ko/web/javascript/reference/iteration_protocols/index.md +++ b/files/ko/web/javascript/reference/iteration_protocols/index.md @@ -2,6 +2,7 @@ title: Iteration protocols slug: Web/JavaScript/Reference/Iteration_protocols --- + {{jsSidebar("More")}} ECMAScript 2015 (ES6)에는 새로운 문법이나 built-in 뿐만이 아니라, protocols(표현법들)도 추가되었습니다. 이 protocol 은 일정 규칙만 충족한다면 어떠한 객체에 의해서도 구현될 수 있습니다. @@ -14,8 +15,8 @@ ECMAScript 2015 (ES6)에는 새로운 문법이나 built-in 뿐만이 아니라, **iterable** 하기 위해서 object는 **@@iterator** 메소드를 구현해야 합니다. 이것은 object (또는 [prototype chain](/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain) 의 오브젝트 중 하나) 가 {{jsxref("Symbol.iterator")}} `key` 의 속성을 가져야 한다는 것을 의미합니다 : -| Property | Value | -| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Property | Value | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `[Symbol.iterator]` | object를 반환하는, arguments 없는 function. [iterator protocol](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#iterator) 을 따른다. | 어떠한 객체가 반복(Iterate)되어야 한다면 이 객체의 `@@iterator` 메소드가 인수없이 호출되고, 반환된 **iterator**는 반복을 통해서 획득할 값들을 얻을 때 사용됩니다. @@ -74,8 +75,8 @@ ECMAScript 2015 (ES6)에는 새로운 문법이나 built-in 뿐만이 아니라, var someArray = [1, 5, 7]; var someArrayEntries = someArray.entries(); -someArrayEntries.toString(); // "[object Array Iterator]" -someArrayEntries === someArrayEntries[Symbol.iterator](); // true +someArrayEntries.toString(); // "[object Array Iterator]" +someArrayEntries === someArrayEntries[Symbol.iterator](); // true ``` ## Iteration protocols 사용 예시 @@ -84,34 +85,35 @@ someArrayEntries === someArrayEntries[Symbol.iterator](); // true ```js var someString = "hi"; -typeof someString[Symbol.iterator]; // "function" +typeof someString[Symbol.iterator]; // "function" ``` `String` 의 기본 iterator 는 string 의 문자를 하나씩 반환합니다. ```js var iterator = someString[Symbol.iterator](); -iterator + ""; // "[object String Iterator]" +iterator + ""; // "[object String Iterator]" -iterator.next(); // { value: "h", done: false } -iterator.next(); // { value: "i", done: false } -iterator.next(); // { value: undefined, done: true } +iterator.next(); // { value: "h", done: false } +iterator.next(); // { value: "i", done: false } +iterator.next(); // { value: undefined, done: true } ``` [spread operator](/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator)와 같은 특정 내장 구조(built-in constructs)들은 실제로는 동일한 iteration protocol을 사용한다: ```js -[...someString] // ["h", "i"] +[...someString]; // ["h", "i"] ``` 사용자만의 `@@iterator`를 특정함으로써 원하는 반복 행위(iteration behavior)를 설정할 수 있다: ```js -var someString = new String("hi"); // need to construct a String object explicitly to avoid auto-boxing +var someString = new String("hi"); // need to construct a String object explicitly to avoid auto-boxing -someString[Symbol.iterator] = function() { - return { // this is the iterator object, returning a single element, the string "bye" - next: function() { +someString[Symbol.iterator] = function () { + return { + // this is the iterator object, returning a single element, the string "bye" + next: function () { if (this._first) { this._first = false; return { value: "bye", done: false }; @@ -119,7 +121,7 @@ someString[Symbol.iterator] = function() { return { done: true }; } }, - _first: true + _first: true, }; }; ``` @@ -127,8 +129,8 @@ someString[Symbol.iterator] = function() { 재설정된 `@@iterator`가 어떻게 내장 구조(built-in constructs)의 반복 행위에 영향을 주는지 참고: ```js -[...someString]; // ["bye"] -someString + ""; // "hi" +[...someString]; // ["bye"] +someString + ""; // "hi" ``` ## Iterable 예시 @@ -144,9 +146,9 @@ someString + ""; // "hi" ```js var myIterable = {}; myIterable[Symbol.iterator] = function* () { - yield 1; - yield 2; - yield 3; + yield 1; + yield 2; + yield 3; }; [...myIterable]; // [1, 2, 3] ``` @@ -157,15 +159,30 @@ Iterable을 허용하는 많은 내장 API들이 있다. 예를 들어: {{jsxref ```js var myObj = {}; -new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2); // "b" -new WeakMap([[{},"a"],[myObj,"b"],[{},"c"]]).get(myObj); // "b" -new Set([1, 2, 3]).has(3); // true -new Set("123").has("2"); // true -new WeakSet(function*() { + +new Map([ + [1, "a"], + [2, "b"], + [3, "c"], +]).get(2); // "b" + +new WeakMap([ + [{}, "a"], + [myObj, "b"], + [{}, "c"], +]).get(myObj); // "b" + +new Set([1, 2, 3]).has(3); // true + +new Set("123").has("2"); // true + +new WeakSet( + (function* () { yield {}; yield myObj; yield {}; -}()).has(myObj); // true + })(), +).has(myObj); // true ``` 뿐만 아니라 {{jsxref("Promise.all", "Promise.all(iterable)")}}, {{jsxref("Promise.race", "Promise.race(iterable)")}}와 {{jsxref("Array.from", "Array.from()")}} 또한 해당된다. @@ -175,8 +192,8 @@ new WeakSet(function*() { [`for-of`](/ko/docs/Web/JavaScript/Reference/Statements/for...of) loops, [spread operator](/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator), `yield*와` [destructuring assignment](/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)는 iterable과 함께 사용되는 구문(statements)과 표현(expressions)이다. ```js -for(let value of ["a", "b", "c"]){ - console.log(value); +for (let value of ["a", "b", "c"]) { + console.log(value); } // "a" // "b" @@ -184,14 +201,14 @@ for(let value of ["a", "b", "c"]){ [..."abc"]; // ["a", "b", "c"] -function* gen(){ +function* gen() { yield* ["a", "b", "c"]; } gen().next(); // { value:"a", done:false } [a, b, c] = new Set(["a", "b", "c"]); -a // "a" +a; // "a" ``` ### 잘 정의되지 못한 iterables @@ -209,36 +226,36 @@ nonWellFormedIterable[Symbol.iterator] = () => 1 ### 간단한 iterator ```js -function makeIterator(array){ - var nextIndex = 0; - - return { - next: function(){ - return nextIndex < array.length ? - {value: array[nextIndex++], done: false} : - {done: true}; - } - }; +function makeIterator(array) { + var nextIndex = 0; + + return { + next: function () { + return nextIndex < array.length + ? { value: array[nextIndex++], done: false } + : { done: true }; + }, + }; } -var it = makeIterator(['yo', 'ya']); +var it = makeIterator(["yo", "ya"]); console.log(it.next().value); // 'yo' console.log(it.next().value); // 'ya' -console.log(it.next().done); // true +console.log(it.next().done); // true ``` ### 무한 iterator ```js -function idMaker(){ - var index = 0; - - return { - next: function(){ - return {value: index++, done: false}; - } - }; +function idMaker() { + var index = 0; + + return { + next: function () { + return { value: index++, done: false }; + }, + }; } var it = idMaker(); @@ -252,26 +269,23 @@ console.log(it.next().value); // '2' ### Generator와 함께 사용된 iterator ```js -function* makeSimpleGenerator(array){ - var nextIndex = 0; +function* makeSimpleGenerator(array) { + var nextIndex = 0; - while(nextIndex < array.length){ - yield array[nextIndex++]; - } + while (nextIndex < array.length) { + yield array[nextIndex++]; + } } -var gen = makeSimpleGenerator(['yo', 'ya']); +var gen = makeSimpleGenerator(["yo", "ya"]); console.log(gen.next().value); // 'yo' console.log(gen.next().value); // 'ya' -console.log(gen.next().done); // true - - +console.log(gen.next().done); // true -function* idMaker(){ - var index = 0; - while(true) - yield index++; +function* idMaker() { + var index = 0; + while (true) yield index++; } var gen = idMaker(); @@ -287,11 +301,11 @@ console.log(gen.next().value); // '2' [generator object](/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator) 는 iterator 이면서 iterable 입니다. ```js -var aGeneratorObject = function*(){ - yield 1; - yield 2; - yield 3; -}(); +var aGeneratorObject = (function* () { + yield 1; + yield 2; + yield 3; +})(); typeof aGeneratorObject.next; // "function", 이것은 next 메서드를 가지고 있기 때문에 iterator입니다. typeof aGeneratorObject[Symbol.iterator]; diff --git a/files/ko/web/javascript/reference/lexical_grammar/index.md b/files/ko/web/javascript/reference/lexical_grammar/index.md index f57213c465982a..70e9235b2f1fc4 100644 --- a/files/ko/web/javascript/reference/lexical_grammar/index.md +++ b/files/ko/web/javascript/reference/lexical_grammar/index.md @@ -2,6 +2,7 @@ title: 어휘 문법 slug: Web/JavaScript/Reference/Lexical_grammar --- + {{JsSidebar("More")}} 이 페이지는 JavaScript의 어휘 문법(lexical grammar)을 설명합니다. ECMAScript 소스 본문은 왼쪽에서 오른쪽 방향으로 분석되고 토큰, 제어문자, 줄바꿈, 주석, 또는 공백으로 구성되는 입력 요소 시퀀스로 바뀝니다. 또한 ECMAScript는 특별한 키워드와 리터럴을 정의하고 있으며 명령문 끝에 자동으로 세미콜론을 추가하는 규칙이 있습니다. @@ -68,8 +69,8 @@ slug: Web/JavaScript/Reference/Lexical_grammar 공백 문자는 소스 본문을 읽기 좋게 만들고 토큰을 구분합니다. 이 공백 문자들은 보통 코드의 기능에 필요한 것은 아닙니다. 최소화 도구([Minification tools](http://en.wikipedia.org/wiki/Minification_%28programming%29))는 종종 전송해야하는 데이터 크기를 줄이기 위해서 공백을 제거합니다. -| 코드 포인트 | 이름 | 축약형 | 설명 | 이스케이프 시퀀스 | -| ----------- | ------------------------------ | ------ | -------------------------------------------------------------------------------------------------------- | ----------------- | +| 코드 포인트 | 이름 | 축약형 | 설명 | 이스케이프 시퀀스 | +| ----------- | ------------------------------ | ------- | -------------------------------------------------------------------------------------------------------- | ----------------- | | U+0009 | Character tabulation | \ | Horizontal tabulation | \t | | U+000B | Line tabulation | \ | Vertical tabulation | \v | | U+000C | Form feed | \ | Page breaking control character ([Wikipedia](http://en.wikipedia.org/wiki/Page_break#Form_feed)). | \f | @@ -85,10 +86,10 @@ slug: Web/JavaScript/Reference/Lexical_grammar | 코드 포인트 | 이름 | 축약형 | 설명 | 이스케이프 시퀀스 | | ----------- | ------------------- | ------ | ------------------------------------------------------ | ----------------- | -| U+000A | Line Feed | \ | New line character in UNIX systems. | \n | -| U+000D | Carriage Return | \ | New line character in Commodore and early Mac systems. | \r | -| U+2028 | Line Separator | \ | [Wikipedia](http://en.wikipedia.org/wiki/Newline) | | -| U+2029 | Paragraph Separator | \ | [Wikipedia](http://en.wikipedia.org/wiki/Newline) | | +| U+000A | Line Feed | \ | New line character in UNIX systems. | \n | +| U+000D | Carriage Return | \ | New line character in Commodore and early Mac systems. | \r | +| U+2028 | Line Separator | \ | [Wikipedia](http://en.wikipedia.org/wiki/Newline) | | +| U+2029 | Paragraph Separator | \ | [Wikipedia](http://en.wikipedia.org/wiki/Newline) | | ## 주석 @@ -164,7 +165,7 @@ that you want to use to execute the script. An example is as follows: console.log("Hello world"); ``` -> **Note:** Hashbang comments in JavaScript mimic [shebangs in Unix](https://en.wikipedia.org/wiki/Shebang_(Unix)) used to run files with proper interpreter. +> **Note:** Hashbang comments in JavaScript mimic [shebangs in Unix]() used to run files with proper interpreter. > **Warning:** Although [BOM](https://en.wikipedia.org/wiki/Byte_order_mark) before hashbang comment will work in a browser it is not advised to use BOM in a script with hasbang. BOM will not work when you try to run the script in Unix/Linux. So use UTF-8 without BOM if you want to run scripts directly from shell. @@ -277,7 +278,7 @@ function import() {} // Illegal. See also [`null`](/ko/docs/Web/JavaScript/Reference/Global_Objects/null) for more information. ```js -null +null; ``` ### 불리언 리터럴 @@ -285,8 +286,8 @@ null See also [`Boolean`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean) for more information. ```js -true -false +true; +false; ``` ### 숫자 리터럴 @@ -294,19 +295,19 @@ false #### 10진법 ```js -1234567890 -42 +1234567890; +42; // Caution when using with a leading zero: -0888 // 888 parsed as decimal -0777 // parsed as octal, 511 in decimal +0888; // 888 parsed as decimal +0777; // parsed as octal, 511 in decimal ``` Note that decimal literals can start with a zero (`0`) followed by another decimal digit, but If all digits after the leading `0` are smaller than 8, the number is interpreted as an octal number. This won't throw in JavaScript, see [Firefox bug 957513](https://bugzil.la/957513). See also the page about [`parseInt()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt#Octal_interpretations_with_no_radix). ##### Exponential -The decimal exponential literal is specified by the following format: `beN`; where `b` is a base number (integer or floating), followed by `e` char (which serves as separator or _exponent indicator_) and\* *`N`, which is *exponent* or *power\* number – a signed integer (as per 2019 ECMA-262 specs): +The decimal exponential literal is specified by the following format: `beN`; where `b` is a base number (integer or floating), followed by `e` char (which serves as separator or _exponent indicator_) and _`N`_, which is _exponent_ or _power_ number – a signed integer (as per 2019 ECMA-262 specs): ``` 0e-5 // => 0 @@ -322,9 +323,9 @@ The decimal exponential literal is specified by the following format: `beN`; whe Binary number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "B" (`0b` or `0B`). Because this syntax is new in ECMAScript 2015, see the browser compatibility table, below. If the digits after the `0b` are not 0 or 1, the following [`SyntaxError`](/ko/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError) is thrown: "Missing binary digits after 0b". ```js -var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 +var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 -var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607 +var FLT_MANTISSA = 0b00000000011111111111111111111111; // 8388607 ``` #### 8진법 @@ -332,12 +333,12 @@ var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607 Octal number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "O" (`0o` or `0O)`. Because this syntax is new in ECMAScript 2015, see the browser compatibility table, below. If the digits after the `0o` are outside the range (01234567), the following [`SyntaxError`](/ko/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError) is thrown: "Missing octal digits after 0o". ```js -var n = 0O755; // 493 +var n = 0o755; // 493 var m = 0o644; // 420 // Also possible with just a leading zero (see note about decimals above) -0755 -0644 +0755; +0644; ``` #### 16진법 @@ -345,9 +346,9 @@ var m = 0o644; // 420 Hexadecimal number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "X" (`0x` or `0X)`. If the digits after 0x are outside the range (0123456789ABCDEF), the following [`SyntaxError`](/ko/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError) is thrown: "Identifier starts immediately after numeric literal". ```js -0xFFFFFFFFFFFFFFFFF // 295147905179352830000 -0x123456789ABCDEF // 81985529216486900 -0XA // 10 +0xfffffffffffffffff; // 295147905179352830000 +0x123456789abcdef; // 81985529216486900 +0xa; // 10 ``` #### BigInt literal @@ -416,11 +417,13 @@ Note these limitations: See also {{jsxref("Object")}} and [Object initializer](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer) for more information. ```js -var o = { a: 'foo', b: 'bar', c: 42 }; +var o = { a: "foo", b: "bar", c: 42 }; // shorthand notation. New in ES2015 -var a = 'foo', b = 'bar', c = 42; -var o = {a, b, c}; +var a = "foo", + b = "bar", + c = 42; +var o = { a, b, c }; // instead of var o = { a: a, b: b, c: c }; @@ -431,7 +434,7 @@ var o = { a: a, b: b, c: c }; See also {{jsxref("Array")}} for more information. ```js -[1954, 1974, 1990, 2014] +[1954, 1974, 1990, 2014]; ``` ### 문자열 리터럴 @@ -446,9 +449,9 @@ Prior to the [proposal to make all JSON text valid ECMA-262](https://github.com/ Any code points may appear in the form of an escape sequence. String literals evaluate to ECMAScript String values. When generating these String values Unicode code points are UTF-16 encoded. -```js -'foo' -"bar" +```js-nolint +'foo'; +"bar"; ``` #### 16진수 이스케이프 시퀀스 @@ -456,7 +459,7 @@ Any code points may appear in the form of an escape sequence. String literals ev Hexadecimal escape sequences consist of `\x` followed by exactly two hexadecimal digits representing a code unit or code point in the range 0x0000 to 0x00FF. ```js -'\xA9' // "©" +"\xA9"; // "©" ``` #### 유니코드 이스케이프 시퀀스 @@ -466,7 +469,7 @@ A Unicode escape sequence consists of exactly four hexadecimal digits following See also {{jsxref("String.fromCharCode()")}} and {{jsxref("String.prototype.charCodeAt()")}}. ```js -'\u00A9' // "©" (U+A9) +"\u00A9"; // "©" (U+A9) ``` #### 유니코드 코드 포인트 시퀀스 @@ -476,10 +479,10 @@ A Unicode code point escape consists of `\u{`, followed by a code point in hexad See also {{jsxref("String.fromCodePoint()")}} and {{jsxref("String.prototype.codePointAt()")}}. ```js -'\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804) +"\u{2F804}"; // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804) // the same character represented as a surrogate pair -'\uD87E\uDC04' +"\uD87E\uDC04"; ``` ### 정규 표현식 리터럴 @@ -500,14 +503,14 @@ See also [`RegExp`](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp) for See also [template strings](/ko/docs/Web/JavaScript/Reference/template_strings) for more information. ```js -`string text` +`string text`; `string text line 1 - string text line 2` + string text line 2`; -`string text ${expression} string text` +`string text ${expression} string text`; -tag `string text ${expression} string text` +tag `string text ${expression} string text`; ``` ## 자동 세미콜론 삽입 @@ -526,46 +529,46 @@ The ECMAScript specification mentions [three rules of semicolon insertion](https 1. A semicolon is inserted before, when a [Line terminator](#Line_terminators) or "}" is encountered that is not allowed by the grammar. - ```js - { 1 2 } 3 + ```js-nolint + { 1 2 } 3 - // is transformed by ASI into + // is transformed by ASI into - { 1 2 ;} 3; - ``` + { 1 2 ;} 3; + ``` 2. A semicolon is inserted at the end, when the end of the input stream of tokens is detected and the parser is unable to parse the single input stream as a complete program. - Here `++` is not treated as a [postfix operator](/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment) applying to variable `b`, because a line terminator occurs between `b` and `++`. + Here `++` is not treated as a [postfix operator](/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment) applying to variable `b`, because a line terminator occurs between `b` and `++`. - ```js - a = b - ++c + ```js-nolint + a = b + ++c - // is transformend by ASI into + // is transformend by ASI into - a = b; - ++c; - ``` + a = b; + ++c; + ``` 3. A semicolon is inserted at the end, when a statement with restricted productions in the grammar is followed by a line terminator. These statements with "no LineTerminator here" rules are: - - PostfixExpressions (`++` and `--`) - - `continue` - - `break` - - `return` - - `yield`, `yield*` - - `module` + - PostfixExpressions (`++` and `--`) + - `continue` + - `break` + - `return` + - `yield`, `yield*` + - `module` - ```js - return - a + b + ```js-nolint + return + a + b - // is transformed by ASI into + // is transformed by ASI into - return; - a + b; - ``` + return; + a + b; + ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/addition/index.md b/files/ko/web/javascript/reference/operators/addition/index.md index 5d962926b5344f..ae93ea453f12f7 100644 --- a/files/ko/web/javascript/reference/operators/addition/index.md +++ b/files/ko/web/javascript/reference/operators/addition/index.md @@ -2,7 +2,7 @@ title: 더하기 (+) slug: Web/JavaScript/Reference/Operators/Addition l10n: - sourceCommit:93d2d79c1c68af93f2730d27cdea9d527eee0d7a + sourceCommit: 93d2d79c1c68af93f2730d27cdea9d527eee0d7a --- {{jsSidebar("Operators")}} @@ -42,13 +42,13 @@ const t = Temporal.Now.instant(); ```js // Number + Number -> 덧셈 -1 + 2 // 3 +1 + 2; // 3 // Boolean + Number -> 덧셈 -true + 1 // 2 +true + 1; // 2 // Boolean + Boolean -> 덧셈 -false + false // 0 +false + false; // 0 ``` ## BigInt 덧셈 @@ -69,13 +69,13 @@ Number(1n) + 2; // 3 ```js // String + String -> 연결 -'foo' + 'bar' // "foobar" +"foo" + "bar"; // "foobar" // Number + String -> 연결 -5 + 'foo' // "5foo" +5 + "foo"; // "5foo" // String + Boolean -> 연결 -'foo' + false // "foofalse" +"foo" + false; // "foofalse" ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/addition_assignment/index.md b/files/ko/web/javascript/reference/operators/addition_assignment/index.md index 7845605e4b2666..2c55dc28e4685a 100644 --- a/files/ko/web/javascript/reference/operators/addition_assignment/index.md +++ b/files/ko/web/javascript/reference/operators/addition_assignment/index.md @@ -2,6 +2,7 @@ title: 더하기 할당 (+=) slug: Web/JavaScript/Reference/Operators/Addition_assignment --- + {{jsSidebar("Operators")}} 더하기 할당 연산자(`+=`)는 오른쪽 피연산자의 값을 변수에 더한 결과를 다시 변수에 할당합니다. 두 피연산자의 @@ -12,7 +13,7 @@ slug: Web/JavaScript/Reference/Operators/Addition_assignment ## 구문 ```js -x += y // x = x + y +x += y; // x = x + y ``` ## 예제 @@ -26,22 +27,22 @@ x += y // x = x + y // 위와 같은 변수를 가정할 때 // Number + Number -> 덧셈 -bar += 2 // 7 +bar += 2; // 7 // Boolean + Number -> 덧셈 -baz += 1 // 2 +baz += 1; // 2 // Boolean + Boolean -> 덧셈 -baz += false // 1 +baz += false; // 1 // Number + String -> 연결 -bar += 'foo' // "5foo" +bar += "foo"; // "5foo" // String + Boolean -> 연결 -foo += false // "foofalse" +foo += false; // "foofalse" // String + String -> 연결 -foo += 'bar' // "foobar" +foo += "bar"; // "foobar" ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/async_function/index.md b/files/ko/web/javascript/reference/operators/async_function/index.md index af35aeedde7c79..d7c1d75f93698a 100644 --- a/files/ko/web/javascript/reference/operators/async_function/index.md +++ b/files/ko/web/javascript/reference/operators/async_function/index.md @@ -2,6 +2,7 @@ title: async function 표현식 slug: Web/JavaScript/Reference/Operators/async_function --- + {{jsSidebar("Operators")}} **`async function`** 키워드는 표현식 내에서 `async` 함수를 정의하기 위해 사용됩니다. @@ -39,11 +40,11 @@ slug: Web/JavaScript/Reference/Operators/async_function [arrow functions](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)를 사용해도 됩니다. ```js - async param => expression +async (param) => expression; - async (param1, param2, ...paramN) => { - statements - } +async (param1, param2, ...paramN) => { + statements; +}; ``` ### 인수 @@ -64,32 +65,34 @@ slug: Web/JavaScript/Reference/Operators/async_function ### 간단한 예시 ```js - function resolveAfter2Seconds(x) { - return new Promise((resolve) => { - setTimeout(() => { - resolve(x); - }, 2000); - }); - } - - // async function 표현식을 변수에 할당 - const add = async function(x) { - const a = await resolveAfter2Seconds(20); - const b = await resolveAfter2Seconds(30); - return x + a + b; - } - - add(10).then((v) => { - console.log(v); // 4초 뒤에 60 출력 +function resolveAfter2Seconds(x) { + return new Promise((resolve) => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +// async function 표현식을 변수에 할당 +const add = async function (x) { + const a = await resolveAfter2Seconds(20); + const b = await resolveAfter2Seconds(30); + return x + a + b; +}; + +add(10) + .then((v) => { + console.log(v); // 4초 뒤에 60 출력 }) - - - // async function 표현식을 IIFE로 사용 - (async function (x) { - const p1 = resolveAfter2Seconds(20); - const p2 = resolveAfter2Seconds(30); - return x + (await p1) + (await p2); - })(10).then((v) => { + ( + // async function 표현식을 IIFE로 사용 + async function (x) { + const p1 = resolveAfter2Seconds(20); + const p2 = resolveAfter2Seconds(30); + return x + (await p1) + (await p2); + }, + )(10) + .then((v) => { console.log(v); // 2초 뒤에 60 출력 }); ``` diff --git a/files/ko/web/javascript/reference/operators/await/index.md b/files/ko/web/javascript/reference/operators/await/index.md index 6c23fbeffaecd9..d2434101a5a2c1 100644 --- a/files/ko/web/javascript/reference/operators/await/index.md +++ b/files/ko/web/javascript/reference/operators/await/index.md @@ -8,7 +8,7 @@ slug: Web/JavaScript/Reference/Operators/await ## 구문 ```js - [rv] = await expression; +[rv] = await expression; ``` - `expression` @@ -32,7 +32,7 @@ An `await` can split execution flow, allowing the caller of the `await`'s functi ```js function resolveAfter2Seconds(x) { - return new Promise(resolve => { + return new Promise((resolve) => { setTimeout(() => { resolve(x); }, 2000); @@ -50,16 +50,16 @@ f1(); {{jsxref("Global_Objects/Promise/then", "Thenable objects")}} will be fulfilled just the same. ```js - async function f2() { - const thenable = { - then: function(resolve, _reject) { - resolve('resolved!') - } - }; - console.log(await thenable); // resolved! - } - - f2(); +async function f2() { + const thenable = { + then: function (resolve, _reject) { + resolve("resolved!"); + }, + }; + console.log(await thenable); // resolved! +} + +f2(); ``` 만약 값이 `Promise`가 아니라면, 해당 값은 `resolve`된 `Promise`로 변환되며 이를 기다립니다. @@ -78,7 +78,7 @@ f2(); async function f3() { try { var z = await Promise.reject(30); - } catch(e) { + } catch (e) { console.log(e); // 30 } } @@ -88,8 +88,10 @@ f3(); try블럭 없이 rejected `Promise`다루기 ```js - var response = await promisedFunction().catch((err) => { console.error(err); }); - // response will be undefined if the promise is rejected +var response = await promisedFunction().catch((err) => { + console.error(err); +}); +// response will be undefined if the promise is rejected ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/operators/class/index.md b/files/ko/web/javascript/reference/operators/class/index.md index 5afb66f6c27040..740453aa847fb7 100644 --- a/files/ko/web/javascript/reference/operators/class/index.md +++ b/files/ko/web/javascript/reference/operators/class/index.md @@ -52,7 +52,7 @@ var Foo = class NamedFoo { whoIsThere() { return NamedFoo.name; } -} +}; var bar = new Foo(); bar.whoIsThere(); // "NamedFoo" NamedFoo.name; // ReferenceError: NamedFoo가 정의되지 않음 diff --git a/files/ko/web/javascript/reference/operators/comma_operator/index.md b/files/ko/web/javascript/reference/operators/comma_operator/index.md index 5acb1f039550c4..9f9a9665568ddc 100644 --- a/files/ko/web/javascript/reference/operators/comma_operator/index.md +++ b/files/ko/web/javascript/reference/operators/comma_operator/index.md @@ -43,12 +43,12 @@ for (let i = 0, j = 9; i <= 9; i++, j--) { ```js var a, b, c; -a = b = 3, c = 4; // 콘솔에는 4를 반환 +(a = b = 3), (c = 4); // 콘솔에는 4를 반환 console.log(a); // 3 (제일 왼쪽) var x, y, z; -x = (y = 5, z = 6); // 콘솔에는 6을 반환 +x = ((y = 5), (z = 6)); // 콘솔에는 6을 반환 console.log(x); // 6 (제일 오른쪽) ``` @@ -57,10 +57,10 @@ console.log(x); // 6 (제일 오른쪽) 쉼표 연산자를 사용하는 다른 방법은 값을 반환하기 전에 연산을 수행하는 것입니다. 쉼표 연산자는 마지막 표현식의 평가 결과만 반환하지만, 이전 피연산자에 대해서도 평가는 수행하므로 다음과 같은 코드를 작성할 수 있습니다. ```js -function myFunc () { +function myFunc() { var x = 0; - return (x += 1, x); // ++x 와 같은 효과 + return (x += 1), x; // ++x 와 같은 효과 } ``` diff --git a/files/ko/web/javascript/reference/operators/conditional_operator/index.md b/files/ko/web/javascript/reference/operators/conditional_operator/index.md index 4cb84733c01165..f62e9fb10e678a 100644 --- a/files/ko/web/javascript/reference/operators/conditional_operator/index.md +++ b/files/ko/web/javascript/reference/operators/conditional_operator/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Conditional_operator ## 구문 ```js - condition ? exprIfTrue : exprIfFalse +condition ? exprIfTrue : exprIfFalse; ``` ### 매개변수 @@ -34,7 +34,7 @@ slug: Web/JavaScript/Reference/Operators/Conditional_operator ```js var age = 26; -var beverage = (age >= 21) ? "Beer" : "Juice"; +var beverage = age >= 21 ? "Beer" : "Juice"; console.log(beverage); // "Beer" ``` @@ -43,13 +43,13 @@ console.log(beverage); // "Beer" `null`일 수 있는 값을 처리할 때 흔히 사용됩니다: ```js -let greeting = person => { - let name = person ? person.name : `stranger` - return `Howdy, ${name}` -} +let greeting = (person) => { + let name = person ? person.name : `stranger`; + return `Howdy, ${name}`; +}; -console.log(greeting({name: `Alice`})); // "Howdy, Alice" -console.log(greeting(null)); // "Howdy, stranger" +console.log(greeting({ name: `Alice` })); // "Howdy, Alice" +console.log(greeting(null)); // "Howdy, stranger" ``` ### 연결된 조건문 처리하기 diff --git a/files/ko/web/javascript/reference/operators/delete/index.md b/files/ko/web/javascript/reference/operators/delete/index.md index 63067778cd8d11..4f1e9274507dde 100644 --- a/files/ko/web/javascript/reference/operators/delete/index.md +++ b/files/ko/web/javascript/reference/operators/delete/index.md @@ -12,14 +12,14 @@ slug: Web/JavaScript/Reference/Operators/delete ## 구문 ```js - delete expression +delete expression; ``` `expression`은 속성 참조여야 합니다. 예컨대, ```js - delete object.property - delete object['property'] +delete object.property; +delete object["property"]; ``` ### 매개변수 @@ -58,12 +58,12 @@ slug: Web/JavaScript/Reference/Operators/delete ```js var Employee = { age: 28, - name: 'abc', - designation: 'developer' -} + name: "abc", + designation: "developer", +}; -console.log(delete Employee.name); // returns true -console.log(delete Employee.age); // returns true +console.log(delete Employee.name); // returns true +console.log(delete Employee.age); // returns true // 존재하지 않는 속성을 삭제하려하면 // true를 리턴합니다. @@ -76,18 +76,18 @@ non-configurable 속성은 `delete`로 삭제할 수 없으며, `false`를 반 ```js var Employee = {}; -Object.defineProperty(Employee, 'name', {configurable: false}); +Object.defineProperty(Employee, "name", { configurable: false }); -console.log(delete Employee.name); // returns false +console.log(delete Employee.name); // returns false ``` {{jsxref("Statements/var","var")}}, {{jsxref("Statements/let","let")}}, {{jsxref("Statements/const","const")}}로 선언된 변수는 non-configurable 속성으로 구분되며, `delete`로 삭제될 수 없습니다. ```js -var nameOther = 'XYZ'; +var nameOther = "XYZ"; // 우리는 이를 사용해 글로벌 속성에 접근 할 수 있습니다: -Object.getOwnPropertyDescriptor(window, 'nameOther'); +Object.getOwnPropertyDescriptor(window, "nameOther"); // output: Object { value: "XYZ", // writable: true, @@ -97,7 +97,7 @@ Object.getOwnPropertyDescriptor(window, 'nameOther'); // "nameOther"은 var로 선언되었기 때문에 // 이는 "non-configurable" 속성으로 구분됩니다. -delete nameOther; // return false +delete nameOther; // return false ``` strict mode, this would have raised an exception. @@ -123,7 +123,7 @@ Employee(); "use strict"; function Employee() { - delete salary; // SyntaxError + delete salary; // SyntaxError var salary; } @@ -141,7 +141,7 @@ delete DemoFunction; // SyntaxError ```js // 전역스코프에 adminName라는 프로퍼티를 만듭니다. -adminName = 'xyz'; +adminName = "xyz"; // 전역스코프에 empCount라는 프로퍼티를 만듭니다. // var를 사용해서 선언했으므로, 이는 non-configurable로 구분됩니다. @@ -149,18 +149,18 @@ adminName = 'xyz'; var empCount = 43; EmployeeDetails = { - name: 'xyz', + name: "xyz", age: 5, - designation: 'Developer' + designation: "Developer", }; // adminName은 전역변수입니다. // 이는 var를 사용하여 선언되지 않았기에 configurable하며 delete로 삭제될 수 있습니다. -delete adminName; // returns true +delete adminName; // returns true // 이와 반대로, empCount는 var를 사용하였기에 non-configurable이며 // 그러므로 delete로 삭제할 수 없습니다. -delete empCount; // returns false +delete empCount; // returns false // delete는 객체의 프로퍼티를 지울 때 사용됩니다. delete EmployeeDetails.name; // returns true @@ -173,13 +173,13 @@ delete Math.PI; // returns false // EmployeeDetails 은 전역스코프의 프로퍼티 입니다. // "var"를 사용하지 않고 선언되었기 때문에 이는 configurable입니다. -delete EmployeeDetails; // returns true +delete EmployeeDetails; // returns true function f() { var z = 44; // 지역변수에는 delete가 영향을 미치지 않습니다. - delete z; // returns false + delete z; // returns false } ``` @@ -219,20 +219,20 @@ When you delete an array element, the array length is not affected. This holds e When the `delete` operator removes an array element, that element is no longer in the array. In the following example, `trees[3]` is removed with `delete`. ```js -var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +var trees = ["redwood", "bay", "cedar", "oak", "maple"]; delete trees[3]; if (3 in trees) { - // this does not get executed + // this does not get executed } ``` If you want an array element to exist but have an undefined value, use the `undefined` value instead of the `delete` operator. In the following example, `trees[3]` is assigned the value undefined, but the array element still exists: ```js -var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +var trees = ["redwood", "bay", "cedar", "oak", "maple"]; trees[3] = undefined; if (3 in trees) { - // this gets executed + // this gets executed } ``` diff --git a/files/ko/web/javascript/reference/operators/destructuring_assignment/index.md b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.md index ef13f31772194f..3c7da2eab46081 100644 --- a/files/ko/web/javascript/reference/operators/destructuring_assignment/index.md +++ b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.md @@ -2,6 +2,7 @@ title: 구조 분해 할당 slug: Web/JavaScript/Reference/Operators/Destructuring_assignment --- + {{jsSidebar("Operators")}} **구조 분해 할당** 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. @@ -25,9 +26,8 @@ console.log(rest); // [30, 40, 50] console.log(a); // 10 console.log(b); // 20 - // Stage 4(finished) proposal -({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); +({ a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 }); console.log(a); // 10 console.log(b); // 20 console.log(rest); // {c: 30, d: 40} @@ -84,7 +84,7 @@ console.log(b); // 2 ```js var a, b; -[a=5, b=7] = [1]; +[a = 5, b = 7] = [1]; console.log(a); // 1 console.log(b); // 7 ``` @@ -138,7 +138,7 @@ console.log(b); // 3 반환 값을 모두 무시할 수도 있습니다. ```js -[,,] = f(); +[, ,] = f(); ``` ### 변수에 배열의 나머지를 할당하기 @@ -153,7 +153,7 @@ console.log(b); // [2, 3] 나머지 요소의 오른쪽 뒤에 쉼표가 있으면 {{jsxref("SyntaxError")}}가 발생합니다. -```js example-bad +```js-nolint example-bad var [a, ...b,] = [1, 2, 3]; // SyntaxError: rest element may not have a trailing comma ``` @@ -174,7 +174,9 @@ function parseProtocol(url) { return protocol; } -console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https" +console.log( + parseProtocol("https://developer.mozilla.org/en-US/Web/JavaScript"), +); // "https" ``` ## 객체 구조 분해 @@ -182,8 +184,8 @@ console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')) ### 기본 할당 ```js -var o = {p: 42, q: true}; -var {p, q} = o; +var o = { p: 42, q: true }; +var { p, q } = o; console.log(p); // 42 console.log(q); // true @@ -196,7 +198,7 @@ console.log(q); // true ```js var a, b; -({a, b} = {a: 1, b: 2}); +({ a, b } = { a: 1, b: 2 }); ```

참고: 할당 문을 둘러싼 ( .. )는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문입니다.

{a, b} = {a:1, b:2}는 유효한 독립 구문이 아닙니다. 좌변의 {a, b}이 객체 리터럴이 아닌 블록으로 간주되기 때문입니다.

하지만, ({a, b} = {a:1, b:2})는 유효한데, var {a, b} = {a:1, b:2}와 같습니다.

( .. ) 표현식 앞에는 세미콜론이 있어야 합니다. 그렇지 않을 경우 이전 줄과 연결되어 함수를 실행하는데 이용될 수 있습니다.

@@ -206,8 +208,8 @@ var a, b; 객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있습니다. ```js -var o = {p: 42, q: true}; -var {p: foo, q: bar} = o; +var o = { p: 42, q: true }; +var { p: foo, q: bar } = o; console.log(foo); // 42 console.log(bar); // true @@ -218,7 +220,7 @@ console.log(bar); // true 객체로부터 해체된 값이 `undefined`인 경우, 변수에 기본값을 할당할 수 있습니다. ```js -var {a = 10, b = 5} = {a: 3}; +var { a = 10, b = 5 } = { a: 3 }; console.log(a); // 3 console.log(b); // 5 @@ -229,7 +231,7 @@ console.log(b); // 5 새로운 변수명 할당과 기본값 할당을 한번에 할 수 있습니다. ```js -var {a: aa = 10, b: bb = 5} = {a: 3}; +var { a: aa = 10, b: bb = 5 } = { a: 3 }; console.log(aa); // 3 console.log(bb); // 5 @@ -242,7 +244,7 @@ console.log(bb); // 5 ```js function drawES5Chart(options) { options = options === undefined ? {} : options; - var size = options.size === undefined ? 'big' : options.size; + var size = options.size === undefined ? "big" : options.size; var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords; var radius = options.radius === undefined ? 25 : options.radius; console.log(size, cords, radius); @@ -251,21 +253,25 @@ function drawES5Chart(options) { drawES5Chart({ cords: { x: 18, y: 30 }, - radius: 30 + radius: 30, }); ``` #### ES2015 버전 ```js -function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) { +function drawES2015Chart({ + size = "big", + cords = { x: 0, y: 0 }, + radius = 25, +} = {}) { console.log(size, cords, radius); // 차트 그리기 수행 } drawES2015Chart({ cords: { x: 18, y: 30 }, - radius: 30 + radius: 30, }); ``` @@ -275,23 +281,26 @@ drawES2015Chart({ ```js var metadata = { - title: "Scratchpad", - translations: [ - { - locale: "de", - localization_tags: [ ], - last_edit: "2014-04-14T08:43:37", - url: "/de/docs/Tools/Scratchpad", - title: "JavaScript-Umgebung" - } - ], - url: "/ko/docs/Tools/Scratchpad" + title: "Scratchpad", + translations: [ + { + locale: "de", + localization_tags: [], + last_edit: "2014-04-14T08:43:37", + url: "/de/docs/Tools/Scratchpad", + title: "JavaScript-Umgebung", + }, + ], + url: "/ko/docs/Tools/Scratchpad", }; -var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; +var { + title: englishTitle, + translations: [{ title: localeTitle }], +} = metadata; console.log(englishTitle); // "Scratchpad" -console.log(localeTitle); // "JavaScript-Umgebung" +console.log(localeTitle); // "JavaScript-Umgebung" ``` ### for of 반복문과 구조 분해 @@ -303,22 +312,25 @@ var people = [ family: { mother: "Jane Smith", father: "Harry Smith", - sister: "Samantha Smith" + sister: "Samantha Smith", }, - age: 35 + age: 35, }, { name: "Tom Jones", family: { mother: "Norah Jones", father: "Richard Jones", - brother: "Howard Jones" + brother: "Howard Jones", }, - age: 25 - } + age: 25, + }, ]; -for (var {name: n, family: { father: f } } of people) { +for (var { + name: n, + family: { father: f }, +} of people) { console.log("Name: " + n + ", Father: " + f); } @@ -329,11 +341,11 @@ for (var {name: n, family: { father: f } } of people) { ### 함수 매개변수로 전달된 객체에서 필드 해체하기 ```js -function userId({id}) { +function userId({ id }) { return id; } -function whois({displayName: displayName, fullName: {firstName: name}}){ +function whois({ displayName: displayName, fullName: { firstName: name } }) { console.log(displayName + " is " + name); } @@ -341,9 +353,9 @@ var user = { id: 42, displayName: "jdoe", fullName: { - firstName: "John", - lastName: "Doe" - } + firstName: "John", + lastName: "Doe", + }, }; console.log("userId: " + userId(user)); // "userId: 42" @@ -368,7 +380,7 @@ console.log(foo); // "bar" [Rest/Spread Properties for ECMAScript](https://github.com/tc39/proposal-object-rest-spread) 제안(stage 3)에서는 구조 분해에 [rest](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters) 구문을 추가하고 있습니다. rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모읍니다. ```js -let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} +let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 }; a; // 10 b; // 20 rest; // { c: 30, d: 40 } @@ -379,8 +391,8 @@ rest; // { c: 30, d: 40 } 구조 분해는 JavaScript {{glossary("Identifier", "식별자")}} 이름으로 적합하지 않은 속성명이 제공된 경우에도 이용할 수 있습니다. 이 때는 대체할 유효한 식별자명을 제공해야 합니다. ```js -const foo = { 'fizz-buzz': true }; -const { 'fizz-buzz': fizzBuzz } = foo; +const foo = { "fizz-buzz": true }; +const { "fizz-buzz": fizzBuzz } = foo; console.log(fizzBuzz); // "true" ``` diff --git a/files/ko/web/javascript/reference/operators/division/index.md b/files/ko/web/javascript/reference/operators/division/index.md index 380713a0e1bc3a..947aa2bd84c69c 100644 --- a/files/ko/web/javascript/reference/operators/division/index.md +++ b/files/ko/web/javascript/reference/operators/division/index.md @@ -2,6 +2,7 @@ title: 나누기 (/) slug: Web/JavaScript/Reference/Operators/Division --- + {{jsSidebar("Operators")}} 나누기 연산자(`/`)는 왼쪽 피연산자를 피제수, 오른쪽 피연산자를 제수로 하여 몫을 구합니다. @@ -11,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Division ## 구문 ```js -x / y +x / y; ``` ## 예제 @@ -19,21 +20,21 @@ x / y ### 기본 나눗셈 ```js -1 / 2 // 0.5 +1 / 2; // 0.5 -Math.floor(3 / 2) // 1 +Math.floor(3 / 2); // 1 -1.0 / 2.0 // 0.5 +1.0 / 2.0; // 0.5 ``` ### 0으로 나누기 ```js -2.0 / 0 // Infinity +2.0 / 0; // Infinity -2.0 / 0.0 // Infinity, 0.0 === 0이기 때문 +2.0 / 0.0; // Infinity, 0.0 === 0이기 때문 -2.0 / -0.0 // -Infinity +2.0 / -0.0; // -Infinity ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/division_assignment/index.md b/files/ko/web/javascript/reference/operators/division_assignment/index.md index ecd9b849d2d1e6..13f073d4dad64c 100644 --- a/files/ko/web/javascript/reference/operators/division_assignment/index.md +++ b/files/ko/web/javascript/reference/operators/division_assignment/index.md @@ -2,6 +2,7 @@ title: 나누기 할당 (/=) slug: Web/JavaScript/Reference/Operators/Division_assignment --- + {{jsSidebar("Operators")}} 나누기 할당 연산자(`/=`)는 오른쪽 피연산자의 값으로 변수를 나눈 결과를 다시 변수에 할당합니다. @@ -11,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Division_assignment ## 구문 ```js -x /= y // x = x / y +x /= y; // x = x / y ``` ## 예제 @@ -22,10 +23,10 @@ x /= y // x = x / y // bar = 5 // 위와 같은 변수를 가정하고, 아래의 모든 연산을 순서대로 실행할 때 -bar /= 2 // 2.5 -bar /= 2 // 1.25 -bar /= 0 // Infinity -bar /= 'foo' // NaN +bar /= 2; // 2.5 +bar /= 2; // 1.25 +bar /= 0; // Infinity +bar /= "foo"; // NaN ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/equality/index.md b/files/ko/web/javascript/reference/operators/equality/index.md index f944e4fd38dd1c..5f2d861b3da8bd 100644 --- a/files/ko/web/javascript/reference/operators/equality/index.md +++ b/files/ko/web/javascript/reference/operators/equality/index.md @@ -2,8 +2,9 @@ title: 동등 연산자(==) slug: Web/JavaScript/Reference/Operators/Equality l10n: - sourceCommit:3e2369d97e2d6fbfe33a3c496a8edd90e0b539e2 + sourceCommit: 3e2369d97e2d6fbfe33a3c496a8edd90e0b539e2 --- + {{jsSidebar("Operators")}} 동등 연산자(==)는 두 개의 피연산자가 동일한지 확인하며, 불리언 결과를 반환합니다. [일치 연산자](/ko/docs/Web/JavaScript/Reference/Operators/Strict_equality)와는 다르게 다른 타입의 피연산자들끼리의 비교를 시도합니다. @@ -48,41 +49,41 @@ x == y ### 타입변환 없이 비교 ```js -1 == 1; // true -"hello" == "hello"; // true +1 == 1; // true +"hello" == "hello"; // true ``` ### 타입변환을 이용한 비교 ```js -"1" == 1; // true -1 == "1"; // true -0 == false; // true -0 == null; // false -0 == undefined; // false -0 == !!null; // true, look at Logical NOT operator -0 == !!undefined; // true, look at Logical NOT operator -null == undefined; // true +"1" == 1; // true +1 == "1"; // true +0 == false; // true +0 == null; // false +0 == undefined; // false +0 == !!null; // true, look at Logical NOT operator +0 == !!undefined; // true, look at Logical NOT operator +null == undefined; // true const number1 = new Number(3); const number2 = new Number(3); -number1 == 3; // true -number1 == number2; // false +number1 == 3; // true +number1 == number2; // false ``` ### 객체들 간의 비교 ```js const object1 = { - "key": "value", -} + key: "value", +}; const object2 = { - "key": "value", + key: "value", }; -console.log(object1 == object2) // false -console.log(object1 == object1) // true +console.log(object1 == object2); // false +console.log(object1 == object1); // true ``` ### String과 String objects의 비교 @@ -105,9 +106,9 @@ console.log(string4 == string4); // true ### Dates와 문자열의 비교 ```js -const d = new Date('December 17, 1995 03:24:00'); +const d = new Date("December 17, 1995 03:24:00"); const s = d.toString(); // for example: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)" -console.log(d == s); //true +console.log(d == s); //true ``` ### 배열과 문자열의 비교 diff --git a/files/ko/web/javascript/reference/operators/exponentiation/index.md b/files/ko/web/javascript/reference/operators/exponentiation/index.md index c5b210a204660e..822eef22456460 100644 --- a/files/ko/web/javascript/reference/operators/exponentiation/index.md +++ b/files/ko/web/javascript/reference/operators/exponentiation/index.md @@ -13,7 +13,7 @@ slug: Web/JavaScript/Reference/Operators/Exponentiation ## 구문 ```js -x ** y +x ** y; ``` ## 설명 @@ -46,19 +46,19 @@ PHP, Python 등 거듭제곱 연산자(`**`)를 포함하는 언어의 대부분 ### 기본 거듭제곱 ```js -2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN +2 ** 3; // 8 +3 ** 2; // 9 +3 ** 2.5; // 15.588457268119896 +10 ** -1; // 0.1 +NaN ** 2; // NaN ``` ### 연관성 ```js -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64 +2 ** 3 ** 2; // 512 +2 ** (3 ** 2); // 512 +(2 ** 3) ** 2; // 64 ``` ### 단항 연산자와 사용하기 @@ -66,13 +66,13 @@ NaN ** 2 // NaN 거듭제곱 결과의 부호를 반전하려면, ```js --(2 ** 2) // -4 +-(2 ** 2); // -4 ``` 거듭제곱 표현식의 밑에 음수를 제공하려면, ```js -(-2) ** 2 // 4 +(-2) ** 2; // 4 ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/exponentiation_assignment/index.md b/files/ko/web/javascript/reference/operators/exponentiation_assignment/index.md index ff0bee7309c228..475a7c8ab97367 100644 --- a/files/ko/web/javascript/reference/operators/exponentiation_assignment/index.md +++ b/files/ko/web/javascript/reference/operators/exponentiation_assignment/index.md @@ -2,6 +2,7 @@ title: 거듭제곱 할당 (**=) slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment --- + {{jsSidebar("Operators")}} 거듭제곱 할당 연산자(`**=`)는 오른쪽 피연산자의 값으로 변수를 거듭제곱한 결과를 다시 변수에 할당합니다. @@ -11,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment ## 구문 ```js -x **= y // x = x ** y +x **= y; // x = x ** y ``` ## 예제 @@ -22,8 +23,8 @@ x **= y // x = x ** y // bar = 5 // 위와 같은 변수를 가정할 때 -bar **= 2 // 25 -bar **= 'foo' // NaN +bar **= 2; // 25 +bar **= "foo"; // NaN ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/function/index.md b/files/ko/web/javascript/reference/operators/function/index.md index 496a231db7a05c..d8f7355169c601 100644 --- a/files/ko/web/javascript/reference/operators/function/index.md +++ b/files/ko/web/javascript/reference/operators/function/index.md @@ -37,47 +37,46 @@ slug: Web/JavaScript/Reference/Operators/function 자바스크립트에서 함수 표현식은 {{jsxref("Statements/function", "함수 선언", "#Function_declaration_hoisting")}}과는 달리 끌어올려지지 않습니다. 함수 표현식을 정의하기 전에는 사용할 수 없습니다. ```js - console.log(notHoisted) // undefined - //even the variable name is hoisted, the definition wasn't. so it's undefined. - notHoisted(); // TypeError: notHoisted is not a function +console.log(notHoisted); // undefined +//even the variable name is hoisted, the definition wasn't. so it's undefined. +notHoisted(); // TypeError: notHoisted is not a function - var notHoisted = function() { - console.log('bar'); - }; +var notHoisted = function () { + console.log("bar"); +}; ``` ### 유명(named) 함수 표현식 -함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다. ***이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다***. 이로써 비표준 [`arguments.callee`](/ko/docs/Web/JavaScript/Reference/Functions/arguments/callee) 속성을 사용하는 것을 피할 수도 있습니다. +함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다. **_이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다_**. 이로써 비표준 [`arguments.callee`](/ko/docs/Web/JavaScript/Reference/Functions/arguments/callee) 속성을 사용하는 것을 피할 수도 있습니다. ```js - var math = { - 'factit': function factorial(n) { - console.log(n) - if (n <= 1) - return 1; - return n * factorial(n - 1); - } - }; - - math.factit(3) //3;2;1; +var math = { + factit: function factorial(n) { + console.log(n); + if (n <= 1) return 1; + return n * factorial(n - 1); + }, +}; + +math.factit(3); //3;2;1; ``` 함수가 할당된 변수는 `name` 속성을 가지게됩니다. 다른 변수에 할당되더라도 그 name 속성의 값은 변하지 않습니다. 함수의 이름이 생략되었다면, name 속성의 값은 그 변수의 이름(암묵적 이름)이 될 것입니다. 함수의 이름이 있다면 name 속성의 값은 그 함수의 이름(명시적 이름)이 될 것입니다. 이는 [화살표 함수(arrow functions)](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)에도 적용됩니다 (화살표 함수는 이름을 가지지 않으므로 해당 변수에 암묵적인 이름만 줄 수 있습니다). ```js - var foo = function() {} - foo.name // "foo" +var foo = function () {}; +foo.name; // "foo" - var foo2 = foo - foo2.name // "foo" +var foo2 = foo; +foo2.name; // "foo" - var bar = function baz() {} - bar.name // "baz" +var bar = function baz() {}; +bar.name; // "baz" - console.log(foo === foo2); // true - console.log(typeof baz); // undefined - console.log(bar === baz); // false (errors because baz == undefined) +console.log(foo === foo2); // true +console.log(typeof baz); // undefined +console.log(bar === baz); // false (errors because baz == undefined) ``` ## Examples @@ -85,17 +84,17 @@ slug: Web/JavaScript/Reference/Operators/function 다음 예제는 이름 없는 함수를 정의하고 그 함수를 `x`에 할당합니다. 함수는 인수의 제곱을 반환합니다: ```js - var x = function(y) { - return y * y; - }; +var x = function (y) { + return y * y; +}; ``` [callback](/ko/docs/Glossary/Callback_function)으로 더 자주 사용됩니다: ```js - button.addEventListener('click', function(event) { - console.log('button is clicked!') - }) +button.addEventListener("click", function (event) { + console.log("button is clicked!"); +}); ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/operators/function_star_/index.md b/files/ko/web/javascript/reference/operators/function_star_/index.md index a1441f688a27b5..b862e9853770eb 100644 --- a/files/ko/web/javascript/reference/operators/function_star_/index.md +++ b/files/ko/web/javascript/reference/operators/function_star_/index.md @@ -35,8 +35,8 @@ slug: Web/JavaScript/Reference/Operators/function* 아래의 예제는 이름이 없는 generator function 을 정의하고 이를 x 에 할당합니다. function 은 인자로 들어온 값의 제곱을 생산(yield)합니다. ```js -var x = function*(y) { - yield y * y; +var x = function* (y) { + yield y * y; }; ``` diff --git a/files/ko/web/javascript/reference/operators/grouping/index.md b/files/ko/web/javascript/reference/operators/grouping/index.md index 2ecd09aea4fca5..3bf8229957b6ec 100644 --- a/files/ko/web/javascript/reference/operators/grouping/index.md +++ b/files/ko/web/javascript/reference/operators/grouping/index.md @@ -29,16 +29,16 @@ var b = 2; var c = 3; // 기본 우선순위 -a + b * c // 7 +a + b * c; // 7 // 이것과 같음 -a + (b * c) // 7 +a + (b * c); // 7 // 더하기를 곱하기보다 먼저 하도록 // 우선순위 변경 -(a + b) * c // 9 +(a + b) * c; // 9 // 이것과 같음 -a * c + b * c // 9 +a * c + b * c; // 9 ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/operators/in/index.md b/files/ko/web/javascript/reference/operators/in/index.md index 96d849e198356c..7c619760ca0579 100644 --- a/files/ko/web/javascript/reference/operators/in/index.md +++ b/files/ko/web/javascript/reference/operators/in/index.md @@ -10,7 +10,7 @@ slug: Web/JavaScript/Reference/Operators/in ## 구문 ```js - 속성 in 객체명 +속성 in 객체명; ``` ### 인자 @@ -27,31 +27,39 @@ slug: Web/JavaScript/Reference/Operators/in ```js // 배열 var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); -0 in trees // true를 반환합니다. -3 in trees // true를 반환합니다. -(1 + 2) in trees // true를 반환합니다. 연산자 우선 순위에 의하여 이 구문의 괄호는 없어도 됩니다. -6 in trees // false를 반환합니다. -"bay" in trees // false를 반환합니다. 당신은 배열의 내용이 아닌, 인덱스 값을 명시하여야 합니다. -"length" in trees // true를 반환합니다. length는 Array(배열) 객체의 속성입니다. +0 in trees; // true를 반환합니다. +3 in + trees( + // true를 반환합니다. + 1 + 2, + ) in + trees; // true를 반환합니다. 연산자 우선 순위에 의하여 이 구문의 괄호는 없어도 됩니다. +6 in trees; // false를 반환합니다. +"bay" in trees; // false를 반환합니다. 당신은 배열의 내용이 아닌, 인덱스 값을 명시하여야 합니다. +"length" in trees; // true를 반환합니다. length는 Array(배열) 객체의 속성입니다. // 미리 정의된 객체 -"PI" in Math // true를 반환합니다. -"P" + "I" in Math // true를 반환합니다. +"PI" in Math; // true를 반환합니다. +"P" + "I" in Math; // true를 반환합니다. // 사용자가 정의한 객체 -var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014}; -"company" in myCar // true를 반환합니다. -"model" in myCar // true를 반환합니다. +var myCar = { + company: "Lamborghini", + model: "Lamborghini Veneno Roadster", + year: 2014, +}; +"company" in myCar; // true를 반환합니다. +"model" in myCar; // true를 반환합니다. ``` 당신은 반드시 `in` 연산자의 오른쪽에 객체를 명시하여야 합니다. 예컨대 당신은 `String` 생성자로 만들어진 문자열을 명시할 수 있지만 문자열 리터럴은 명시할 수 없습니다. ```js var color1 = new String("green"); -"length" in color1 // true를 반환합니다. +"length" in color1; // true를 반환합니다. var color2 = "coral"; -"length" in color2 // color2는 String 객체가 아니기에 오류를 냅니다. +"length" in color2; // color2는 String 객체가 아니기에 오류를 냅니다. ``` ### 제거되었거나 정의되지 않은 속성에 대하여 `in` 연산자 사용하기 @@ -59,7 +67,11 @@ var color2 = "coral"; `in` 연산자는 [`delete`](/ko/docs/Web/JavaScript/Reference/Operators/delete) 연산자로 제거된 속성에 대하여 `false`를 반환합니다. ```js -var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014}; +var myCar = { + company: "Lamborghini", + model: "Lamborghini Veneno Roadster", + year: 2014, +}; delete myCar.company; "company" in myCar; // false를 반환합니다. @@ -71,7 +83,11 @@ delete trees[3]; 만약 당신이 속성을 {{jsxref("Global_Objects/undefined", "undefined")}}로 설정하였는데 그것을 제거하지 않으면, `in` 연산자는 그 속성에 대하여 `true`를 반환합니다. ```js -var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014}; +var myCar = { + company: "Lamborghini", + model: "Lamborghini Veneno Roadster", + year: 2014, +}; myCar.company = undefined; "company" in myCar; // true를 반환합니다. ``` diff --git a/files/ko/web/javascript/reference/operators/index.md b/files/ko/web/javascript/reference/operators/index.md index c6d5fbe7b634fe..9cb3aa5a0863fe 100644 --- a/files/ko/web/javascript/reference/operators/index.md +++ b/files/ko/web/javascript/reference/operators/index.md @@ -2,6 +2,7 @@ title: 식 및 연산자 slug: Web/JavaScript/Reference/Operators --- + {{jsSidebar("Operators")}} 이 장은 JavaScript의 모든 연산자, 식 및 키워드를 나열합니다. diff --git a/files/ko/web/javascript/reference/operators/inequality/index.md b/files/ko/web/javascript/reference/operators/inequality/index.md index 5640d4700f3ae7..6278489903a2f7 100644 --- a/files/ko/web/javascript/reference/operators/inequality/index.md +++ b/files/ko/web/javascript/reference/operators/inequality/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Inequality ## 구문 ```js -x != y +x != y; ``` ## 설명 @@ -20,9 +20,9 @@ x != y 부등식 연산자는 피연산자가 같지 않은지 여부를 확인합니다. [동등 연산자](/ko/docs/Web/JavaScript/Reference/Operators/Equality)의 부정이므로 다음 두 줄은 항상 같은 결과를 제공합니다. ```js -x != y +x != y; -!(x == y) +!(x == y); ``` 비교 알고리즘에 대한 자세한 내용은 [동등 연산자](/ko/docs/Web/JavaScript/Reference/Operators/Equality) 페이지를 참조하십시오. @@ -44,39 +44,39 @@ x != y ### 타입 변환이 없는 비교 ```js -1 != 2; // true -"hello" != "hola"; // true +1 != 2; // true +"hello" != "hola"; // true -1 != 1; // false -"hello" != "hello"; // false +1 != 1; // false +"hello" != "hello"; // false ``` ### 타입 변환이 있는 비교 ```js -"1" != 1; // false -1 != "1"; // false -0 != false; // false -0 != null; // true -0 != undefined; // true -0 != !!null; // false, look at Logical NOT operator -0 != !!undefined; // false, look at Logical NOT operator -null != undefined; // false +"1" != 1; // false +1 != "1"; // false +0 != false; // false +0 != null; // true +0 != undefined; // true +0 != !!null; // false, look at Logical NOT operator +0 != !!undefined; // false, look at Logical NOT operator +null != undefined; // false const number1 = new Number(3); const number2 = new Number(3); -number1 != 3; // false -number1 != number2; // true +number1 != 3; // false +number1 != number2; // true ``` ### 객체의 비교 ```js -const object1 = {"key": "value"} -const object2 = {"key": "value"}; +const object1 = { key: "value" }; +const object2 = { key: "value" }; -object1 != object2 // true -object2 != object2 // false +object1 != object2; // true +object2 != object2; // false ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/instanceof/index.md b/files/ko/web/javascript/reference/operators/instanceof/index.md index 569d7d22dc03f3..f3e5dadf788115 100644 --- a/files/ko/web/javascript/reference/operators/instanceof/index.md +++ b/files/ko/web/javascript/reference/operators/instanceof/index.md @@ -2,6 +2,7 @@ title: instanceof slug: Web/JavaScript/Reference/Operators/instanceof --- + {{jsSidebar("Operators")}} **`instanceof` 연산자**는 생성자의 `prototype` 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별합니다. @@ -11,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/instanceof ## 구문 ```js - object instanceof constructor +object instanceof constructor; ``` ### 매개변수 @@ -27,8 +28,8 @@ slug: Web/JavaScript/Reference/Operators/instanceof ```js // 생성자 정의 -function C(){} -function D(){} +function C() {} +function D() {} var o = new C(); @@ -39,7 +40,7 @@ o instanceof C; o instanceof D; o instanceof Object; // true, 왜냐하면 -C.prototype instanceof Object // true +C.prototype instanceof Object; // true C.prototype = {}; var o2 = new C(); @@ -74,24 +75,24 @@ o3 instanceof C; // true, 왜냐하면 이제 C.prototype이 o3의 프로토타 ```js var simpleStr = "This is a simple string"; -var myString = new String(); -var newStr = new String("String created with constructor"); -var myDate = new Date(); -var myObj = {}; +var myString = new String(); +var newStr = new String("String created with constructor"); +var myDate = new Date(); +var myObj = {}; simpleStr instanceof String; // returns false, prototype chain을 확인하고, undefined를 찾는다. -myString instanceof String; // returns true -newStr instanceof String; // returns true -myString instanceof Object; // returns true +myString instanceof String; // returns true +newStr instanceof String; // returns true +myString instanceof Object; // returns true -myObj instanceof Object; // returns true, undefined prototype 임에도 불구하고 true. -({}) instanceof Object; // returns true, 위의 경우와 동일. +myObj instanceof Object; // returns true, undefined prototype 임에도 불구하고 true. +({}) instanceof Object; // returns true, 위의 경우와 동일. -myString instanceof Date; // returns false +myString instanceof Date; // returns false -myDate instanceof Date; // returns true -myDate instanceof Object; // returns true -myDate instanceof String; // returns false +myDate instanceof Date; // returns true +myDate instanceof Object; // returns true +myDate instanceof String; // returns false ``` ### `mycar`는 타입 `Car`와 타입 `Object`임을 입증하기 @@ -105,7 +106,7 @@ function Car(make, model, year) { this.year = year; } var mycar = new Car("Honda", "Accord", 1998); -var a = mycar instanceof Car; // returns true +var a = mycar instanceof Car; // returns true var b = mycar instanceof Object; // returns true ``` diff --git a/files/ko/web/javascript/reference/operators/logical_and/index.md b/files/ko/web/javascript/reference/operators/logical_and/index.md index 9ac470a8199f5b..b689a9f1a48fd0 100644 --- a/files/ko/web/javascript/reference/operators/logical_and/index.md +++ b/files/ko/web/javascript/reference/operators/logical_and/index.md @@ -41,9 +41,9 @@ expr1 && expr2 AND 연산자는 불리언이 아닌 값을 보존하고 다음과 같이 반환합니다. ```js -result = '' && 'foo'; // result 에 ""(빈 문자열)이 할당됩니다 -result = 2 && 0; // result 에 0 이 할당됩니다 -result = 'foo' && 4; // result 에 4 가 할당됩니다. +result = "" && "foo"; // result 에 ""(빈 문자열)이 할당됩니다 +result = 2 && 0; // result 에 0 이 할당됩니다 +result = "foo" && 4; // result 에 4 가 할당됩니다. ``` `&&` 연산자는 불리언이 아닌 피연산자와 함께 사용할 수 있지만, 반환 값은 항상 [원시형 불리언](/ko/docs/Web/JavaScript/Data_structures#boolean_타입)으로 @@ -70,11 +70,11 @@ result = 'foo' && 4; // result 에 4 가 할당됩니다. ```js function A() { - console.log('called A'); + console.log("called A"); return false; } function B() { - console.log('called B'); + console.log("called B"); return true; } @@ -90,9 +90,9 @@ AND 연산자는 OR 연산자보다 높은 우선 순위를 가지며, 이는 `& ([연산자 우선순위](/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)참고). ```js -true || false && false // returns true -true && (false || false) // returns false -(2 === 3) || (4 < 0) && (1 === 1) // returns false +true || false && false; // returns true +true && (false || false); // returns false +(2 === 3) || (4 < 0) && (1 === 1); // returns false ``` ## 예제 @@ -102,15 +102,15 @@ true && (false || false) // returns false 다음 코드는 `&&`(논리적 AND) 연산자의 예를 보여줍니다. ```js -a1 = true && true // t && t returns true -a2 = true && false // t && f returns false -a3 = false && true // f && t returns false -a4 = false && (3 === 4) // f && f returns false -a5 = 'Cat' && 'Dog' // t && t returns "Dog" -a6 = false && 'Cat' // f && t returns false -a7 = 'Cat' && false // t && f returns false -a8 = '' && false // f && f returns "" -a9 = false && '' // f && f returns false +a1 = true && true; // t && t returns true +a2 = true && false; // t && f returns false +a3 = false && true; // f && t returns false +a4 = false && 3 === 4; // f && f returns false +a5 = "Cat" && "Dog"; // t && t returns "Dog" +a6 = false && "Cat"; // f && t returns false +a7 = "Cat" && false; // t && f returns false +a8 = "" && false; // f && f returns "" +a9 = false && ""; // f && f returns false ``` ### 불리언을 위한 변환 규칙 @@ -120,13 +120,13 @@ a9 = false && '' // f && f returns false **불리언**을 포함하는 아래 연산은 ```js -bCondition1 && bCondition2 +bCondition1 && bCondition2; ``` 언제나 아래와 같습니다. ```js -!(!bCondition1 || !bCondition2) +!(!bCondition1 || !bCondition2); ``` #### OR을 AND로 변환하기 @@ -134,13 +134,13 @@ bCondition1 && bCondition2 **불리언**을 포함하는 다음 연산은 ```js -bCondition1 || bCondition2 +bCondition1 || bCondition2; ``` 언제나 아래와 같습니다. ```js -!(!bCondition1 && !bCondition2) +!(!bCondition1 && !bCondition2); ``` ### 중첩된 괄호 제거 @@ -150,13 +150,13 @@ bCondition1 || bCondition2 **불리언**을 포함하는 다음 복합적 연산은 ```js -bCondition1 || (bCondition2 && bCondition3) +bCondition1 || (bCondition2 && bCondition3); ``` 언제나 다음과 같습니다. ```js -bCondition1 || bCondition2 && bCondition3 +bCondition1 || (bCondition2 && bCondition3); ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/operators/multiplication/index.md b/files/ko/web/javascript/reference/operators/multiplication/index.md index 3aae32beb330a5..58636ab3cb63c3 100644 --- a/files/ko/web/javascript/reference/operators/multiplication/index.md +++ b/files/ko/web/javascript/reference/operators/multiplication/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Multiplication ## 구문 ```js -x * y +x * y; ``` ## 예제 @@ -20,21 +20,21 @@ x * y ### 곱셈 ```js - 2 * 2 // 4 --2 * 2 // -4 +2 * 2; // 4 +-2 * 2; // -4 ``` ### Infinity 곱하기 ```js -Infinity * 0 // NaN -Infinity * Infinity // Infinity +Infinity * 0; // NaN +Infinity * Infinity; // Infinity ``` ### 숫자가 아닌 경우 ```js -'foo' * 2 // NaN +"foo" * 2; // NaN ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/multiplication_assignment/index.md b/files/ko/web/javascript/reference/operators/multiplication_assignment/index.md index 85b230069f94b7..4d206b0fe843e0 100644 --- a/files/ko/web/javascript/reference/operators/multiplication_assignment/index.md +++ b/files/ko/web/javascript/reference/operators/multiplication_assignment/index.md @@ -2,6 +2,7 @@ title: 곱하기 할당 (*=) slug: Web/JavaScript/Reference/Operators/Multiplication_assignment --- + {{jsSidebar("Operators")}} 곱하기 할당 연산자(`*=`)는 오른쪽 피연산자의 값을 변수에 곱한 결과를 다시 변수에 할당합니다. @@ -11,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Multiplication_assignment ## 구문 ```js -x *= y // x = x * y +x *= y; // x = x * y ``` ## 예제 @@ -22,8 +23,8 @@ x *= y // x = x * y // bar = 5 // 위와 같은 변수를 가정할 때 -bar *= 2 // 10 -bar *= 'foo' // NaN +bar *= 2; // 10 +bar *= "foo"; // NaN ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/new.target/index.md b/files/ko/web/javascript/reference/operators/new.target/index.md index e306d49bd5c149..d686ba520c82e4 100644 --- a/files/ko/web/javascript/reference/operators/new.target/index.md +++ b/files/ko/web/javascript/reference/operators/new.target/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/new.target ## 구문 ```js - new.target +new.target; ``` ## 설명 @@ -48,7 +48,11 @@ class A { } } -class B extends A { constructor() { super(); } } +class B extends A { + constructor() { + super(); + } +} var a = new A(); // logs "A" var b = new B(); // logs "B" diff --git a/files/ko/web/javascript/reference/operators/new/index.md b/files/ko/web/javascript/reference/operators/new/index.md index ac4806cd92d74d..cf41ec083b3500 100644 --- a/files/ko/web/javascript/reference/operators/new/index.md +++ b/files/ko/web/javascript/reference/operators/new/index.md @@ -11,8 +11,8 @@ slug: Web/JavaScript/Reference/Operators/new ## 구문 -```js - new constructor[([arguments])] +```js-nolint +new constructor[([arguments])]; ``` ### 매개변수 @@ -48,18 +48,18 @@ function Car() {} car1 = new Car(); car2 = new Car(); -console.log(car1.color); // undefined +console.log(car1.color); // undefined Car.prototype.color = "original color"; -console.log(car1.color); // original color +console.log(car1.color); // original color -car1.color = 'black'; -console.log(car1.color); // black +car1.color = "black"; +console.log(car1.color); // black -console.log(car1.__proto__.color) //original color -console.log(car2.__proto__.color) //original color -console.log(car1.color) // black -console.log(car2.color) // original color +console.log(car1.__proto__.color); //original color +console.log(car2.__proto__.color); //original color +console.log(car1.color); // black +console.log(car2.color); // original color ``` ## 예제 @@ -130,7 +130,7 @@ var car2 = new Car("Nissan", "300ZX", 1992, ken); 새로운 객체를 생성할 때 문자열이나 숫자 값을 넘겨주는 대신에, 위의 구문은 owner를 위한 매개변수로 `rand`와 `ken` 객체를 넘겨준다. `car2`의 owner name을 확인해보기 위해서, 다음의 속성에 접근할 수 있다: ```js -car2.owner.name +car2.owner.name; ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/operators/null/index.md b/files/ko/web/javascript/reference/operators/null/index.md index a0074bd89306f6..d25974a23e28e3 100644 --- a/files/ko/web/javascript/reference/operators/null/index.md +++ b/files/ko/web/javascript/reference/operators/null/index.md @@ -1,5 +1,5 @@ --- -title: 'null' +title: "null" slug: Web/JavaScript/Reference/Operators/null --- @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/null ## 구문 ```js -null +null; ``` ## 설명 @@ -33,15 +33,15 @@ foo; //null `null` 또는 `undefined`를 검사할 때, [동등 연산자(==)와 일치 연산자(===)의 차이](/ko/docs/Web/JavaScript/Reference/Operators)를 주의하세요. 동등 연산자는 자료형 변환을 수행합니다. ```js -typeof null // "object" (하위호환 유지를 위해 "null"이 아님) -typeof undefined // "undefined" -null === undefined // false -null == undefined // true -null === null // true -null == null // true -!null // true -isNaN(1 + null) // false -isNaN(1 + undefined) // true +typeof null; // "object" (하위호환 유지를 위해 "null"이 아님) +typeof undefined; // "undefined" +null === undefined; // false +null == undefined; // true +null === null; // true +null == null; // true +!null; // true +isNaN(1 + null); // false +isNaN(1 + undefined); // true ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/nullish_coalescing/index.md b/files/ko/web/javascript/reference/operators/nullish_coalescing/index.md index 31ad6799b82c02..054fffcc5a9d12 100644 --- a/files/ko/web/javascript/reference/operators/nullish_coalescing/index.md +++ b/files/ko/web/javascript/reference/operators/nullish_coalescing/index.md @@ -17,7 +17,7 @@ original_slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator ## 문법 ```js - leftExpr ?? rightExpr +leftExpr ?? rightExpr; ``` ## 설명 @@ -53,12 +53,12 @@ console.log(message); // "hi!" and not "" 널 병합 연산자는 첫 번째 연산자가 `null` 또는 `undefined`로 평가될 때만, 두 번째 피연산자를 반환함으로써 이러한 위험을 피한다: ```js -let myText = ''; // An empty string (which is also a falsy value) +let myText = ""; // An empty string (which is also a falsy value) -let notFalsyText = myText || 'Hello world'; +let notFalsyText = myText || "Hello world"; console.log(notFalsyText); // Hello world -let preservingFalsy = myText ?? 'Hi neighborhood'; +let preservingFalsy = myText ?? "Hi neighborhood"; console.log(preservingFalsy); // '' (as myText is neither undefined nor null) ``` @@ -67,15 +67,24 @@ console.log(preservingFalsy); // '' (as myText is neither undefined nor null) OR과 AND 같은 논리 연산자들과 마찬가지로, 만약 왼쪽이 `null` 또는 `undefined`가 아님이 판명되면 오른쪽 표현식은 평가되지 않는다. ```js -function A() { console.log('A was called'); return undefined;} -function B() { console.log('B was called'); return false;} -function C() { console.log('C was called'); return "foo";} - -console.log( A() ?? C() ); +function A() { + console.log("A was called"); + return undefined; +} +function B() { + console.log("B was called"); + return false; +} +function C() { + console.log("C was called"); + return "foo"; +} + +console.log(A() ?? C()); // logs "A was called" then "C was called" and then "foo" // as A() returned undefined so both expressions are evaluated -console.log( B() ?? C() ); +console.log(B() ?? C()); // logs "B was called" then "false" // as B() returned false (and not null or undefined), the right // hand side expression was not evaluated @@ -93,7 +102,7 @@ true || undefined ?? "foo"; // raises a SyntaxError 그러나 우선 순위를 명시적으로 나타내기 위해 괄호를 사용하면 가능하다: ```js -(null || undefined ) ?? "foo"; // returns "foo" +(null || undefined) ?? "foo"; // returns "foo" ``` ### Optional chaining 연산자(`?.`)와의 관계 @@ -103,7 +112,7 @@ true || undefined ?? "foo"; // raises a SyntaxError ```js let foo = { someFooProp: "hi" }; -console.log(foo.someFooProp?.toUpperCase()); // "HI" +console.log(foo.someFooProp?.toUpperCase()); // "HI" console.log(foo.someBarProp?.toUpperCase()); // undefined ``` @@ -112,13 +121,13 @@ console.log(foo.someBarProp?.toUpperCase()); // undefined 이 예제는 기본 값을 제공하지만 `null` or `undefined` 이외의 값을 를 유지한다. ```js -function getMiscObj(){ +function getMiscObj() { return { aNullProperty: null, emptyText: "", // this is not falsy - someNumber: 42 + someNumber: 42, }; -}; +} const miscObj = getMiscObj(); diff --git a/files/ko/web/javascript/reference/operators/object_initializer/index.md b/files/ko/web/javascript/reference/operators/object_initializer/index.md index 8652f88bfb841e..fa0641e7ddadf2 100644 --- a/files/ko/web/javascript/reference/operators/object_initializer/index.md +++ b/files/ko/web/javascript/reference/operators/object_initializer/index.md @@ -12,16 +12,18 @@ slug: Web/JavaScript/Reference/Operators/Object_initializer ## 구문 ```js -let o = {} -let o = {a: 'foo', b: 42, c: {}} +let o = {}; +let o = { a: "foo", b: 42, c: {} }; -let a = 'foo', b = 42, c = {} -let o = {a: a, b: b, c: c} +let a = "foo", + b = 42, + c = {}; +let o = { a: a, b: b, c: c }; let o = { property: function (parameters) {}, get property() {}, - set property(value) {} + set property(value) {}, }; ``` @@ -31,25 +33,27 @@ let o = { ```js // 프로퍼티명 약식 (ES2015) -let a = 'foo', b = 42, c = {}; -let o = {a, b, c} +let a = "foo", + b = 42, + c = {}; +let o = { a, b, c }; // 메서드명 약식 (ES2015) let o = { - property(parameters) {} -} + property(parameters) {}, +}; // 계산된 프로퍼티명 (ES2015) -let prop = 'foo'; +let prop = "foo"; let o = { - [prop]: 'hey', - ['b' + 'ar']: 'there' -} + [prop]: "hey", + ["b" + "ar"]: "there", +}; ``` ## 설명 -객체 초기자는 {{jsxref("Object")}}의 초기화를 나타내는 표현입니다. 객체는 객체를 나타내는 데 사용되는 _properties_로 구성됩니다. 객체 프로퍼티의 값은 [원시 값](/ko/docs/Glossary/Primitive) 데이터 타입 또는 다른 객체를 포함할 수 있습니다. +객체 초기자는 {{jsxref("Object")}}의 초기화를 나타내는 표현입니다. 객체는 객체를 나타내는 데 사용되는 _properties_ 로 구성됩니다. 객체 프로퍼티의 값은 [원시 값](/ko/docs/Glossary/Primitive) 데이터 타입 또는 다른 객체를 포함할 수 있습니다. ### 객체 리터럴 표기법 vs JSON @@ -68,7 +72,7 @@ let o = { 프로퍼티가 없는 빈 객체는 다음과 같이 생성합니다. ```js -let object = {} +let object = {}; ``` _literal_ 또는 _initializer_ 표기법의 장점은 중괄호 안에 프로퍼티를 갖는 객체를 빠르게 생성할 수 있다는 것입니다. 콤마로 구분하여 `key: value` 상의 목록을 작성하면 됩니다. @@ -77,10 +81,10 @@ _literal_ 또는 _initializer_ 표기법의 장점은 중괄호 안에 프로퍼 ```js let object = { - foo: 'bar', + foo: "bar", age: 42, - baz: {myProp: 12} -} + baz: { myProp: 12 }, +}; ``` ### 프로퍼티에 접근하기 @@ -88,10 +92,10 @@ let object = { 객체를 생성한 후에는 이를 읽거나 변경할 수 있습니다. 객체 프로퍼티는 점 표기법 또는 대괄호 표기법을 사용해 접근할 수 있습니다(자세한 정보는 [프로퍼티 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors)를 보세요). ```js -object.foo // "bar" -object['age'] // 42 -object.baz // {myProp: 12} -object.baz.myProp //12 +object.foo; // "bar" +object["age"]; // 42 +object.baz; // {myProp: 12} +object.baz.myProp; //12 ``` ### 프로퍼티 정의 @@ -99,29 +103,29 @@ object.baz.myProp //12 우리는 초기자 구문을 사용해 프로퍼티를 작성하는 방법을 이미 배웠습니다. 때때로 코드의 변수를 객체로 넣고 싶은 경우가 있습니다. 다음과 같은 코드를 보게 될 수 있습니다. ```js -let a = 'foo', - b = 42, - c = {}; +let a = "foo", + b = 42, + c = {}; let o = { a: a, b: b, - c: c -} + c: c, +}; ``` ECMAScript 2015를 사용하면 더 짧은 표기법을 사용해 동일한 결과를 얻을 수 있습니다. ```js -let a = 'foo', - b = 42, - c = {}; +let a = "foo", + b = 42, + c = {}; // 프로퍼티명 약식 (ES2015) -let o = {a, b, c} +let o = { a, b, c }; // 다르게 작성하면, -console.log((o.a === {a}.a)) // true +console.log(o.a === { a }.a); // true ``` #### 중복된 프로퍼티명 @@ -129,21 +133,21 @@ console.log((o.a === {a}.a)) // true 동일한 프로퍼티명을 사용하면 두 번째 프로퍼티가 첫 번째 프로퍼티를 덮어씁니다. ```js -let a = {x: 1, x: 2} -console.log(a) // {x: 2} +let a = { x: 1, x: 2 }; +console.log(a); // {x: 2} ``` ECMAScript 5 엄격 모드 코드에서는 중복된 프로퍼티명을 {{jsxref("SyntaxError")}}로 간주합니다. 런타임 시 복제를 가능하게 한 계산된 프로퍼티 명의 도입으로 ECMScript 2015는 이 제한을 제거했습니다. ```js function haveES2015DuplicatePropertySemantics() { - 'use strict'; + "use strict"; try { - ({prop: 1, prop: 2}); + ({ prop: 1, prop: 2 }); // 에러가 발생하지 않음, 중복된 프로퍼티명이 엄격 모드에서 허용됨 return true; - } catch(e) { + } catch (e) { // 에러가 발생함, 엄격 모드에서 중복이 금지됨 return false; } @@ -158,8 +162,8 @@ function haveES2015DuplicatePropertySemantics() { let o = { property: function (parameters) {}, get property() {}, - set property(value) {} -} + set property(value) {}, +}; ``` ECMAScript 2015에서는 약식 표기법을 사용할 수 있으므로 "`function`" 키워드는 필요하지 않습니다. @@ -168,7 +172,7 @@ ECMAScript 2015에서는 약식 표기법을 사용할 수 있으므로 "`functi // 약식 메서드명(ES2015) let o = { property(parameters) {}, -} +}; ``` ECMAScript 2015에서는 값이 generator 함수인 프로퍼티를 간결하게 정의하는 방법이 있습니다. @@ -201,31 +205,31 @@ ECMAScript 2015부터 객체 초기자 구문은 계산된 프로퍼티 명도 ```js // 계산된 프로퍼티명(ES2015) -let i = 0 +let i = 0; let a = { - ['foo' + ++i]: i, - ['foo' + ++i]: i, - ['foo' + ++i]: i -} + ["foo" + ++i]: i, + ["foo" + ++i]: i, + ["foo" + ++i]: i, +}; -console.log(a.foo1) // 1 -console.log(a.foo2) // 2 -console.log(a.foo3) // 3 +console.log(a.foo1); // 1 +console.log(a.foo2); // 2 +console.log(a.foo3); // 3 -const items = ["A","B","C"]; +const items = ["A", "B", "C"]; const obj = { -[items]: "Hello" -} + [items]: "Hello", +}; console.log(obj); // A,B,C: "Hello" -console.log(obj["A,B,C"]) // "Hello" +console.log(obj["A,B,C"]); // "Hello" -let param = 'size' +let param = "size"; let config = { [param]: 12, - ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4 -} + ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4, +}; -console.log(config) // {size: 12, mobileSize: 4} +console.log(config); // {size: 12, mobileSize: 4} ``` ### 전개 프로퍼티 @@ -235,13 +239,13 @@ console.log(config) // {size: 12, mobileSize: 4} 이제 {{jsxref("Object.assign()")}} 보다 더 짧은 구문을 사용해 얕은 복제(`prototype` 제외) 또는 객체 병합이 가능합니다. ```js -let obj1 = { foo: 'bar', x: 42 } -let obj2 = { foo: 'baz', y: 13 } +let obj1 = { foo: "bar", x: 42 }; +let obj2 = { foo: "baz", y: 13 }; -let clonedObj = { ...obj1 } +let clonedObj = { ...obj1 }; // Object { foo: "bar", x: 42 } -let mergedObj = { ...obj1, ...obj2 } +let mergedObj = { ...obj1, ...obj2 }; // Object { foo: "baz", x: 42, y: 13 } ``` @@ -252,19 +256,19 @@ let mergedObj = { ...obj1, ...obj2 } `__proto__: value` 또는 `"__proto__": value` 형태의 프로토타입 정의는 `__proto__` 이름을 갖는 프로퍼티를 생성하지 않습니다. 대신에, 제공된 값이 객체 또는 [`null`](/ko/docs/Web/JavaScript/Reference/Global_Objects/null)인 경우, 생성된 객체의 `[[Prototype]]`을 해당 값으로 변경합니다(값이 객체 또는 `null`이 아닌 경우, 객체는 변경되지 않습니다). ```js -let obj1 = {} -assert(Object.getPrototypeOf(obj1) === Object.prototype) +let obj1 = {}; +assert(Object.getPrototypeOf(obj1) === Object.prototype); -let obj2 = {__proto__: null} -assert(Object.getPrototypeOf(obj2) === null) +let obj2 = { __proto__: null }; +assert(Object.getPrototypeOf(obj2) === null); -let protoObj = {} -let obj3 = {'__proto__': protoObj} -assert(Object.getPrototypeOf(obj3) === protoObj) +let protoObj = {}; +let obj3 = { __proto__: protoObj }; +assert(Object.getPrototypeOf(obj3) === protoObj); -let obj4 = {__proto__: 'not an object or null'} -assert(Object.getPrototypeOf(obj4) === Object.prototype) -assert(!obj4.hasOwnProperty('__proto__')) +let obj4 = { __proto__: "not an object or null" }; +assert(Object.getPrototypeOf(obj4) === Object.prototype); +assert(!obj4.hasOwnProperty("__proto__")); ``` 객체 리터럴에서는 단일 프로토타입 변형만 허용됩니다. 다중 프로토타입 변형은 구문 에러입니다. @@ -272,18 +276,22 @@ assert(!obj4.hasOwnProperty('__proto__')) "콜론" 표기법을 사용하지 않는 프로퍼티 정의는 프로토타입 변형이 아닙니다. 이는 다른 이름을 사용하여 유사한 정의와 동일하게 동작하는 프로퍼티 정의입니다. ```js -let __proto__ = 'variable' +let __proto__ = "variable"; -let obj1 = {__proto__} -assert(Object.getPrototypeOf(obj1) === Object.prototype) -assert(obj1.hasOwnProperty('__proto__')) -assert(obj1.__proto__ === 'variable') +let obj1 = { __proto__ }; +assert(Object.getPrototypeOf(obj1) === Object.prototype); +assert(obj1.hasOwnProperty("__proto__")); +assert(obj1.__proto__ === "variable"); -let obj2 = {__proto__() { return 'hello'; }} -assert(obj2.__proto__() === 'hello') +let obj2 = { + __proto__() { + return "hello"; + }, +}; +assert(obj2.__proto__() === "hello"); -let obj3 = {['__prot' + 'o__']: 17} -assert(obj3.__proto__ === 17) +let obj3 = { ["__prot" + "o__"]: 17 }; +assert(obj3.__proto__ === 17); ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/operator_precedence/index.md b/files/ko/web/javascript/reference/operators/operator_precedence/index.md index bc4407245222ec..c999a3b1e721c7 100644 --- a/files/ko/web/javascript/reference/operators/operator_precedence/index.md +++ b/files/ko/web/javascript/reference/operators/operator_precedence/index.md @@ -20,8 +20,8 @@ a 연산자1 b 연산자2 c 두 연산자의 우선순위(아래 표 참조)가 다를 경우, 우선순위가 높은 연산자가 먼저 실행되고 결합성은 영향을 미치지 않습니다. 아래 예제에서는 덧셈이 곱셈보다 먼저 쓰였음에도 곱셈의 우선순위가 높기 때문에 먼저 실행됩니다. ```js -console.log(3 + 10 * 2); // 23을 출력 -console.log(3 + (10 * 2)); // 23을 출력, 괄호는 불필요함 +console.log(3 + 10 * 2); // 23을 출력 +console.log(3 + 10 * 2); // 23을 출력, 괄호는 불필요함 console.log((3 + 10) * 2); // 26을 출력, 괄호로 인해 실행 순서가 바뀜 ``` @@ -166,10 +166,10 @@ console.log((echo("첫째", 2) ** echo("둘째", 3)) ** echo("셋째", 2)); 2 && 2 > 1 +3 > 2 && 2 > 1; // true를 반환 -3 > 2 > 1 +3 > 2 > 1; // 3 > 2는 true인데, 부등호 연산자에서 true는 1로 변환되므로 // true > 1은 1 > 1이 되고, 이는 거짓이다. // 괄호를 추가하면 (3 > 2) > 1과 같다. @@ -182,10 +182,10 @@ console.log((echo("첫째", 2) ** echo("둘째", 3)) ** echo("셋째", 2)); ( { ...objects } ); +var obj1 = { foo: "bar", x: 42 }; +var obj2 = { foo: "baz", y: 13 }; +const merge = (...objects) => ({ ...objects }); - var mergedObj = merge ( obj1, obj2); - // Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } +var mergedObj = merge(obj1, obj2); +// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } - var mergedObj = merge ( {}, obj1, obj2); - // Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } } +var mergedObj = merge({}, obj1, obj2); +// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } } ``` 위 예제에서, 전개 구문은 예상대로 동작하지 않습니다. 나머지 매개변수로 인해, 인수 배열을 객체 리터럴로 전개합니다. @@ -209,7 +209,7 @@ var mergedObj = { ...obj1, ...obj2 }; 전개 구문 (spread 프로퍼티인 경우 제외) 은 [iterable](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) 객체에만 적용됩니다. ```js -var obj = {'key1': 'value1'}; +var obj = { key1: "value1" }; var array = [...obj]; // TypeError: obj is not iterable ``` diff --git a/files/ko/web/javascript/reference/operators/subtraction/index.md b/files/ko/web/javascript/reference/operators/subtraction/index.md index acdf554fd0cf0b..d2983971bc1b53 100644 --- a/files/ko/web/javascript/reference/operators/subtraction/index.md +++ b/files/ko/web/javascript/reference/operators/subtraction/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Subtraction ## 구문 ```js -x - y +x - y; ``` ## 예제 @@ -20,14 +20,14 @@ x - y ### 뺄셈 ```js -5 - 3 // 2 -3 - 5 // -2 +5 - 3; // 2 +3 - 5; // -2 ``` ### 숫자가 아닌 경우 ```js -'foo' - 3 // NaN +"foo" - 3; // NaN ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/subtraction_assignment/index.md b/files/ko/web/javascript/reference/operators/subtraction_assignment/index.md index f508c438f41bf9..e03b0afd0a4d1a 100644 --- a/files/ko/web/javascript/reference/operators/subtraction_assignment/index.md +++ b/files/ko/web/javascript/reference/operators/subtraction_assignment/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Subtraction_assignment ## 구문 ```js -x -= y // x = x - y +x -= y; // x = x - y ``` ## 예제 @@ -23,8 +23,8 @@ x -= y // x = x - y // bar = 5 // 위와 같은 변수를 가정할 때 -bar -= 2 // 3 -bar -= 'foo' // NaN +bar -= 2; // 3 +bar -= "foo"; // NaN ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/super/index.md b/files/ko/web/javascript/reference/operators/super/index.md index 67017ba27e8030..1976362d5af53a 100644 --- a/files/ko/web/javascript/reference/operators/super/index.md +++ b/files/ko/web/javascript/reference/operators/super/index.md @@ -47,7 +47,7 @@ super[expression] ### 클래스에서 super 사용하기 -이 코드 스니펫은 [클래스 샘플](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html) ([라이브 데모]((https://googlechrome.github.io/samples/classes-es6/index.html)))에서 가져왔습니다. 여기서 `super()`는 `Rectangle`과 `Square` 사이에 공통적인 생성자 부분의 중복을 피하기 위해 호출됩니다. +이 코드 스니펫은 [클래스 샘플](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html) ([라이브 데모](<(https://googlechrome.github.io/samples/classes-es6/index.html)>))에서 가져왔습니다. 여기서 `super()`는 `Rectangle`과 `Square` 사이에 공통적인 생성자 부분의 중복을 피하기 위해 호출됩니다. ```js class Rectangle { @@ -247,7 +247,7 @@ const e = new Extended(); // 인스턴스 상속 재설정 Object.setPrototypeOf(Extended.prototype, AnotherBase.prototype); console.log(e.getX()); // 프로토타입 체인이 변경되었기 때문에 "1" 대신 "2"가 로그됩니다. -console.log(Extended.staticGetX()); // 정적 부분을 아직 수정하지 않았기 때문에, 여전히 "3"이 로그됩니다. +console.log(Extended.staticGetX()); // 정적 부분을 아직 수정하지 않았기 때문에, 여전히 "3"이 로그됩니다. // 정적 상속 재설정 Object.setPrototypeOf(Extended, AnotherBase); console.log(Extended.staticGetX()); // 이제 "4"가 로그됩니다. diff --git a/files/ko/web/javascript/reference/operators/this/index.md b/files/ko/web/javascript/reference/operators/this/index.md index 5aba5bd4291945..3df9cbbf79fa28 100644 --- a/files/ko/web/javascript/reference/operators/this/index.md +++ b/files/ko/web/javascript/reference/operators/this/index.md @@ -14,7 +14,7 @@ JavaScript에서 **함수의 `this` 키워드**는 다른 언어와 조금 다 ## 구문 ```js - this +this; ``` ### 값 @@ -33,8 +33,8 @@ a = 37; console.log(window.a); // 37 this.b = "MDN"; -console.log(window.b) // "MDN" -console.log(b) // "MDN" +console.log(window.b); // "MDN" +console.log(b); // "MDN" ``` > **노트:** global {{jsxref("globalThis")}} 프로퍼티를 사용하여 코드가 실행중인 현재 컨텍스트와 관계없이 항상 전역 객체를 얻을 수 있습니다. @@ -62,7 +62,7 @@ f1() === global; // true 반면에 엄격 모드에서 `this` 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로 다음 예시에서 보여지는 것 처럼 `this`는 `undefined`로 남아있습니다. ```js -function f2(){ +function f2() { "use strict"; // 엄격 모드 참고 return this; } @@ -78,17 +78,17 @@ f2() === undefined; // true ```js // call 또는 apply의 첫 번째 인자로 객체가 전달될 수 있으며 this가 그 객체에 묶임 -var obj = {a: 'Custom'}; +var obj = { a: "Custom" }; // 변수를 선언하고 변수에 프로퍼티로 전역 window를 할당 -var a = 'Global'; +var a = "Global"; function whatsThis() { - return this.a; // 함수 호출 방식에 따라 값이 달라짐 + return this.a; // 함수 호출 방식에 따라 값이 달라짐 } -whatsThis(); // this는 'Global'. 함수 내에서 설정되지 않았으므로 global/window 객체로 초기값을 설정한다. -whatsThis.call(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다. +whatsThis(); // this는 'Global'. 함수 내에서 설정되지 않았으므로 global/window 객체로 초기값을 설정한다. +whatsThis.call(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다. whatsThis.apply(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다. ``` @@ -99,7 +99,7 @@ function add(c, d) { return this.a + this.b + c + d; } -var o = {a: 1, b: 3}; +var o = { a: 1, b: 3 }; // 첫 번째 인자는 'this'로 사용할 객체이고, // 이어지는 인자들은 함수 호출에서 인수로 전달된다. @@ -117,8 +117,8 @@ function bar() { console.log(Object.prototype.toString.call(this)); } -bar.call(7); // [object Number] -bar.call('foo'); // [object String] +bar.call(7); // [object Number] +bar.call("foo"); // [object String] bar.call(undefined); // [object global] ``` @@ -131,13 +131,13 @@ function f() { return this.a; } -var g = f.bind({a: 'azerty'}); +var g = f.bind({ a: "azerty" }); console.log(g()); // azerty -var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함! +var h = g.bind({ a: "yoo" }); // bind는 한 번만 동작함! console.log(h()); // azerty -var o = {a: 37, f: f, g: g, h: h}; +var o = { a: 37, f: f, g: g, h: h }; console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty ``` @@ -147,7 +147,7 @@ console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty ```js var globalObject = this; -var foo = (() => this); +var foo = () => this; console.log(foo() === globalObject); // true ``` @@ -155,7 +155,7 @@ console.log(foo() === globalObject); // true ```js // 객체로서 메서드 호출 -var obj = {func: foo}; +var obj = { func: foo }; console.log(obj.func() === globalObject); // true // call을 사용한 this 설정 시도 @@ -174,10 +174,10 @@ console.log(foo() === globalObject); // true // this는 감싸진 함수의 this로 영구적으로 묶입니다. // bar의 값은 호출에서 설정될 수 있으며, 이는 반환된 함수의 값을 설정하는 것입니다. var obj = { - bar: function() { - var x = (() => this); + bar: function () { + var x = () => this; return x; - } + }, }; // obj의 메소드로써 bar를 호출하고, this를 obj로 설정 @@ -206,9 +206,9 @@ console.log(fn2()() == window); // true ```js var o = { prop: 37, - f: function() { + f: function () { return this.prop; - } + }, }; console.log(o.f()); // 37 @@ -217,7 +217,7 @@ console.log(o.f()); // 37 이 행동이 함수가 정의된 방법이나 위치에 전혀 영향을 받지 않는 것에 유의해라. 이전 예제에서, `o` 의 정의 중 `f` 함수를 구성원으로 내부에 정의 하였다. 그러나, 간단하게 함수를 먼저 정의하고 나중에 `o.f`를 추가할 수 있다. 이렇게 하면 동일한 동작 결과 이다 : ```js -var o = {prop: 37}; +var o = { prop: 37 }; function independent() { return this.prop; @@ -233,7 +233,7 @@ console.log(o.f()); // logs 37 마찬가지로, 이 `this` 바인딩은 가장 즉각으로 멤버 대상에 영향을 받는다. 다음 예제에서, 함수를 실행할 때, 객체 `o.b`의 메소드 `g` 로서 호출한다. 이것이 실행되는 동안, 함수 내부의 `this`는 `o.b`를 나타낸다. 객체는 그 자신이 `o`의 멤버 중 하나라는 사실은 중요하지 않다. 가장 즉각적인 참조가 중요한 것이다. ```js -o.b = {g: independent, prop: 42}; +o.b = { g: independent, prop: 42 }; console.log(o.b.g()); // logs 42 ``` @@ -243,7 +243,9 @@ console.log(o.b.g()); // logs 42 ```js var o = { - f:function() { return this.a + this.b; } + f: function () { + return this.a + this.b; + }, }; var p = Object.create(o); p.a = 1; @@ -269,11 +271,14 @@ var o = { c: 3, get average() { return (this.a + this.b + this.c) / 3; - } + }, }; -Object.defineProperty(o, 'sum', { - get: sum, enumerable: true, configurable: true}); +Object.defineProperty(o, "sum", { + get: sum, + enumerable: true, + configurable: true, +}); console.log(o.average, o.sum); // 2, 6 ``` @@ -311,10 +316,9 @@ function C() { var o = new C(); console.log(o.a); // 37 - function C2() { this.a = 37; - return {a: 38}; + return { a: 38 }; } o = new C2(); @@ -332,16 +336,16 @@ function bluify(e) { console.log(this === e.currentTarget); // currentTarget과 target이 같은 객체면 true console.log(this === e.target); - this.style.backgroundColor = '#A5D9F3'; + this.style.backgroundColor = "#A5D9F3"; } // 문서 내 모든 요소의 목록 -var elements = document.getElementsByTagName('*'); +var elements = document.getElementsByTagName("*"); // 어떤 요소를 클릭하면 파랗게 변하도록 // bluify를 클릭 처리기로 등록 for (var i = 0; i < elements.length; i++) { - elements[i].addEventListener('click', bluify, false); + elements[i].addEventListener("click", bluify, false); } ``` @@ -350,9 +354,7 @@ for (var i = 0; i < elements.length; i++) { 코드를 인라인 이벤트 처리기로 사용하면 `this`는 처리기를 배치한 DOM 요소로 설정됩니다. ```js - + ``` 위의 경고창은 `button`을 보여줍니다. 다만 바깥쪽 코드만 `this`를 이런 방식으로 설정합니다. diff --git a/files/ko/web/javascript/reference/operators/typeof/index.md b/files/ko/web/javascript/reference/operators/typeof/index.md index 12362ae309b243..73cd94dd751fe1 100644 --- a/files/ko/web/javascript/reference/operators/typeof/index.md +++ b/files/ko/web/javascript/reference/operators/typeof/index.md @@ -2,6 +2,7 @@ title: typeof slug: Web/JavaScript/Reference/Operators/typeof --- + {{jsSidebar("Operators")}} **`typeof`** 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다. @@ -12,9 +13,9 @@ slug: Web/JavaScript/Reference/Operators/typeof `typeof` 연산자는 피연산자 앞에 위치합니다. -```js - typeof operand - typeof(operand) +```js-nolint +typeof operand; +typeof (operand); ``` ### 매개변수 @@ -26,18 +27,18 @@ slug: Web/JavaScript/Reference/Operators/typeof `typeof`가 반환할 수 있는 값을 아래 표에서 볼 수 있습니다. 자료형과 원시값에 대한 자세한 정보는 [JavaScript 자료형과 자료구조](/ko/docs/Web/JavaScript/Data_structures) 페이지를 참고하세요. -| Type | Result | -| ------------------------------------------------------------------------------------ | ------------------------------- | -| {{glossary("Undefined")}} | `"undefined"` | +| Type | Result | +| ---------------------------------------------------------------------------- | ------------------------------- | +| {{glossary("Undefined")}} | `"undefined"` | | {{glossary("Null")}} | `"object"` ([아래](#null) 참고) | -| {{glossary("Boolean")}} | `"boolean"` | -| {{glossary("Number")}} | `"number"` | -| {{glossary("BigInt")}} | `"bigint"` | -| {{glossary("String")}} | `"string"` | -| {{glossary("Symbol")}} (ECMAScript 2015에서 추가) | `"symbol"` | -| 호스트 객체 (JS 환경에서 제공) | _구현체마다 다름_ | +| {{glossary("Boolean")}} | `"boolean"` | +| {{glossary("Number")}} | `"number"` | +| {{glossary("BigInt")}} | `"bigint"` | +| {{glossary("String")}} | `"string"` | +| {{glossary("Symbol")}} (ECMAScript 2015에서 추가) | `"symbol"` | +| 호스트 객체 (JS 환경에서 제공) | _구현체마다 다름_ | | {{glossary("Function")}} 객체 (ECMA-262 표현으로는 [[Call]]을 구현하는 객체) | `"function"` | -| 다른 모든 객체 | `"object"` | +| 다른 모든 객체 | `"object"` | > **참고:** ECMAScript 2019 and older permitted implementations to have `typeof` return any implementation-defined string value for non-callable non-standard exotic objects. > @@ -47,61 +48,54 @@ slug: Web/JavaScript/Reference/Operators/typeof ```js // Numbers -typeof 37 === 'number'; -typeof 3.14 === 'number'; -typeof Math.LN2 === 'number'; -typeof Infinity === 'number'; -typeof NaN === 'number'; // Despite being "Not-A-Number" -typeof Number(1) === 'number'; // but never use this form! - -typeof 42n === 'bigint'; +typeof 37 === "number"; +typeof 3.14 === "number"; +typeof Math.LN2 === "number"; +typeof Infinity === "number"; +typeof NaN === "number"; // Despite being "Not-A-Number" +typeof Number(1) === "number"; // but never use this form! +typeof 42n === "bigint"; // Strings -typeof "" === 'string'; -typeof "bla" === 'string'; -typeof (typeof 1) === 'string'; // typeof always returns a string -typeof String("abc") === 'string'; // but never use this form! - +typeof "" === "string"; +typeof "bla" === "string"; +typeof typeof 1 === "string"; // typeof always returns a string +typeof String("abc") === "string"; // but never use this form! // Booleans -typeof true === 'boolean'; -typeof false === 'boolean'; -typeof Boolean(true) === 'boolean'; // but never use this form! - +typeof true === "boolean"; +typeof false === "boolean"; +typeof Boolean(true) === "boolean"; // but never use this form! // Symbols -typeof Symbol() === 'symbol' -typeof Symbol('foo') === 'symbol' -typeof Symbol.iterator === 'symbol' - +typeof Symbol() === "symbol"; +typeof Symbol("foo") === "symbol"; +typeof Symbol.iterator === "symbol"; // Undefined -typeof undefined === 'undefined'; -typeof declaredButUndefinedVariable === 'undefined'; -typeof undeclaredVariable === 'undefined'; - +typeof undefined === "undefined"; +typeof declaredButUndefinedVariable === "undefined"; +typeof undeclaredVariable === "undefined"; // Objects -typeof {a:1} === 'object'; +typeof { a: 1 } === "object"; // use Array.isArray or Object.prototype.toString.call // to differentiate regular objects from arrays -typeof [1, 2, 4] === 'object'; - -typeof new Date() === 'object'; +typeof [1, 2, 4] === "object"; +typeof new Date() === "object"; // The following is confusing. Don't use! -typeof new Boolean(true) === 'object'; -typeof new Number(1) === 'object'; -typeof new String("abc") === 'object'; - +typeof new Boolean(true) === "object"; +typeof new Number(1) === "object"; +typeof new String("abc") === "object"; // Functions -typeof function(){} === 'function'; -typeof class C {} === 'function'; -typeof Math.sin === 'function'; +typeof function () {} === "function"; +typeof class C {} === "function"; +typeof Math.sin === "function"; ``` ## 추가 정보 @@ -110,7 +104,7 @@ typeof Math.sin === 'function'; ```js // This stands since the beginning of JavaScript -typeof null === 'object'; +typeof null === "object"; ``` 자바스크립트를 처음 구현할 때, 자바스크립트 값은 타입 태그와 값으로 표시되었습니다. 객체의 타입 태그는 0이었습니다. `null`은 Null pointer(대부분의 플랫폼에서 `0x00`)로 표시되었습니다. 그 결과 null은 타입 태그로 0을 가지며, 따라서 `typeof`는 object를 반환합니다. ([참고 문서](https://2ality.com/2013/10/typeof-null.html)) @@ -122,8 +116,8 @@ ECMAScript에 수정이 제안(opt-in을 통해)되었으나 [거절되었습니 Callable regular expressions were a non-standard addition in some browsers. ```js -typeof /s/ === 'function'; // Chrome 1-12 Non-conform to ECMAScript 5.1 -typeof /s/ === 'object'; // Firefox 5+ Conform to ECMAScript 5.1 +typeof /s/ === "function"; // Chrome 1-12 Non-conform to ECMAScript 5.1 +typeof /s/ === "object"; // Firefox 5+ Conform to ECMAScript 5.1 ``` ## 명세서 @@ -139,7 +133,7 @@ typeof /s/ === 'object'; // Firefox 5+ Conform to ECMAScript 5.1 On IE 6, 7, and 8 a lot of host objects are objects and not functions. For example: ```js -typeof alert === 'object' +typeof alert === "object"; ``` ## 같이 보기 diff --git a/files/ko/web/javascript/reference/operators/unary_negation/index.md b/files/ko/web/javascript/reference/operators/unary_negation/index.md index ca248808dc9d98..e3db8b4bf3b6a6 100644 --- a/files/ko/web/javascript/reference/operators/unary_negation/index.md +++ b/files/ko/web/javascript/reference/operators/unary_negation/index.md @@ -2,6 +2,7 @@ title: 단항 부정 (-) slug: Web/JavaScript/Reference/Operators/Unary_negation --- + {{jsSidebar("Operators")}} 단항 부정 연산자(`-`)는 피연산자 앞에 위치하며, 피연산자의 부호를 부정합니다. 즉 양수는 음수로, 음수는 양수로 바꿉니다. @@ -11,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Unary_negation ## 구문 ```js --x +-x; ``` ## 예제 diff --git a/files/ko/web/javascript/reference/operators/unary_plus/index.md b/files/ko/web/javascript/reference/operators/unary_plus/index.md index fe057254cb05de..67b82815931bab 100644 --- a/files/ko/web/javascript/reference/operators/unary_plus/index.md +++ b/files/ko/web/javascript/reference/operators/unary_plus/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Unary_plus ## 구문 ```js -+x ++x; ``` ## 설명 @@ -40,11 +40,11 @@ console.log(+y); ### 숫자가 아닌 값에 사용하기 ```js -+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN -+1n // TypeError 발생: BigInt 값을 숫자로 변경할 수 없습니다 ++true; // 1 ++false; // 0 ++null; // 0 ++function(val){ return val } ;// NaN ++1n; // TypeError 발생: BigInt 값을 숫자로 변경할 수 없습니다 ``` ## 명세 diff --git a/files/ko/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md b/files/ko/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md index 1a90724a01c2e5..a46893baecdb9b 100644 --- a/files/ko/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md +++ b/files/ko/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md @@ -26,11 +26,11 @@ x >>>= y ### unsigned 오른쪽 시프트 할당 연산자 사용 ```js -let a = 5; // (00000000000000000000000000000101) -a >>>= 2; // 1 (00000000000000000000000000000001) +let a = 5; // (00000000000000000000000000000101) +a >>>= 2; // 1 (00000000000000000000000000000001) let b = -5; // (-00000000000000000000000000000101) -b >>>= 2; // 1073741822 (00111111111111111111111111111110) +b >>>= 2; // 1073741822 (00111111111111111111111111111110) let c = 5n; c >>>= 2n; // 1n diff --git a/files/ko/web/javascript/reference/operators/void/index.md b/files/ko/web/javascript/reference/operators/void/index.md index 5ab9a06c6be1f1..85e4c60d2e7594 100644 --- a/files/ko/web/javascript/reference/operators/void/index.md +++ b/files/ko/web/javascript/reference/operators/void/index.md @@ -2,6 +2,7 @@ title: void slug: Web/JavaScript/Reference/Operators/void --- + {{jsSidebar("Operators")}} **`void` 연산자**는 주어진 표현식을 평가하고 {{jsxref("undefined")}}를 반환합니다. @@ -11,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/void ## 구문 ```js - void expression +void expression; ``` ## 설명 @@ -23,8 +24,8 @@ slug: Web/JavaScript/Reference/Operators/void `void` 연산자의 [우선순위](/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)도 유념해야 합니다. [그룹 연산자](/ko/docs/Web/JavaScript/Reference/Operators/Grouping)(괄호)를 사용하면 `void` 연산자를 사용한 식의 평가 과정을 더 명확하게 보일 수 있습니다. ```js -void 2 == '2'; // undefined == '2', false -void (2 == '2'); // void true, undefined +void 2 == "2"; // undefined == '2', false +void (2 == "2"); // void true, undefined ``` ## IIFE @@ -32,18 +33,18 @@ void (2 == '2'); // void true, undefined 즉시 실행 함수 표현식({{Glossary("IIFE")}})을 사용할 때 `void`를 사용하면 `function` 키워드를 선언문이 아니라 표현식처럼 간주하도록 강제할 수 있습니다. ```js -void function iife() { - var bar = function () {}; - var baz = function () {}; - var foo = function () { - bar(); - baz(); - }; - var biz = function () {}; - - foo(); - biz(); -}(); +void (function iife() { + var bar = function () {}; + var baz = function () {}; + var foo = function () { + bar(); + baz(); + }; + var biz = function () {}; + + foo(); + biz(); +})(); ``` ## JavaScript URI @@ -51,9 +52,7 @@ void function iife() { `javascript:`로 시작하는 URI를 지원하는 브라우저에서는, URI에 있는 코드의 평가 결과가 {{jsxref("undefined")}}가 아니라면 페이지의 콘텐츠를 반환 값으로 대체합니다. `void` 연산자를 사용하면 `undefined`를 반환할 수 있습니다. 다음 예제를 확인하세요. ```html - - 클릭해도 아무 일도 없음 - +클릭해도 아무 일도 없음 클릭하면 배경색이 녹색으로 diff --git a/files/ko/web/javascript/reference/operators/yield/index.md b/files/ko/web/javascript/reference/operators/yield/index.md index 00ed3307bcb24b..db4e44d0f3a3e6 100644 --- a/files/ko/web/javascript/reference/operators/yield/index.md +++ b/files/ko/web/javascript/reference/operators/yield/index.md @@ -9,8 +9,8 @@ slug: Web/JavaScript/Reference/Operators/yield ## 문법 -```js - [rv] = yield [expression]; +```js-nolint +[rv] = yield [expression]; ``` - `expression` @@ -40,11 +40,12 @@ generator 코드 경로, yield연산자, {{jsxref("Generator.prototype.next()")} 다음 코드는 제너레이터 함수의 선언의 예시이다. ```js -function* foo(){ +function* foo() { var index = 0; - while (index <= 2) // when index reaches 3, - // yield's done will be true - // and its value will be undefined; + while (index <= 2) + // when index reaches 3, + // yield's done will be true + // and its value will be undefined; yield index++; } ``` diff --git a/files/ko/web/javascript/reference/operators/yield_star_/index.md b/files/ko/web/javascript/reference/operators/yield_star_/index.md index 1e255fcdb0c90e..6a3151e38b2558 100644 --- a/files/ko/web/javascript/reference/operators/yield_star_/index.md +++ b/files/ko/web/javascript/reference/operators/yield_star_/index.md @@ -11,8 +11,8 @@ slug: Web/JavaScript/Reference/Operators/yield* ## 구문 -```js - yield* [[expression]]; +```js-nolint +yield* [[expression]]; ``` - `expression` @@ -97,9 +97,9 @@ console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false } console.log(iterator.next()); // { value: undefined, done: true }, - // g4() 는 여기서 { value: "foo", done: true }를 반환합니다 +// g4() 는 여기서 { value: "foo", done: true }를 반환합니다 -console.log(result); // "foo" +console.log(result); // "foo" ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/statements/async_function/index.md b/files/ko/web/javascript/reference/statements/async_function/index.md index 5ac875072359b7..81269976eb96d7 100644 --- a/files/ko/web/javascript/reference/statements/async_function/index.md +++ b/files/ko/web/javascript/reference/statements/async_function/index.md @@ -41,17 +41,17 @@ slug: Web/JavaScript/Reference/Statements/async_function 예를 들어 ```js - async function foo() { - return 1 - } +async function foo() { + return 1; +} ``` 위 코드는 아래와 같습니다. ```js - function foo() { - return Promise.resolve(1) - } +function foo() { + return Promise.resolve(1); +} ``` `async` 함수의 본문은 0개 이상의 `await` 문으로 분할된 것으로 생각할 수 있습니다. 첫번째 `await` 문을 포함하는 최상위 코드는 동기적으로 실행됩니다. 따라서 `await` 문이 없는 `async` 함수는 동기적으로 실행됩니다. 하지만 `await` 문이 있다면 `async` 함수는 항상 비동기적으로 완료됩니다. @@ -59,17 +59,17 @@ slug: Web/JavaScript/Reference/Statements/async_function 예를 들어 ```js - async function foo() { - await 1 - } +async function foo() { + await 1; +} ``` 위 코드는 아래와 같습니다. ```js - function foo() { - return Promise.resolve(1).then(() => undefined) - } +function foo() { + return Promise.resolve(1).then(() => undefined); +} ``` ## Examples @@ -77,67 +77,69 @@ slug: Web/JavaScript/Reference/Statements/async_function ### Simple example ```js - var resolveAfter2Seconds = function() { - console.log("starting slow promise"); - return new Promise(resolve => { - setTimeout(function() { - resolve(20); - console.log("slow promise is done"); - }, 2000); - }); - }; - - var resolveAfter1Second = function() { - console.log("starting fast promise"); - return new Promise(resolve => { - setTimeout(function() { - resolve(10); - console.log("fast promise is done"); - }, 1000); - }); - }; - - var sequentialStart = async function() { - console.log('==SEQUENTIAL START=='); - - // If the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise. - const slow = await resolveAfter2Seconds(); - console.log(slow); - - const fast = await resolveAfter1Second(); - console.log(fast); - } - - var concurrentStart = async function() { - console.log('==CONCURRENT START with await=='); - const slow = resolveAfter2Seconds(); // starts timer immediately - const fast = resolveAfter1Second(); - - console.log(await slow); - console.log(await fast); // waits for slow to finish, even though fast is already done! - } - - var stillConcurrent = function() { - console.log('==CONCURRENT START with Promise.all=='); - Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => { - console.log(messages[0]); // slow - console.log(messages[1]); // fast - }); - } - - var parallel = function() { - console.log('==PARALLEL with Promise.then=='); - resolveAfter2Seconds().then((message)=>console.log(message)); - resolveAfter1Second().then((message)=>console.log(message)); - } - - sequentialStart(); // after 2 seconds, logs "slow", then after 1 more second, "fast" - // wait above to finish - setTimeout(concurrentStart, 4000); // after 2 seconds, logs "slow" and then "fast" - // wait again - setTimeout(stillConcurrent, 7000); // same as concurrentStart - // wait again - setTimeout(parallel, 10000); // trully parallel: after 1 second, logs "fast", then after 1 more second, "slow" +var resolveAfter2Seconds = function () { + console.log("starting slow promise"); + return new Promise((resolve) => { + setTimeout(function () { + resolve(20); + console.log("slow promise is done"); + }, 2000); + }); +}; + +var resolveAfter1Second = function () { + console.log("starting fast promise"); + return new Promise((resolve) => { + setTimeout(function () { + resolve(10); + console.log("fast promise is done"); + }, 1000); + }); +}; + +var sequentialStart = async function () { + console.log("==SEQUENTIAL START=="); + + // If the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise. + const slow = await resolveAfter2Seconds(); + console.log(slow); + + const fast = await resolveAfter1Second(); + console.log(fast); +}; + +var concurrentStart = async function () { + console.log("==CONCURRENT START with await=="); + const slow = resolveAfter2Seconds(); // starts timer immediately + const fast = resolveAfter1Second(); + + console.log(await slow); + console.log(await fast); // waits for slow to finish, even though fast is already done! +}; + +var stillConcurrent = function () { + console.log("==CONCURRENT START with Promise.all=="); + Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then( + (messages) => { + console.log(messages[0]); // slow + console.log(messages[1]); // fast + }, + ); +}; + +var parallel = function () { + console.log("==PARALLEL with Promise.then=="); + resolveAfter2Seconds().then((message) => console.log(message)); + resolveAfter1Second().then((message) => console.log(message)); +}; + +sequentialStart(); // after 2 seconds, logs "slow", then after 1 more second, "fast" +// wait above to finish +setTimeout(concurrentStart, 4000); // after 2 seconds, logs "slow" and then "fast" +// wait again +setTimeout(stillConcurrent, 7000); // same as concurrentStart +// wait again +setTimeout(parallel, 10000); // trully parallel: after 1 second, logs "fast", then after 1 more second, "slow" ``` > **Warning:** `await` 와 `Promise#then`을 혼동하지 마세요. `sequentialStart` 에서, 첫 번째 `await`는 2초의 대기 시간을 갖고, 다시 두 번째 `await`에서 1초의 대기 시간을 갖습니다. 두 번째 타이머는 첫 번째 타이머가 완료될 때 까지 생성되지 않습니다. `concurrentStart` 에서, 두 타이머 모두 생성 된 다음 `await` 합니다. 타이머가 동시에 실행되고 있지만, `await` 호출은 여전히 연속적 실행중이므로, 두 번째 `await` 는 첫 번째 호출이 끝날 때 까지 대기합니다. 이렇게하면 3초가 아니라, 가장 느린 타이머에 필요한 2초가 필요합니다. `stillConcurrent` 에서도 `Promise.all` 을 사용하여 같은 일이 발생합니다. 두 개 이상의 프러미스를 동시에 wait 하고 싶다면, `Promise#then`을 사용하여 예제와 같이 `parallel` 를 수행할 수 있습니다. @@ -150,10 +152,10 @@ slug: Web/JavaScript/Reference/Statements/async_function ```js function getProcessedData(url) { return downloadData(url) // returns a promise - .catch(e => { - return downloadFallbackData(url) // returns a promise + .catch((e) => { + return downloadFallbackData(url); // returns a promise }) - .then(v => { + .then((v) => { return processDataInWorker(v); // returns a promise }); } diff --git a/files/ko/web/javascript/reference/statements/block/index.md b/files/ko/web/javascript/reference/statements/block/index.md index 85c002f6ddd2fe..5f7155be4b628d 100644 --- a/files/ko/web/javascript/reference/statements/block/index.md +++ b/files/ko/web/javascript/reference/statements/block/index.md @@ -2,6 +2,7 @@ title: block slug: Web/JavaScript/Reference/Statements/block --- + {{jsSidebar("Statements")}} **블록문**(또는 다른 언어에서는 복합문)은 0개 이상의 구문을 묶을 때 사용합니다. @@ -16,7 +17,7 @@ slug: Web/JavaScript/Reference/Statements/block ```js { - StatementList + StatementList; } ``` @@ -24,7 +25,7 @@ slug: Web/JavaScript/Reference/Statements/block ```js LabelIdentifier: { - StatementList + StatementList; } ``` diff --git a/files/ko/web/javascript/reference/statements/break/index.md b/files/ko/web/javascript/reference/statements/break/index.md index 351e04476fdaa4..a7d7df64f4088d 100644 --- a/files/ko/web/javascript/reference/statements/break/index.md +++ b/files/ko/web/javascript/reference/statements/break/index.md @@ -46,11 +46,11 @@ function testBreak(x) { ```js outer_block: { inner_block: { - console.log('1'); + console.log("1"); break outer_block; // inner_block과 outer_block 둘다 빠져나옴 - console.log(':-('); // 건너뜀 + console.log(":-("); // 건너뜀 } - console.log('2'); // 건너뜀 + console.log("2"); // 건너뜀 } ``` diff --git a/files/ko/web/javascript/reference/statements/class/index.md b/files/ko/web/javascript/reference/statements/class/index.md index 93b2960e264639..beb4366a378c01 100644 --- a/files/ko/web/javascript/reference/statements/class/index.md +++ b/files/ko/web/javascript/reference/statements/class/index.md @@ -34,7 +34,7 @@ slug: Web/JavaScript/Reference/Statements/class ```js class Polygon { constructor(height, width) { - this.name = 'Polygon'; + this.name = "Polygon"; this.height = height; this.width = width; } @@ -43,7 +43,7 @@ class Polygon { class Square extends Polygon { constructor(length) { super(length, length); - this.name = 'Square'; + this.name = "Square"; } } ``` @@ -51,15 +51,15 @@ class Square extends Polygon { > **Warning:** 같은 클래스를 두 번 선언하려고 시도할 때 클래스 선언문으로 같은 클래스를 두 번 선언하면 오류가 발생합니다. ```js -class Foo {}; -class Foo {}; // Uncaught SyntaxError: Identifier 'Foo' has already been declared +class Foo {} +class Foo {} // Uncaught SyntaxError: Identifier 'Foo' has already been declared ``` 이전에 표현식으로 정의한 경우에도 오류가 발생합니다. ```js var Foo = class {}; -class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared +class Foo {} // Uncaught TypeError: Identifier 'Foo' has already been declared ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/statements/continue/index.md b/files/ko/web/javascript/reference/statements/continue/index.md index c0d54cdb99ef32..dc429722bf58fd 100644 --- a/files/ko/web/javascript/reference/statements/continue/index.md +++ b/files/ko/web/javascript/reference/statements/continue/index.md @@ -61,19 +61,18 @@ var i = 0; var j = 8; checkiandj: while (i < 4) { - console.log('i: ' + i); + console.log("i: " + i); i += 1; checkj: while (j > 4) { - console.log('j: ' + j); + console.log("j: " + j); j -= 1; - if ((j % 2) == 0) - continue checkj; - console.log(j + ' is odd.'); + if (j % 2 == 0) continue checkj; + console.log(j + " is odd."); } - console.log('i = ' + i); - console.log('j = ' + j); + console.log("i = " + i); + console.log("j = " + j); } ``` diff --git a/files/ko/web/javascript/reference/statements/debugger/index.md b/files/ko/web/javascript/reference/statements/debugger/index.md index fd49c579f0d9d3..636beafb353084 100644 --- a/files/ko/web/javascript/reference/statements/debugger/index.md +++ b/files/ko/web/javascript/reference/statements/debugger/index.md @@ -2,6 +2,7 @@ title: debugger slug: Web/JavaScript/Reference/Statements/debugger --- + {{jsSidebar("Statements")}} **`debugger` 문**은 중단점 설정 등 현재 사용할 수 있는 디버그 기능을 호출합니다. 사용할 수있는 디버깅 기능이 없으면 아무런 동작도 하지 않습니다. @@ -9,7 +10,7 @@ slug: Web/JavaScript/Reference/Statements/debugger ## 구문 ```js - debugger; +debugger; ``` ## 예제 @@ -18,14 +19,14 @@ slug: Web/JavaScript/Reference/Statements/debugger ```js function potentiallyBuggyCode() { - debugger; - // 버그가 있을 것으로 생각하는 코드를 분석하거나, 한 단계씩 진행해보거나... + debugger; + // 버그가 있을 것으로 생각하는 코드를 분석하거나, 한 단계씩 진행해보거나... } ``` 디버거가 활성화되면 디버거 문의 위치에서 실행이 일시중지됩니다. 스크립트 소스의 중단점과 비슷합니다. -[![Paused at a debugger statement.](screen_shot_2014-02-07_at_9.14.35_am.png)]() +[![Paused at a debugger statement.](screen_shot_2014-02-07_at_9.14.35_am.png)](screen_shot_2014-02-07_at_9.14.35_am.png) ## 명세서 diff --git a/files/ko/web/javascript/reference/statements/do...while/index.md b/files/ko/web/javascript/reference/statements/do...while/index.md index 20db80300ce33f..d202eaddcbc3ea 100644 --- a/files/ko/web/javascript/reference/statements/do...while/index.md +++ b/files/ko/web/javascript/reference/statements/do...while/index.md @@ -2,6 +2,7 @@ title: do...while slug: Web/JavaScript/Reference/Statements/do...while --- + {{jsSidebar("Statements")}} **`do...while` 문은** 테스트 조건이 거짓으로 평가될 때까지 지정된 구문을 실행하는 루프를 만듭니다. @@ -12,9 +13,9 @@ slug: Web/JavaScript/Reference/Statements/do...while ## 문법 ```js -do - statement -while (condition); +do { + statement; +} while (condition); ``` - `구문` @@ -30,13 +31,12 @@ while (condition); 예제에서 `do...while` 문은 적어도 한번 반복되고 i 변수가 5 보다 작을 때까지 실행됩니다. ```js -var result = ''; +var result = ""; var i = 0; do { - i += 1; - result += i + ' '; -} -while (i > 0 && i < 5); + i += 1; + result += i + " "; +} while (i > 0 && i < 5); // Despite i == 0 this will still loop as it starts off without the test console.log(result); diff --git a/files/ko/web/javascript/reference/statements/empty/index.md b/files/ko/web/javascript/reference/statements/empty/index.md index df52f877480173..114f7a203793f6 100644 --- a/files/ko/web/javascript/reference/statements/empty/index.md +++ b/files/ko/web/javascript/reference/statements/empty/index.md @@ -11,8 +11,8 @@ slug: Web/JavaScript/Reference/Statements/Empty ## 구문 -```js - ; +```js-nolint +; ``` ## 설명 @@ -27,15 +27,15 @@ empty statement은 JavaScript구문에 하나가 필요할 때 어떤 문도 실 var arr = [1, 2, 3]; // Assign all array values to 0 -for (i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ; +for (i = 0; i < arr.length; arr[i++] = 0 /* empty statement */); -console.log(arr) +console.log(arr); // [0, 0, 0] ``` **참고:** 정상적인 세미 콜론을 구분하는 것이 그리 쉽지 않기 때문에, empty statement를 사용할 때는 의도적으로 주석을 달아주는것이 좋습니다. 다음 예 에서는 의도한대로 코드가 동작하지 않을것입니다. 아마도 killTheUniverse()를 if문 안에서 실행하고자 했던것 같습니다. -```js +```js-nolint example-bad if (condition); // Caution, this "if" does nothing! killTheUniverse() // So this always gets executed!!! ``` @@ -43,16 +43,11 @@ if (condition); // Caution, this "if" does nothing! 다른 예 : 중괄호 ({})가없는 [`if...else`](/ko/docs/Web/JavaScript/Reference/Statements/if...else) 문에서 `three`가 `true`이면 아무 일도 일어나지 않고 `four`를 건너 뛰고 else case의 launchRocket() 함수도 실행되지 않습니다. ```js -if (one) - doOne(); -else if (two) - doTwo(); -else if (three) - ; // nothing here -else if (four) - doFour(); -else - launchRocket(); +if (one) doOne(); +else if (two) doTwo(); +else if (three); // nothing here +else if (four) doFour(); +else launchRocket(); ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/statements/export/index.md b/files/ko/web/javascript/reference/statements/export/index.md index 35915719b51c93..badc390a6db57e 100644 --- a/files/ko/web/javascript/reference/statements/export/index.md +++ b/files/ko/web/javascript/reference/statements/export/index.md @@ -2,6 +2,7 @@ title: export slug: Web/JavaScript/Reference/Statements/export --- + {{jsSidebar("Statements")}} **`export`** 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 {{jsxref("Statements/import", "import")}} 문으로 가져가 사용할 수 있습니다. @@ -76,21 +77,20 @@ slug: Web/JavaScript/Reference/Statements/export ```js // test.js -let k; +let k; export default k = 12; ``` ```js // 임의의 다른 파일 -import m from './test'; // k가 기본 내보내기이므로, 가져오는 이름으로 k 대신 m을 사용해도 문제 없음 -console.log(m); // 12 기록 +import m from "./test"; // k가 기본 내보내기이므로, 가져오는 이름으로 k 대신 m을 사용해도 문제 없음 +console.log(m); // 12 기록 ``` 식별자 충돌을 피하기 위해 유명 내보내기 중 이름을 바꿔줄 수도 있습니다. ```js -export { myFunction as function1, - myVariable as variable }; +export { myFunction as function1, myVariable as variable }; ``` ### 다시 내보내기 / 조합 @@ -98,7 +98,7 @@ export { myFunction as function1, 부모 모듈이 자식 모듈을 가져와서 다시 내보낼 수도 있습니다. 즉, 여러 개의 모듈을 모아놓을 하나의 모듈을 만들 수 있습니다. ```js -export foo from 'bar.js'; +export foo from "bar.js"; ``` 위 구문은 아래와 동일합니다. @@ -121,14 +121,14 @@ function cube(x) { } const foo = Math.PI + Math.SQRT2; var graph = { - options: { - color:'white', - thickness:'2px' - }, - draw: function() { - console.log('From graph draw function'); - } -} + options: { + color: "white", + thickness: "2px", + }, + draw: function () { + console.log("From graph draw function"); + }, +}; export { cube, foo, graph }; ``` @@ -143,14 +143,14 @@ export { cube, foo, graph }; // // script demo.js -import { cube, foo, graph } from 'my-module'; +import { cube, foo, graph } from "my-module"; graph.options = { - color:'blue', - thickness:'3px' + color: "blue", + thickness: "3px", }; graph.draw(); console.log(cube(3)); // 27 -console.log(foo); // 4.555806215962888 +console.log(foo); // 4.555806215962888 ``` ### 기본 내보내기 사용 @@ -167,7 +167,7 @@ export default function cube(x) { 그런 다음, 다른 스크립트에서 가져오는건 간단합니다: ```js -import cube from './my-module.js'; +import cube from "./my-module.js"; console.log(cube(3)); // 27 ``` diff --git a/files/ko/web/javascript/reference/statements/for-await...of/index.md b/files/ko/web/javascript/reference/statements/for-await...of/index.md index fe27de29a60d55..e353a4f6e6aff0 100644 --- a/files/ko/web/javascript/reference/statements/for-await...of/index.md +++ b/files/ko/web/javascript/reference/statements/for-await...of/index.md @@ -2,6 +2,7 @@ title: for await...of slug: Web/JavaScript/Reference/Statements/for-await...of --- + {{jsSidebar("Statements")}} **`for await...of` 구문**은 보통 비동기에 대응하는 열거자를 나열할 때 쓰이지만, {{jsxref("String")}}, {{jsxref("Array")}}, `Array` 같은 객체 (e.g., {{jsxref("Functions/arguments", "arguments")}} or [`NodeList`](/ko/docs/Web/API/NodeList)), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}} 같은 동기적으로 열거 가능한 객체 또한 가능하며, 사용자가 직접 정의한 동기 또는 비동기 객체도 나열할 수 있도록 해준다. 일반적인 **`for ...of`** 문과 마찬가지로 열거자 심볼이 정의한 속성을 실행하게 되어 열거한 값을 변수로 받아 처리한다. @@ -9,9 +10,9 @@ slug: Web/JavaScript/Reference/Statements/for-await...of ## 구문 ```js - for await (variable of iterable) { - statement - } +for await (variable of iterable) { + statement; +} ``` - `variable` @@ -34,15 +35,15 @@ const asyncIterable = { } return Promise.resolve({ done: true }); - } + }, }; - } + }, }; -(async function() { - for await (let num of asyncIterable) { - console.log(num); - } +(async function () { + for await (let num of asyncIterable) { + console.log(num); + } })(); // 0 @@ -62,7 +63,7 @@ async function* asyncGenerator() { } } -(async function() { +(async function () { for await (let num of asyncGenerator()) { console.log(num); } @@ -106,7 +107,7 @@ async function getResponseSize(url) { // 예상 출력: "응답 크기: 1071472 바이트" return responseSize; } -getResponseSize('https://jsonplaceholder.typicode.com/photos'); +getResponseSize("https://jsonplaceholder.typicode.com/photos"); ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/statements/for...in/index.md b/files/ko/web/javascript/reference/statements/for...in/index.md index 3434f2c9dc8a9e..1910108473acf6 100644 --- a/files/ko/web/javascript/reference/statements/for...in/index.md +++ b/files/ko/web/javascript/reference/statements/for...in/index.md @@ -13,7 +13,7 @@ slug: Web/JavaScript/Reference/Statements/for...in ```js for (const variable in object) { - statement + statement; } ``` @@ -28,7 +28,7 @@ for (const variable in object) { `for...in`문은 열거 가능한 non-Symbol 속성에 대해서만 반복합니다. - `Array`나 `Object` 등 내장 constructor를 통해 만들어진 객체는 {{jsxref("String")}}의 {{jsxref("String.indexOf", "indexOf()")}}, {{jsxref("Object")}}의 {{jsxref("Object.toString", "toString()")}}와 같이 `Object.prototype`, `String.prototype` 로부터 열거가 가능하지 않은 속성들을 상속해왔습니다. `for...in`문은 객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들에 대해 반복할 것입니다. (더 가까운 프로토타입의 속성들이 프로토타입 체인 객체로부터 더 멀리 떨어진 프로토 타입의 속성보다 더 우선합니다.) +`Array`나 `Object` 등 내장 constructor를 통해 만들어진 객체는 {{jsxref("String")}}의 {{jsxref("String.indexOf", "indexOf()")}}, {{jsxref("Object")}}의 {{jsxref("Object.toString", "toString()")}}와 같이 `Object.prototype`, `String.prototype` 로부터 열거가 가능하지 않은 속성들을 상속해왔습니다. `for...in`문은 객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들에 대해 반복할 것입니다. (더 가까운 프로토타입의 속성들이 프로토타입 체인 객체로부터 더 멀리 떨어진 프로토 타입의 속성보다 더 우선합니다.) ### 속성의 삭제, 추가, 수정 @@ -63,7 +63,7 @@ for (const variable in object) { 아래의 예는 열거 가능한 non-Symbol속성들을 반복해서 속성의 이름과 그 값을 기록합니다. ```js -var obj = {a: 1, b: 2, c: 3}; +var obj = { a: 1, b: 2, c: 3 }; for (const prop in obj) { console.log(`obj.${prop} = ${obj[prop]}`); @@ -80,7 +80,7 @@ for (const prop in obj) { 아래는 {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} 를 사용하는 예를 보여주고 있습니다. 상속된 속성은 표시되지 않습니다. ```js -var triangle = {a:1, b:2, c:3}; +var triangle = { a: 1, b: 2, c: 3 }; function ColoredTriangle() { this.color = "red"; @@ -92,7 +92,7 @@ function show_own_props(obj, objName) { var result = ""; for (var prop in obj) { - if( obj.hasOwnProperty( prop ) ) { + if (obj.hasOwnProperty(prop)) { result += objName + "." + prop + " = " + obj[prop] + "\n"; } } diff --git a/files/ko/web/javascript/reference/statements/for...of/index.md b/files/ko/web/javascript/reference/statements/for...of/index.md index f25a4787c44c89..29503004b5ca65 100644 --- a/files/ko/web/javascript/reference/statements/for...of/index.md +++ b/files/ko/web/javascript/reference/statements/for...of/index.md @@ -12,9 +12,9 @@ slug: Web/JavaScript/Reference/Statements/for...of ## 구문 ```js - for (variable of iterable) { - statement - } +for (variable of iterable) { + statement; +} ``` - `variable` @@ -78,7 +78,11 @@ for (let value of iterable) { ### {{jsxref("Map")}}에 대해 반복 ```js -let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); +let iterable = new Map([ + ["a", 1], + ["b", 2], + ["c", 3], +]); for (let entry of iterable) { console.log(entry); @@ -127,7 +131,8 @@ for (let paragraph of articleParagraphs) { [생성기](/ko/docs/Web/JavaScript/Reference/Statements/function*)에 대해서도 반복할 수 있습니다: ```js -function* fibonacci() { // 생성기 함수 +function* fibonacci() { + // 생성기 함수 let [prev, curr] = [1, 1]; while (true) { [prev, curr] = [curr, prev + curr]; @@ -158,9 +163,9 @@ var iterable = { return { value: this.i++, done: false }; } return { value: undefined, done: true }; - } + }, }; - } + }, }; for (var value of iterable) { diff --git a/files/ko/web/javascript/reference/statements/for/index.md b/files/ko/web/javascript/reference/statements/for/index.md index 5a697c14f9f96a..171c59b33cf692 100644 --- a/files/ko/web/javascript/reference/statements/for/index.md +++ b/files/ko/web/javascript/reference/statements/for/index.md @@ -11,9 +11,9 @@ slug: Web/JavaScript/Reference/Statements/for ## 구문 -```js - for ([initialization]; [condition]; [final-expression]) - statement +```js-nolint +for ([initialization]; [condition]; [final-expression]) + statement ``` - `initialization` @@ -37,8 +37,8 @@ slug: Web/JavaScript/Reference/Statements/for ```js for (var i = 0; i < 9; i++) { - console.log(i); - // 기타 등등 + console.log(i); + // 기타 등등 } ``` @@ -51,18 +51,18 @@ for (var i = 0; i < 9; i++) { ```js var i = 0; for (; i < 9; i++) { - console.log(i); - // 기타 등등 + console.log(i); + // 기타 등등 } ``` `initialization` 블럭처럼 `condition` 블럭도 선택 사항입니다. 다만 이 경우, 반복문 본문에 무한 반복을 탈출할 수 있는 장치를 추가해야 합니다. ```js -for (var i = 0;; i++) { - console.log(i); - if (i > 3) break; - // 기타 등등 +for (var i = 0; ; i++) { + console.log(i); + if (i > 3) break; + // 기타 등등 } ``` @@ -83,26 +83,37 @@ for (;;) { 다음 `for` 반복 사이클은 노드의 위치 오프셋을 `final-expression`에서 계산해 문이나 블럭문이 필요하지 않으므로 세미콜론을 사용합니다. ```js - function showOffsetPos(sId) { - var nLeft = 0, nTop = 0; - - for ( - var oItNode = document.getElementById(sId); /* initialization */ - oItNode; /* condition */ - nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */ - ); /* semicolon */ - - console.log('Offset position of \'' + sId + '\' element:\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;'); - } +function showOffsetPos(sId) { + var nLeft = 0, + nTop = 0; + + for ( + var oItNode = document.getElementById(sId) /* initialization */; + oItNode /* condition */; + nLeft += oItNode.offsetLeft, + nTop += oItNode.offsetTop, + oItNode = oItNode.offsetParent /* final-expression */ + ); /* semicolon */ + + console.log( + "Offset position of '" + + sId + + "' element:\n left: " + + nLeft + + "px;\n top: " + + nTop + + "px;", + ); +} - /* Example call: */ +/* Example call: */ - showOffsetPos('content'); +showOffsetPos("content"); - // Output: - // "Offset position of "content" element: - // left: 0px; - // top: 153px;" +// Output: +// "Offset position of "content" element: +// left: 0px; +// top: 153px;" ``` > **참고:** 여기서 쓰인 세미콜론은, JavaScript가 **필수로 요구하는 몇 안되는 세미콜론**입니다. 물론 세미콜론 없이는 반복 사이클 선언의 바로 다음 줄을 반복 본문으로 인식합니다. diff --git a/files/ko/web/javascript/reference/statements/function/index.md b/files/ko/web/javascript/reference/statements/function/index.md index f674c494a7f965..2422b1e01e9756 100644 --- a/files/ko/web/javascript/reference/statements/function/index.md +++ b/files/ko/web/javascript/reference/statements/function/index.md @@ -2,6 +2,7 @@ title: 함수 선언 slug: Web/JavaScript/Reference/Statements/function --- + {{jsSidebar("Statements")}} **함수 선언**(**function declaration**)은 지정된 매개변수(parameter)를 갖는 함수를 정의합니다. @@ -37,9 +38,15 @@ slug: Web/JavaScript/Reference/Statements/function ```js var hoisted = "foo" in this; -console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`); +console.log( + `'foo' name ${ + hoisted ? "is" : "is not" + } hoisted. typeof foo is ${typeof foo}`, +); if (false) { - function foo(){ return 1; } + function foo() { + return 1; + } } // In Chrome: @@ -59,9 +66,15 @@ if (false) { ```js var hoisted = "foo" in this; -console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`); +console.log( + `'foo' name ${ + hoisted ? "is" : "is not" + } hoisted. typeof foo is ${typeof foo}`, +); if (true) { - function foo(){ return 1; } + function foo() { + return 1; + } } // In Chrome: @@ -94,8 +107,8 @@ function hoisted() { ```js notHoisted(); // TypeError: notHoisted is not a function -var notHoisted = function() { - console.log("bar"); +var notHoisted = function () { + console.log("bar"); }; ``` @@ -107,7 +120,7 @@ var notHoisted = function() { ```js function calc_sales(units_a, units_b, units_c) { - return units_a*79 + units_b * 129 + units_c * 699; + return units_a * 79 + units_b * 129 + units_c * 699; } ``` diff --git a/files/ko/web/javascript/reference/statements/function_star_/index.md b/files/ko/web/javascript/reference/statements/function_star_/index.md index 88e180a43c5760..27beadc92183e5 100644 --- a/files/ko/web/javascript/reference/statements/function_star_/index.md +++ b/files/ko/web/javascript/reference/statements/function_star_/index.md @@ -2,6 +2,7 @@ title: function* slug: Web/JavaScript/Reference/Statements/function* --- + {{jsSidebar("Statements")}} **`function*`** 선언 (끝에 별표가 있는 `function` keyword) 은 _generator function_ 을 정의하는데, 이 함수는 {{jsxref("Global_Objects/Generator","Generator")}} 객체를 반환합니다. @@ -38,10 +39,9 @@ Generator 함수는 호출되어도 즉시 실행되지 않고, 대신 함수를 ### 간단한 예제 ```js -function* idMaker(){ +function* idMaker() { var index = 0; - while(index < 3) - yield index++; + while (index < 3) yield index++; } var gen = idMaker(); @@ -62,7 +62,7 @@ function* anotherGenerator(i) { yield i + 3; } -function* generator(i){ +function* generator(i) { yield i; yield* anotherGenerator(i); yield i + 10; @@ -91,16 +91,16 @@ var gen = logGenerator(); // the first call of next executes from the start of the function // until the first yield statement gen.next(); -gen.next('pretzel'); // pretzel -gen.next('california'); // california -gen.next('mayonnaise'); // mayonnaise +gen.next("pretzel"); // pretzel +gen.next("california"); // california +gen.next("mayonnaise"); // mayonnaise ``` ### Generator 는 생성자로서 사용될 수 없다 ```js - function* f() {} - var obj = new f; // throws "TypeError: f is not a constructor" +function* f() {} +var obj = new f(); // throws "TypeError: f is not a constructor" ``` ## 명세서 diff --git a/files/ko/web/javascript/reference/statements/if...else/index.md b/files/ko/web/javascript/reference/statements/if...else/index.md index 5cb5b27991c5a7..67920b342b7c69 100644 --- a/files/ko/web/javascript/reference/statements/if...else/index.md +++ b/files/ko/web/javascript/reference/statements/if...else/index.md @@ -61,11 +61,11 @@ slug: Web/JavaScript/Reference/Statements/if...else 있는 코드안에서 사용하면 더욱 좋습니다. ```js - if (조건) { - 명령문들1 - } else { - 명령문들2 - } +if (조건) { + 명령문들1; +} else { + 명령문들2; +} ``` 원시 불리언 값인 true (참) 과 false (거짓) 을 불리언 객체의 truthiness (참으로 보이는 것) 과 falsiness (거짓으로 보이는 것)으로 혼동하면 안된다. false, undefined, null, 0, NaN, 또는 빈 스트링 ("") 이 아닌 모든 값, 그리고 false 값인 불리언 객체를 포함하는 모든 객체는 조건으로 사용될 때 [truthy](/ko/docs/Glossary/Truthy) 로 간주된다. 예: @@ -81,10 +81,10 @@ if (b) // 이 조건은 참으로 보이는 것 (truthy) 이다. ```js if (cipher_char === from_char) { - result = result + to_char; - x++; + result = result + to_char; + x++; } else { - result = result + clear_char; + result = result + clear_char; } ``` @@ -94,11 +94,8 @@ if (cipher_char === from_char) { ```js if (x > 5) { - } else if (x > 50) { - } else { - } ``` @@ -107,9 +104,9 @@ if (x > 5) { 조건식을 단순하게 지정하는 것은 좋지 않습니다. 왜냐하면, 코드를 흘깃 보면 값을 지정한것을 평등한것으로 혼동할 수 있기 때문입니다. 예를들어, 다음코드를 사용하지 마세요: -```js example-bad +```js-nolint example-bad if (x = y) { - /* do the right thing */ + /* do the right thing */ } ``` @@ -117,7 +114,7 @@ if (x = y) { ```js example-good if ((x = y)) { - /* do the right thing */ + /* do the right thing */ } ``` diff --git a/files/ko/web/javascript/reference/statements/import/index.md b/files/ko/web/javascript/reference/statements/import/index.md index ffe6899e0acee6..8b61e32211e73e 100644 --- a/files/ko/web/javascript/reference/statements/import/index.md +++ b/files/ko/web/javascript/reference/statements/import/index.md @@ -55,25 +55,28 @@ import * as myModule from "my-module.js"; 모듈에서 하나의 멤버만 가져옵니다. 현재 범위 내에 `myMember` 이 들어갑니다. ```js -import {myMember} from "my-module.js"; +import { myMember } from "my-module.js"; ``` 모듈에서 여러 멤버들을 가져옵니다. 현재 범위 내에 `foo` 와 `bar` 이 들어갑니다. ```js -import {foo, bar} from "my-module.js"; +import { foo, bar } from "my-module.js"; ``` 멤버를 가져올 때 좀 더 편리한 별명을 지정해줍니다. 현재 범위 내에 `shortName` 이 들어갑니다. ```js -import {reallyReallyLongModuleMemberName as shortName} from "my-module.js"; +import { reallyReallyLongModuleMemberName as shortName } from "my-module.js"; ``` 모듈에서 여러 멤버들을 편리한 별명을 지정하며 가져옵니다. ```js - import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module.js"; +import { + reallyReallyLongModuleMemberName as shortName, + anotherLongModuleName as short, +} from "my-module.js"; ``` 어떠한 바인딩 없이 모듈 전체의 사이드 이펙트만 가져옵니다. @@ -102,7 +105,7 @@ import myDefault, * as myModule from "my-module.js"; 또는 ```js -import myDefault, {foo, bar} from "my-module.js"; +import myDefault, { foo, bar } from "my-module.js"; // specific, named imports ``` @@ -115,19 +118,19 @@ AJAX JSON 리퀘스트 처리를 돕는 보조 파일을 가져옵니다. function getJSON(url, callback) { let xhr = new XMLHttpRequest(); xhr.onload = function () { - callback(this.responseText) + callback(this.responseText); }; xhr.open("GET", url, true); xhr.send(); } export function getUsefulContents(url, callback) { - getJSON(url, data => callback(JSON.parse(data))); + getJSON(url, (data) => callback(JSON.parse(data))); } // --main.js-- import { getUsefulContents } from "file.js"; -getUsefulContents("http://www.example.com", data => { +getUsefulContents("http://www.example.com", (data) => { doSomethingUseful(data); }); ``` diff --git a/files/ko/web/javascript/reference/statements/index.md b/files/ko/web/javascript/reference/statements/index.md index 3ea63a660c2433..57f8d8f70ead59 100644 --- a/files/ko/web/javascript/reference/statements/index.md +++ b/files/ko/web/javascript/reference/statements/index.md @@ -74,6 +74,7 @@ JavaScript 응용 프로그램은 적절한 구문을 갖는 문으로 구성됩 - {{jsxref("Statements/import", "import")}} - : 외부 모듈, 다른 스크립트에서 내보낸 함수를 가져오는데 사용됩니다. - {{jsxref("Statements/label", "label")}} + - : `break` 또는 `continue` 문을 사용하여 참조할 수 있는 식별자 있는 문을 제공합니다. - {{jsxref("Statements/with", "with")}} {{deprecated_inline}} diff --git a/files/ko/web/javascript/reference/statements/label/index.md b/files/ko/web/javascript/reference/statements/label/index.md index b5e6396f9b835b..48e5d3463f7410 100644 --- a/files/ko/web/javascript/reference/statements/label/index.md +++ b/files/ko/web/javascript/reference/statements/label/index.md @@ -11,9 +11,9 @@ slug: Web/JavaScript/Reference/Statements/label ## 문법 -```js - label : - statement +```js-nolint +label: + statement; ``` - `label` @@ -36,15 +36,15 @@ slug: Web/JavaScript/Reference/Statements/label ```js var i, j; -loop1: -for (i = 0; i < 3; i++) { //첫번째 for문은 "loop1" 레이블을 붙였다. - loop2: - for (j = 0; j < 3; j++) { //두번째 for문은 "loop2" 레이블을 붙였다. - if (i === 1 && j === 1) { - continue loop1; - } - console.log('i = ' + i + ', j = ' + j); - } +loop1: for (i = 0; i < 3; i++) { + //첫번째 for문은 "loop1" 레이블을 붙였다. + loop2: for (j = 0; j < 3; j++) { + //두번째 for문은 "loop2" 레이블을 붙였다. + if (i === 1 && j === 1) { + continue loop1; + } + console.log("i = " + i + ", j = " + j); + } } // 출력 결과: @@ -66,8 +66,7 @@ items, tests 배열을 보면 이 예제는 tests를 통과하는 items의 수 var itemsPassed = 0; var i, j; -top: -for (i = 0; i < items.length; i++) { +top: for (i = 0; i < items.length; i++) { for (j = 0; j < tests.length; j++) { if (!tests[j].pass(items[i])) { continue top; @@ -83,15 +82,15 @@ for (i = 0; i < items.length; i++) { ```js var i, j; -loop1: -for (i = 0; i < 3; i++) { //The first for statement is labeled "loop1" - loop2: - for (j = 0; j < 3; j++) { //The second for statement is labeled "loop2" - if (i === 1 && j === 1) { - break loop1; - } - console.log('i = ' + i + ', j = ' + j); - } +loop1: for (i = 0; i < 3; i++) { + //The first for statement is labeled "loop1" + loop2: for (j = 0; j < 3; j++) { + //The second for statement is labeled "loop2" + if (i === 1 && j === 1) { + break loop1; + } + console.log("i = " + i + ", j = " + j); + } } // Output is: @@ -110,8 +109,7 @@ items, tests 배열을 보면, 다음 예제는 items가 tests를 모두 통과 var allPass = true; var i, j; -top: -for (i = 0; items.length; i++) +top: for (i = 0; items.length; i++) for (j = 0; j < tests.length; i++) if (!tests[j].pass(items[i])) { allPass = false; @@ -125,11 +123,11 @@ for (i = 0; items.length; i++) ```js foo: { - console.log('face'); + console.log("face"); break foo; - console.log('this will not be executed'); + console.log("this will not be executed"); } -console.log('swap'); +console.log("swap"); // 로그는 이렇게 출력된다: @@ -148,7 +146,7 @@ L: function F() {} [strict mode](/ko/docs/Web/JavaScript/Reference/Strict_mode) 에서는 {{jsxref("SyntaxError")}}를 발생시킨다. ```js -'use strict'; +"use strict"; L: function F() {} // SyntaxError: functions cannot be labelled ``` diff --git a/files/ko/web/javascript/reference/statements/let/index.md b/files/ko/web/javascript/reference/statements/let/index.md index 0e90f76ec3ea73..6a2ea9c23ae53c 100644 --- a/files/ko/web/javascript/reference/statements/let/index.md +++ b/files/ko/web/javascript/reference/statements/let/index.md @@ -2,6 +2,7 @@ title: let slug: Web/JavaScript/Reference/Statements/let --- + {{jsSidebar("Statements")}} **`let`** 명령문은 블록 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있습니다. @@ -68,8 +69,8 @@ function letTest() { 프로그램 최상위에서 사용할 경우 `var`는 전역 객체에 속성을 추가하지만 `let`은 추가하지 않습니다. ```js -var x = 'global'; -let y = 'global'; +var x = "global"; +let y = "global"; console.log(this.x); // "global" console.log(this.y); // undefined ``` @@ -85,19 +86,19 @@ var Thing; let privateScope = new WeakMap(); let counter = 0; - Thing = function() { - this.someProperty = 'foo'; + Thing = function () { + this.someProperty = "foo"; privateScope.set(this, { hidden: ++counter, }); }; - Thing.prototype.showPublic = function() { + Thing.prototype.showPublic = function () { return this.someProperty; }; - Thing.prototype.showPrivate = function() { + Thing.prototype.showPrivate = function () { return privateScope.get(this).hidden; }; } @@ -134,7 +135,7 @@ if (x) { ```js example-bad let x = 1; -switch(x) { +switch (x) { case 0: let foo; break; @@ -150,7 +151,7 @@ switch(x) { ```js let x = 1; -switch(x) { +switch (x) { case 0: { let foo; break; @@ -183,13 +184,13 @@ function do_something() { ```js { - // TDZ가 스코프 맨 위에서부터 시작 - const func = () => console.log(letVar); // OK + // TDZ가 스코프 맨 위에서부터 시작 + const func = () => console.log(letVar); // OK - // TDZ 안에서 letVar에 접근하면 ReferenceError + // TDZ 안에서 letVar에 접근하면 ReferenceError - let letVar = 3; // letVar의 TDZ 종료 - func(); // TDZ 밖에서 호출함 + let letVar = 3; // letVar의 TDZ 종료 + func(); // TDZ 밖에서 호출함 } ``` @@ -213,11 +214,11 @@ console.log(typeof undeclaredVariable); // undefined 출력 아래 코드는 주석으로 표기한 지점에서 `ReferenceError`가 발생합니다. ```js example-bad -function test(){ - var foo = 33; - if(foo) { - let foo = (foo + 55); // ReferenceError - } +function test() { + var foo = 33; + if (foo) { + let foo = foo + 55; // ReferenceError + } } test(); ``` @@ -231,12 +232,13 @@ function go(n) { // 이 n은 매개변수 n console.log(n); // Object {a: [1,2,3]} - for (let n of n.a) { // ReferenceError + for (let n of n.a) { + // ReferenceError console.log(n); } } -go({a: [1, 2, 3]}); +go({ a: [1, 2, 3] }); ``` ### 기타 예제 @@ -251,8 +253,8 @@ if (a === 1) { var a = 11; // 전역 변수 let b = 22; // if 블록 변수 - console.log(a); // 11 - console.log(b); // 22 + console.log(a); // 11 + console.log(b); // 22 } console.log(a); // 11 diff --git a/files/ko/web/javascript/reference/statements/return/index.md b/files/ko/web/javascript/reference/statements/return/index.md index 57f3ed428bab5c..c06fa0f21cee39 100644 --- a/files/ko/web/javascript/reference/statements/return/index.md +++ b/files/ko/web/javascript/reference/statements/return/index.md @@ -2,6 +2,7 @@ title: return slug: Web/JavaScript/Reference/Statements/return --- + {{jsSidebar("Statements")}} **`return` 명령문**은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환합니다. @@ -11,7 +12,7 @@ slug: Web/JavaScript/Reference/Statements/return ## 구문 ```js - return [[expression]]; +return [[expression]]; ``` - `expression` @@ -23,7 +24,7 @@ slug: Web/JavaScript/Reference/Statements/return ```js function square(x) { - return x * x; + return x * x; } var demo = square(3); // demo는 9 @@ -45,7 +46,7 @@ return x + y / 3; `return` 명령문은 [자동 세미콜론 삽입(ASI)](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion)의 영향을 받습니다. `return` 키워드와 표현식 사이에는 줄바꿈 문자가 올 수 없습니다. -```js +```js-nolint example-bad return a + b; ``` @@ -61,10 +62,8 @@ a + b; 문제를 해결하려면 괄호를 사용해 ASI를 방지해야 합니다. -```js -return ( - a + b -); +```js example-good +return a + b; ``` ## 예제 @@ -75,14 +74,15 @@ return ( ```js function counter() { - for (var count = 1; ; count++) { // 무한 반복 + for (var count = 1; ; count++) { + // 무한 반복 console.log(count + "A"); // 5까지 - if (count === 5) { - return; - } - console.log(count + "B"); // 4까지 + if (count === 5) { + return; } - console.log(count + "C"); // 절대 나타나지 않음 + console.log(count + "B"); // 4까지 + } + console.log(count + "C"); // 절대 나타나지 않음 } counter(); @@ -105,7 +105,9 @@ counter(); ```js function magic(x) { - return function calc(x) { return x * 42 }; + return function calc(x) { + return x * 42; + }; } var answer = magic(); diff --git a/files/ko/web/javascript/reference/statements/switch/index.md b/files/ko/web/javascript/reference/statements/switch/index.md index 69bff95197122e..fc100bf2e14963 100644 --- a/files/ko/web/javascript/reference/statements/switch/index.md +++ b/files/ko/web/javascript/reference/statements/switch/index.md @@ -57,24 +57,24 @@ In the following example, if `expr` evaluates to "Bananas", the program matches ```js switch (expr) { - case 'Oranges': - console.log('Oranges are $0.59 a pound.'); + case "Oranges": + console.log("Oranges are $0.59 a pound."); break; - case 'Apples': - console.log('Apples are $0.32 a pound.'); + case "Apples": + console.log("Apples are $0.32 a pound."); break; - case 'Bananas': - console.log('Bananas are $0.48 a pound.'); + case "Bananas": + console.log("Bananas are $0.48 a pound."); break; - case 'Cherries': - console.log('Cherries are $3.00 a pound.'); + case "Cherries": + console.log("Cherries are $3.00 a pound."); break; - case 'Mangoes': - case 'Papayas': - console.log('Mangoes and papayas are $2.79 a pound.'); + case "Mangoes": + case "Papayas": + console.log("Mangoes and papayas are $2.79 a pound."); break; default: - console.log('Sorry, we are out of ' + expr + '.'); + console.log("Sorry, we are out of " + expr + "."); } console.log("Is there anything else you'd like?"); @@ -88,11 +88,11 @@ If you forget a break then the script will run from the case where the criterion var foo = 0; switch (foo) { case -1: - console.log('negative 1'); + console.log("negative 1"); break; case 0: // foo is 0 so criteria met here so this block will run console.log(0); - // NOTE: the forgotten break would have been here + // NOTE: the forgotten break would have been here case 1: // no break statement in 'case 0:' so this case will run as well console.log(1); break; // it encounters this break so will not continue into 'case 2:' @@ -100,7 +100,7 @@ switch (foo) { console.log(2); break; default: - console.log('default'); + console.log("default"); } ``` @@ -115,10 +115,10 @@ switch (foo) { console.log(2); break; // it encounters this break so will not continue into 'default:' default: - console.log('default') - // fall-through + console.log("default"); + // fall-through case 1: - console.log('1'); + console.log("1"); } ``` @@ -137,17 +137,17 @@ This method takes advantage of the fact that if there is no break below a case s This is an example of a single operation sequential switch statement, where four different values perform exactly the same. ```js -var Animal = 'Giraffe'; +var Animal = "Giraffe"; switch (Animal) { - case 'Cow': - case 'Giraffe': - case 'Dog': - case 'Pig': - console.log('This animal will go on Noah\'s Ark.'); + case "Cow": + case "Giraffe": + case "Dog": + case "Pig": + console.log("This animal will go on Noah's Ark."); break; - case 'Dinosaur': + case "Dinosaur": default: - console.log('This animal will not.'); + console.log("This animal will not."); } ``` @@ -157,27 +157,27 @@ This is an example of a multiple-operation sequential switch statement, where, d ```js var foo = 1; -var output = 'Output: '; +var output = "Output: "; switch (foo) { case 0: - output += 'So '; + output += "So "; case 1: - output += 'What '; - output += 'Is '; + output += "What "; + output += "Is "; case 2: - output += 'Your '; + output += "Your "; case 3: - output += 'Name'; + output += "Name"; case 4: - output += '?'; + output += "?"; console.log(output); break; case 5: - output += '!'; + output += "!"; console.log(output); break; default: - console.log('Please pick a number from 0 to 5!'); + console.log("Please pick a number from 0 to 5!"); } ``` @@ -200,18 +200,18 @@ With ECMAScript 2015 (ES6) support made available in most modern browsers, there Take a look at this example: ```js -const action = 'say_hello'; +const action = "say_hello"; switch (action) { - case 'say_hello': - let message = 'hello'; + case "say_hello": + let message = "hello"; console.log(message); break; - case 'say_hi': - let message = 'hi'; + case "say_hi": + let message = "hi"; console.log(message); break; default: - console.log('Empty action received.'); + console.log("Empty action received."); break; } ``` @@ -223,20 +223,23 @@ This is because the first `let message = 'hello';` conflicts with second let sta We can easily fix this by wrapping our case statements with brackets: ```js -const action = 'say_hello'; +const action = "say_hello"; switch (action) { - case 'say_hello': { // added brackets - let message = 'hello'; + case "say_hello": { + // added brackets + let message = "hello"; console.log(message); break; } // added brackets - case 'say_hi': { // added brackets - let message = 'hi'; + case "say_hi": { + // added brackets + let message = "hi"; console.log(message); break; } // added brackets - default: { // added brackets - console.log('Empty action received.'); + default: { + // added brackets + console.log("Empty action received."); break; } // added brackets } diff --git a/files/ko/web/javascript/reference/statements/throw/index.md b/files/ko/web/javascript/reference/statements/throw/index.md index badda6492acc23..6cf120dfbfc263 100644 --- a/files/ko/web/javascript/reference/statements/throw/index.md +++ b/files/ko/web/javascript/reference/statements/throw/index.md @@ -26,9 +26,9 @@ throw expression; 다음 각각은 예외를 발생시킵니다: ```js -throw 'Error2'; // 문자열 값을 가지는 예외가 발생합니다. -throw 42; // 42 값을 가진 예외가 발생합니다. -throw true; // true 값을 가지는 예외가 발생합니다. +throw "Error2"; // 문자열 값을 가지는 예외가 발생합니다. +throw 42; // 42 값을 가진 예외가 발생합니다. +throw true; // true 값을 가지는 예외가 발생합니다. ``` 또한 `throw` 문은 [자동 세미콜론 삽입](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion) (ASI)에 의해 영향을 받으며 `throw` 키워드와 표현식 사이에 줄 종결자는 허용되지 않으므로 주의해야합니다. @@ -42,17 +42,29 @@ throw true; // true 값을 가지는 예외가 발생합니다. ```js function UserException(message) { - this.message = message; - this.name = 'UserException'; + this.message = message; + this.name = "UserException"; } function getMonthName(mo) { mo = mo - 1; // 월 숫자를 배열의 인덱스 값과 맞추기 위해서 입니다.(1 = 1월, 12 = 12월) - var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', - 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + var months = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ]; if (months[mo] !== undefined) { return months[mo]; } else { - throw new UserException('InvalidMonthNo'); + throw new UserException("InvalidMonthNo"); } } @@ -61,7 +73,7 @@ try { var myMonth = 15; // 15 는 범위를 벗어났기 때문에 예외를 발생시킵니다 var monthName = getMonthName(myMonth); } catch (e) { - monthName = 'unknown'; + monthName = "unknown"; console.error(e.message, e.name); // 오류 처리기에 예외 객체를 전달합니다 } ``` @@ -86,28 +98,28 @@ try { */ function ZipCode(zip) { - zip = new String(zip); - pattern = /[0-9]{5}([- ]?[0-9]{4})?/; - if (pattern.test(zip)) { - // 우편번호 값은 문자열의 첫 번째 매칭일 것입니다. - this.value = zip.match(pattern)[0]; - this.valueOf = function() { - return this.value - }; - this.toString = function() { - return String(this.value) - }; - } else { - throw new ZipCodeFormatException(zip); - } + zip = new String(zip); + pattern = /[0-9]{5}([- ]?[0-9]{4})?/; + if (pattern.test(zip)) { + // 우편번호 값은 문자열의 첫 번째 매칭일 것입니다. + this.value = zip.match(pattern)[0]; + this.valueOf = function () { + return this.value; + }; + this.toString = function () { + return String(this.value); + }; + } else { + throw new ZipCodeFormatException(zip); + } } function ZipCodeFormatException(value) { - this.value = value; - this.message = 'does not conform to the expected format for a zip code'; - this.toString = function() { - return this.value + this.message; - }; + this.value = value; + this.message = "does not conform to the expected format for a zip code"; + this.toString = function () { + return this.value + this.message; + }; } /* @@ -119,23 +131,23 @@ const ZIPCODE_INVALID = -1; const ZIPCODE_UNKNOWN_ERROR = -2; function verifyZipCode(z) { - try { - z = new ZipCode(z); - } catch (e) { - if (e instanceof ZipCodeFormatException) { - return ZIPCODE_INVALID; - } else { - return ZIPCODE_UNKNOWN_ERROR; - } - } - return z; + try { + z = new ZipCode(z); + } catch (e) { + if (e instanceof ZipCodeFormatException) { + return ZIPCODE_INVALID; + } else { + return ZIPCODE_UNKNOWN_ERROR; + } + } + return z; } -a = verifyZipCode(95060); // 95060 반환 -b = verifyZipCode(9560); // -1 반환 -c = verifyZipCode('a'); // -1 반환 -d = verifyZipCode('95060'); // 95060 반환 -e = verifyZipCode('95060 1234'); // 95060 1234 반환 +a = verifyZipCode(95060); // 95060 반환 +b = verifyZipCode(9560); // -1 반환 +c = verifyZipCode("a"); // -1 반환 +d = verifyZipCode("95060"); // 95060 반환 +e = verifyZipCode("95060 1234"); // 95060 1234 반환 ``` ### 예외 다시 발생시키기 @@ -146,7 +158,7 @@ e = verifyZipCode('95060 1234'); // 95060 1234 반환 ```js try { - throw n; // 숫자 값으로 예외를 발생시킵니다. + throw n; // 숫자 값으로 예외를 발생시킵니다. } catch (e) { if (e <= 50) { // 1-50 사이의 예외를 처리하는 구문 diff --git a/files/ko/web/javascript/reference/statements/try...catch/index.md b/files/ko/web/javascript/reference/statements/try...catch/index.md index b2b48bc3be4da1..890cff519f00df 100644 --- a/files/ko/web/javascript/reference/statements/try...catch/index.md +++ b/files/ko/web/javascript/reference/statements/try...catch/index.md @@ -2,6 +2,7 @@ title: try...catch slug: Web/JavaScript/Reference/Statements/try...catch --- + {{jsSidebar("Statements")}} **`try...catch`** 문은 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정합니다. @@ -53,11 +54,10 @@ try 선언의 구성은 하나 혹은 그 이상의 선언을 포함한 try 블 ```js try { - throw "myException"; // generates an exception -} -catch (e) { - // statements to handle any exceptions - logMyErrors(e); // pass exception object to error handler + throw "myException"; // generates an exception +} catch (e) { + // statements to handle any exceptions + logMyErrors(e); // pass exception object to error handler } ``` @@ -66,34 +66,34 @@ catch (e) { 다음과 같이 `try...catch`블록을 `if...else if...else` 구조와 결합하여 '조건부 `catch`-blocks'을 만들 수 있습니다. ```js - try { - myroutine(); // may throw three types of exceptions - } catch (e) { - if (e instanceof TypeError) { - // statements to handle TypeError exceptions - } else if (e instanceof RangeError) { - // statements to handle RangeError exceptions - } else if (e instanceof EvalError) { - // statements to handle EvalError exceptions - } else { - // statements to handle any unspecified exceptions - logMyErrors(e); // pass exception object to error handler - } - } +try { + myroutine(); // may throw three types of exceptions +} catch (e) { + if (e instanceof TypeError) { + // statements to handle TypeError exceptions + } else if (e instanceof RangeError) { + // statements to handle RangeError exceptions + } else if (e instanceof EvalError) { + // statements to handle EvalError exceptions + } else { + // statements to handle any unspecified exceptions + logMyErrors(e); // pass exception object to error handler + } +} ``` 이에 대한 일반적인 사용 사례는 예상 오류의 작은 하위 집합 만 포착 (및 침묵) 한 다음 다른 경우에 오류를 다시 발생시키는 것입니다. ```js - try { - myRoutine(); - } catch (e) { - if (e instanceof RangeError) { - // statements to handle this very common expected error - } else { - throw e; // re-throw the error unchanged - } - } +try { + myRoutine(); +} catch (e) { + if (e instanceof RangeError) { + // statements to handle this very common expected error + } else { + throw e; // re-throw the error unchanged + } +} ``` ### The exception identifier @@ -101,14 +101,14 @@ catch (e) { `try`-block에서 예외가 발생하면 `exception_var` (즉, `catch (e)`내부의 `e`)가 예외 값을 보유합니다. 이 식별자를 사용하여 발생한 예외에 대한 정보를 얻을 수 있습니다. 이 식별자는 `catch`-block의 {{Glossary("Scope", "scope")}}에서만 사용할 수 있습니다. ```js - function isValidJSON(text) { - try { - JSON.parse(text); - return true; - } catch { - return false; - } - } +function isValidJSON(text) { + try { + JSON.parse(text); + return true; + } catch { + return false; + } +} ``` ### The finally-block @@ -118,14 +118,13 @@ The `finally`-block contains statements to execute after the `try`-block and `ca The following example shows one use case for the `finally`-block. The code opens a file and then executes statements that use the file; the `finally`-block makes sure the file always closes after it is used even if an exception was thrown. ```js - openMyFile(); - try { - // tie up a resource - writeMyFile(theData); - } - finally { - closeMyFile(); // always close the resource - } +openMyFile(); +try { + // tie up a resource + writeMyFile(theData); +} finally { + closeMyFile(); // always close the resource +} ``` ## Examples @@ -135,69 +134,61 @@ The following example shows one use case for the `finally`-block. The code opens First, let's see what happens with this: ```js - try { - try { - throw new Error('oops'); - } - finally { - console.log('finally'); - } - } - catch (ex) { - console.error('outer', ex.message); - } +try { + try { + throw new Error("oops"); + } finally { + console.log("finally"); + } +} catch (ex) { + console.error("outer", ex.message); +} - // Output: - // "finally" - // "outer" "oops" +// Output: +// "finally" +// "outer" "oops" ``` Now, if we already caught the exception in the inner `try`-block by adding a `catch`-block ```js - try { - try { - throw new Error('oops'); - } - catch (ex) { - console.error('inner', ex.message); - } - finally { - console.log('finally'); - } - } - catch (ex) { - console.error('outer', ex.message); - } +try { + try { + throw new Error("oops"); + } catch (ex) { + console.error("inner", ex.message); + } finally { + console.log("finally"); + } +} catch (ex) { + console.error("outer", ex.message); +} - // Output: - // "inner" "oops" - // "finally" +// Output: +// "inner" "oops" +// "finally" ``` And now, let's rethrow the error. ```js - try { - try { - throw new Error('oops'); - } - catch (ex) { - console.error('inner', ex.message); - throw ex; - } - finally { - console.log('finally'); - } - } - catch (ex) { - console.error('outer', ex.message); - } +try { + try { + throw new Error("oops"); + } catch (ex) { + console.error("inner", ex.message); + throw ex; + } finally { + console.log("finally"); + } +} catch (ex) { + console.error("outer", ex.message); +} - // Output: - // "inner" "oops" - // "finally" - // "outer" "oops" +// Output: +// "inner" "oops" +// "finally" +// "outer" "oops" ``` Any given exception will be caught only once by the nearest enclosing `catch`-block unless it is rethrown. Of course, any new exceptions raised in the "inner" block (because the code in `catch`-block may do something that throws), will be caught by the "outer" block. @@ -207,28 +198,25 @@ Any given exception will be caught only once by the nearest enclosing `catch`-bl If the `finally`-block returns a value, this value becomes the return value of the entire `try-catch-finally` statement, regardless of any `return` statements in the `try` and `catch`-blocks. This includes exceptions thrown inside of the `catch`-block: ```js - (function() { - try { - try { - throw new Error('oops'); - } - catch (ex) { - console.error('inner', ex.message); - throw ex; - } - finally { - console.log('finally'); - return; - } - } - catch (ex) { - console.error('outer', ex.message); - } - })(); - - // Output: - // "inner" "oops" - // "finally" +(function () { + try { + try { + throw new Error("oops"); + } catch (ex) { + console.error("inner", ex.message); + throw ex; + } finally { + console.log("finally"); + return; + } + } catch (ex) { + console.error("outer", ex.message); + } +})(); + +// Output: +// "inner" "oops" +// "finally" ``` The outer "oops" is not thrown because of the return in the `finally`-block. The same would apply to any value returned from the `catch`-block. diff --git a/files/ko/web/javascript/reference/statements/var/index.md b/files/ko/web/javascript/reference/statements/var/index.md index 3d226638be03cf..87738d31c45c5b 100644 --- a/files/ko/web/javascript/reference/statements/var/index.md +++ b/files/ko/web/javascript/reference/statements/var/index.md @@ -28,43 +28,43 @@ slug: Web/JavaScript/Reference/Statements/var 1. 선언된 변수들은 변수가 선언된 실행 콘텍스트(execution context) 안에서 만들어집니다. 선언되지 않은 변수들은 항상 전역변수 입니다. - ```js - function x() { - y = 1; // strict 모드에서는 ReferenceError를 출력합니다. - var z = 2; - } + ```js + function x() { + y = 1; // strict 모드에서는 ReferenceError를 출력합니다. + var z = 2; + } - x(); + x(); - console.log(y); // 로그에 "1" 출력합니다. - console.log(z); // ReferenceError: z is not defined outside x를 출력합니다. - ``` + console.log(y); // 로그에 "1" 출력합니다. + console.log(z); // ReferenceError: z is not defined outside x를 출력합니다. + ``` 2. 선언된 변수들은 어떠한 코드가 실행되기 전에 만들어집니다. 선언되지 않은 변수들은 변수들을 할당하는 코드가 실행되기 전까지는 존재하지 않습니다. - ```js - console.log(a); // ReferenceError를 출력합니다. - console.log('still going...'); // 결코 실행되지 않습니다. - ``` + ```js + console.log(a); // ReferenceError를 출력합니다. + console.log("still going..."); // 결코 실행되지 않습니다. + ``` - ```js - var a; - console.log(a); // 브라우저에 따라 로그에 "undefined" 또는 "" 출력합니다. - console.log('still going...'); // 로그에 "still going..." 출력합니다. - ``` + ```js + var a; + console.log(a); // 브라우저에 따라 로그에 "undefined" 또는 "" 출력합니다. + console.log("still going..."); // 로그에 "still going..." 출력합니다. + ``` 3. 선언된 변수들은 변수들의 실행 콘텍스트(execution context)의 프로퍼티를 변경되지 않습니다. 선언되지 않은 변수들은 변경 가능합니다. (e.g 삭제 될 수도 있습니다.) - ```js - var a = 1; - b = 2; + ```js + var a = 1; + b = 2; - delete this.a; // strict 모드에서는 TypeError를 출력합니다. 그렇지 않으면 자동적으로 실패합니다. - delete this.b; + delete this.a; // strict 모드에서는 TypeError를 출력합니다. 그렇지 않으면 자동적으로 실패합니다. + delete this.b; - console.log(a, b); // ReferenceError를 출력합니다. - // 'b' 프로퍼티는 삭제되었고, 어디에도 존재하지 않습니다. - ``` + console.log(a, b); // ReferenceError를 출력합니다. + // 'b' 프로퍼티는 삭제되었고, 어디에도 존재하지 않습니다. + ``` 이러한 세가지 다른점 때문에, 변수 선언 오류는 예기치않은 결과로 이어질 가능성이 높습니다. 그러므로 **함수 또는 전역 범위인지 여부와 상관없이, 항상 변수를 선언 하는 것을 추천합니다.** 그리고 ECMAScript 5 안에 [strict mode](/ko/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode), 선언되지 않은 변수에 할당하면 오류를 출력합니다. @@ -73,7 +73,7 @@ slug: Web/JavaScript/Reference/Statements/var 변수 선언들 (그리고 일반적인 선언)은 어느 코드가 실행 되기 전에 처리하기 때문에, 코드 안에서 어디서든 변수 선언은 최상위에 선언한 것과 동등합니다. 이것은 변수가 선언되기 전에 사용 될 수 있다는 것을 의미합니다. 변수 선언이 함수 또는 전역 코드의 상단에 이동하는 것과 같은 행동을 "호이스팅(hoisting)"이라고 불립니다. ```js -bla = 2 +bla = 2; var bla; // ... @@ -90,7 +90,8 @@ bla = 2; ### 두 변수들의 선언 및 초기화 ```js -var a = 0, b = 0; +var a = 0, + b = 0; ``` ### 단일 문자열 값으로 두 변수들 할당 @@ -101,13 +102,15 @@ var b = a; // 다음과 같음: -var a, b = a = "A"; +var a, + b = (a = "A"); ``` 순서에 유의: ```js -var x = y, y = 'A'; +var x = y, + y = "A"; console.log(x + y); // undefinedA ``` @@ -118,8 +121,8 @@ console.log(x + y); // undefinedA ```js var x = 0; -function f(){ - var x = y = 1; // x는 지역변수로 선언됩니다. y는 아닙니다! +function f() { + var x = (y = 1); // x는 지역변수로 선언됩니다. y는 아닙니다! } f(); @@ -133,27 +136,29 @@ console.log(x, y); // 0, 1 암묵적인 전역변수가 될 것으로 보이는 변수는 함수 범위 밖에서 변수들을 참조할 수 있다. ```js -var x = 0; // x는 전역으로 선언되었고, 0으로 할당됩니다. +var x = 0; // x는 전역으로 선언되었고, 0으로 할당됩니다. console.log(typeof z); // undefined, z는 아직 존재하지 않습니다. -function a() { // a 함수를 호출했을 때, - var y = 2; // y는 함수 a에서 지역변수로 선언되었으며, 2로 할당됩니다. +function a() { + // a 함수를 호출했을 때, + var y = 2; // y는 함수 a에서 지역변수로 선언되었으며, 2로 할당됩니다. - console.log(x, y); // 0 2 + console.log(x, y); // 0 2 - function b() { // b 함수를 호출하였을때, - x = 3; // 존재하는 전역 x값에 3을 할당, 새로운 전역 var 변수를 만들지 않습니다. - y = 4; // 존재하는 외부 y값에 4를 할당, 새로운 전역 var 변수를 만들지 않습니다. - z = 5; // 새로운 전역 z 변수를 생성하고 5를 할당 합니다. - } // (strict mode에서는 ReferenceError를 출력합니다.) + function b() { + // b 함수를 호출하였을때, + x = 3; // 존재하는 전역 x값에 3을 할당, 새로운 전역 var 변수를 만들지 않습니다. + y = 4; // 존재하는 외부 y값에 4를 할당, 새로운 전역 var 변수를 만들지 않습니다. + z = 5; // 새로운 전역 z 변수를 생성하고 5를 할당 합니다. + } // (strict mode에서는 ReferenceError를 출력합니다.) - b(); // 호출되는 b는 전역 변수로 z를 생성합니다. - console.log(x, y, z); // 3 4 5 + b(); // 호출되는 b는 전역 변수로 z를 생성합니다. + console.log(x, y, z); // 3 4 5 } -a(); // 호출되는 a는 또한 b를 호출합니다. -console.log(x, z); // 3 5 +a(); // 호출되는 a는 또한 b를 호출합니다. +console.log(x, z); // 3 5 console.log(typeof y); // undefined y는 function a에서 지역 변수입니다. ``` diff --git a/files/ko/web/javascript/reference/statements/while/index.md b/files/ko/web/javascript/reference/statements/while/index.md index d2a7dea7804396..287ad54c9387cf 100644 --- a/files/ko/web/javascript/reference/statements/while/index.md +++ b/files/ko/web/javascript/reference/statements/while/index.md @@ -9,9 +9,10 @@ slug: Web/JavaScript/Reference/Statements/while ## 문법 -```js - while (condition) - statement +```js-nolint +while (condition) { + statement +} ``` - `조건` diff --git a/files/ko/web/javascript/reference/statements/with/index.md b/files/ko/web/javascript/reference/statements/with/index.md index f396ac407af945..648575d6cf0600 100644 --- a/files/ko/web/javascript/reference/statements/with/index.md +++ b/files/ko/web/javascript/reference/statements/with/index.md @@ -12,8 +12,9 @@ slug: Web/JavaScript/Reference/Statements/with ## Syntax ```js - with (expression) - statement +with (expression) { + statement +} ``` - `expression` diff --git a/files/ko/web/javascript/reference/strict_mode/index.md b/files/ko/web/javascript/reference/strict_mode/index.md index 9713bf683e8bac..f99b593ef5c659 100644 --- a/files/ko/web/javascript/reference/strict_mode/index.md +++ b/files/ko/web/javascript/reference/strict_mode/index.md @@ -27,7 +27,7 @@ slug: Web/JavaScript/Reference/Strict_mode ```js // 전체 스크립트 엄격 모드 구문 -'use strict'; +"use strict"; var v = "Hi! I'm a strict mode script!"; ``` @@ -42,11 +42,15 @@ var v = "Hi! I'm a strict mode script!"; ```js function strict() { // 함수-레벨 strict mode 문법 - 'use strict'; - function nested() { return "And so am I!"; } + "use strict"; + function nested() { + return "And so am I!"; + } return "Hi! I'm a strict mode function! " + nested(); } -function notStrict() { return "I'm not strict."; } +function notStrict() { + return "I'm not strict."; +} ``` ### 모듈에 strict mode 적용 @@ -54,10 +58,10 @@ function notStrict() { return "I'm not strict."; } ECMAScript 2015 는 [JavaScript 모듈](/ko/docs/Web/JavaScript/Reference/Statements/export)을 소개했습니다. 따라서, 이는 엄격 모드를 적용할 수 있는 3번 째 방법입니다. JavaScript 모듈의 전체 컨텐츠는 엄격 모드 시작을 위한 구문 없이도 자동으로 엄격모드입니다. ```js - function strict() { - // 모듈이기때문에 기본적으로 엄격합니다 - } - export default strict; +function strict() { + // 모듈이기때문에 기본적으로 엄격합니다 +} +export default strict; ``` ## 엄격한 모드 변경 @@ -73,7 +77,7 @@ ECMAScript 2015 는 [JavaScript 모듈](/ko/docs/Web/JavaScript/Reference/Statem ```js "use strict"; - // 전역 변수 mistypedVariable 이 존재한다고 가정 +// 전역 변수 mistypedVariable 이 존재한다고 가정 mistypedVaraible = 17; // 변수의 오타때문에 이 라인에서 ReferenceError 를 발생시킴 ``` @@ -92,7 +96,11 @@ Object.defineProperty(obj1, "x", { value: 42, writable: false }); obj1.x = 9; // TypeError 발생 // getter-only 프로퍼티에 할당 -var obj2 = { get x() { return 17; } }; +var obj2 = { + get x() { + return 17; + }, +}; obj2.x = 5; // TypeError 발생 // 확장 불가 객체에 새 프로퍼티 할당 @@ -120,7 +128,8 @@ var o = { p: 1, p: 2 }; // !!! 구문 에러 다섯째로, 엄격모드는 유니크한 함수 파라미터 이름을 요구합니다. 일반 코드에서는 마지막으로 중복된 인수가 이전에 지정된 인수를 숨깁니다. 이러한 이전의 인수들은 `arguments[i]` 를 통해 여전히 남아 있을 수 있으므로, 완전히 접근 불가한 것이 아닙니다. 여전히, 이런 숨김 처리는 이치에 맞지 않으며 원했던 것이 아닐 수 있습니다(예를 들면 오타를 숨길 수도 있습니다). 따라서 엄격 모드에서는 중복 인수명은 구문 에러입니다. ```js -function sum(a, a, c){ // !!! 구문 에러 +function sum(a, a, c) { + // !!! 구문 에러 "use strict"; return a + b + c; // 코드가 실행되면 잘못된 것임 } @@ -136,21 +145,21 @@ var a = 0o10; // ES6: 8진수 ```js "use strict"; -var sum = 015 + // !!! 구문 에러 - 197 + - 142; +var sum = + 015 + // !!! 구문 에러 + 197 + + 142; ``` 일곱째로, ECMAScript 6 의 엄격모드는 {{Glossary("primitive")}} 값에 프로퍼티를 설정하는 것을 금지합니다. 엄격모드가 아닐 때에는 프로퍼티 설정이 간단하게 무시되지만(no-op), 엄격모드에서는 {{jsxref("TypeError")}} 를 발생시킵니다. ```js -(function() { -"use strict"; - -false.true = ""; // TypeError -(14).sailing = "home"; // TypeError -"with".you = "far away"; // TypeError +(function () { + "use strict"; + false.true = ""; // TypeError + (14).sailing = "home"; // TypeError + "with".you = "far away"; // TypeError })(); ``` @@ -163,8 +172,7 @@ false.true = ""; // TypeError ```js "use strict"; var x = 17; -with (obj) // !!! 구문 에러 -{ +with (obj) { // !!! 구문 에러 // 엄격모드가 아니라면, 이는 var x 가 되어야 하나요, // obj.x 가 되어야 하나요? // 일반적으로는 코드를 실행하지 않고 이를 말하는 것은 불가하므로, @@ -187,16 +195,16 @@ console.assert(evalX === 42); 이와 관련해서, `eval` 함수가 엄격모드 코드 내에서 `eval(...)` 형태의 표현으로 적용되었다면, 코드는 엄격모드 코드로 evaluated 됩니다. 코드는 명시적으로 엄격모드를 적용할 수 있지만, 필수적인 것은 아닙니다. ```js -function strict1(str){ +function strict1(str) { "use strict"; return eval(str); // str 은 엄격모드 코드로 다뤄짐 } -function strict2(f, str){ +function strict2(f, str) { "use strict"; return f(str); // eval(...) 이 아님: - // str 은 엄격모드를 적용한 경우에만 엄격함 + // str 은 엄격모드를 적용한 경우에만 엄격함 } -function nonstrict(str){ +function nonstrict(str) { return eval(str); // str 은 엄격모드를 적용한 경우에만 엄격함 } @@ -232,19 +240,20 @@ eval("var y; delete y;"); // !!! syntax error eval = 17; arguments++; ++eval; -var obj = { set p(arguments) { } }; +var obj = { set p(arguments) {} }; var eval; -try { } catch (arguments) { } -function x(eval) { } -function arguments() { } -var y = function eval() { }; +try { +} catch (arguments) {} +function x(eval) {} +function arguments() {} +var y = function eval() {}; var f = new Function("arguments", "'use strict'; return 17;"); ``` 둘째로, 엄격모드 코드는 `arguments` 객체가 생성한 프로퍼티를 앨리어스하지 않습니다. 함수의 첫 번째 인수가 `arg` 인 일반 코드에서는 `arg` 를 설정하는 것은 `arguments[0]` 를 설정하기도 하며, 그 반대도 그렇습니다(인수가 제공되지 않거나, `arguments[0]` 이 삭제된 경우는 제외). 엄격모드 함수의 `arguments` 객체는 함수가 호출될 때 원본 인수들을 저장합니다. `arguments[i]` 는 명명된 인수에 해당하는 값을 추적하지 않으며, 명명된 인수도 `arguments[i]` 에 해당하는 값을 추적하지 않습니다. ```js -function f(a){ +function f(a) { "use strict"; a = 42; return [a, arguments[0]]; @@ -258,7 +267,9 @@ console.assert(pair[1] === 17); ```js "use strict"; -var f = function() { return arguments.callee; }; +var f = function () { + return arguments.callee; +}; f(); // TypeError ``` @@ -270,7 +281,9 @@ f(); // TypeError ```js "use strict"; -function fun() { return this; } +function fun() { + return this; +} console.assert(fun() === undefined); console.assert(fun.call(2) === 2); console.assert(fun.apply(null) === null); @@ -283,14 +296,12 @@ console.assert(fun.bind(true)() === true); 둘째로, 엄격모드에서는 ECMAScript의 일반적으로 구현된 확장을 통해 자바스크립트 스택을 "걷는"것이 불가능합니다. 이러한 일반적인 확장 코드는, 함수 `fun` 이 호출되는 중간에, `fun.caller` 는 가장 최근에 `fun` 을 호출한 함수이고 `fun.arguments` 는 `fun`을 호출하기 위한 인수입니다. "권한있는"함수와 (잠재적으로 보안되지 않은) 인수에 접근을 허용하기때문에 두가지 확장 모두 자바스크립트의 "보안" 문제가 됩니다. `fun` 이 엄격모드인경우, both `fun.caller` 와 `fun.arguments` 모두 설정 또는 검색될때 삭제 불가능한 속성이 됩니다. ```js -function restricted() -{ +function restricted() { "use strict"; - restricted.caller; // throws a TypeError + restricted.caller; // throws a TypeError restricted.arguments; // throws a TypeError } -function privilegedInvoker() -{ +function privilegedInvoker() { return restricted(); } privilegedInvoker(); @@ -300,8 +311,7 @@ privilegedInvoker(); ```js "use strict"; -function fun(a, b) -{ +function fun(a, b) { "use strict"; var v = 12; return arguments.caller; //TypeError 가 발생. @@ -316,18 +326,21 @@ fun(1, 2); // doesn't expose v (or a or b) 첫번째로, 엄격 모드에서의 식별자 후보들은 예약어가 됩니다. 이 예약어들은 `implements`, `interface`, `let`, `package`, `private`, `protected`, `public`, `static`, `yield`입니다. 그럼, 엄격 모드에서는 이 예약어와 똑같은 이름을 사용하거나, 변수명 또는 아규먼트명으로도 사용할 수 없습니다. ```js -function package(protected){ // !!! +function package(protected) { + // !!! "use strict"; var implements; // !!! - interface: // !!! - while (true){ + // !!! + interface: while (true) { break interface; // !!! } - function private() { } // !!! + function private() {} // !!! } -function fun(static) { 'use strict'; } // !!! +function fun(static) { + "use strict"; +} // !!! ``` Mozilla의 특별 지시 두 가지 : 먼저, 코드가 JavaScript 1.7 또는 그보다 높고 (예를 들어, 크롬 코드 또는 ``로 로딩되지, `let`/`yield`를 식별자로 사용할 수가 없을 것이다. 그리고 나서는, ES5 가 `class`, `enum`, `export`, `extends`, `import`, and `super` 와 같은 예약어들을 무조건 리저브함에도 불구하고, 먼저 Firefox 5 Mozilla 는 그것들을 엄격 모드에서만 리저브한다. @@ -336,18 +349,19 @@ Mozilla의 특별 지시 두 가지 : 먼저, 코드가 JavaScript 1.7 또는 ```js "use strict"; -if (true){ - function f() { } // !!! syntax error +if (true) { + function f() {} // !!! syntax error f(); } -for (var i = 0; i < 5; i++){ - function f2() { } // !!! syntax error +for (var i = 0; i < 5; i++) { + function f2() {} // !!! syntax error f2(); } -function baz(){ // kosher - function eit() { } // also kosher +function baz() { + // kosher + function eit() {} // also kosher } ``` diff --git a/files/ko/web/javascript/reference/template_literals/index.md b/files/ko/web/javascript/reference/template_literals/index.md index 1b82dd34e92687..90256322b86b9c 100644 --- a/files/ko/web/javascript/reference/template_literals/index.md +++ b/files/ko/web/javascript/reference/template_literals/index.md @@ -2,6 +2,7 @@ title: Template literals slug: Web/JavaScript/Reference/Template_literals --- + {{JsSidebar("More")}} 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다. @@ -24,7 +25,7 @@ slug: Web/JavaScript/Reference/Template_literals 템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(\` \`) ([grave accent](http://en.wikipedia.org/wiki/Grave_accent)) 을 이용합니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( `$ {expression}` ) 로 표기할 수 있습니다. 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달됩니다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜 줍니다. 템플릿 리터럴 앞에 어떠한 표현식이 있다면(여기에서는 태그), 템플릿 리터럴은 "태그가 지정된 템플릿"이라고 불리게 됩니다. 이 때, 태그 표현식 (주로 함수)이 처리된 템플릿 리터럴과 함께 호출되면, 출력하기 전에 조작할 수 있습니다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러쉬(\\)를 넣으십시오. ```js -`\`` === "`" // --> true +`\`` === "`"; // --> true ``` ### Multi-line strings @@ -34,8 +35,7 @@ source 내에 삽입되는 newline characters(\n)은 template literal의 일부 일반 string 들을 사용하여, multi-line strings 들을 얻기 위해서는 아래와 같은 문법을 사용해야 할 것입니다. ```js -console.log("string text line 1\n"+ -"string text line 2"); +console.log("string text line 1\n" + "string text line 2"); // "string text line 1 // string text line 2" ``` @@ -79,24 +79,28 @@ not ${2 * a + b}.`); In ES5: ```js - var classes = 'header' - classes += (isLargeScreen() ? - '' : item.isCollapsed ? - ' icon-expander' : ' icon-collapser'); +var classes = "header"; +classes += isLargeScreen() + ? "" + : item.isCollapsed + ? " icon-expander" + : " icon-collapser"; ``` ES2015에서 중첩(nesting)없이 템플릿 리터럴 사용한 경우: ```js - const classes = `header ${ isLargeScreen() ? '' : - (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`; +const classes = `header ${ + isLargeScreen() ? "" : item.isCollapsed ? "icon-expander" : "icon-collapser" +}`; ``` ES2015에서 중첩된(nested) 템플릿 리터럴을 사용한 경우: ```js - const classes = `header ${ isLargeScreen() ? '' : - `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`; +const classes = `header ${ + isLargeScreen() ? "" : `icon-${item.isCollapsed ? "expander" : "collapser"}` +}`; ``` ### Tagged templates @@ -104,57 +108,55 @@ ES2015에서 중첩된(nested) 템플릿 리터럴을 사용한 경우: template literals 의 더욱 발전된 한 형태는 _tagged_ templates 입니다. 태그를 사용하면 템플릿 리터럴을 함수로 파싱 할 수 있습니다. 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다. 결국 함수는 조작 된 문자열을 반환 할 수 있습니다 (또는 다음 예제에서 설명하는 것과 완전히 다른 결과를 반환 할 수 있습니다). function 이름은 원하는 어떤 것이든 가능합니다. ```js - var person = 'Mike'; - var age = 28; - - function myTag(strings, personExp, ageExp) { - - var str0 = strings[0]; // "that " - var str1 = strings[1]; // " is a " - - // 사실 이 예제의 string에서 표현식이 두 개 삽입되었으므로 - // ${age} 뒤에는 ''인 string이 존재하여 - // 기술적으로 strings 배열의 크기는 3이 됩니다. - // 하지만 빈 string이므로 무시하겠습니다. - // var str2 = strings[2]; - - var ageStr; - if (ageExp > 99){ - ageStr = 'centenarian'; - } else { - ageStr = 'youngster'; - } - - // 심지어 이 함수내에서도 template literal을 반환할 수 있습니다. - return str0 + personExp + str1 + ageStr; - - } +var person = "Mike"; +var age = 28; + +function myTag(strings, personExp, ageExp) { + var str0 = strings[0]; // "that " + var str1 = strings[1]; // " is a " + + // 사실 이 예제의 string에서 표현식이 두 개 삽입되었으므로 + // ${age} 뒤에는 ''인 string이 존재하여 + // 기술적으로 strings 배열의 크기는 3이 됩니다. + // 하지만 빈 string이므로 무시하겠습니다. + // var str2 = strings[2]; + + var ageStr; + if (ageExp > 99) { + ageStr = "centenarian"; + } else { + ageStr = "youngster"; + } + + // 심지어 이 함수내에서도 template literal을 반환할 수 있습니다. + return str0 + personExp + str1 + ageStr; +} - var output = myTag`that ${ person } is a ${ age }`; +var output = myTag`that ${person} is a ${age}`; - console.log(output); - // that Mike is a youngster +console.log(output); +// that Mike is a youngster ``` 다음 예시에서 보여지듯이, Tag function 들은 string 을 반환할 필요는 없습니다. ```js function template(strings, ...keys) { - return (function(...values) { + return function (...values) { var dict = values[values.length - 1] || {}; var result = [strings[0]]; - keys.forEach(function(key, i) { + keys.forEach(function (key, i) { var value = Number.isInteger(key) ? values[key] : dict[key]; result.push(value, strings[i + 1]); }); - return result.join(''); - }); + return result.join(""); + }; } var t1Closure = template`${0}${1}${0}!`; -t1Closure('Y', 'A'); // "YAY!" -var t2Closure = template`${0} ${'foo'}!`; -t2Closure('Hello', {foo: 'World'}); // "Hello World!" +t1Closure("Y", "A"); // "YAY!" +var t2Closure = template`${0} ${"foo"}!`; +t2Closure("Hello", { foo: "World" }); // "Hello World!" ``` ### Raw strings @@ -162,26 +164,26 @@ t2Closure('Hello', {foo: 'World'}); // "Hello World!" 태그 지정된 템플릿의 첫 번째 함수 인수에서 사용할 수있는 특별한 `raw` property을 사용하면 [escape sequences](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings) 처리하지 않고 원시 문자열을 입력 한대로 액세스 할 수 있습니다. ```js - function tag(strings) { - console.log(strings.raw[0]); - } +function tag(strings) { + console.log(strings.raw[0]); +} - tag`string text line 1 \n string text line 2`; - // logs "string text line 1 \n string text line 2" , - // including the two characters '\' and 'n' +tag`string text line 1 \n string text line 2`; +// logs "string text line 1 \n string text line 2" , +// including the two characters '\' and 'n' ``` 추가로, default template function 과 string 병합으로 생성될 것 같은 raw string 을 생성하기 위한 {{jsxref("String.raw()")}} method가 존재합니다. ```js - var str = String.raw`Hi\n${2+3}!`; - // "Hi\n5!" +var str = String.raw`Hi\n${2 + 3}!`; +// "Hi\n5!" - str.length; - // 6 +str.length; +// 6 - str.split('').join(','); - // "H,i,\,n,5,!" +str.split("").join(","); +// "H,i,\,n,5,!" ``` ### Tagged templates and escape sequences @@ -210,13 +212,13 @@ Tagged templates은 다른 escapes sequences가 일반적으로 사용되는 언 그러나 illegal escape sequences는 여전히 "cooked"라고 표현되어야합니다. "cooked"배열의 {{jsxref ( "undefined")}} 요소로 나타납니다 : ```js - function latex(str) { - return { "cooked": str[0], "raw": str.raw[0] } - } +function latex(str) { + return { cooked: str[0], raw: str.raw[0] }; +} - latex`\unicode` +latex`\unicode`; - // { cooked: undefined, raw: "\\unicode" } +// { cooked: undefined, raw: "\\unicode" } ``` escape sequence 제한은 _tagged_ templates에만 적용되며 _untagged_ template literals에는 적용되지 않습니다. diff --git a/files/ko/web/javascript/reference/trailing_commas/index.md b/files/ko/web/javascript/reference/trailing_commas/index.md index a84746932ade79..a8c31fec883ac8 100644 --- a/files/ko/web/javascript/reference/trailing_commas/index.md +++ b/files/ko/web/javascript/reference/trailing_commas/index.md @@ -18,11 +18,7 @@ JavaScript는 초기부터 배열 리터럴에 trailing comma를 허용했으며 JavaScript는 배열에 나타나는 trailing comma를 무시합니다. ```js -var arr = [ - 1, - 2, - 3, -]; +var arr = [1, 2, 3]; arr; // [1, 2, 3] arr.length; // 3 @@ -31,7 +27,7 @@ arr.length; // 3 trailing comma가 여러 개 있을 경우 빈 슬롯("구멍")이 생깁니다. 구멍이 있는 배열을 성기다(sparse)고 합니다(조밀한(dense) 배열에는 구멍이 없습니다). {{jsxref("Array.prototype.forEach()")}}나 {{jsxref("Array.prototype.map()")}}을 이용해 배열을 순회할 때는 빈 슬롯을 무시합니다. ```js -var arr = [1, 2, 3,,,]; +var arr = [1, 2, 3, , ,]; arr.length; // 5 ``` @@ -55,7 +51,7 @@ ECMAScript 2017에서는 함수의 매개변수 목록에 trailing comma를 허 아래의 두 함수 정의는 모두 유효하며, 서로 같습니다. Trailing comma는 함수 정의의 `length` 속성이나 `arguments` 객체에 영향을 주지 않습니다. -```js +```js-nolint function f(p) {} function f(p,) {} @@ -81,7 +77,7 @@ var obj = { 아래의 두 함수 호출은 모두 유효하며, 서로 같습니다. -```js +```js-nolint f(p); f(p,); @@ -106,7 +102,7 @@ function f(...p,) {} // SyntaxError: parameter after rest parameter [구조 분해 할당](/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)의 좌변에도 trailing comma를 사용할 수 있습니다. -```js +```js-nolint // Trailing comma가 있는 배열 구조 분해 [a, b,] = [1, 2]; @@ -120,7 +116,7 @@ var {p, q,} = o; Rest 원소가 있을 경우 역시 {{jsxref("SyntaxError")}}가 발생합니다. -```js example-bad +```js-nolint example-bad var [a, ...b,] = [1, 2, 3]; // SyntaxError: rest element may not have a trailing comma ``` @@ -132,7 +128,7 @@ var [a, ...b,] = [1, 2, 3]; 아래의 두 줄 모두 `SyntaxError`를 발생합니다. ```js example-bad -JSON.parse('[1, 2, 3, 4, ]'); +JSON.parse("[1, 2, 3, 4, ]"); JSON.parse('{"foo" : 1, }'); // SyntaxError JSON.parse: unexpected character // at line 1 column 14 of the JSON data @@ -141,7 +137,7 @@ JSON.parse('{"foo" : 1, }'); JSON을 올바르게 파싱하려면 trailing comma를 제거해야 합니다. ```js example-good -JSON.parse('[1, 2, 3, 4 ]'); +JSON.parse("[1, 2, 3, 4 ]"); JSON.parse('{"foo" : 1 }'); ```