diff options
Diffstat (limited to 'files/ko/learn/javascript/building_blocks/functions/index.html')
| -rw-r--r-- | files/ko/learn/javascript/building_blocks/functions/index.html | 96 |
1 files changed, 48 insertions, 48 deletions
diff --git a/files/ko/learn/javascript/building_blocks/functions/index.html b/files/ko/learn/javascript/building_blocks/functions/index.html index 0b5efacc40..88410c34cd 100644 --- a/files/ko/learn/javascript/building_blocks/functions/index.html +++ b/files/ko/learn/javascript/building_blocks/functions/index.html @@ -1,5 +1,5 @@ --- -title: 함수 — 재사용 가능한 코드 블록 +title: 함수 — 코드 재사용 slug: Learn/JavaScript/Building_blocks/Functions translation_of: Learn/JavaScript/Building_blocks/Functions --- @@ -7,12 +7,12 @@ translation_of: Learn/JavaScript/Building_blocks/Functions <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">코딩에 있어서 또 하나의 필수적인 개념은 <strong>함수</strong>인데, 이는 하나의 일을 하는 코드 조각을 정의된 블록 안에 저장하고, 같은 코드를 여러 번 타이핑하기보다는, 하나의 짧은 명령을 사용하여 당신이 그 함수가 필요할 때 언제든지 그 코드를 호출할 수 있게 합니다. 이 문서에서 우리는 기본 문법(syntax), 어떻게 함수를 호출하고(invoke) 정의하는지, 스코프(scope), 그리고 매개변수(parameter)와 같은 함수 뒤에 있는 핵심적인 개념들을 탐구할 것입니다.</p> +<p class="summary">코딩에 있어서 또 하나의 필수적인 개념은 <strong>함수</strong>인데, 이는 하나의 일을 하는 코드 조각을 정의된 블록 안에 저장하고, 같은 코드를 여러 번 타이핑하기보다는, 하나의 짧은 명령을 사용하여 여러분이 그 함수가 필요할 때 언제든지 그 코드를 호출할 수 있게 합니다. 이 문서에서 우리는 기본 문법(syntax), 어떻게 함수를 호출하고(invoke) 정의하는지, 스코프(scope), 그리고 매개변수(parameter)와 같은 함수 뒤에 있는 핵심적인 개념들을 탐구할 것입니다.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">필요 사항:</th> + <th scope="row">필요한 사전 지식:</th> <td>기본적인 컴퓨터 활용 능력, HTML과 CSS의 기본적인 이해, <a href="/ko/docs/Learn/JavaScript/First_steps">자바스크립트 첫 단계</a>.</td> </tr> <tr> @@ -26,7 +26,7 @@ translation_of: Learn/JavaScript/Building_blocks/Functions <p>자바스크립트 어디서든 함수를 찾을 수 있습니다. 사실, 우리는 지금까지 수업에서 함수를 계속 사용해왔습니다. 함수에 대해서 아주 많이 말해오지 않았을 뿐이죠. 그러나 이제 함수에 대해서 분명하게 말하고, 실제로 문법을 탐험할 때가 되었습니다.</p> -<p> <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#%EB%A3%A8%ED%94%84%EC%9D%98_%ED%91%9C%EC%A4%80">for loop</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#while_%EA%B7%B8%EB%A6%AC%EA%B3%A0_do_..._while">while 과 do...while loop</a>, 또는 <a href="/ko/docs/Learn/JavaScript/Building_blocks/%EC%A1%B0%EA%B1%B4%EB%AC%B8#if_..._else_%EB%AC%B8">if...else문</a>과 같은 일반적인 내장 언어 구조를 사용하지 <strong>않고</strong> — <code>()</code> —같은 괄호 쌍을 사용했다면 당신은 함수를 사용하고 있던 겁니다</p> +<p> <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#%EB%A3%A8%ED%94%84%EC%9D%98_%ED%91%9C%EC%A4%80">for loop</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#while_%EA%B7%B8%EB%A6%AC%EA%B3%A0_do_..._while">while 과 do...while loop</a>, 또는 <a href="/ko/docs/Learn/JavaScript/Building_blocks/%EC%A1%B0%EA%B1%B4%EB%AC%B8#if_..._else_%EB%AC%B8">if...else문</a>과 같은 일반적인 내장 언어 구조를 사용하지 <strong>않고</strong> — <code>()</code> —같은 괄호 쌍을 사용했다면 여러분은 함수를 사용하고 있던 겁니다.</p> <h2 id="브라우저_내장_함수">브라우저 내장 함수</h2> @@ -58,20 +58,20 @@ console.log(madeAString); <p>...우리는 함수를 사용하고 있었어요!</p> <div class="note"> -<p><strong>Note</strong>: 만약 필요하다면, 이 기능들에 다시 익숙해지기 위해 당신의 브라우저 자바스크립트 콘솔에 자유롭게 이 코드들을 입력해 보세요.</p> +<p><strong>참고</strong>: 만약 필요하다면, 이 기능들에 다시 익숙해지기 위해 여러분의 브라우저 자바스크립트 콘솔에 자유롭게 이 코드들을 입력해 보세요.</p> </div> -<p>JavaScript 언어는 당신 스스로 코드 전체를 적을 필요 없이, 유용한 것들을 할 수 있게 해주는 많은 내장 함수를 가지고 있습니다. 사실, 브라우저 내장 함수를 <strong>호출</strong>("함수를 실행하다(run 또는 execute)"는 말을 멋있게 "호출하다(invoke)"라고 하기도 합니다)할 때 호출하는 일부 코드는 JavaScript로 작성될 수 없었습니다 — 이러한 함수 중 상당수는 백그라운드 브라우저 코드의 일부를 호출하고 있으며, 이는 JavaScript와 같은 웹 언어가 아니라 대체로 C++와 같은 저수준 시스템 언어로 작성됩니다.</p> +<p>JavaScript 언어는 여러분 스스로 코드 전체를 적을 필요 없이, 유용한 것들을 할 수 있게 해주는 많은 내장 함수를 가지고 있습니다. 사실, 브라우저 내장 함수를 <strong>호출</strong>("함수를 실행하다(run 또는 execute)"는 말을 멋있게 "호출하다(invoke)"라고 하기도 합니다)할 때 호출하는 일부 코드는 JavaScript로 작성될 수 없었습니다 — 이러한 함수 중 상당수는 백그라운드 브라우저 코드의 일부를 호출하고 있으며, 이는 JavaScript와 같은 웹 언어가 아니라 대체로 C++와 같은 저수준 시스템 언어로 작성됩니다.</p> <p>몇몇 브라우저 내장함수는 핵심(core) 자바스크립트 언어의 일부가 아니라는 것을 유념하세요. 몇몇은 브라우저 API의 일부로써 정의되어 있는데, 더욱 많은 기능성을 제공하기 위해 기본(default) 언어의 위에 개발되었습니다 (<a href="/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript#%EA%B7%B8%EB%9E%98%EC%84%9C_%EC%A7%84%EC%A7%9C_%EC%96%B4%EB%96%A4_%EC%9D%BC%EC%9D%84_%ED%95%A0_%EC%88%98_%EC%9E%88%EB%82%98%EC%9A%94">앞선 코스</a>에서 더 자세한 설명을 볼 수 있습니다). 브라우저 API를 다루는 법은 나중에 더 살펴보도록 하겠습니다.</p> <h2 id="함수_대_메소드">함수 대 메소드</h2> -<p>프로그래머들은 객체(object)의 부분인 <strong>함수</strong>를 <strong>메서드</strong>(method)라고 부릅니다. 당신은 아직 구성된(structured) 자바스크립트 객체의 내부 작동에 대해서 배울 필요는 없습니다. 차후의 모듈에서 객체의 내부 작동과, 어떻게 객체를 생성하는지에 대한 모든 것을 배울 수 있습니다. 우선은, 우리는 메서드 대 함수에 대해 있을 수 있는 혼란을 단지 정리하기를 원합니다. — 웹 상에서 이용 가능한 관련된 리소스들을 살펴보면서 당신은 두 용어를 만날 가능성이 있습니다.</p> +<p>프로그래머들은 객체(object)의 부분인 <strong>함수</strong>를 <strong>메서드</strong>(method)라고 부릅니다. 여러분은 아직 구성된(structured) 자바스크립트 객체의 내부 작동에 대해서 배울 필요는 없습니다. 차후의 모듈에서 객체의 내부 작동과, 어떻게 객체를 생성하는지에 대한 모든 것을 배울 수 있습니다. 우선은, 우리는 메서드 대 함수에 대해 있을 수 있는 혼란을 단지 정리하기를 원합니다. — 웹 상에서 이용 가능한 관련된 리소스들을 살펴보면서 여러분은 두 용어를 만날 가능성이 있습니다.</p> -<p>우리가 지금까지 사용해 왔던 내장된(built-in) 코드는 두 형태로 나타납니다. 바로 <strong>함수</strong>와 <strong>메서드</strong>입니다. 당신은 내장 함수의 전체 목록과, 내장 객체와 그들의 해당하는 메서드들 또한 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects">여기서</a> 확인할 수 있습니다.</p> +<p>우리가 지금까지 사용해 왔던 내장된(built-in) 코드는 두 형태로 나타납니다. 바로 <strong>함수</strong>와 <strong>메서드</strong>입니다. 여러분은 내장 함수의 전체 목록과, 내장 객체와 그들의 해당하는 메서드들 또한 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects">여기서</a> 확인할 수 있습니다.</p> -<p>당신은 또한 많은 <strong>사용자 정의 함수</strong>(custom functions)들을 이 코스에서 지금까지 봐 왔습니다. — 브라우저 내부에서 정의된 게 아니라, 당신의 코드에서 정의된 함수 말입니다. 괄호 바로 앞에 있는 사용자 정의 이름을 봤을 때마다, 당신은 사용자 정의 함수를 사용하고 있었던 것입니다. <a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문(loops) 문서</a>의 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> 예제 (전체 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">소스 코드</a> 또한 보세요)에서, 우리는 다음과 같은 사용자 정의 <code>draw()</code> 함수를 포함했었습니다.</p> +<p>여러분은 또한 많은 <strong>사용자 정의 함수</strong>(custom functions)들을 이 코스에서 지금까지 봐 왔습니다. — 브라우저 내부에서 정의된 게 아니라, 여러분의 코드에서 정의된 함수 말입니다. 괄호 바로 앞에 있는 사용자 정의 이름을 봤을 때마다, 여러분은 사용자 정의 함수를 사용하고 있었던 것입니다. <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문(loops) 문서</a>의 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> 예제 (전체 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">소스 코드</a> 또한 보세요)에서, 우리는 다음과 같은 사용자 정의 <code>draw()</code> 함수를 포함했었습니다.</p> <pre class="brush: js notranslate">function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); @@ -87,13 +87,13 @@ console.log(madeAString); <pre class="brush: js notranslate">draw();</pre> -<p>우리가 이것을 반복하기를 원할 때마다 모든 코드를 또 작성하지 않고 말이죠. 그리고 함수는 당신이 원하는 코드를 무엇이든지간에 포함할 수 있습니다. 당신은 심지어 다른 함수들을 함수 내부에서부터 호출할 수 있습니다. 위의 예시는 아래와 같이 정의된 <code>random()</code> 함수를 세 번이나 호출하고 있죠.</p> +<p>우리가 이것을 반복하기를 원할 때마다 모든 코드를 또 작성하지 않고 말이죠. 그리고 함수는 여러분이 원하는 코드를 무엇이든지간에 포함할 수 있습니다. 여러분은 심지어 다른 함수들을 함수 내부에서부터 호출할 수 있습니다. 위의 예시는 아래와 같이 정의된 <code>random()</code> 함수를 세 번이나 호출하고 있죠.</p> <pre class="brush: js notranslate">function random(number) { return Math.floor(Math.random()*number); }</pre> -<p>브라우저의 내장 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> 함수는 오직 0과 1사이의 무작위 소수를 생성하기 때문에 우리는 이 함수가 필요했습니다. 우리는 0과 명시된 숫자 사이의 무작위 정수를 원했습니다.</p> +<p>브라우저의 내장 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> 함수는 오직 0과 1사이의 무작위 소수를 생성하기 때문에 우리는 이 함수가 필요했습니다. 우리는 0과 명시된 숫자 사이의 무작위 정수를 원했습니다.</p> <h2 id="함수_호출">함수 호출</h2> @@ -107,12 +107,12 @@ myFunction() // calls the function once</pre> <div class="notecard note"> -<p>이 형태의 함수 생성은 또한 <em>함수 선언</em>(function declaration)으로도 알려져 있습니다. 이것은 언제나 호이스팅(hoisting)되어서, 당신은 함수를 함수 정의 위에서 호출할 수 있고 이것은 잘 작동할 것입니다.</p> +<p>이 형태의 함수 생성은 또한 <em>함수 선언</em>(function declaration)으로도 알려져 있습니다. 이것은 언제나 호이스팅(hoisting)되어서, 여러분은 함수를 함수 정의 위에서 호출할 수 있고 이것은 잘 작동할 것입니다.</p> </div> <h2 id="익명_함수">익명 함수</h2> -<p>당신은 조금 다른 방식으로 정의되거나 호출되는 함수를 본 적 있을 거예요. 이제까지 우리는 이런 식으로 함수를 생성했죠: </p> +<p>여러분은 조금 다른 방식으로 정의되거나 호출되는 함수를 본 적 있을 거예요. 이제까지 우리는 이런 식으로 함수를 생성했죠: </p> <pre class="brush: js notranslate">function myFunction() { alert('hello'); @@ -132,9 +132,9 @@ myButton.onclick = function() { alert('hello'); }</pre> -<p>위의 예시는 페이지 상의 클릭을 위해 {{htmlelement("button")}} 요소를 필요로 합니다. 당신은 코스를 거치며 이런 구조의 코드를 꽤 봐왔을 거예요. 다음 문서에서 더 많은 걸 배워 보자구요.</p> +<p>위의 예시는 페이지 상의 클릭을 위해 {{htmlelement("button")}} 요소를 필요로 합니다. 여러분은 코스를 거치며 이런 구조의 코드를 꽤 봐왔을 거예요. 다음 문서에서 더 많은 걸 배워 보자구요.</p> -<p>당신은 변수 속에 익명함수를 넣을 수 있어요. 예시입니다.</p> +<p>여러분은 변수 속에 익명함수를 넣을 수 있어요. 예시입니다.</p> <pre class="brush: js notranslate">var myGreeting = function() { alert('hello'); @@ -148,7 +148,7 @@ myButton.onclick = function() { <pre class="brush: js notranslate">myGreeting();</pre> -<p>이 방법은 효과적으로 함수에 이름을 부여하고 있어요. 당신은 다중 변수들에 함수를 할당할 수도 있죠. 예를 들면,</p> +<p>이 방법은 효과적으로 함수에 이름을 부여하고 있어요. 여러분은 다중 변수들에 함수를 할당할 수도 있죠. 예를 들면,</p> <pre class="brush: js notranslate">var anotherGreeting = function() { alert('hello'); @@ -178,7 +178,7 @@ anotherGreeting();</pre> <p>몇몇 함수는 호출을 위해 매개변수를 필요로 하는 경우가 있습니다. 이것들은 함수 괄호 안에 포함될 필요가 있는 값들인데, 올바르게 동작하기 위해 필요합니다.</p> <div class="note"> -<p><strong>Note</strong>: 매개변수는 종종 arguments, properties, 심지어 attributes 라고도 불려요.</p> +<p><strong>참고</strong>: 매개변수는 종종 arguments, properties, 심지어 attributes 라고도 불려요.</p> </div> <p>예를 들어, 브라우저의 내장 함수인 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a>은 어떤 매개변수도 필요로 하지 않습니다. 이 함수는 호출되면 늘 0과 1사이의 무작위 수를 반환해 주죠. </p> @@ -191,10 +191,10 @@ anotherGreeting();</pre> var newString = myText.replace('string', 'sausage');</pre> <div class="note"> -<p><strong>Note</strong>: 여러 개의 매개변수는 콤마에 의해 구분되어집니다. </p> +<p><strong>참고</strong>: 여러 개의 매개변수는 콤마에 의해 구분되어집니다. </p> </div> -<p>매개변수는 이따금 선택 사항이기도 합니다. 당신이 명시해 줄 필요가 없다는 뜻이죠. 그런 경우, 일반적으로 함수는 기본 기능을 수행합니다. 예를 들어, 배열과 관련된 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> 함수의 매개변수가 그렇죠.</p> +<p>매개변수는 이따금 선택 사항이기도 합니다. 여러분이 명시해 줄 필요가 없다는 뜻이죠. 그런 경우, 일반적으로 함수는 기본 기능을 수행합니다. 예를 들어, 배열과 관련된 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> 함수의 매개변수가 그렇죠.</p> <pre class="brush: js notranslate">var myArray = ['I', 'love', 'chocolate', 'frogs']; var madeAString = myArray.join(' '); @@ -206,13 +206,13 @@ var madeAString = myArray.join(); <h2 id="함수_스코프와_충돌">함수 스코프와 충돌(conflicts)</h2> -<p>우리 '<a href="https://developer.mozilla.org/ko/docs/Glossary/Scope">스코프</a>(scope)'에 대해 얘기해 볼까요? '스코프'는 함수와 관련된 매우 중요한 개념입니다. 함수를 생성할 때, 변수 및 함수 내 정의된 코드들은 그들만의 분리된 '스코프' 안에 자리하게 됩니다. 그 말인 즉슨, 다른 함수의 내부나 외부 함수의 코드가 접근할 수 없는 그들만의 구획에 갇혀 있다는 뜻입니다. </p> +<p>우리 '<a href="/ko/docs/Glossary/Scope">스코프</a>(scope)'에 대해 얘기해 볼까요? '스코프'는 함수와 관련된 매우 중요한 개념입니다. 함수를 생성할 때, 변수 및 함수 내 정의된 코드들은 그들만의 분리된 '스코프' 안에 자리하게 됩니다. 그 말인 즉슨, 다른 함수의 내부나 외부 함수의 코드가 접근할 수 없는 그들만의 구획에 갇혀 있다는 뜻입니다. </p> <p>함수 바깥에 선언된 가장 상위 레벨의 스코프를 '<strong>전역 스코프</strong>(global scope)' 라고 부릅니다.전역 스코프 내에 정의된 값들은 어느 코드든 접근이 가능합니다.</p> -<p>자바스크립트는 다양한 이유로 인해 이와 같이 설정되어 있지만, 주로는 안전성과 구조 때문입니다. 어떤 때에는 당신의 변수가 어느 코드나 접근 가능한 변수가 되는 걸 원치 않을 겁니다. 당신이 어딘가에서 불러온 외부 스크립트가 문제를 일으킬 수도 있으니깐요. 외부 스크립트의 코드와 같은 변수 이름을 사용하면 충돌이 일어나게 돼요. 이건 악의적일 수도 있고, 아님 뭐 단순한 우연이겠죠.</p> +<p>자바스크립트는 다양한 이유로 인해 이와 같이 설정되어 있지만, 주로는 안전성과 구조 때문입니다. 어떤 때에는 여러분의 변수가 어느 코드나 접근 가능한 변수가 되는 걸 원치 않을 겁니다. 여러분이 어딘가에서 불러온 외부 스크립트가 문제를 일으킬 수도 있으니깐요. 외부 스크립트의 코드와 같은 변수 이름을 사용하면 충돌이 일어나게 돼요. 이건 악의적일 수도 있고, 아님 뭐 단순한 우연이겠죠.</p> -<p>예를 들어 , 당신에게 두 개의 외부 자바스크립트 파일을 호출하는 HTML이 있다고 쳐요. 그 둘은 같은 이름으로 정의된 변수와 함수를 사용하고 있습니다.</p> +<p>예를 들어 , 여러분에게 두 개의 외부 자바스크립트 파일을 호출하는 HTML이 있다고 쳐요. 그 둘은 같은 이름으로 정의된 변수와 함수를 사용하고 있습니다.</p> <pre class="brush: html notranslate"><!-- Excerpt from my HTML --> <script src="first.js"></script> @@ -233,21 +233,21 @@ function greeting() { alert('Our company is called ' + name + '.'); }</pre> -<p>당신이 호출하고 싶은 두 함수 모두 <code>greeting()</code> 이지만, 당신은 오직 <code>first.js</code> 파일의 <code>greeting()</code> 함수에만 접근할 수 있을 뿐입니다 (두번째 것은 무시됩니다). 추가적으로, <code>second.js</code> 파일에서 <code>let</code> 키워드로 <code>name</code> 변수를 두 번째로 선언하려고 시도하는 것은 오류를 낳습니다.</p> +<p>여러분이 호출하고 싶은 두 함수 모두 <code>greeting()</code> 이지만, 여러분은 오직 <code>first.js</code> 파일의 <code>greeting()</code> 함수에만 접근할 수 있을 뿐입니다 (두번째 것은 무시됩니다). 추가적으로, <code>second.js</code> 파일에서 <code>let</code> 키워드로 <code>name</code> 변수를 두 번째로 선언하려고 시도하는 것은 오류를 낳습니다.</p> <div class="note"> -<p><strong>Note</strong>: 예제를 여기서 볼 수 있습니다. <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">running live on GitHub</a> (<a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">source code</a> 또한 볼 수 있습니다.).</p> +<p><strong>참고</strong>: 예제를 <a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">GitHub</a>에서 볼 수 있습니다. (<a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">소스 코드</a> 또한 볼 수 있습니다).</p> </div> <p>함수의 일부를 코드 안에 가두는 것은 이러한 문제를 피할 수 있고, 가장 좋은 방법이라 여겨집니다.</p> <p>동물원 같네요. 사자, 얼룩말, 호랑이, 그리고 펭귄은 자신들만의 울타리 안에 있으며, 그들의 울타리 내부에 있는 것만 건드릴 수 있어요. 함수 스코프처럼 말이죠. 만약 동물들이 다른 울타리 안으로 들어갈 수 있었다면, 문제가 생겼을 겁니다. 좋게는 다른 동물이 낯선 거주 환경에서 불편함을 느끼는 정도겠죠. 사자나 호랑이가 펭귄의 물기 많고 추운 영역 안에서 끔찍함을 느끼듯이요. 하지만 최악의 상황엔 사자나 호랑이가 펭귄을 먹어 치울지도 모르죠!</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="mdn-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> <p>사육사는 전역 스코프와 같습니다. 그들은 모든 울타리에 들어갈 수 있고, 먹이를 보충하고, 아픈 동물들을 돌볼 수 있어요.</p> -<h3 id="실습_스코프랑_놀자">실습: 스코프랑 놀자</h3> +<h3 id="실습_스코프랑_놀자">직접 해보기: 스코프랑 놀자</h3> <p>스코프를 설명하기 위해 스코프 사용의 실례를 한번 봅시다.</p> @@ -256,7 +256,7 @@ function greeting() { <li>예제를 인터넷 브라우저나 텍스트 에디터를 통해 열어봅시다.</li> <li>브라우저 개발자 툴에서 자바스크립트 콘솔을 엽시다. 자바스크립트 콘솔에서 아래와 같이 작성해보세요. <pre class="brush: js notranslate">output(x);</pre> - 당신은 브라우저 뷰포트에 출력된 변수 <code>x</code>의 값을 볼 수 있을 것입니다.</li> + 여러분은 브라우저 뷰포트에 출력된 변수 <code>x</code>의 값을 볼 수 있을 것입니다.</li> <li>이제 다음을 콘솔에 입력해 보세요. <pre class="brush: js notranslate">output(y); output(z);</pre> @@ -275,8 +275,8 @@ function b() { <pre class="brush: js notranslate">a(); b();</pre> - 당신은 페이지에 출력된 <code>y</code>와 <code>z</code>값들을 볼 수 있을 것입니다. <code>output()</code> 함수가 다른 함수 안쪽에서 호출되고 있으므로, 이것은 잘 작동합니다. — 각각의 경우에서, 같은 스코프에서 그것이 출력하고 있는 변수들이 정의되어 있으므로. <code>output()</code>는 전역 스코프에서 정의되었으므로, 이 함수 자체는 어디서든 이용할 수 있습니다.</li> - <li>이제 당신의 코드를 다음과 같이 갱신해 보세요. + 여러분은 페이지에 출력된 <code>y</code>와 <code>z</code>값들을 볼 수 있을 것입니다. <code>output()</code> 함수가 다른 함수 안쪽에서 호출되고 있으므로, 이것은 잘 작동합니다. — 각각의 경우에서, 같은 스코프에서 그것이 출력하고 있는 변수들이 정의되어 있으므로. <code>output()</code>는 전역 스코프에서 정의되었으므로, 이 함수 자체는 어디서든 이용할 수 있습니다.</li> + <li>이제 여러분의 코드를 다음과 같이 갱신해 보세요. <pre class="brush: js notranslate">function a() { var y = 2; output(x); @@ -292,7 +292,7 @@ function b() { b();</pre> </li> <li>브라우저 뷰포트에 <code>a()</code> 와 <code>b()</code> 모두 x 값을 출력해야 합니다. 왜냐하면 비록 <code>output()</code> 호출이 <code>x</code>가 정의되어 있는 같은 스코프에 있지 않더라도, <code>x</code>는 전역 변수이므로 모든 코드 어디서든 이용 가능하기 때문에 이것들은 잘 작동합니다.</li> - <li>마지막으로, 당신의 코드를 다음과 같이 갱신해 보세요. + <li>마지막으로, 여러분의 코드를 다음과 같이 갱신해 보세요. <pre class="brush: js notranslate">function a() { var y = 2; output(z); @@ -310,11 +310,11 @@ b();</pre> </ol> <div class="note"> -<p><strong>Note</strong>: 같은 스코프 규칙은 반복문 (예: <code>for() { ... }</code>)과 조건문(conditional blocks) (예: <code>if() { ... }</code>)에 적용되지 않습니다. — 이것들은 아주 비슷하게 생겼지만, 같은 것이 아닙니다! 헷갈리지 않도록 조심하세요.</p> +<p><strong>참고</strong>: 같은 스코프 규칙은 반복문 (예: <code>for() { ... }</code>)과 조건문(conditional blocks) (예: <code>if() { ... }</code>)에 적용되지 않습니다. — 이것들은 아주 비슷하게 생겼지만, 같은 것이 아닙니다! 헷갈리지 않도록 조심하세요.</p> </div> <div class="note"> -<p><strong>Note</strong>: <a href="/ko/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> 오류는 당신이 마주칠 가장 일반적인 것들 중 하나입니다. 만약 당신이 이 오류를 얻었고 당신이 문제의 변수를 정의했다는 것이 확실하다면, 그것이 어떤 스코프 안에 들어있는지 확인해 보세요.</p> +<p><strong>참고</strong>: <a href="/ko/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> 오류는 여러분이 마주칠 가장 일반적인 것들 중 하나입니다. 만약 여러분이 이 오류를 얻었고 여러분이 문제의 변수를 정의했다는 것이 확실하다면, 그것이 어떤 스코프 안에 들어있는지 확인해 보세요.</p> </div> <ul> @@ -322,7 +322,7 @@ b();</pre> <h3 id="Functions_inside_functions">함수 내부의 함수</h3> -<p>당신은 함수를 어디에서나, 심지어 다른 함수 내에서도 호출할 수 있다는 것을 명심하세요. 이것은 종종 코드를 깔끔하게 유지하기 위한 방법으로써 사용됩니다. — 만약 당신이 크고 복잡한 함수를 가지고 있다면, 만약 당신이 그것을 몇몇의 하위 함수(sub-functions)로 나눈다면 이해하기 더 쉬울 것입니다.</p> +<p>여러분은 함수를 어디에서나, 심지어 다른 함수 내에서도 호출할 수 있다는 것을 명심하세요. 이것은 종종 코드를 깔끔하게 유지하기 위한 방법으로써 사용됩니다. — 만약 여러분이 크고 복잡한 함수를 가지고 있다면, 만약 여러분이 그것을 몇몇의 하위 함수(sub-functions)로 나눈다면 이해하기 더 쉬울 것입니다.</p> <pre class="brush: js notranslate">function myBigFunction() { var myValue; @@ -345,7 +345,7 @@ function subFunction3() { } </pre> -<p>함수 내부에서 사용되고 있는 값들이 올바르게 스코프 내에 있는지 확실히 하세요. 상기의 예시는 <code>ReferenceError: myValue is not defined</code> 오류를 던질 것인데, 이는 왜냐하면 비록 <code>myValue</code> 변수가 함수가 호출되는 같은 스코프 내에 정의되어 있긴 하지만, 이것은 함수 정의 (함수가 호출될 때 실행되는 실제 코드) 내부에 정의되어 있지 않습니다. 이것을 작동하게 하려면, 당신은 값을 함수 내부에 매개변수로써 다음과 같이 전달해야만 합니다.</p> +<p>함수 내부에서 사용되고 있는 값들이 올바르게 스코프 내에 있는지 확실히 하세요. 상기의 예시는 <code>ReferenceError: myValue is not defined</code> 오류를 던질 것인데, 이는 왜냐하면 비록 <code>myValue</code> 변수가 함수가 호출되는 같은 스코프 내에 정의되어 있긴 하지만, 이것은 함수 정의 (함수가 호출될 때 실행되는 실제 코드) 내부에 정의되어 있지 않습니다. 이것을 작동하게 하려면, 여러분은 값을 함수 내부에 매개변수로써 다음과 같이 전달해야만 합니다.</p> <pre class="brush: js notranslate">function myBigFunction() { var myValue = 1; @@ -367,20 +367,20 @@ function subFunction3(value) { console.log(value); }</pre> -<h2 id="Test_your_skills!">당신의 기량을 시험해 보세요!</h2> +<h2 id="Test_your_skills!">실력을 평가해 보세요!</h2> -<p>당신은 이 문서의 끝에 도달했지만, 가장 중요한 정보들을 기억할 수 있으신가요? 당신은 나아가기 전에 이 정보들을 보유하고 있다는 것을 확인하는 추가적인 테스트들을 찾을 수 있습니다 — 다음을 보세요: <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a>. 이 테스트들은 다음 두 문서에서 다뤄지는 기술들을 요구하므로, 당신은 그 문서들을 이 테스트를 시도해 보기 전에 먼저 읽기를 원할지도 모릅니다.</p> +<p>이 문서를 끝까지 읽으셨지만, 중요한 것들을 여전히 기억하고 계신가요? 다음 문서를 읽기 전에 이 문서의 내용을 잘 학습하고 이해하셨는지 확인하실 수 있습니다 — <a href="/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">실력을 평가해 보세요: 함수</a>. 이 테스트들은 다음 두 문서에서 다뤄지는 기술들을 요구하므로, 여러분은 그 문서들을 이 테스트를 시도해 보기 전에 먼저 읽기를 원할지도 모릅니다.</p> <h2 id="Conclusion">결론</h2> -<p>이 문서는, 당신만의 사용자 정의 함수 만들기를 익히도록 돕고 실제적인 것을 다루는 다음 문서에 대한 길을 만들며, 함수 뒤에 있는 핵심적인 개념들을 탐구했습니다.</p> +<p>이 문서는, 여러분만의 사용자 정의 함수 만들기를 익히도록 돕고 실제적인 것을 다루는 다음 문서에 대한 길을 만들며, 함수 뒤에 있는 핵심적인 개념들을 탐구했습니다.</p> -<h2 id="See_also">참조</h2> +<h2 id="See_also">같이 보기</h2> <ul> <li><a href="/ko/docs/Web/JavaScript/Guide/Functions">자세한 함수 가이드</a> — 여기 포함되지 않은 몇몇 고급 기능들을 다룹니다.</li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수 레퍼런스</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a> — 고급 개념 레퍼런스</li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수 참고서</a></li> + <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a> — 고급 개념 참고서</li> </ul> <ul> @@ -388,14 +388,14 @@ function subFunction3(value) { <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p> -<h2 id="In_this_module">In this module</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단 내리기 — 조건문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li> + <li><strong>함수 — 코드 재사용</strong></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li> + <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">이미지 갤러리</a></li> </ul> |