From 4289bf1fbb823f410775b4c7d0533b7abd8e5f5f Mon Sep 17 00:00:00 2001 From: 3indblown Leaf <69508345+kraccoon-dev@users.noreply.github.com> Date: Tue, 1 Feb 2022 19:42:11 +0900 Subject: remove class 1 (#3922) --- .../reference/functions/arrow_functions/index.html | 44 +++++++++++----------- 1 file changed, 22 insertions(+), 22 deletions(-) (limited to 'files/ko/web/javascript/reference/functions/arrow_functions') diff --git a/files/ko/web/javascript/reference/functions/arrow_functions/index.html b/files/ko/web/javascript/reference/functions/arrow_functions/index.html index cff8d043ae..2a12888f65 100644 --- a/files/ko/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/ko/web/javascript/reference/functions/arrow_functions/index.html @@ -27,7 +27,7 @@ original_slug: Web/JavaScript/Reference/Functions/애로우_펑션

기본 구문

-
(param1, param2, …, paramN) => { statements }
+
(param1, param2, …, paramN) => { statements }
 (param1, param2, …, paramN) => expression
 // 다음과 동일함:  => { return expression; }
 
@@ -40,7 +40,7 @@ original_slug: Web/JavaScript/Reference/Functions/애로우_펑션
 
 

고급 구문

-
// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
+
// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
 params => ({foo: bar})
 
 // 나머지 매개변수기본 매개변수를 지원함
@@ -64,7 +64,7 @@ f();  // 6
 
 

일부 함수 패턴에서는, 짧은 함수가 환영받습니다. 비교해 보세요:

-
var elements = [
+
var elements = [
   'Hydrogen',
   'Helium',
   'Lithium',
@@ -114,7 +114,7 @@ elements.이는 객체 지향 스타일로 프로그래밍할 때 별로 좋지않습니다.

-
function Person() {
+
function Person() {
   // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
   this.age = 0;
 
@@ -130,7 +130,7 @@ var p = new Person();

ECMAScript 3/5 에서는, 이 문제를 this 값을 폐쇄될 수 있는 (비전역) 변수에 할당하여 해결했습니다.

-
function Person() {
+
function Person() {
   var that = this;
   that.age = 0;
 
@@ -146,7 +146,7 @@ var p = new Person();

따라서 다음 코드에서 setInterval에 전달 된 함수 내부의 thissetInterval을 포함한 function의 this와 동일한 값을 갖습니다.

-
function Person(){
+
function Person(){
   this.age = 0;
 
   setInterval(() => {
@@ -160,7 +160,7 @@ var p = new Person();

this가 렉시컬(lexical, 정적)임을 감안하면, this에 관한 엄격 모드 규칙은 그냥 무시됩니다.

-
var f = () => { 'use strict'; return this; };
+
var f = () => { 'use strict'; return this; };
 f() === window; // 혹은 전역객체

엄격 모드의 나머지 규칙은 평소대로 적용합니다.

@@ -173,7 +173,7 @@ f() === window; // 혹은 전역객체

This code sample using Chrome 81 demonstrates that arrow functions allow the creation of global variables in such situations (both for a concise body and for a normal function body):

-
> f1 = x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; }
+
> f1 = x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; }
 x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; }
 
 > y
@@ -230,7 +230,7 @@ VM51891:1 Uncaught ReferenceError: z1 is not defined
 
 

화살표 함수에서는 this가 바인딩되지 않았기 때문에, call() 또는 apply() 메서드는  인자만 전달 할 수 있습니다. this는 무시됩니다.

-
var adder = {
+
var adder = {
   base : 1,
 
   add : function(a) {
@@ -255,7 +255,7 @@ console.log(adder.addThruCall(1)); // 이도 2가 콘솔에 출력될 것임화살표 함수는 arguments 객체를 바인드 하지 않습니다.  때문에, arguments는  그저 둘러싸는 범위(scope) 내 이름에 대한 참조입니다.

-
var arguments = [1, 2, 3];
+
var arguments = [1, 2, 3];
 var arr = () => arguments[0];
 
 arr(); // 1
@@ -269,7 +269,7 @@ foo(1); // 2

화살표 함수는 자신의 arguments 객체가 없지만, 대부분의 경우에 나머지 매개변수가 좋은 대안입니다:

-
function foo(n) {
+
function foo(n) {
   var f = (...args) => args[0] + n;
   return f(2);
 }
@@ -280,7 +280,7 @@ foo(1); // 3

이야기 했듯이, 화살표 함수 표현은 메소드 함수가 아닌 형태로 사용 할 수 있습니다. 메소드로 사용하려고 한면 무슨일이 발생하는지 봅시다.

-
'use strict';
+
'use strict';
 
 var obj = { // does not create a new scope
   i: 10,
@@ -295,7 +295,7 @@ obj.c(); // prints 10, Object {...}
 
 

화살표 함수는 자신의 this를 가지고("bind" 바인드)있지 않습니다.{{jsxref("Object.defineProperty()")}}

-
'use strict';
+
'use strict';
 
 var obj = {
   a: 10
@@ -312,14 +312,14 @@ Object.defineProperty(obj, 'b', {
 
 

화살표 함수는 생성자로서 사용될 수 없으며 new와 함께 사용하면 오류가 발생합니다.

-
var Foo = () => {};
+
var Foo = () => {};
 var foo = new Foo(); // TypeError: Foo is not a constructor

prototype 속성 사용

화살표 함수는 prototype 속성이 없습니다.

-
var Foo = () => {};
+
var Foo = () => {};
 console.log(Foo.prototype); // undefined

yield 키워드 사용

@@ -336,7 +336,7 @@ console.log(Foo.prototype); // undefined

block바디는 자동으로 값을 반환하지 않습니다. return을 사용해서 값을 반환해야 합니다.

-
var func = x => x * x;                  // concise 바디, 생략된 "return" 여기서는 x * x
+
var func = x => x * x;                  // concise 바디, 생략된 "return" 여기서는 x * x
 var func = (x, y) => { return x + y; }; // block 바디, "return"이 필요
 
@@ -344,7 +344,7 @@ var func = (x, y) => { return x + y; }; // block 바디, "return"이 필요

간결한 구문 params => {object:literal}을 사용한 객체 리터럴 반환은 예상대로 작동하지 않음을 명심하세요:

-
var func = () => {  foo: 1  };
+
var func = () => {  foo: 1  };
 // func() 호출은 undefined를 반환!
 
 var func = () => {  foo: function() {}  };
@@ -354,19 +354,19 @@ var func = () => {  foo: function() {}  };
 
 

객체 리터럴를 괄호로 감싸는 것을 기억하세요:

-
var func = () => ({ foo: 1 });
+
var func = () => ({ foo: 1 });

줄바꿈

화살표 함수는 파라메터와 화살표 사이에 개행 문자를 포함 할 수 없습니다.

-
var func = (a, b, c)
+
var func = (a, b, c)
            => 1;
 // SyntaxError: expected expression, got '=>'

하지만, 보기 좋은 코드를 유지하고 싶다면, 아래에 보는 것처럼 괄호나 개행을 둠으로써 이를 수정할 수 있습니다.

-
var func = (a, b, c) =>
+
var func = (a, b, c) =>
   1;
 
 var func = (a, b, c) => (
@@ -389,7 +389,7 @@ var func = (a, b, c) => {
 
 

화살표 함수 내의 화살표는 연산자가 아닙니다. 그러나 화살표 함수는 평범한 함수와 비교했을 때 operator precedence와 다르게 반응하는 특별한 파싱룰을 가지고 있습니다.

-
let callback;
+
let callback;
 
 callback = callback || function() {}; // ok
 
@@ -403,7 +403,7 @@ callback = callback || (() => {});    // ok
 
 

기본 사용법

-
//  empty 화살표 함수는 undefined를 반환 
+
//  empty 화살표 함수는 undefined를 반환 
 let empty = () => {};
 
 (() => 'foobar')();
-- 
cgit v1.2.3-54-g00ecf