[화살표 함수 기초] 번역

Author: Violet-Bora-Lee

1-js/02-first-steps/16-arrow-functions-basics/article.md

@@ -1,29 +1,29 @@
-# Arrow functions, the basics
+# 화살표 함수 기초
 
-There's another very simple and concise syntax for creating functions, that's often better than Function Expressions.
+함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다.
 
-It's called "arrow functions", because it looks like this:
+바로 화살표 함수(arrow function)를 사용하는 것입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다.
 
 ```js
 let func = (arg1, arg2, ...argN) => expression
 ```
 
-...This creates a function `func` that accepts arguments `arg1..argN`, then evaluates the `expression` on the right side with their use and returns its result.
+이렇게 코드를 작성하면 인자 `arg1..argN`를 받는 함수 `func`이 만들어집니다. 함수 `func`는 화살표(`=>`) 우측의 `표현식(expression)`을 평가하고, 평가 결과를 반환합니다.
 
-In other words, it's the shorter version of:
+아래 함수의 축약 버전이라고 할 수 있죠.
 
 ```js
 let func = function(arg1, arg2, ...argN) {
   return expression;
 };
 ```
 
-Let's see a concrete example:
+좀 더 구체적인 예시를 살펴봅시다.
 
 ```js run
 let sum = (a, b) => a + b;
 
-/* This arrow function is a shorter form of:
+/* 위 화살표 함수는 아래 함수의 축약 버전입니다.
 
 let sum = function(a, b) {
   return a + b;
@@ -33,79 +33,79 @@ let sum = function(a, b) {
 alert( sum(1, 2) ); // 3
 ```
 
-As you can, see `(a, b) => a + b` means a function that accepts two arguments named `a` and `b`. Upon the execution, it evaluates the expression `a + b` and returns the result.
+보시는 바와 같이 `(a, b) => a + b`는 인수 `a`와 `b`를 받는 함수입니다. `(a, b) => a + b`는 실행되는 순간 표현식 `a + b`를 평가하고 그 결과를 반환합니다.
 
-- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter.
+- 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다. 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.
 
-    For example:
+    예시:
 
     ```js run
     *!*
     let double = n => n * 2;
-    // roughly the same as: let double = function(n) { return n * 2 }
+    // let double = function(n) { return n * 2 }과 거의 동일합니다.
     */!*
 
     alert( double(3) ); // 6
     ```
 
-- If there are no arguments, parentheses will be empty (but they should be present):
+- 인수가 하나도 없을 땐 괄호를 비워놓으면 됩니다. 다만, 이 때 괄호는 생략할 수 없습니다.
 
     ```js run
-    let sayHi = () => alert("Hello!");
+    let sayHi = () => alert("안녕하세요!");
 
     sayHi();
     ```
 
-Arrow functions can be used in the same way as Function Expressions.
+화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있습니다.
 
-For instance, to dynamically create a function:
+아래 예시와 같이 함수를 동적으로 만들 수 있습니다.
 
 ```js run
-let age = prompt("What is your age?", 18);
+let age = prompt("나이를 알려주세요.", 18);
 
 let welcome = (age < 18) ?
-  () => alert('Hello') :
-  () => alert("Greetings!");
+  () => alert('안녕') :
+  () => alert("안녕하세요!");
 
-welcome(); // ok now
+welcome();
 ```
 
-Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.
+화살표 함수를 처음 접하면 가독성이 떨어집니다. 익숙지 않기 때문입니다. 하지만 문법이 눈에 익기 시작하면 적응은 식은 죽 먹기가 됩니다.
 
-They are very convenient for simple one-line actions, when we're just too lazy to write many words.
+함수 본문이 한 줄인 간단한 함수는 화살표 함수를 사용해서 만드는 게 편리합니다. 타이핑을 적게 해도 함수를 만들 수 있다는 장점이 있습니다.
 
-## Multiline arrow functions
+## 본문이 여러 줄인 화살표 함수
 
-The examples above took arguments from the left of `=>` and evaluated the right-side expression with them.
+위에서 소개해 드린 화살표 함수들은 `=>` 왼쪽에 있는 인수를 이용해 `=>` 오른쪽에 있는 표현식을 평가하는 함수들이었습니다.
 
-Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal `return` within them.
+그런데 평가해야 할 표현식이나 구문이 여러 개인 함수가 있을 수도 있습니다. 이 경우 역시 화살표 함수 문법을 사용해 함수를 만들 수 있습니다. 다만, 이때는 중괄호 안에 평가해야 할 코드를 넣어주어야 합니다. 그리고 `return` 지시자를 사용해 명시적으로 결괏값을 반환해 주어야 합니다.
 
-Like this:
+아래와 같이 말이죠.
 
 ```js run
-let sum = (a, b) => {  // the curly brace opens a multiline function
+let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
   let result = a + b;
 *!*
-  return result; // if we use curly braces, then we need an explicit "return" 
+  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
 */!*
 };
 
 alert( sum(1, 2) ); // 3
 ```
 
-```smart header="More to come"
-Here we praised arrow functions for brevity. But that's not all!
+```smart header="아직 끝나지 않았습니다."
+지금까진 간결함이라는 특징을 중심으로 화살표 함수에 대해 알아보았습니다. 하지만 이게 다가 아닙니다!
 
-Arrow functions have other interesting features.
+화살표 함수는 여기서 소개한 기능 이외에도 다른 흥미로운 기능을 지원합니다.
 
-To study them in-depth, we first need to get to know some other aspects of JavaScript, so we'll return to arrow functions later in the chapter <info:arrow-functions>.
+자세한 내용을 배우려면 자바스크립트의 다른 내용들을 더 알아야 합니다. 화살표 함수의 깊은 내용을 알기위해 필요한 내용을 배운 후에 <info:arrow-functions>에서 그 내용들을 다루도록 하겠습니다.
 
-For now, we can already use arrow functions for one-line actions and callbacks.
+지금까진 본문이 한 줄인 화살표 함수, 화살표 함수가 콜백으로 쓰인 경우에 대해서 알아보았습니다.
 ```
 
-## Summary
+## 요약
 
-Arrow functions are handy for one-liners. They come in two flavors:
+화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용합니다. 본문이 한 줄이 아니라면 다른 방법으로 화살표 함수를 작성해야 합니다. 
 
-1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result.
-2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something.
+1. 중괄호 없이 작성: `(...args) => expression` -- 화살표 오른쪽에 표현식을 둡니다. 함수는 이 표현식을 평가하고, 평가 결과를 반환합니다.
+2. 중괄호와 함께 작성: `(...args) => { body }` -- 본문이 여러 줄로 구성되었다면 중괄호를 사용해야 합니다. 다만, 이 경우는 반드시 `return` 지시자를 사용해 반환 값을 명기해 주어야 합니다.