Modern Js 13(함수)

자바스크립트의 함수에 대한 정리

Featured image

본 문서는 모던 자바스크립트를 정리하고 공부한 문서입니다.

2.15 함수

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

함수 선언

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

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

function showMessage() {
  alert( '안녕하세요!' );
}
function name(parameters) {
  ...함수 본문...
}

새롭게 정의한 함수는 함수 이름 옆에 괄호를 붙여 호출할 수 있습니다. 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 ); // 함수는 외부 변수에 접근하지 않습

ℹ️전역 변수

위 예시의 userName처럼, 함수 외부에 선언된 변수는 전역 변수(global variable) 라고 부릅니다.

전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면 모든 함수에서 접근할 수 있습니다.

변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋습니다. 비교적 근래에 작성된 코드들은 대부분 전역변수를 사용하지 않거나 최소한으로만 사용합니다. 다만 프로젝트 전반에서 사용되는 데이터는 전역 변수에 저장하는 것이 유용한 경우도 있으니 이 점을 알아두시기 바랍니다.

매개변수

매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있습니다. 매개변수는 인수(argument) 라고 불리기도 합니다(매개변수와 인수는 엄밀히 같진 않지만, 튜토리얼 원문을 토대로 번역하였습니다 – 옮긴이).

아래 예시에서 함수 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에 복사됩니다. 그 후 함수는 지역변수에 복사된 값을 사용합니다.

function showMessage(from, text) {

  *from = '*' + from + '*'; // "from"을 좀 더 멋지게 꾸며줍니다.*alert( from + ': ' + text );
}

let from = "Ann";

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

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

기본값

매개변수에 값을 전달하지 않으면 그 값은 undefined가 됩니다.

매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 ‘기본값(default value)’을 설정해주면 됩니다. 매개변수 오른쪽에 =을 붙이고 undefined 대신 설정하고자 하는 기본값을 써주면 되죠.

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

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

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

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

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

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

가끔은 함수 선언부에서 매개변수 기본값을 설정하는 것 대신 함수가 실행되는 도중에 기본값을 설정하는 게 논리에 맞는 경우가 생기기도 합니다.

이런 경우엔 일단 매개변수를 undefined와 비교하여 함수 호출 시 매개변수가 생략되었는지를 확인합니다.

function showMessage(text) {
  *if (text === undefined) {
    text = '빈 문자열';
  }*alert(text);
}

showMessage(); // 빈 문자열

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

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

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

// 매개변수 'count'가 넘어오지 않으면 '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는 얼럿 창을 보여주지 않습니다.

함수 이름짓기

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

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

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

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

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 함수이름(복수의, 매개변수는, 콤마로, 구분합니다) {
  /* 함수 본문 */
}

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

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

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