♻️ 함수

자바스크립트에서 함수는 중요한 역할을 한다. 이 포스팅을 통해 함수의 개념, 사용 방법, 이점, 그리고 다양한 함수 작성법에 대해 알아볼 것이다. 함수를 잘 이해하고 사용하면 코드의 재사용성을 높이고, 가독성을 개선하며, 유지 보수를 용이하게 만들 수 있다. 🚗 💨 💨

📌 함수란?

함수는 특정한 기능을 수행하는 코드의 묶음이다. 수학의 함수처럼 입력(argument)을 받아서 출력(return)을 내보낸다. 자바스크립트에서 함수는 일급 객체로, 변수에 할당할 수 있으며, 다른 함수의 인자로 전달하거나, 함수에서 반환할 수 있다.

✨ 함수가 메모리에 어떻게 저장되는지 ✨

자바스크립트에서 함수는 객체 타입에 속한다는 것을 앞선 포스팅에서 다룬 바가 있다. 함수를 생설할 때, 자바스크립트 엔진은 함수 코드를 메모리에 저장하고, 해당 함수를 가리키는 참조값을 생성한다. 이 참조 값을 통해 함수를 호출하거나 다른 변수에 할당할 수 있다.이러한 메커니즘은 자바스크립트의 동작을 이해하는 데 핵심적인 요소이다.

함수 사용 이점

1. 코드 재사용성: 같은 코드를 여러 번 작성할 필요 없이, 함수를 호출함으로써 필요한 곳에서 재사용할 수 있다.
2. 모듈성: 큰 문제를 작은 단위로 분할하여, 각각의 작은 문제를 해결하는 함수들로 구성할 수 있다.
3. 가독성 및 유지보수: 함수를 사용하면 코드의 의도가 명확해지며, 수정이 필요할 때 해당 함수만 수정하면 되므로 유지보수가 용이하다.

함수 작성법

자바스크립트에서 함수를 작성하는 방법은 크게 세 가지가 있다.

함수 선언문

가장 전통적인 방법으로,function 키워드를 사용하여 정의한다.

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

선언문은 호이스팅 때문에 함수를 선언하기 전에 호출할 수 있다. 호이스팅에 의해 예기치 않은 side effect를 유발할 수 있다.

Default Parameters
인자를 전달 하지 않을 때, 초기값을 지정할 수 있다.

function sum(a=1, b=2){
	return a+b;
}
console.log(sum()); //3

인자를 전달하면 초기값은 무시된다.

function sum(a=1, b=2){
	return a+b;
}
console.log(sum(10,20)); //30

Rest Parameters
만약 parameters가 몇 개 들어올지 모를 때 Rest Parameters로 배열로써 parameters를 받을 수 있다.

function log(...numbers){
	return numbers;
}
console.log(log[1,2,3,4,10]); //[1,2,3,4,10]

함수 표현식

함수를 변수에 할당하는 방식이다. 이 방식은 익명 함수를 사용할 때 흔히 볼 수 있다.

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

함수 표현식은 변수에 할당되므로 변수의 호이스팅을 따른다. 변수 호이스팅은 ① 변수 선언은 스크립트 실행 전에 처리되지만, ② 할당은 실제 코드에 도달했을 때 이루어진다. 따라서 함수 표현식으로 정의된 함수는 그 함수가 할당된 코드 줄에 도달하기 전에는 호출할 수 없고 호이스팅에 의한 side effect 를 줄일 수 있다.

화살표 함수

ES6에서 도입된 화살표 함수는 더 짧은 문법으로 함수를 정의할 수 있다.

const sum = (a, b) => a + b;

화살표 함수는 this 바인딩이 달라서 일부 상황에서 함수 표현식과 차이가 있다고 한다. this 바인딩에 대한 얘기는 따로 상세히 다루도록 하겠다.

순수 함수와 일급 함수

• 순수 함수: 입력이 같으면 항상 같은 출력을 반환하며, 부작용(side effects)이 없는 함수.

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

console.log(sum(2, 3));  // 출력: 5
console.log(sum(2, 3));  // 출력: 5

• ✨일급 함수✨: 함수를 일반 값처럼 사용할 수 있음을 의미한다. 변수에 할당, 다른 함수의 인자로 전달, 함수에서 반환 등의 작업이 가능하다.

// 함수를 변수에 할당
const sayHello = function(name) {
  return `Hello, ${name}!`;
}

// 다른 함수의 인자로 전달
function greetUser(greetingFunction, userName) {
  console.log(greetingFunction(userName));
}

greetUser(sayHello, "Alice");  // 출력: Hello, Alice!

// 함수에서 다른 함수를 반환
function getGreetingFunction() {
  return function(name) {
    return `Hello, ${name}!`;
  }
}

const greet = getGreetingFunction();
console.log(greet("Bob"));  // 출력: Hello, Bob!

함수는 자바스크립트에서 강력한 도구이며, 잘 활용하면 프로그래밍의 효율성과 가독성을 크게 향상시킬 수 있다.

🧘🏻‍♀️ 자바스크립트에서 함수는 코드의 재사용성, 모듈성, 유지 보수의 용이성을 제공하는 핵심 요소이다. 함수는 변수에 할당, 다른 함수의 인자로 전달, 함수에서 반환할 수 있는 일급 객체로, 크게 함수 선언문, 함수 표현식, 화살표 함수 세 가지 방법으로 작성된다. 작성법에 따라 다르게 호이스팅 되는 것에 주목해야 하며, 순수 함수와 일급 함수의 개념을 통해 함수의 유연성과 표현력을 극대화할 수 있다.