함수

스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많습니다.

사용자가 로그인이나 로그아웃을 했을 때 안내 메시지를 보여주는 동작 같은 경우 말이죠.

함수는 프로그램을 구성하는 주요 '구성 요소(building block)'입니다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있습니다.

우리는 ì•žì„œ 다양한 예시에서 alert(message), prompt(message, default), confirm(question)ê³¼ 같은 내장 함수를 사용해 보았습니다. 이번 챕터에선 함수를 직접 만드는 방법에 대해 알아보겠습니다.

함수 선언

함수 선언(function declaration) 방식을 이용하면 함수를 만들 수 있습니다(함수 선언 방식은 함수 선언문이라고 부르기도 합니다 – 옮긴이).

함수 선언 방식은 아래와 같이 작성할 수 있습니다.

function showMessage() {
  alert( '안녕하세요!' );
}

function 키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 써주면 함수를 선언할 수 있습니다. 위 함수에는 매개변수가 없는데, 만약 매개변수가 여러 ê°œ 있다면 각 매개변수를 콤마로 구분해 줍니다. 이어서 함수를 구성하는 코드의 모임인 '함수 본문(body)'을 중괄호로 감싸 붙여줍시다.

function name(parameter1, parameter2, ... parameterN) {
  // 함수 본문
}

새롭게 정의한 함수는 함수 이름 옆에 괄호를 붙여 호출할 수 있습니다. showMessage()같이 말이죠.

예시:

function showMessage() {
  alert( '안녕하세요!' );
}

showMessage();
showMessage();

showMessage()ë¡œ 함수를 호출하면 함수 본문이 실행됩니다. 위 예시에선 showMessage를 두 번 호출했으므로 얼럿 창이 두 번 뜹니다.

함수의 주요 용도 중 하나는 중복 코드 피하기입니다. 위 예시를 통해 이를 확인해 보았습니다.

얼럿 창에 보여줄 메시지를 바꾸거나 메시지를 보여주는 방식 자체를 변경하고 싶다면, 함수 본문 중 출력에 관여하는 코드 딱 하나만 수정해주면 됩니다.

지역 변수

함수 내에서 선언한 변수인 지역 변수(local variable)는 함수 안에서만 접근할 수 있습니다.

예시:

function showMessage() {
  let message = "안녕하세요!"; // 지역 변수

  alert( message );
}

showMessage(); // 안녕하세요!

alert( message ); // ReferenceError: message is not defined (message는 함수 내 지역 변수이기 때문에 에러가 발생합니다.)

외부 변수

함수 내부에서 함수 외부의 변수인 외부 변수(outer variable)에 접근할 수 있습니다.

let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  alert(message);
}

showMessage(); // Hello, John

함수에선 외부 변수에 접근하는 것뿐만 아니라, 수정도 할 수 있습니다.

예시:

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) 외부 변수를 수정함

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // 함수 호출 전이므로 John 이 출력됨

showMessage();

alert( userName ); // 함수에 의해 Bob 으로 값이 바뀜

외부 변수는 지역 변수가 없는 경우에만 사용할 수 있습니다.

함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었다면, 내부 변수는 외부 변수를 가립니다. 예시를 살펴봅시다. 함수 내부에 외부 변수와 동일한 이름을 가진 지역 변수 userNameê°€ 선언되어 있습니다. 외부 변수는 내부 변수에 가려져 값이 수정되지 않았습니다.

let userName = 'John';

function showMessage() {
  let userName = "Bob"; // 같은 이름을 가진 지역 변수를 선언합니다.

  let message = 'Hello, ' + userName; // Bob
  alert(message);
}

// 함수는 내부 변수인 userName만 사용합니다,
showMessage();

alert( userName ); // 함수는 외부 변수에 접근하지 않습니다. 따라서 값이 변경되지 않고, John이 출력됩니다.

매개변수

매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있습니다. 매개변수는 인자(parameter) 라고 불리기도 합니다.

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

