WeniVooks

1. 함수의 활용

함수는 코드의 재사용성을 높이고 프로그램의 구조를 개선하는 데 활용됩니다. 함수를 적절히 활용하면 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. 이번 장에서는 함수를 활용하는 다양한 방법을 살펴보도록 하겠습니다.

1.1 반복적인 작업을 함수로 추상화

함수를 사용하여 반복적인 작업을 추상화할 수 있습니다.

위의 예시에서 greet 함수는 인사 메시지를 출력하는 역할을 합니다. 이렇게 함수 내부의 구조를 몰라도 사용할 수 있도록 하는 것을 추상화라고 합니다. 이렇게 반복적인 작업을 함수로 추상화하면 코드의 중복을 줄일 수 있습니다.

1.2 콜백 함수

콜백 함수는 다른 함수에 인자로 전달되어 나중에 호출되는 함수입니다. 콜백 함수를 이용하면 특정 작업이 완료된 후에 다른 작업을 실행할 수 있어, 코드의 실행 순서를 제어할 수 있습니다.

위의 예시에서 greet 함수는 인사 메시지를 출력한 후, 전달받은 함수를 호출합니다. 이렇게 함수 안에서 실행하는 함수나 함수 안에서 반환되는 함수를 콜백 함수라고 합니다. 왜 콜백함수라고 부를까요? 콜(call)을 받아서 다시 불러주는(back) 함수이기 때문입니다.

콜백 함수를 활용하면 함수의 실행 흐름을 제어하고 추가적인 동작을 수행할 수 있습니다. 자주 사용되는 패턴이니 기억해주세요.

이러한 함수의 활용은 중급자로 가기 위한 기본적인 지식입니다. 중급자로 가기 위해 추후에 배울 클로저 등을 공부할 때 도움이 되는 지식이니 꼭 기억해주세요.

2. 함수를 선언하는 방법

2.1. 함수 선언문과 함수 표현식

함수는 function + 함수이름 + ( ) + { } 의 조합인 구문(Statement)으로 선언할 수도 있고, 함수 이름 없이 선언하여 할당하는 표현식(Expression)으로 선언하는것도 가능합니다.

2.2. 화살표 함수

함수는 function 키워드 대신 화살표 기호로도 표현할 수 있습니다. 화살표 함수는 이름이 없으므로 주로 함수 표현식으로 사용됩니다. 파라미터를 소괄호로 감싸고 화살표(=>) 뒤에 함수의 내용을 작성합니다.

const 더하기 = (x, y) => {
  console.log(`x: ${x}, y: ${y}`);
  return x + y;
};
console.log(더하기(10, 20));

const 더하기 = (x, y) => {
  console.log(`x: ${x}, y: ${y}`);
  return x + y;
};
console.log(더하기(10, 20));

함수 선언문으로 작성한 함수를 화살표 함수로 변경하면 다음과 같습니다.

// 일반 함수
function 더하기(x, y) {
  return x + y;
}

// 일반 함수
function 더하기(x, y) {
  return x + y;
}

화살표 함수에서 반환문만 있는 경우 중괄호와 return 키워드를 생략할 수 있습니다.

파라미터가 하나인 경우에만 소괄호를 생략할 수 있습니다.