path: root/files/ko/web/javascript/reference/functions/애로우_펑션/index.html

---
title: 화살표 함수
slug: Web/JavaScript/Reference/Functions/애로우_펑션
tags:
  - ECMAScript6
  - Functions
  - Intermediate
  - JavaScript
  - Reference
translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
---
<div>{{jsSidebar("Functions")}}</div>

<p>화살표 함수 표현(<strong>arrow function expression</strong>)은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expressions">function 표현</a>에 비해 구문이 짧고  자신의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>을 바인딩 하지 않습니다. 화살표 함수는 항상 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name" title="anonymous">익명</a>입니다. 이  함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.</p>

<p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p>

<h2 id="구문">구문</h2>

<h3 id="기본_구문">기본 구문</h3>

<pre class="syntaxbox notranslate"><strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =&gt; {</strong> <em>statements</em> <strong>}</strong>
<strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =&gt;</strong> <em>expression</em>
// 다음과 동일함:  =&gt; { return expression; }

// 매개변수가 하나뿐인 경우 괄호는 선택사항:
<em>(singleParam)</em> <strong>=&gt; {</strong> <em>statements</em> <strong>}</strong>
<em>singleParam</em> <strong>=&gt;</strong> { <em>statements }</em>

// 매개변수가 없는 함수는 괄호가 필요:
<strong>() =&gt; {</strong> <em>statements</em> <strong>}</strong></pre>

<h3 id="고급_구문">고급 구문</h3>

<pre class="syntaxbox notranslate">// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
<em>params</em> =&gt; ({<em>foo: bar</em>})

// <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="Rest parameter">나머지 매개변수</a> 및 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="Default parameter">기본 매개변수</a>를 지원함
(<em>param1</em>, <em>param2</em>, <strong>...rest</strong>) =&gt; { <em>statements</em> }
(<em>param1</em> <strong>= defaultValue1</strong>, <em>param2</em>, …, paramN <strong>= defaultValueN</strong>) =&gt; { <em>statements</em> }

// 매개변수 목록 내 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="Destructuring">구조분해할당</a>도 지원됨
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =&gt; a + b + c;
f();  // 6
</pre>

<p>상세한 구문 예는 <a href="http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax">여기</a>에서 볼 수 있습니다.</p>

<h2 id="설명">설명</h2>

<p><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">Hacks 블로그 "ES6 In Depth: Arrow functions" 포스트</a> 참조.</p>

<p>화살표 함수 도입에 영향을 준 두 요소: 보다 짧아진 함수 및  <code>바인딩하지 않은 this.</code></p>

<h3 id="짧은_함수">짧은 함수</h3>

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

<pre class="notranslate">var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// 이 문장은 배열을 반환함: [8, 6, 7, 9]
elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(element) {
  return element.length;
});

// 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다.
elements.map((element) =&gt; {
  return element.length;
}); // [8, 6, 7, 9]

// 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다.
elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(element =&gt; {
  return element.length;
}); // [8, 6, 7, 9]

// 화살표 함수의 유일한 문장이 'return'일 때 'return'과
// 중괄호({})를 생략할 수 있다.
elements.map(element =&gt; element.length); // [8, 6, 7, 9]

// 이 경우 length 속성만 필요하므로 destructuring 매개변수를 사용할 수 있다.
// 'length'는 우리가 얻고자 하는 속성에 해당하는 반면,
// lengthFooBArX'는 변경 가능한 변수의 이름일 뿐이므로
// 원하는 유효한 변수명으로 변경할 수 있다.
elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ length: lengthFooBArX }) =&gt; lengthFooBArX); // [8, 6, 7, 9]

// destructuring 파라미터 할당도 아래와 같이 작성할 수 있습니다.
// 이 예에서 정의한 객체내의 'length'에 값을 지정하지 않은 점에 주목하세요. 대신, "length" 변수의
// 리터럴 이름은 우리가 해당 객체에서 꺼내오고 싶은 속성이름 자체로 사용됩니다.
elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ length }) =&gt; length); // [8, 6, 7, 9] </pre>

<h3 id="바인딩_되지_않은_this">바인딩 되지 않은 <code>this</code></h3>

<p>화살표 함수가 나오기 전까지는, 모든 새로운 함수는, 어떻게 그 함수가 호출되는지에 따라  자신의 <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 값을 정의했습니다:</p>

<ul>
 <li>이 함수가 생성자인 경우는 새로운 객체</li>
 <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a> 함수 호출에서는 <code>undefined</code> </li>
 <li>함수가 "객체 메서드"로서 호출된 경우 문맥 객체</li>
 <li>등등</li>
</ul>

<p>이는 객체 지향 스타일로 프로그래밍할 때 별로 좋지않습니다.</p>

<pre class="brush: js notranslate">function Person() {
  // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
  this.age = 0;

  setInterval(function growUp() {
    // 비엄격 모드에서, growUp() 함수는 `this`를
    // 전역 객체로 정의하고, 이는 Person() 생성자에
    // 정의된 `this`와 다름.
    this.age++;
  }, 1000);
}