function showMessage(from, text) { // 인자: from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

(*), (**)ë¡œ 표시한 줄에서 함수를 호출하면, 함수에 전달된 인자는 지역변수 fromê³¼ text에 복사됩니다. ê·¸ 후 함수는 지역변수에 복사된 값을 사용합니다.

예시 하나를 더 살펴봅시다. ì „ì—­ 변수 from이 있고, 이 변수를 함수에 전달하였습니다. 함수가 from을 변경하지만, 변경 사항은 외부 변수 from에 반영되지 않았습니다. 함수는 언제나 복사된 값을 사용하기 때문입니다.

function showMessage(from, text) {

  from = '*' + from + '*'; // "from"을 좀 더 멋지게 꾸며줍니다.

  alert( from + ': ' + text );
}

let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

// 함수는 복사된 값을 사용하기 때문에 바깥의 "from"은 값이 변경되지 않습니다.
alert( from ); // Ann

함수의 매개변수에 전달된 값을 *인수(argument)*라고 부르기도 합니다.

더 정확한 이해를 돕기 위해 용어를 다시 한번 정리해볼까요?

• 매개변수는 함수 ì„ ì–¸ 방식 괄호 사이에 있는 변수입니다(ì„ ì–¸ ì‹œ 쓰이는 ìš©ì–´).
• 인수는 함수를 호출할 ë•Œ 매개변수에 전달되는 값입니다(호출 ì‹œ 쓰이는 ìš©ì–´).

즉, 함수 선언 시 매개변수를 나열하게 되고, 함수를 호출할 땐 인수를 전달해 호출합니다.

위 예에서 함수 showMessage는 fromê³¼ text라는 두 매개변수를 사용해 선언되었고, ê·¸ 후 호출 시엔 from, Hello라는 두 인수를 사용해 호출되었습니다.

기본값

함수 호출 ì‹œ 매개변수에 인수를 전달하지 않으면 ê·¸ 값은 undefinedê°€ 됩니다.

예시를 통해 이에 대해 알아봅시다. 위에서 정의한 함수 showMessage(from, text)는 매개변수가 2개지만, 아래와 같이 인수를 하나만 넣어서 호출할 수 있습니다.

showMessage("Ann");

이렇게 코드를 작성해도 에러가 발생하지 않습니다. 두 번째 매개변수에 값을 전달하지 않았기 때문에 textì—” undefinedê°€ 할당될 뿐입니다. 따라서 에러 없이 "Ann: undefined"ê°€ 출력됩니다.

매개변수에 값을 전달하지 않아도 ê·¸ 값이 undefinedê°€ 되지 않게 하려면 함수를 선언할 ë•Œ =를 사용해 '기본값(default value)'을 설정해주면 됩니다.

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

이젠 textê°€ 값을 전달받지 못해도 undefined 대신 기본값 "no text given"이 할당됩니다.

매개변수에 값을 전달해도 ê·¸ 값이 undefined와 엄격히 일치한다면 기본값이 할당됩니다.

예시:

showMessage("Ann", undefined); // Ann: no text given

위 예시에선 문자열 "no text given"을 기본값으로 설정했습니다. 하지만 아래와 같이 복잡한 표현식도 기본값으로 설정할 수도 있습니다.

function showMessage(from, text = anotherFunction()) {
  // anotherFunction()은 text값이 없을 때만 호출됨
  // anotherFunction()의 반환 값이 text의 값이 됨
}

function showMessage(from, text) {
  if (text === undefined) {
    text = 'no text given';
  }

  alert( from + ": " + text );
}

function showMessage(from, text) {
  // text의 값이 falsy면 기본값이 할당됨
  // 이 방식은 text == ""일 경우, text에 값이 전달되지 않은것과 같다고 간주합니다..
  text = text || 'no text given';
  ...
}

매개변수 기본값을 설정할 수 있는 또 다른 방법

가끔은 함수를 선언할 때가 아닌 함수 선언 후에 매개변수 기본값을 설정하는 것이 적절한 경우도 있습니다.

이런 경우엔 함수를 호출할 ë•Œ 매개변수를 undefined와 비교하여 매개변수가 전달되었는지를 확인합니다.

function showMessage(text) {
  // ...

  if (text === undefined) { // 매개변수가 생략되었다면
    text = '빈 문자열';
  }

  alert(text);
}

showMessage(); // 빈 문자열

이렇게 if문을 쓰는 것 대신 논리 연산자 ||를 사용할 수도 있습니다.

// 매개변수가 생략되었거나 빈 문자열("")이 넘어오면 변수에 '빈 문자열'이 할당됩니다.
function showMessage(text) {
  text = text || '빈 문자열';
  ...
}

이 외에도 모던 자바스크립트 엔진이 지원하는 nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 0처럼 falsyë¡œ 평가되는 값들을 일반 값처럼 처리할 수 있어서 좋습니다.

// 매개변수 'count'가 `undefined` 또는 `null`이면 'unknown'을 출력해주는 함수
function showCount(count) {
  alert(count ?? "unknown");
}

showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown

반환 값

함수를 호출했을 때 함수를 호출한 그곳에 특정 값을 반환하게 할 수 있습니다. 이때 이 특정 값을 반환 값(return value)이라고 부릅니다.

인수로 받은 두 값을 더해주는 간단한 함수를 만들어 반환 값에 대해 알아보도록 하겠습니다.

function sum(a, b) {
  return a + b;
}

let result = sum(1, 2);
alert( result ); // 3

지시자 return은 함수 ë‚´ 어디서든 사용할 수 있습니다. 실행 흐름이 지시자 return을 만나면 함수 실행은 즉시 중단되고 함수를 호출한 곳에 값을 반환합니다. 위 예시에선 반환 값을 result에 할당하였습니다.

아래와 같이 함수 하나에 여러 개의 return문이 올 수도 있습니다.

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
  }
}

