JavaScript 베이스캠프

코드를 묶어주는 함수

1. 함수란?

함수는 반복적으로 필요한 코드를 하나의 덩어리로 묶어서 필요할 때마다 사용할 수 있도록 만든 것입니다. 예를 들어, 라면을 끓이는 과정을 함수로 묶어볼 수 있습니다.

function 나의시크릿라면레시피() { let 라면그릇; console.log("물 550ml를 끓인다"); console.log("면과 분말 스프, 후레이크를 같이 넣는다"); console.log("4분 40초간 더 끓인다"); 라면그릇 = "맛있는라면 냠냠"; return 라면그릇; } console.log(나의시크릿라면레시피());

이렇게 하면 배가 고플 때마다 코드를 재사용할 수 있습니다. 예를 들어, 아래처럼요.

function 나의시크릿라면레시피() { let 라면그릇; console.log("물 550ml를 끓인다"); console.log("면과 분말 스프, 후레이크를 같이 넣는다"); console.log("4분 40초간 더 끓인다"); 라면그릇 = "맛있는라면 냠냠"; return 라면그릇; } // 아침 console.log(나의시크릿라면레시피()); // 점심 console.log(나의시크릿라면레시피()); // 저녁 console.log(나의시크릿라면레시피()); // 야식 console.log(나의시크릿라면레시피());

2. 함수 구조

함수는 기본적으로 아래의 형태를 가집니다.

function 함수이름(parameter1, parameter2...) { // 함수의 선언
  // 실행코드...
  return 반환값;
}
 
함수이름(argument1, argument2...); // 함수의 호출

function 함수이름(parameter1, parameter2...) { // 함수의 선언
  // 실행코드...
  return 반환값;
}
 
함수이름(argument1, argument2...); // 함수의 호출

함수의 범위는 중괄호로 표현하고, 중괄호 안에 쓰여지는 코드는 보통 띄어쓰기 2칸이나 4칸을 사용하여 들여쓰기를 합니다. 이렇게 하면 코드의 가독성이 높아집니다. 그러나 띄어쓰기를 하지 않아도 코드는 동작합니다. 띄어쓰기를 하지 않는 것은 코드의 가독성을 떨어뜨리므로 지양해야 합니다.

3. 매개변수와 전달인자

함수를 사용할 때는 매개변수와 전달인자를 이해해야 합니다. 우리 수업에서는 매개변수라고 부르지 않고 파라미터로, 전달인자라고 부르지 않고 아규먼트로 부르겠습니다.

용어	번역	의미
Parameter	매개변수	함수와 메서드에 입력 변수 이름
Argument	전달인자, 인자, 인수	함수와 메서드에 실제 입력되는 값

쉽게 기억하려면 파선아실(파라미터는 선언, 아규먼트는 실제 값)이라고 외워보세요.

function 인사말(name) { return `안녕하세요, ${name}님!`; } console.log(인사말("licat")); // 인사말 함수의 호출

여기서 name은 파라미터이고, "철수"는 아규먼트입니다.

여기서 console.log와 return은 구분할 필요가 있습니다. console.log는 값을 콘솔 창에 출력하는 것이고, return은 함수를 실행한 결과를 자신을 호출한 곳에 반환하는 것입니다. return을 만나면 함수는 즉시 종료됩니다.

아래 예제를 하나씩 비교해보도록 하겠습니다.

function 더하기(a, b) { console.log('더하기가 호출되었습니다!'); // 콘솔에 출력 return a + b; // 결과를 반환 } let 결과 = 더하기(2, 3); // 함수 호출 console.log(결과); // 5 (더하기 함수의 반환값)

함수 이름을 더하기로 정의하고, 파라미터로 a와 b를 받습니다. 여기서 함수 이름을 한글로 하였는데 이해를 돕기 위해 한글로 작성한 것입니다. 실무에서는 영어로 작성하는 것이 일반적입니다.

console.log('더하기가 호출되었습니다!');는 함수 내부에서 실행되는 코드로, 함수를 호출할 때마다 콘솔에 결과를 출력합니다. return a + b;는 함수의 결과를 반환하는 코드로, 함수를 호출한 곳으로 결과를 반환합니다. 이렇게 반환된 값이 결과 변수에 저장되어 console.log(결과);에서 출력됩니다.

function 함수(value) { console.log(value); console.log('hello'); return 100; } console.log(함수(1000) + 함수(1000));

이번에는 함수 이름을 함수로 정의하고, 파라미터로 value를 받습니다. 함수 내부에서 console.log(value);는 파라미터로 받은 값을 출력하고, console.log('hello');는 hello를 출력합니다. return 100;은 100을 반환하는 코드로, 함수를 호출한 곳으로 100을 반환합니다.

이번에는 변수로 이를 저장하지 않고 뒤 이어 + 연산자가 나옵니다. 그리고 다시 함수(1000)이 호출됩니다. 위와 같은 방식으로 함수가 실행되고 역시나 100의 결과를 반환합니다. 이제 이 두 결과를 더한 값이 console.log로 출력됩니다. 결국 이 코드는 아래와 같은 코드가 됩니다.

console.log(100 + 100);

꼭 파라미터가 있어야만 하는 것은 아닙니다. 아래 코드는 파라미터가 없는 예제입니다.

function 함수() { console.log('hello'); } 함수();

파라미터가 없다면 호출할 때 소괄호만 붙이면 됩니다.

이번에는 return이 없는 함수를 만들어보겠습니다. return이 없는 함수는 return만 기술한 함수랑 같습니다. 아래 return 앞에 //를 제거하고 실행해도 결과는 같습니다.

function 함수() { console.log('hello'); // return; // 주석을 풀어도 결과는 같습니다. } let 결과 = 함수(); console.log(결과);

함수는 중간에 return을 만나게 되면 즉시 종료됩니다. 아래 코드는 return을 만나기 전까지만 실행됩니다.

function f() { console.log('hello1'); console.log('hello2'); return; // return undefined console.log('hello3'); console.log('hello4'); } f();

함수를 사용하면 다음과 같은 장점이 있습니다:

재사용성: 코드를 반복해서 사용할 수 있습니다.
유지보수: 코드를 쉽게 수정할 수 있습니다.
구조 파악: 코드를 더 쉽게 이해할 수 있습니다.

예를 들어, 집을 짓는 과정을 함수로 나눌 수 있습니다.

function 땅파기() { console.log("땅을 팝니다."); } function 기반다지기() { console.log("기반을 다집니다."); } function 기둥세우기() { console.log("기둥을 세웁니다."); } function 벽돌쌓기() { console.log("벽돌을 쌓습니다."); } function 지붕올리기() { console.log("지붕을 올립니다."); } 땅파기(); 기반다지기(); 기둥세우기(); 벽돌쌓기(); 지붕올리기();

집을 짓는 과정을 함수로 나누어 코드를 작성해 보았습니다. 이렇게 하였을 경우 코드를 수정할 때도 함수 하나만 수정하면 되므로 유지보수가 쉬워집니다. 또한 코드가 함수로 나누어져 있기 때문에 코드의 구조를 파악하기도 쉬워집니다.

4. 함수의 아규먼트에 따른 반환값

함수에 전달되는 아규먼트 즉 인자는 매개변수보다 적거나 많아도 에러가 발생하지 않습니다.

function 더하기(a, b, c) { console.log(a, b, c); return a + b + c; } console.log(더하기(10, 20, 30)); console.log(더하기(10, 20)); console.log(더하기(10, 20, 30, 40)); // 초과된 인자는 무시됨