JavaScript 베이스캠프

함수의 활용

1. 함수의 활용

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

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

function greet(name) { console.log(`안녕하세요, ${name}님!`); } greet("licat"); greet("mura"); greet("binky");

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

1.2 콜백 함수로 활용

function greet(name, callback) { console.log(`안녕하세요, ${name}님!`); callback(); } function sayGoodbye() { console.log("다음에 또 만나요!"); } greet("licat", sayGoodbye);

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

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

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

2. 함수를 선언하는 여러가지 방법

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

// 함수 선언문 function sum(x, y) { return x + y; } // 함수 표현식 let sumXY = function (x, y) { return x + y; }; console.log(sum(10, 20)); console.log(sumXY(10, 20));

구문(Statement)과 표현식(Expression)
구문은 자바스크립트 명령문으로, 어떤 작업을 수행하기 위한 코드 블록이라 할 수 있습니다. 예를 들어 우리가 뒤에서 배울 if문, switch문, for문 등이 여기에 포함됩니다.
표현식은 값으로 평가될 수 있는것을 의미합니다. 숫자나 문자열 같은 값 자체나 5 < 3 와 같은 비교 연산자등이 여기에 해당합니다. 위에서 함수표현식이라 함은 함수를 값 처럼 사용하기 때문에 그렇게 표현합니다.
화살표함수
함수는 function 키워드 대신 화살표 기호로도 표현할 수 있습니다. 화살표 함수는 이름이 없으므로 주로 함수 표현식으로 사용됩니다.

// 일반 함수 function 더하기(x, y) { return x + y; } // 화살표 함수 let 더하기함수 = (x, y) => x + y; console.log(더하기(10, 20)); console.log(더하기함수(10, 20)); // 전달 인자가 하나인 경우 괄호 생략 가능 let 더하기10 = x => x + 10; console.log(더하기10(5));

이런 방식의 익명 함수 표현식을 다른 언어에서는 람다식이라고 부른답니다!