함수 — 재사용 가능한 코드 블록

번역이 완료되지 않았습니다. Please help translate this article from English

코딩에 있어서 또 하나의 중요한 개념은 바로 '함수'입니다. 함수란, 한 가지의 일을 수행하는 코드가 블럭으로 묶여있는 것을 말하며, 간단한 명령만으로 동일한 코드를 필요한 곳마다 반복해서 사용하지 않을 수 있게 만들어 줍니다. 이번 장에서는 함수에 대한 기본 문법과 파라미터(parameter) 및 범위(scope), 그리고 호출 방법에 대해 설명합니다.

필요 사항: 기본적인 컴퓨터 활용 능력, HTML과 CSS의 기본적인 이해, 자바스크립트 첫 단계.
목표: JavaScript 함수의 기본 개념을 이해합니다.

함수는 어디에서 찾을 수 있나요?

자바스크립트 어디서든 함수를 찾을 수 있습니다. 사실, 우리는 지금까지 수업에서 함수를 계속 사용해왔습니다; 함수에 대해서 그렇게 말해오지 않았을 뿐이죠. 그러나 이제 함수에 대해서 분명하게 말하고, 실제로 문법을 탐험할 때가 되었습니다. 

 for loop, while 과 do...while loop, 또는 if...else문과 같은 일반적인 내장 언어 구조를 사용하지 않고 — () —같은 괄호 쌍을 사용했다면 당신은 함수를 사용하고 있던 겁니다

브라우저 내장 함수

우리는 이 코스에서 많은 브라우저 빌트인 함수를 사용해왔습니다.
예를 들어, 우리가 매번 텍스트 string을 조작할 때마다:

var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
console.log(newString);
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement made

또는 우리가 배열을 조작할 때마다:

var myArray = ['I', 'love', 'chocolate', 'frogs'];
var madeAString = myArray.join(' ');
console.log(madeAString);
// the join() function takes an array, joins
// all the array items together into a single
// string, and returns this new string

또는 우리가 무작위의 숫자를 생성할 때마다:

var myNumber = Math.random();
// the random() function generates a random
// number between 0 and 1, and returns that
// number

...우리는 함수를 사용하고 있었어요!

Note: Feel free to enter these lines into your browser's JavaScript console to re-familiarize yourself with their functionality, if needed.

JavaScript 언어는 당신 스스로 코드 전체를 적을 필요 없이, 유용한 것들을 할 수 있게 해주는 많은 내장 함수를 가지고 있습니다.  사실, 브라우저 내장 함수를 호출("함수를 실행하다"는 말을 멋있게 "호출하다"라고 하기도 합니다)할 때 호출하는 일부 코드는 JavaScript로 작성할 수 없었습니다 —  이러한 함수 중 상당수는 백그라운드 브라우저 코드의 일부를 호출하고 있으며, 이는 JavaScript와 같은 웹 언어가 아니라 C++와 같은 저수준 시스템 언어로 작성됩니다.

명심하세요. 몇몇 브라우저 내장함수는 JavaScript core가 아닌 브라우저 API의 일부입니다. 브라우저 API는 기본 언어에서 더 많은 기능을 쓸 수 있게 만들어 졌습니다. (앞선 코스에서 더 자세한 설명을 볼 수 있습니다). 브라우저 API를 다루는 법은 나중에 더 살펴보도록 하겠습니다.

함수 대 메소드

우리가 다음으로 넘어가기 전에, 확실하게 짚고 가야할 게 있습니다. — 기술적으로, Built-in browser functions은 functions이 아닙니다. 그들은 methods죠. 이 문장이 약간 이상하고 혼란스럽게 들릴 수 있겠지만, 걱정마세요. — function과 method 이 두 단어는 광범위하게 교체가능하답니다. 최소한 그들의 용도적 측면과 지금 당신의 배움 단계에서는요.

구별되는 점은 methods는 objects안에 정의된 functions이라는 겁니다. Built-in browser functions(methods)와 변수(properties라 불리는 것들)는 코드를 더욱 효율적이고 다루기 쉽게하기 위해 구조화된 objects안에 저장되어 있습니다.

