Functions (JavaScript)

출처: https://javascript.info/function-basics

Functions

 

 

함수

 

자바스크립트에서 함수는 스크립트의 여러 위치에서 비슷한 동작을 반복 수행할 필요가 있을 때 사용함.

예를 들어 방문자가 로그인하거나 로그아웃할 떄 멋진 메시지를 보여줘야 한다면 , 함수를 사용하면 코드 중복 없이 해당 메시지를 여러 번 호출할 수 있음.

함수는 프로그램의 주요 " 빌딩 블록 " 임. 

한 번 정의한 함수를 여러 번 호출하여 동일한 동작을 실행할 수 있음.

 

우리는 이미 alert(message) , prompt(message , default)와 confirm(question)같은 내장 함수의 예를 보았음. 

하지만 우리는 직접 함수를 만들수도 있음.

 

함수 선언

함수를 생성하는 가장 기본적인 방법은 함수 선언문(function declaration)을 사용하는 것

문법은 다음과 같음 : 

 

function showMessage() {
  alert( 'Hello everyone!' );
}

 

먼저 function 키워드를 쓰고 

그 다음 함수 이름을 지정하며 

괄호 안에는 매개변수 목록(쉼표로 구분됨, 위 예제에서는 비어 있음)이 옴.

마지막으로 중괄호 {...}안에 함수 본문 (코드)이 위치함. 

 

일반적인 형태는 다음과 같음 .

 

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

 

정의한 함수는 이름을 통해 호출할 수 있음 예를 들어 : 

 

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

 

 

위와 같이 showMessage()를 호출하면 함수 내의 코드가 실행되며 , 여기서는 메시지가 두 번 출력됨.

이 예제는 함수의 주요 목적 중 하나인 코드 중복 제거를 잘 보여줌. 

메시지나 출력 방식을 변경할 때 한 군데만 수정하면 되기 때문임.

 

지역 변수 (Local variables)

함수 내부에서 선언된 변수는 해당 함수 내부에서만 유효함.

 

예시 : 

 

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // 지역 변수

  alert( message );
}

showMessage(); // "Hello, I'm JavaScript!" 출력

alert( message ); // <-- 오류! message 변수는 함수 내부에서만 유효함

 

외부 변수 (Outer variables)

함수는 외부에 선언된 변수에도 접근할 수 있음.

 

예시 : 

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", 함수가 외부 변수의 값을 변경함

 

주의 : 만약 함수 내부에서 같은 이름의 변수를 다시 선언하면, 해당 함수는 내부의 변수를 우선 사용하고 외부 변수는 무시하게 됨.

 

예시 :

 

let userName = 'John';

function showMessage() {
  let userName = "Bob"; // 지역 변수 선언

  let message = 'Hello, ' + userName; // "Bob" 사용됨
  alert(message);
}

showMessage();

alert( userName ); // "John", 외부 변수는 변경되지 않음

 

전역 변수(Global variables)

함수 외부에서 선언된 변수(예: 위의 외부 변수 username)는 전역 변수라고 하며 , 특별한 경우를 제외하면 모든 함수에서 접근할 수 있음. 

그러나 전역 변수의 사용은 최소화하는 것이 좋은 습관임. 

최신 코드에서는 전역 변수의 사용을 줄이고 , 대부분의 변수는 함수 내부에 위치함. 

다만, 프로젝트 전체의 데이터를 저장할 때 전역 변수가 유용할 수 있음. 

 

매개변수 (Parameters)

함수에 데이터를 전달할 떄 매개변수를 사용함.

 

아래 예제에서 함수는 두 개의 매개변수 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을 함수에 전달한 후 , 함수 내부에서 매개변수 from의 값을 변경해도 외부 변수는 변경되지 않음.

 

