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

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

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

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

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

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

괄호 쌍이 있는 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 언어는 당신 스스로 코드 전체를 적을 필요 없이, 유용한 것들을 할 수 있게 해주는 많은 내장 함수를 가지고 있습니다.  사실, 브라우저 내장 함수를 호출(run 또는 execute를 위한 멋진 단어)할 때 호출하는 일부 코드는 JavaScript로 작성할 수 없었습니다 —  이러한 함수 중 상당수는 백그라운드 브라우저 코드의 일부를 호출하고 있으며, 이는 JavaScript와 같은 웹 언어가 아니라 C++와 같은 저수준 시스템 언어로 작성됩니다.

Bear in mind that some built-in browser functions are not part of the core JavaScript language — some are defined as part of browser APIs, which build on top of the default language to provide even more functionality (refer to this early section of our course for more descriptions). We'll look at using browser APIs in more detail in a later module.

함수 대 메소드

우리가 다음으로 넘어가기 전에, 확실하게 짚고 가야할 게 있습니다. — 기술적으로, 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();

rather than having to write all that code out again every time we want to repeat it. And functions can contain whatever code you like — you can even call other functions from inside functions. The above function for example calls the random() function three times, which is defined by the following code:

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

We needed this function because the browser's built-in Math.random() function only generates a random decimal number between 0 and 1. We wanted a random whole number between 0 and a specified number.

Invoking functions

You are probably clear on this by now, but just in case ... to actually use a function after it has been defined, you've got to run — or invoke — it. This is done by including the name of the function in the code somewhere, followed by parentheses.

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

myFunction()
// calls the function once

Anonymous functions

You may see functions defined and invoked in slightly different ways. So far we have just created a function like so:

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

But you can also create a function that doesn't have a name:

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

This is called an anonymous function — it has no name! It also won't do anything on its own. You generally use an anonymous function along with an event handler, for example the following would run the code inside the function whenever the associated button is clicked:

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

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

The above example would require there to be a <button> element available on the page to select and click. You've already seen this structure a few times throughout the course, and you'll learn more about and see it in use in the next article.

You can also assign an anonymous function to be the value of a variable, for example:

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

This function could now be invoked using:

myGreeting();

This effectively gives the function a name; you can also assign the function to be the value of multiple variables, for example:

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

This function could now be invoked using either of

myGreeting();
anotherGreeting();

But this would just be confusing, so don't do it! When creating functions, it is better to just stick to this form:

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

You will mainly use anonymous functions to just run a load of code in response to an event firing — like a button being clicked — using an event handler. Again, this looks something like this:

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

Function parameters

Some functions require parameters to be specified when you are invoking them — these are values that need to be included inside the function parentheses, which it needs to do its job properly.

Note: Parameters are sometimes called arguments, properties, or even attributes.

As an example, the browser's built-in Math.random() function doesn't require any parameters. When called, it always returns a random number between 0 and 1:

var myNumber = Math.random();

The browser's built-in string replace() function however needs two parameters — the substring to find in the main string, and the substring to replace that string with:

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

Note: When you need to specify multiple parameters, they are separated by commas.

It should also be noted that sometimes parameters are optional — you don't have to specify them. If you don't, the function will generally adopt some kind of default behavior. As an example, the array join() function's parameter is optional:

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

If no parameter is included to specify a joining/delimiting character, a comma is used by default.

Function scope and conflicts

Let's talk a bit about scope — a very important concept when dealing with functions. When you create a function, the variables and other things defined inside the function are inside their own separate scope, meaning that they are locked away in their own separate compartments, unreachable from inside other functions or from code outside the functions.

The top level outside all your functions is called the global scope. Values defined in the global scope are accessible from everywhere in the code.

JavaScript is set up like this for various reasons — but mainly because of security and organization. Sometimes you don't want variables to be accessible from everywhere in the code — external scripts that you call in from elsewhere could start to mess with your code and cause problems because they happen to be using the same variable names as other parts of the code, causing conflicts. This might be done maliciously, or just by accident.

For example, say you have an HTML file that is calling in two external JavaScript files, and both of them have a variable and a function defined that use the same name:

<!-- 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 + '.');
}

Both functions you want to call are called greeting(), but you can only ever access the second.js file's greeting() function — it is applied to the HTML later on in the source code, so its variable and function overwrite the ones in 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.

It is a bit like a zoo. The lions, zebras, tigers, and penguins are kept in their own enclosures, and only have access to the things inside their enclosures — in the same manner as the function scopes. If they were able to get into other enclosures, problems would occur. At best, different animals would feel really uncomfortable inside unfamiliar habitats — a lion or tiger would feel terrible inside the penguins' watery, icy domain. At worst, the lions and tigers might try to eat the penguins!

The zoo keeper is like the global scope — he or she has the keys to access every enclosure, to restock food, tend to sick animals, etc.

Active learning: Playing with scope

Let's look at a real example to demonstrate scoping.

  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