let age = prompt('나이를 알려주세요', 18);

if ( checkAge(age) ) {
  alert( '접속 허용' );
} else {
  alert( '접속 차단' );
}

아래와 같이 지시자 return만 명시하는 것도 가능합니다. 이런 경우는 함수가 즉시 종료됩니다.

예시:

function showMovie(age) {
  if ( !checkAge(age) ) {
    return;
  }

  alert( "영화 상영" ); // (*)
  // ...
}

위 예시에서, checkAge(age)ê°€ false를 반환하면, (*)ë¡œ 표시한 줄은 실행이 안 되기 때문에 함수 showMovie는 얼럿 창을 보여주지 않습니다.

function doNothing() { /* empty */ }

alert( doNothing() === undefined ); // true

function doNothing() {
  return;
}

alert( doNothing() === undefined ); // true

return
 (some + long + expression + or + whatever * f(a) + f(b))

return;
 (some + long + expression + or + whatever * f(a) + f(b))

return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  )

함수 이름짓기

함수는 ì–´ë–¤ 동작을 수행하기 위한 코드를 모아놓은 것입니다. 따라서 함수의 이름은 대개 동사입니다. 함수 이름은 가능한 í•œ 간결하고 명확해야 합니다. 함수가 ì–´ë–¤ 동작을 하는지 설명할 수 있어야 하죠. 코드를 읽는 사람은 함수 이름만 보고도 함수가 ì–´ë–¤ 기능을 하는지 힌트를 얻을 수 있어야 합니다.

함수가 어떤 동작을 하는지 축약해서 설명해 주는 동사를 접두어로 붙여 함수 이름을 만드는 게 관습입니다. 다만, 팀 내에서 그 뜻이 반드시 합의된 접두어만 사용해야 합니다.

"show"ë¡œ 시작하는 함수는 대개 무언가를 보여주는 함수입니다.

이 외에 아래와 같은 접두어를 사용할 수 있습니다.

• "get…" – 값을 반환함
• "calc…" – 무언가를 계산함
• "create…" – 무언가를 생성함
• "check…" – 무언가를 확인하고 불린값을 반환함

위 접두어를 사용하면 아래와 같은 함수를 만들 수 있습니다.

showMessage(..)     // 메시지를 보여줌
getAge(..)          // 나이를 나타내는 값을 얻고 그 값을 반환함
calcSum(..)         // 합계를 계산하고 그 결과를 반환함
createForm(..)      // form을 생성하고 만들어진 form을 반환함
checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함

접두어를 적절히 활용하면 함수 이름만 보고도 함수가 어떤 동작을 하고 어떤 값을 반환하는지 쉽게 알 수 있습니다.

함수 == 주석