function showMessage(from, text) {
  from = '*' + from + '*'; // 매개변수 from을 예쁘게 변경함

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

let from = "Ann";

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

alert( from ); // "Ann", 함수 내부에서 수정한 값은 외부에 영향을 주지 않음

 

참고 : 함수에 전달되는 값을 인수(argument)라고 부르며 함수 선언 시 나열하는 매개변수 (parameter)와 구분됨.

 

즉 함수 showmessage 는 두 개의 매개변수를 가지고 선언되고 , 호출될 때 두 개의 인수 , 예를 들어 from 과 "hello"가 전달된다 라고 표현할 수 있음.

 

함수에 선언된 것은 매개 변수 , 매개 변수의 전달되는 값을 인수라고 함.

 

기본값(Default values)

함수를 호출할 때 인수가 제공되지 않으면, 해당 매개변수의 값은 undefined가 됨.

예를 들어 앞서 사용한 함수 showMessage(from , text)를 단일 인수로 호출하면 : 

 

showMessage("Ann");

 

오류가 발생하지 않으며 , 출력은 "Ann: undefined" 됨. 

매개변수 text가 전달되지 않았으므로 undefined가 됨. 

 

 매개변수에 기본값을 지정할수도 있음. 이는 매개변수 선언 시 = 기호를 사용하여 지정함. :

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

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

 

만약 인수가 undefined로 전달되더라도 기본값이 사용됨 : 

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

 

기본값은 복잡한 표현식도 될 수 있으며 , 매개변수가 전달되지 않은 경우에만 평가되어 할당됨. 

예:

 

function showMessage(from, text = anotherFunction()) {
  // 인수가 없으면 anotherFunction()이 실행되고 그 결과가 text에 할당됨
}

 

기본값은 복잡한 표현식도 될 수 있으며, 매개변수가 전달되지 않은 경우에만 평가되어 할당됨.

 

여기서 text = anotherFunction() 을 이야기함.

 

 

기본 매개변수의 평가

자바스크립트에서는 함수가 호출될 때마다 , 해당 매개변수가 전달되지 않으면 기본값이  평가됨.

 

예를 들어 위 코드에서 text 매개변수가 전달되면 anotherFunction()은 실행되지 않지만 전달되지 않으면 매번 실행이 됨.

 

이전 버전의 자바스크립트에서 기본값 지정

몇 년 전에는 자바스크립트가 기본 매개변수 문법을 지원하지 않았기 때문에 , 다음과 같이 직접 undefined를 체크하는 방식으로 기본값을 지정했음.

 

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

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

 

여기선 text가 undefined 일 때 즉 아무것도 할당이 되지 않았을 떄를 처리해줌.

 

또는 OR 연산자(||)를 사용하기도 했음. :

 

function showMessage(from, text) {
  // text가 falsy하면 기본값을 할당함 (빈 문자열 ""도 기본값으로 간주됨)
  text = text || 'no text given';
  // ...
}

 

대체 기본 매개변수

경우에 따라 함수 선언 후에 매개변수의 기본값을 설정할 수 도 있음.

 

function showMessage(text) {
  // ...

  if (text === undefined) { // 매개변수가 전달되지 않은 경우
    text = 'empty message';
  }

  alert(text);
}

showMessage(); // "empty message" 출력

 

또는 OR 연산자를 사용할 수 있음:

 

function showMessage(text) {
  // text가 undefined이거나 falsy하면 'empty'로 설정
  text = text || 'empty';
  // ...
}

 

모던 자바스크립트 엔진에서는 nullish 병합 연산자 (??)를 지원하므로 0과 같은 falsy 값들을 정상적인 값으로 취급할 때는 더 나은 선택임 : 

 

function showCount(count) {
  // count가 undefined 또는 null이면 "unknown" 출력
  alert(count ?? "unknown");
}

showCount(0);      // 0 출력
showCount(null);   // "unknown" 출력
showCount();       // "unknown" 출력

 

값을 변환하기 (Returning a value)

함수는 실행 결과로 값을 호출한 곳에 반환할 수 있음. 

가장 간단한 예로 두 값을 더하는 함수를 들 수 있음 : 

 

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

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

 

return문을 만나면 함수의 실행은 즉시 종료되고 , 반환된 값은 호출한 코드에 전달됨.

하나의 함수 안에 여러 개의 return 문이 있을 수도 있음. 예를 들어 : 

 

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm('Do you have permission from your parents?');
  }
}

let age = prompt('How old are you?', 18);

if ( checkAge(age) ) {
  alert( 'Access granted' );
} else {
  alert( 'Access denied' );
}

 

함수 내에서 값 없이 return을 사용하면 , 함수는 즉시 종료되며 undefined를 반환함.

 

예를 들어 : 

 

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

  alert( "Showing you the movie" );
  // ...
}

 

또한 , 함수에서 반환 값이 없으면 암묵적으로 undefined가 반환됨 : 

 

function doNothing() { /* 아무 작업도 하지 않음 */ }

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

 

빈 return은 return undefined; 와 동일 : 

 

function doNothing() {
  return;
}

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

 

주의 : 긴 표현식을 여러 줄에 걸쳐 반환하려고 할 떄 , return과 반환값 사이에 줄바꿈을 넣으면 자바스크립트는 자동으로 세미콜론을 추가하여 빈 값을 반환하게 됨.

 

올바른 예 : 

 

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

 

반드시 반환 값이 return 과 같은 줄에 시작하도록 하거나 , 괄호를 사용

 

