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칸을 사용하여 들여쓰기를 합니다. 이렇게 하면 코드의 가독성이 높아집니다. 그러나 띄어쓰기를 하지 않아도 코드는 동작합니다. 띄어쓰기를 하지 않는 것은 코드의 가독성을 떨어뜨리므로 지양해야 합니다.

function sum(num1, num2) { return num1 + num2; } sum(2, 3);

2.1. 매개변수와 전달인자

함수를 사용할 때는 매개변수와 전달인자를 이해해야 합니다. 우리 수업에서는 매개변수를 파라미터(parameter), 전달인자를 아규먼트(argument) 로 부르겠습니다. 파라미터는 함수와 메서드를 선언할 때 사용하는 변수 이름이고, 아규먼트는 함수와 메서드를 호출할 때 실제로 전달되는 값입니다.

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

파선아실
파라미터와 아규먼트를 구분하기 어렵다면, 파선아실 (파라미터는 선언, 아규먼트는 실제 값)이라고 외워보세요!

다음코드에서 파라미터는 함수를 선언할 때 사용한 이름, 아규먼트는 함수를 호출할 때 전달한 "라이캣"입니다.

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

자바스크립트는 파라미터와 아규먼트의 개수가 일치하지 않아도 에러가 발생하지 않습니다. 파라미터보다 아규먼트가 적으면 undefined가 할당되고, 파라미터보다 아규먼트보다 많으면 초과된 인자는 무시됩니다.

function 더하기(a, b) { console.log('더하기가 호출되었습니다!'); // 콘솔에 출력 return a + b; // 결과를 반환 } let 결과 = 더하기(2, 3); console.log(결과); // 5 let 결과2 = 더하기(2); console.log(결과2); // NaN (2 + undefined) let 결과3 = 더하기(2, 3, 4); console.log(결과3); // 5 (4는 무시됨)

함수를 선언할 때 파라미터가 필수는 아닙니다. 파라미터가 없는 함수를 선언할 수도 있습니다. 파라미터가 없다면 함수를 호출할 때 소괄호만 붙이면 됩니다.

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

2.2. 반환값

함수에서 return 키워드를 사용하여 값을 반환할 수 있습니다. return과 console.log는 다른 역할을 합니다. console.log는 콘솔에 값을 출력하는 것이고, 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); return 100; } console.log(함수(1000) + 함수(1000));

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

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

console.log(100 + 100);

console.log(100 + 100);

return을 만나면 값을 반환하고 함수는 즉시 종료됩니다.

function 함수() { console.log('before return'); return; console.log('after return'); } 함수();

3. 함수의 특징

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

재사용성: 코드를 반복해서 사용할 수 있습니다. 필요할 때마다 코드를 다시 작성하지 않고 호출하여 사용할 수 있습니다.
유지보수: 코드를 쉽게 수정할 수 있습니다. 함수를 수정하면 함수를 호출한 모든 곳에서 수정된 함수가 적용됩니다.
구조 파악: 코드를 더 쉽게 이해할 수 있습니다. 함수로 코드를 나누어 작성하면 코드의 구조를 파악하기 쉬워집니다.

예를 들어, 로그인을 하는 과정을 다음과 같이 함수로 나눌 수 있습니다.

function 사용자입력받기() { console.log("사용자로부터 아이디와 비밀번호를 입력받습니다."); } function 입력값검증() { console.log("입력된 아이디와 비밀번호의 형식을 검증합니다."); } function 서버로데이터전송() { console.log("검증된 로그인 정보를 서버로 전송합니다."); } function 세션생성() { console.log("인증 성공 시 사용자 세션을 생성합니다."); } function 리다이렉트() { console.log("로그인 성공 후 메인 페이지로 리다이렉트합니다."); } // 로그인 프로세스 실행 사용자입력받기(); 입력값검증(); 서버로데이터전송(); 세션생성(); 리다이렉트();

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