함수는 간결하고, 한 가지 기능만 수행할 수 있게 만들어야 합니다. 함수가 길어지면 함수를 잘게 쪼갤 때가 되었다는 신호로 받아들이셔야 합니다. 함수를 쪼개는 건 쉬운 작업은 아닙니다. 하지만 함수를 분리해 작성하면 많은 장점이 있기 때문에 함수가 길어질 경우엔 함수를 분리해 작성할 것을 권유합니다.

함수를 간결하게 만들면 테스트와 디버깅이 쉬워집니다. 그리고 함수 그 자체로 주석의 역할까지 합니다!

같은 동작을 하는 함수, showPrimes(n)를 두 ê°œ 만들어 비교해 봅시다. showPrimes(n)은 n까지의 소수(prime numbers)를 출력해줍니다.

첫 번째 showPrimes(n)에선 레이블을 사용해 반복문을 작성해보았습니다.

function showPrimes(n) {
  nextPrime: for (let i = 2; i < n; i++) {

    for (let j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }

    alert( i ); // 소수
  }
}

두 번째 showPrimes(n)는 소수인지 아닌지 여부를 검증하는 코드를 ë”°ë¡œ 분리해 isPrime(n)이라는 함수에 넣어서 작성했습니다.

function showPrimes(n) {

  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;

    alert(i);  // a prime
  }
}

function isPrime(n) {
  for (let i = 2; i < n; i++) {
    if ( n % i == 0) return false;
  }
  return true;
}

두 번째 showPrimes(n)ê°€ 더 이해하기 쉽지 않나요? isPrime 함수 이름을 ë³´ê³  해당 함수가 소수 여부를 검증하는 동작을 한다는 걸 쉽게 ì•Œ 수 있습니다. 이렇게 이름만 보고도 ì–´ë–¤ 동작을 하는지 ì•Œ 수 있는 코드를 자기 설명적(self-describing) 코드라고 부릅니다.

위와 같이 함수는 중복을 없애려는 용도 외에도 사용할 수 있습니다. 이렇게 함수를 활용하면 코드가 정돈되고 가독성이 높아집니다.

요약

함수 선언 방식으로 함수를 만들 수 있습니다.

function 함수이름(복수의, 매개변수는, 콤마로, 구분합니다) {
  /* 함수 본문 */
}

• 함수에 전달된 매개변수는 복사된 후 함수의 지역변수가 됩니다.
• 함수는 외부 변수에 접근할 수 있습니다. 하지만 함수 바깥에서 함수 내부의 지역변수에 접근하는 ê±´ 불가능합니다.
• 함수는 값을 반환할 수 있습니다. 값을 반환하지 않는 경우는 반환 값이 undefinedê°€ 됩니다.

깔끔하고 이해하기 쉬운 코드를 작성하려면 함수 내부에서 외부 변수를 사용하는 방법 대신 지역 변수와 매개변수를 활용하는 게 좋습니다.

개발자는 매개변수를 받아서 그 변수를 가지고 반환 값을 만들어 내는 함수를 더 쉽게 이해할 수 있습니다. 매개변수 없이 함수 내부에서 외부 변수를 수정해 반환 값을 만들어 내는 함수는 쉽게 이해하기 힘듭니다.

함수 이름을 지을 땐 아래와 같은 규칙을 따르는 것이 좋습니다.

• 함수 이름은 함수가 ì–´ë–¤ 동작을 하는지 설명할 수 있어야 합니다. 이렇게 이름을 지으면 함수 호출 코드만 보아도 해당 함수가 무엇을 하고 ì–´ë–¤ 값을 반환할지 바로 ì•Œ 수 있습니다.
• 함수는 동작을 수행하기 때문에 이름이 주로 동사입니다.
• create…, show…, get…, check… 등의 잘 알려진 접두어를 사용해 이름을 지을 수 있습니다. 접두어를 사용하면 함수 이름만 보고도 해당 함수가 ì–´ë–¤ 동작을 하는지 파악할 수 있습니다.

함수는 스크립트를 구성하는 주요 구성 요소입니다. 지금까지 다룬 내용은 함수의 기본입니다. 여기선 함수를 만드는 방법, 사용하는 방법을 소개했는데 이 내용은 시작일 뿐입니다. 이어지는 챕터에선 지금까지 배운 것을 바탕으로 함수가 제공하는 고급 기능에 대해 학습해 보도록 하겠습니다.