Skip to content

Commit

Permalink
fix: [오번역수정] Part 1 - 2.15 [함수] 매개변수 설명 수정 (javascript-tutorial#1444)
Browse files Browse the repository at this point in the history
영문 article.md에 대한 커밋을 cherry-pick를 하다가 매개변수 및 매개변수 기본값에 대한 설명이 추가되었음을 확인하고 번역 누락을 수정하기 위해 커밋 생성.
  • Loading branch information
boyeonihn committed Sep 14, 2022
1 parent 3366151 commit e1e6ef7
Showing 1 changed file with 30 additions and 29 deletions.
59 changes: 30 additions & 29 deletions 1-js/02-first-steps/15-function-basics/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function showMessage() {

```js
function name(parameter1, parameter2, ... parameterN) {
...함수 본문... [영문 번경]// body
// 함수 본문
}
```

Expand Down Expand Up @@ -137,12 +137,12 @@ alert( userName ); // 함수는 외부 변수에 접근하지 않습니다. 따

## 매개변수

매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있습니다. 매개변수는 *인수(argument)* 라고 불리기도 합니다(매개변수와 인수는 엄밀히 같진 않지만, 튜토리얼 원문을 토대로 번역하였습니다 - 옮긴이). // [영어 원문 변경] We can pass arbitrary data to functions using parameters.
매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있습니다. 매개변수는 *인자* 라고 불리기도 합니다.

아래 예시에서 함수 showMessage는 매개변수 `from``text`를 가집니다.

```js run
function showMessage(*!*from, text*/!*) { // 인수: from, text [영어 원문 변경: parameters: from, text]
function showMessage(*!*from, text*/!*) { // 인자: from, text
alert(from + ': ' + text);
}

Expand Down Expand Up @@ -172,30 +172,30 @@ showMessage(from, "Hello"); // *Ann*: Hello
alert( from ); // Ann
```
When a value is passed as a function parameter, it's also called an *argument*.
함수의 매개변수에 전달된 값을 *인수*라고 부르기도 합니다.
In other words, to put these terms straight:
더 정확한 이해를 돕기 위해 용어를 다시 한번 정리해볼까요?
- A parameter is the variable listed inside the parentheses in the function declaration (it's a declaration time term).
- An argument is the value that is passed to the function when it is called (it's a call time term).
- 매개변수(parameter)는 함수 선언 방식 괄호 사이에 있는 변수입니다(선언 시 용어).
- 인수(argument)는 함수를 호출할 때 매개변수에 전달되는 값입니다(호출 시 용어).
We declare functions listing their parameters, then call them passing arguments.
즉, 매개변수를 나열해 함수를 선언한 다음 인수를 전달해 함수를 호출합니다.
In the example above, one might say: "the function `showMessage` is declared with two parameters, then called with two arguments: `from` and `"Hello"`".
위의 예에서 함수 `showMessage`는 `from`, `text`라는 두 개의 매개변수로 선언된 후 `from`, `Hello`의 값을 가진 두 개의 인수로 호출되었습니다.
## 기본값
매개변수에 값을 전달하지 않으면 그 값은 `undefined`가 됩니다. [영어 원문 변경사항] If a function is called, but an argument is not provided, then the corresponding value becomes `undefined`.
함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 `undefined`가 됩니다.
예시를 통해 이에 대해 알아봅시다. 위에서 정의한 함수 `showMessage(from, text)`는 매개변수가 2개지만, 아래와 같이 인수를 하나만 넣어서 호출할 수 있습니다.
```js
showMessage("Ann");
```
이렇게 코드를 작성해도 에러가 발생하지 않습니다. 두 번째 매개변수에 값을 전달하지 않았기 때문에 `text`엔 `undefiend`가 할당될 뿐입니다. 따라서 에러 없이 `"Ann: undefined"`가 출력됩니다.
이렇게 코드를 작성해도 에러가 발생하지 않습니다. 두 번째 매개변수에 값을 전달하지 않았기 때문에 `text`엔 `undefined`가 할당될 뿐입니다. 따라서 에러 없이 `"Ann: undefined"`가 출력됩니다.
매개변수에 값을 전달하지 않아도 그 값이 `undefined`가 되지 않게 하려면 '기본값(default value)'을 설정해주면 됩니다. 매개변수 오른쪽에 `=`을 붙이고 `undefined` 대신 설정하고자 하는 기본값을 써주면 되죠. [영문 변경] We can specify the so-called "default" (to use if omitted) value for a parameter in the function declaration, using `=`:
매개변수에 값을 전달하지 않아도 그 값이 `undefined`가 되지 않게 하려면 함수 선언할 때 `=`를 사용해 '기본값(default value)'을 설정해주면 됩니다.
```js run
function showMessage(from, *!*text = "no text given"*/!*) {
Expand All @@ -205,10 +205,11 @@ function showMessage(from, *!*text = "no text given"*/!*) {
showMessage("Ann"); // Ann: no text given
```
이젠 `text`가 값을 전달받지 못해도 `undefined`대신 기본값 `"no text given"`이 할당됩니다.
이젠 `text`가 값을 전달받지 못해도 `undefined` 대신 기본값 `"no text given"`이 할당됩니다.
The default value also jumps in if the parameter exists, but strictly equals `undefined`, like this:
매개변수에 값을 전달해도 그 값이 `undefined`와 엄격히 일치한다면 기본값이 할당됩니다.
예시:
```js
showMessage("Ann", undefined); // Ann: no text given
```
Expand All @@ -225,19 +226,20 @@ function showMessage(from, text = anotherFunction()) {
```smart header="매개변수 기본값 평가 시점"
자바스크립트에선 함수를 호출할 때마다 매개변수 기본값을 평가합니다. 물론 해당하는 매개변수가 없을 때만 기본값을 평가하죠.
위 예시에선 매개변수 `text`에 값이 없는 경우 `showMessage()`를 호출할 때마다 `anotherFunction()`이 호출됩니다. [영문 변경사항:] In the example above, `anotherFunction()` isn't called at all, if the `text` parameter is provided.
위 예시에선 매개변수 `text`에 값이 전달되는 경우 `anotherFunction()`은 호출되지 않습니다.
On the other hand, it's independently called every time when `text` is missing.
반면 `text`에 값이 없는 경우 `showMessage()`를 호출할 때마다 `anotherFunction()`이 호출됩니다.
```
````smart header="Default parameters in old JavaScript code"
Several years ago, JavaScript didn't support the syntax for default parameters. So people used other ways to specify them.
````smart header="구식 자바스크립트의 매개변수 기본값 설정 방법"
몇 년 전만 해도 자바스크립트는 매개변수 기본값에 대한 구문을 지원하지 않았습니다. 그래서 매개변수 기본값을 설정하기 위해 다른 방법을 사용했습니다.
Nowadays, we can come across them in old scripts.
요즘에도 오래된 스크립트에서 매개변수 기본값 설정을 위해 사용된 구식 코드를 접할 수 있습니다.
For example, an explicit check for `undefined`:
예를 들어 구식 코드에서는 매개변수 기본값을 설정하기 위해 먼저 매개변수의 값이 `undefined`와 일치하는지 명시적으로 확인하고, 일치한다면 기본값을 설정했습니다.
예시:
```js
function showMessage(from, text) {
*!*
Expand All @@ -250,12 +252,12 @@ function showMessage(from, text) {
}
```
...Or using the `||` operator:
또한 논리 연산자 `||`를 사용해 매개변수 기본값을 설정하기도 했죠.
```js
function showMessage(from, text) {
// If the value of text is falsy, assign the default value
// this assumes that text == "" is the same as no text at all
// text의 값이 falsy하면 기본값이 할당됨
// 이 코드는 text == ""가 매개변수 text에 값을 아예 전달하지 않는 것과 같다고 가정합니다.
text = text || 'no text given';
...
}
Expand All @@ -265,18 +267,17 @@ function showMessage(from, text) {
### 매개변수 기본값을 설정할 수 있는 또 다른 방법
<<<<<<< HEAD
가끔은 함수 선언부에서 매개변수 기본값을 설정하는 것 대신 함수가 실행되는 도중에 기본값을 설정하는 게 논리에 맞는 경우가 생기기도 합니다. [영문 변경] Sometimes it makes sense to assign default values for parameters at a later stage after the function declaration.
가끔은 함수를 선언할 때가 아닌 함수 선언 후 매개변수 기본값을 설정하는 것이 적절한 경우도 있습니다.
이런 경우엔 일단 매개변수를 `undefined`와 비교하여 함수 호출 시 매개변수가 생략되었는지를 확인합니다. [영문 변경사항:] We can check if the parameter is passed during the function execution, by comparing it with `undefined`:
이런 경우엔 일단 매개변수를 `undefined`와 비교하여 함수 호출 시 매개변수가 전달되었는지를 확인합니다.
```js run
function showMessage(text) {
// ...
*!*
if (text === undefined) { // [영문 변경] if the parameter is missing
text = '빈 문자열';
if (text === undefined) { // 매개변수가 생략되었다면
text = '빈 문자열';
}
*/!*
Expand All @@ -299,7 +300,7 @@ function showMessage(text) {
이 외에도 모던 자바스크립트 엔진이 지원하는 [nullish 병합 연산자(nullish coalescing operator)](info:nullish-coalescing-operator) `??`를 사용하면 `0`처럼 falsy로 평가되는 값들을 일반 값처럼 처리할 수 있어서 좋습니다.
```js run
// 매개변수 'count'가 넘어오지 않으면 'unknown'을 출력해주는 함수 [영문 변경] // if count is undefined or null, show "unknown"
// 매개변수 'count'undefined 또는 null이면 'unknown'을 출력해주는 함수
function showCount(count) {
alert(count ?? "unknown");
}
Expand Down

0 comments on commit e1e6ef7

Please sign in to comment.