당신은 아직 구조화된 JavaScript objects의 내부 동작에 대해서까지는 배우지 않아도 괜찮습니다. — 당신은 우리가 가르쳐 줄 objects의 내부 동작에 관한 모든 것인 모듈과, 어떻게 당신만의 모듈을 창조할 수 있는지에 대해 기다릴 수 있습니다. 현재로서는, 우리는 단지 어떤 혼동도 가능한 method 대 function(당신이 웹에서 이용가능한 관련 자원들을 볼때, 두 가지 용어를 만날 가능 성이 충분히 있는)에 대해 정리하고 싶을 뿐입니다. 

사용자 정의 함수

또한 지금까지 많은 사용자 정의 함수(브라우저가 아닌 코드에 정의된 함수)를 봤습니다. 바로 뒤에 괄호가 있는 사용자가 정의한 이름을 볼 때마다, 바로 사용자 정의 함수를 사용하고 있었던 겁니다. loops article의 random-canvas-circles.html 예제(전체  소스 코드 참조)에는 다음과 같은 draw() 사용자 정의 함수가 포함되어 있습니다:

function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (var i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

이 함수는 <canvas> 요소 안에 100개의 임의의 원을 그립니다. 원할 때마다 아래 코드로 함수를 호출할 수 있습니다:

draw();

모든 코드를 또 작성하지 않고 말이죠. 그리고 함수는 당신이 원하는 코드를 포함할 수 있습니다. 심지어 함수 내의 다른 함수를 불러올 수도 있구요. 위의 예시는 아래와 같이 정의된 코드를 random() 을 통해 세번이나 호출하고 있죠.

function random(number) {
  return Math.floor(Math.random()*number);
}

Math.random() 라는 내장함수는 오직 0과 1사이의 소수를 생성해내기 때문에 우리는 위의 함수가 필요했습니다. 우리는 0과 특정 수 사이의 무작위한 정수를 원했거든요.

함수 호출

지금까지 꽤 잘 따라온 거 같은데 혹시 모르니깐 말해 주자면... 정의된 함수를 작동시키기 위해선 함수를 '호출' 해야 돼요. 함수 호출은 함수의 이름을 괄호와 함께 코드 내에 적어 주면 됩니다.

function myFunction() {
  alert('hello');
}

myFunction()
// calls the function once

익명 함수

당신은 조금 다른 방식으로 정의되거나 호출되는 함수를 본 적 있을 거예요. 이제까지 우리는 이런 식으로 함수를 생성했죠: 

function myFunction() {
  alert('hello');
}

하지만 이름 없는 함수 또한 만들 수 있답니다.

function() {
  alert('hello');
}

이건 익명 함수라고 불려요. 이름이 없다는 뜻이죠! 익명함수는 스스로 뭘 어쩌지 못 해요. 익명함수는 주로 이벤트 핸들러와 사용됩니다. 아래의 예시는 함수 내의 코드가 버튼을 클릭함에 따라 작동한다는 걸 보여주죠. 

var myButton = document.querySelector('button');

myButton.onclick = function() {
  alert('hello');
}

위의 예시는 페이지 상의 클릭을 위해 <button> 요소를 필요로 합니다. 당신은 코스를 거치며 이런 구조의 코드를 꽤 봐왔을 거예요. 다음 예시에서 더 많은 걸 배워 보자구요.

당신은 변수 속에 익명함수를 넣을 수 있어요. 예시입니다.

var myGreeting = function() {
  alert('hello');
}

이 함수는 이런 식으로 호출되죠:

myGreeting();

이 방법은 효과적으로 함수에 이름을 부여하고 있어요. 당신은 다중 변수들에 함수를 할당할 수도 있죠. 예를 들면,

var anotherGreeting = function() {
  alert('hello');
}

이제 함수는 이런 식으로도 호출이 가능해졌구요.

myGreeting();
anotherGreeting();

하지만 위의 방식은 사람 헷갈리게 만들어요. 그니깐 쓰진 맙시다! 함수를 만들 땐 아래의 형태를 고수하는 게 나아요.

function myGreeting() {
  alert('hello');
}

익명함수는 이벤트 발생에 따른 수많은 코드를 작동시키기 위해 주로 쓰이게 돼요. 이벤트 핸들러를 사용한 버튼의 클릭과 같은 상황에 말이죠. 자, 그 코드는 아래와 같이 생겼어요.

myButton.onclick = function() {
  alert('hello');
  // I can put as much code
  // inside here as I want
}

매개변수

몇몇 함수는 호출을 위해 매개변수를 필요로 하는 경우가 있습니다. 이런 함수가 제대로 작동하기 위해선 함수 괄호 안에 값들을 넣어주어야 해요.

Note: 매개변수는 종종 arguments, properties, 심지어 attributes 라고도 불려요.

예를 들어, 내장 함수인 Math.random()은 어떤 매개변수도 필요로 하지 않습니다. 이 함수는 호출되면 늘 0과 1사이의 무작위 수를 반환해 주죠. 

var myNumber = Math.random();

하지만 내장 함수 replace()는 두 개의 매개변수를 필요로 합니다. 대체될 문자와 대체할 문자죠. 

var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');

Note: 여러 개의 매개변수는 콤마에 의해 구분되어 집니다. 

매개변수는 이따금 선택 사항이기도 합니다. 당신이 명시해 줄 필요가 없다는 뜻이죠. 그런 경우, 일반적으로 함수는 디폴트 기능을 수행합니다. 예를 들어, 배열과 관련된 join() 함수의 매개변수가 그렇죠.

var myArray = ['I', 'love', 'chocolate', 'frogs'];
var madeAString = myArray.join(' ');
// returns 'I love chocolate frogs'
var madeAString = myArray.join();
// returns 'I,love,chocolate,frogs'

만일 결합의 기준이 될 매개변수가 없다면, 콤마가 매개변수로서 사용됩니다.

함수 스코프와  충돌

우리 '스코프(scope)'에 대해 얘기해 볼까요? '스코프'는 함수와 관련된 매우 중요한 개념입니다.  함수를 생성할 때, 변수 및 함수 내 정의된 코드들은 그들만의 '스코프' 안에 자리하게 됩니다. 그 말인 즉슨, 다른 함수의 내부나 외부 함수의 코드가 접근할 수 없는 그들만의 구획에 갇혀 있다는 뜻입니다. 

함수 바깥에 선언된 가장 상위 레벨의 스코프를 '전역 스코프(global scope)' 라고 부릅니다.전역 스코프 내에 정의된 값들은 어느 코드든 접근이 가능합니다.

자바스크립트는 다양한 이유로 인해 이와 같은 기능을 제공하지만, 주로는 안전성과 구조 때문입니다. 어떤 때에는 당신의 변수가 어느 코드나 접근 가능한 변수가 되는 걸 원치 않을 겁니다. 당신이 어딘가에서 불러온 외부 스크립트가 문제를 일으킬 수도 있으니깐요. 외부 스크립트의 코드와 같은 변수 이름을 사용하면 충돌이 일어나게 돼요. 이건 악의적일 수도 있고, 아님 뭐 단순한 우연이겠죠.

예를 들어 , 당신에게 두 개의 외부 자바스크립트 파일을 호출하는 HTML이 있다고 쳐요. 그 둘은 같은 이름으로 정의된 변수와 함수를 사용하고 있습니다.

<!-- Excerpt from my HTML -->
<script src="first.js"></script>
<script src="second.js"></script>
<script>
  greeting();
</script>
// first.js
var name = 'Chris';
function greeting() {
  alert('Hello ' + name + ': welcome to our company.');
}
// second.js
var name = 'Zaptec';
function greeting() {
  alert('Our company is called ' + name + '.');
}

두 함수 모두 greeting()라고 불리지만,  당신은 second.js  파일의 greeting() 함수에만 접근 가능합니다. HTML 소스 코드 상 후자이므로, 그 파일의 변수와 기능이  first.js것을 덮어쓰는 거죠.

Note: You can see this example running live on GitHub (see also the source code).

Keeping parts of your code (locked away in functions) avoids such problems, and is considered best practice. 함수에 

동물원 같네요. 사자, 얼룩말, 호랑이, 그리고 펭귄은 자신들만의 울타리 안에 있으며, 그들의 울타리 내부에 있는 것만 건드릴 수 있어요. 함수 스코프처럼 말이죠. 만약 동물들이 다른 울타리 안으로 들어갈 수 있었다면, 문제가 생겼을 겁니다. 좋게는 다른 동물이 낯선 거주 환경에서 불편함을 느끼는 정도겠죠. 사자나 호랑이가 펭귄의 물기 많고 추운 영역 안에서 끔찍함을 느끼듯이요. 하지만 최악의 상황엔 사자나 호랑이가 펭귄을 먹어 치울 지도 모르죠!

사육사는 전역 스코프와 같습니다. 그들은 모든 울타리에 들어갈 수 있고, 먹이를 보충하고, 아픈 동물들을 돌볼 수 있어요.

실습: 스코프랑 놀자

스코프 사용의 실례를 한번 봅시다.

  1. First, make a local copy of our function-scope.html example. This contains two functions called a() and b(), and three variables — x, y, and z — two of which are defined inside the functions, and one in the global scope. It also contains a third function called output(), which takes a single parameter and outputs it in a paragraph on the page.
  2. Open the example up in a browser and in your text editor.
  3. Open the JavaScript console in your browser developer tools. In the JavaScript console, enter the following command:
    output(x);
    You should see the value of variable x output to the screen.
  4. Now try entering the following in your console
    output(y);
    output(z);
    Both of these should return an error along the lines of "ReferenceError: y is not defined". Why is that? Because of function scope — y and z are locked inside the a() and b() functions, so output() can't access them when called from the global scope.
  5. However, what about when it's called from inside another function? Try editing a() and b() so they look like this:
    function a() {
      var y = 2;
      output(y);
    }
    
    function b() {
      var z = 3;
      output(z);
    }
    Save the code and reload it in your browser, then try calling the a() and b() functions from the JavaScript console:
    a();
    b();
    You should see the y and z values output in the page. This works fine, as the output() function is being called inside the other functions — in the same scope as the variables it is printing are defined in, in each case. output() itself is available from anywhere, as it is defined in the global scope.
  6. Now try updating your code like this:
    function a() {
      var y = 2;
      output(x);
    }
    
    function b() {
      var z = 3;
      output(x);
    }
  7. Save and reload again, and try this again in your JavaScript console:
    a();
    b();
  8. Both the a() and b() call should output the value of x — 1. These work fine because even though the output() calls are not in the same scope as x is defined in, x is a global variable so is available inside all code, everywhere.
  9. Finally, try updating your code like this:
    function a() {
      var y = 2;
      output(z);
    }
    
    function b() {
      var z = 3;
      output(y);
    }
  10. Save and reload again, and try this again in your JavaScript console:
    a();
    b();
    This time the a() and b() calls will both return that annoying "ReferenceError: z is not defined" error — this is because the output() calls and the variables they are trying to print are not defined inside the same function scopes — the variables are effectively invisible to those function calls.

Note: The same scoping rules do not apply to loop (e.g. for() { ... }) and conditional blocks (e.g. if() { ... }) — they look very similar, but they are not the same thing! Take care not to get these confused.

Note: The ReferenceError: "x" is not defined error is one of the most common you'll encounter. If you get this error and you are sure that you have defined the variable in question, check what scope it is in.

Functions inside functions

Keep in mind that you can call a function from anywhere, even inside another function.  This is often used as a way to keep code tidy — if you have a big complex function, it is easier to understand if you break it down into several sub-functions:

function myBigFunction() {
  var myValue;

  subFunction1();
  subFunction2();
  subFunction3();
}

function subFunction1() {
  console.log(myValue);
}

function subFunction2() {
  console.log(myValue);
}

function subFunction3() {
  console.log(myValue);
}

Just make sure that the values being used inside the function are properly in scope. The example above would throw an error ReferenceError: myValue is not defined, because although the myValue variable is defined in the same scope as the function calls, it is not defined inside the function definitions — the actual code that is run when the functions are called. To make this work, you'd have to pass the value into the function as a parameter, like this:

function myBigFunction() {
  var myValue = 1;
      
  subFunction1(myValue);
  subFunction2(myValue);
  subFunction3(myValue);
}

function subFunction1(value) {
  console.log(value);
}

function subFunction2(value) {
  console.log(value);
}

function subFunction3(value) {
  console.log(value);
}

Conclusion

This article has explored the fundamental concepts behind functions, paving the way for the next one in which we get practical and take you through the steps to building up your own custom function.

See also

In this module