한 함수는 한 가지 동작만 수행하기 

함수는 그 이름이 암시하는 작업만 수행해야 하며 , 그 이상의 부수 효과가 없어야 함.

예를 들어 , 두가지 독립적인 작업은 보통 각각 별도의 함수로 분리하는 것이 좋음.

함께 호출되더라도 , 각 작업은 개별 함수로 구현하고 , 필요시 이를 묶는 또 다른 함수를 만들면 됨.

 

예시 : 

 

getAge 함수는 단순히 나이를 반환하기만 해야 하며 , 동시에 alert를 호출하면 안됨. 

createForm 함수는 폼을 생성하고 반환해야 하며 , 문서에 직접 추가하는 등의 부수 효과가 없어야 함. 

checkpermission 함수는 단순히 권한을 검사하여 결과를 반환해야 하며 , 그 결과를 화면에 출력하면 안됨. 

 

이러한 규칙은 함수 이름에 내포된 의미를 명확하게 하고 , 팀 내에서 일관된 코딩 스타일을 유지하는데 도움을 줌.

 

초단기 함수 이름

자주 사용되는 함수의 경우 , jQuery의 $나 Lodash의 _ 와 같이 아주 짧은 이름을 사용하는 경우도 있음.

하지만 이는 예외이며 , 일반적으로 함수 이름은 간결하면서도 설명적이어야 함.

 

함수는 곧 주석과 같다 

함수는 짧고 하나의 동작만 수행해야 함. 

만약 하나의 동작이 너무 크다면 , 여러 개의 작은 함수로 나누는 것이 좋음.

함수를 별도로 분리하면 테스트와 디버깅이 쉬어지며 , 함수 자체가 훌륭한 주석 역할을 함. 

예를 들어 , n이하의 소수를 출력하는 두가지 버전의 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 ); // 소수 출력
  }
}

 

두번째 버전은 소수 여부를 검사하는 별도의 함수 isprime(n)을 사용함 : 

 

function showPrimes(n) {

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

    alert(i);  // 소수 출력
  }
}

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

 

두번째 버전이 훨씬 이해하기 쉬움. 코드 조각 대신 , 함수 이름 isPrime이 수행하는 작업을 바로 알 수 있기 때문임.

때때로 재사용할 의도가 없더라도 , 코드를 구조화하고 가독성을 높이기 위해 함수를 만드는 것이 좋음. 

 

과제 

1.다음 함수는 매개변수 age가 18보다 크면 true를 반환하고 , 그렇지 않으면 확인창(confirm)을 띄워 그 결과를 반환함.

 

function checkAge(age) {
  if (age > 18) {
    return true;
  } else {
    // ...
    return confirm('Did parents allow you?');
  }
}

 

아래와 같이 else를 제거한 경우와 동작이 달라질까? 

 

function checkAge(age) {
  if (age > 18) {
    return true;
  }
  // ...
  return confirm('Did parents allow you?');
}

 

안 달라진다.

 

2. 다음 함수는 매개변수 age가 18보다 크면 true를 반환하고 , 그렇지 않으면 확인창 (confirm)을 

띄워 그 결과를 반환함. 

 

function checkAge(age) {
  if (age > 18) {
    return true;
  } else {
    return confirm('Did parents allow you?');
  }
}

 

이 함수를 if 문 없이 한 줄로 동일한 동작을 하도록 작

 

짠 코드 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        age = prompt("나이 입력","입력")
        checkAge()


    

    function checkAge(age){
        return age > 18 ? true : confirm('Did parents allow you?')
    }

       







    </script>
</body>
</html>

 

다른 예시 

OR (||)을 이용한 방법 

function checkAge(age) {
  return (age > 18) || confirm('Did parents allow you?');
}

 

3. 두 숫자 a와 b 중 작은 값을 반환하는 함수 min(a,b)를 작성

 

 

짠 코드 : 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        a = prompt(" a를 입력","a")
        a = Number(a)

        b = prompt(" b를 입력","b")
        b = Number(b)

        result = min(a,b)
        alert(result)

        function min(a , b){
            if(a > b){
            return b}

            if(a < b){
                return a
            }
        }

    </script>
</body>
</html>

 

4.함수 pow(x,n)을 작성하여 x를 n번 곱한 값을 반환하는 프로그램 만들기

 

짠 코드 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        x = prompt(" x를 입력","x")
        x = Number(x)

        n = prompt(" n를 입력","n")
        n = Number(n)

        value = pow(x,n)

        alert(value)

        function pow(x , n){
            let result = x

            for(let i = 1; i < n;i++){

                result *= x


            }

            return result

        }



    </script>
</body>
</html>