var p = new Person();</pre>

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

<pre class="brush: js notranslate">function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // 콜백은  `that` 변수를 참조하고 이것은 값이 기대한 객체이다.
    that.age++;
  }, 1000);
}</pre>

<p>이렇게 하는 대신에, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" title="bound function">바인딩한 함수</a>는 적절한 <code>this</code> 값이 <code>growUp()</code> 함수에 전달될 수 있도록 생성될 수 있습니다.</p>

<p>화살표 함수는 자신의 <code>this</code>가 없습니다.  대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 <code>this</code>가 사용됩니다; 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따릅니다. 때문에 현재 범위에서 존재하지 않는 <code>this</code>를 찾을 때, 화살표 함수는 바로 바깥 범위에서 <code>this</code>를 찾는것으로 검색을 끝내게 됩니다.</p>

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

<pre class="brush: js notranslate">function Person(){
  this.age = 0;

  setInterval(() =&gt; {
    this.age++; // |this|는 Person 객체를 참조
  }, 1000);
}

var p = new Person();</pre>

<h4 id="엄격_모드와의_관계">엄격 모드와의 관계</h4>

<p><code>this</code>가 렉시컬(lexical, 정적)임을 감안하면, <code>this</code>에 관한 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a> 규칙은 그냥 무시됩니다.</p>

<pre class="notranslate">var f = () =&gt; { 'use strict'; return this; };
f() === window; // 혹은 전역객체</pre>

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

<p><strong>CORRECTION: START</strong></p>

<p>NOTE: the previous statement seems false.</p>

<p>Strict mode should prevent creating global variables when assigning to an undeclared identifier in a function.</p>

<p>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):</p>

<pre class="notranslate">&gt; f1 = x =&gt; { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; }
x =&gt; { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; }

&gt; y
VM51587:1 Uncaught ReferenceError: y is not defined
    at &lt;anonymous&gt;:1:1
(anonymous) @ VM51587:1

&gt; f1(3)
VM51533:1 x: 3, y: 3
4

&gt; y
3

&gt; f2 = x =&gt; { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; }
x =&gt; { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; }

&gt; z
VM51757:1 Uncaught ReferenceError: z is not defined
    at &lt;anonymous&gt;:1:1
(anonymous) @ VM51757:1

&gt; f2(4)
VM51712:1 Uncaught ReferenceError: z is not defined
    at f2 (&lt;anonymous&gt;:1:29)
    at &lt;anonymous&gt;:1:1
f2 @ VM51712:1
(anonymous) @ VM51800:1

&gt; f3 = x =&gt; (z1 = x + 1)
x =&gt; (z1 = x + 1)

&gt; z1
VM51891:1 Uncaught ReferenceError: z1 is not defined
    at &lt;anonymous&gt;:1:1
(anonymous) @ VM51891:1

&gt; f3(10)
11

&gt; z1
11
</pre>

<p>f2 illustrates that when explicitly setting the arrow function to apply strict mode, it does throw an error when attempting to assign an undeclared variable.</p>

<p>https://www.ecma-international.org/ecma-262/10.0/index.html#sec-strict-mode-code</p>

<p>https://www.ecma-international.org/ecma-262/10.0/index.html#sec-arrow-function-definitions-runtime-semantics-evaluation</p>

<p><strong>CORRECTION: END</strong></p>

<h4 id="call_또는_apply를_통한_피호출">call 또는 apply를 통한 피호출</h4>

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

<pre class="brush: js notranslate">var adder = {
  base : 1,

  add : function(a) {
    var f = v =&gt; v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v =&gt; v + this.base;
    var b = {
      base : 2
    };

    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 이는 2가 콘솔에 출력될 것임
console.log(adder.addThruCall(1)); // 이도 2가 콘솔에 출력될 것임</pre>

<h3 id="바인딩_되지_않은_arguments">바인딩 되지 않은 <code>arguments</code></h3>

<p>화살표 함수는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> 객체</a>를 바인드 하지 않습니다.  때문에, <code>arguments는</code>  그저 둘러싸는 범위(scope) 내 이름에 대한 참조입니다.</p>

<pre class="brush: js notranslate"><code>var arguments = [1, 2, 3];
var arr = () =&gt; arguments[0];

arr(); // 1

function foo(n) {
  var f = () =&gt; arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n
  return f();
}

foo(1); // 2</code></pre>

<p>화살표 함수는 자신의 <code>arguments</code> 객체가 없지만, 대부분의 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>가 좋은 대안입니다:</p>

<pre class="brush: js notranslate">function foo(n) {
  var f = (...args) =&gt; args[0] + n;
  return f(2);
}

foo(1); // 3</pre>

<h3 id="메소드로_사용되는_화살표_함수">메소드로 사용되는 화살표 함수</h3>

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

<pre class="brush: js notranslate"><code>'use strict';

var obj = { // does not create a new scope
  i: 10,
  b: () =&gt; console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}</code>
</pre>

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

<pre class="brush: js notranslate"><code>'use strict';

var obj = {
  a: 10
};

Object.defineProperty(obj, 'b', {
  get: () =&gt; {
    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object)
    return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
  }
});</code></pre>

<h3 id="new_연산자_사용"><code>new</code> 연산자 사용</h3>

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

<pre class="brush: js notranslate"><code>var Foo = () =&gt; {};
var foo = new Foo(); // TypeError: Foo is not a constructor</code></pre>

<h3 id="prototype_속성_사용"><code>prototype</code> 속성 사용</h3>

<p>화살표 함수는 <code>prototype</code> 속성이 없습니다.</p>

<pre class="brush: js notranslate"><code>var Foo = () =&gt; {};
console.log(Foo.prototype); // undefined</code></pre>

<h3 id="yield_키워드_사용"><code>yield</code> 키워드 사용</h3>

<p><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> 키워드는 화살표 함수의 본문(그 안에 더 중첩된 함수 내에서 허용한 경우를 제외하고)에 사용될 수 없습니다. 그 결과, 화살표 함수는 생성기(generator)로서 사용될 수 없습니다.</p>

<h3 id="함수_본문">함수 본문</h3>

<p>화살표 함수는 "concise 바디"든 보통 "block 바디"든 하나를 가질 수 있습니다.</p>

<div class="note">
<p>concise바디는 중괄호'{}'로 묶이지않은 한줄짜리 바디이고 block바디는 중괄호로 묶인 바디입니다. 보통 여러줄 쓸때 block바디를 사용합니다.</p>
</div>

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

<pre class="brush: js notranslate">var func = x =&gt; x * x;                  // concise 바디, 생략된 "return" 여기서는 x * x
var func = (x, y) =&gt; { return x + y; }; // block 바디, "return"이 필요
</pre>

<h3 id="객체_리터럴_반환">객체 리터럴 반환</h3>

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

<pre class="brush: js notranslate">var func = () =&gt; {  foo: 1  };
// func() 호출은 undefined를 반환!

var func = () =&gt; {  foo: function() {}  };
// SyntaxError: function 문은 이름이 필요함</pre>

<p>이는 중괄호({}) 안 코드가 일련의 문(즉 <code>foo</code>는 라벨처럼 취급됩니다, 객체 리터럴 내 키가 아니라)으로 파싱(parse, 구문 분석)되기 때문입니다.</p>

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

<pre class="brush: js notranslate">var func = () =&gt; ({ foo: 1 });</pre>

<h3 id="줄바꿈">줄바꿈</h3>

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

<pre class="brush: js notranslate"><code>var func = (a, b, c)
           =&gt; 1;
// SyntaxError: expected expression, got '=&gt;'</code></pre>

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

<pre class="notranslate">var func = (a, b, c) =&gt;
  1;

var func = (a, b, c) =&gt; (
  1
);

var func = (a, b, c) =&gt; {
  return 1
};

<code>var func = (
  a,
  b,
  c
) =&gt; 1;

// SyntaxError가 발생하지 않습니다.</code></pre>

<h3 id="파싱순서">파싱순서</h3>

<p>화살표 함수 내의 화살표는 연산자가 아닙니다. 그러나 화살표 함수는 평범한 함수와 비교했을 때 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>와 다르게 반응하는 특별한 파싱룰을 가지고 있습니다.</p>

<pre class="brush: js notranslate"><code>let callback;

callback = callback || function() {}; // ok

callback = callback || () =&gt; {};
// SyntaxError: invalid arrow-function arguments

callback = callback || (() =&gt; {});    // ok</code>
</pre>

<h2 id="다른_예">다른 예</h2>

<h3 id="기본_사용법">기본 사용법</h3>

<pre class="brush: js notranslate"><code>// </code> empty 화살표 함수는 undefined를 반환 <code>
let empty = () =&gt; {};

(() =&gt; 'foobar')();
// "foobar" 반환
// (this is an Immediately Invoked Function Expression

var simple = a =&gt; a &gt; 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) =&gt; a &gt; b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) =&gt; a + b);
// 66

var even = arr.filter(v =&gt; v % 2 == 0);
// [6, 0, 18]

var double = arr.map(v =&gt; v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// 더 간결한 promise 체인
promise.then(a =&gt; {
  // ...
}).then(b =&gt; {
  // ...
});

// 매개변수가 없는 경우에도 더 읽기 쉬움
setTimeout( () =&gt; {
  console.log('I happen sooner');
  setTimeout( () =&gt; {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);</code></pre>

<h2 id="스펙">스펙</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<div class="hidden">
<p><span style="">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out </span><a href="https://github.com/mdn/browser-compat-data" style="">https://github.com/mdn/browser-compat-data</a><span style=""> and send us a pull request.</span></p>
</div>

<p>{{Compat("javascript.functions.arrow_functions")}}</p>

<h2 id="참조">참조</h2>

<ul>
 <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">Hacks 블로그 "ES6 In Depth: Arrow functions" 포스트</a></li>
</ul>