[기초]JavaScript 함수(Function)

자바스크립트(JavaScript)에서 함수는 특정 작업을 수행하는 코드 블록입니다. 함수는 재사용 가능하며, 코드의 모듈화와 유지보수를 쉽게 해줍니다. 함수는 선언, 호출, 인자 전달, 반환 값 등의 개념으로 구성됩니다.

 

1. 함수 선언 (Function Declaration)

함수 선언은 function 키워드를 사용하여 함수를 정의합니다. 함수 선언은 호이스팅(hoisting)되므로, 함수 선언 전에 호출할 수 있습니다.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice"));  // Hello, Alice!

 

 

2. 함수 표현식 (Function Expression)

함수 표현식은 함수를 변수에 할당하는 방식으로 정의합니다. 함수 표현식은 할당된 후에야 호출할 수 있습니다. 함수 표현식도 변수 선언과 마찬가지로 호이스팅(hoisting)이 발생하지만, 변수가 undefined로 초기화되기 때문에 실제로 호출할 수 없습니다.

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet("Bob"));  // Hello, Bob!

 

 

3. 화살표 함수 (Arrow Function)

화살표 함수는 function 키워드 대신 =>를 사용하여 정의합니다. 간결한 구문을 제공하며, 특히 콜백 함수로 많이 사용됩니다. 화살표 함수는 자신만의 this를 가지지 않고, 상위 스코프의 this를 유지합니다. 이 때문에 화살표 함수는 일반 함수와 달리 this가 고정되어 있어 콜백 함수로 자주 사용됩니다.

const greet = (name) => {
  return `Hello, ${name}!`;
};

// 함수 본문이 단일 표현식인 경우, 중괄호와 return을 생략할 수 있습니다.
const greetShort = name => `Hello, ${name}!`;

console.log(greet("Charlie"));  // Hello, Charlie!
console.log(greetShort("Dave"));  // Hello, Dave!

 

 

4. 익명 함수 (Anonymous Function)

익명 함수는 이름이 없는 함수로, 주로 콜백 함수로 사용됩니다.

setTimeout(function() {
  console.log("This is an anonymous function");
}, 1000);

 

 

5. 즉시 실행 함수 (Immediately Invoked Function Expression, IIFE)

즉시 실행 함수는 정의되자마자 실행되는 함수입니다. 함수 선언을 괄호 ()로 감싸고, 즉시 호출을 위해 뒤에 ()를 붙입니다.

(function() {
  console.log("This is an IIFE");
})();

(function() {
  console.log("Another IIFE");
}());

 

 

6. 매개변수와 인자 (Parameters and Arguments)

함수는 매개변수(parameter)를 통해 값을 입력받고, 인자(argument)를 통해 값을 전달받습니다.

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

console.log(sum(5, 10));  // 15

 

 

7. 기본 매개변수 (Default Parameters)

기본 매개변수를 사용하면, 함수 호출 시 인자가 생략되었을 때 기본 값을 설정할 수 있습니다.

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

console.log(greet());  // Hello, Guest!
console.log(greet("Eve"));  // Hello, Eve!

 

 

8. 나머지 매개변수 (Rest Parameters)

나머지 매개변수는 함수의 매개변수가 불확실한 경우, 모든 인자를 배열로 모을 수 있습니다. ... 문법을 사용합니다.

function sumAll(...numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

console.log(sumAll(1, 2, 3, 4));  // 10

 

 

9. 반환 값 (Return Value)

함수는 return 키워드를 사용하여 값을 반환합니다. return이 없으면 undefined를 반환합니다.

function multiply(a, b) {
  return a * b;
}

console.log(multiply(2, 3));  // 6

function noReturn() {
  let x = 10;
}

console.log(noReturn());  // undefined

 

 

10. 함수 스코프 (Function Scope)

함수 내에서 선언된 변수는 함수 내부에서만 접근할 수 있습니다. 이를 함수 스코프라고 합니다.

function scopeTest() {
  let local = "I'm local";
  console.log(local);  // I'm local
}

scopeTest();
console.log(local);  // ReferenceError: local is not defined

 

 

11. 클로저 (Closure)

클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경을 기억하는 함수입니다. 클로저를 사용하면 함수 외부에서 내부 변수를 접근하거나 수정할 수 있습니다.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter());  // 1
console.log(counter());  // 2
console.log(counter());  // 3

 

 

12. 콜백 함수 (Callback Function)

콜백 함수는 다른 함수에 인자로 전달되어 실행되는 함수입니다. 비동기 처리나 이벤트 처리에 많이 사용됩니다.

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 1000);
}

fetchData((data) => {
  console.log(data);  // Data received
});

 

 

13. 고차 함수 (Higher-Order Function)

고차 함수는 함수를 인자로 받거나, 함수를 반환하는 함수입니다. 배열 메서드(map, filter, reduce) 등이 고차 함수입니다.

function multiplyBy(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplyBy(2);
console.log(double(5));  // 10

 

 

14. 재귀 함수 (Recursive Function)

재귀 함수는 자기 자신을 호출하는 함수입니다. 주로 반복적인 작업을 수행할 때 사용됩니다.

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5));  // 120

 

 

15. 메서드 (Method)

객체의 속성으로 정의된 함수를 메서드라고 합니다. 메서드는 객체와 관련된 동작을 정의합니다.

const person = {
  name: "Alice",
  greet: function() {
    return `Hello, my name is ${this.name}`;
  }
};

console.log(person.greet());  // Hello, my name is Alice

 

 

자바스크립트 함수는 다양한 형태와 기능을 제공하여, 유연하고 강력한 코드를 작성할 수 있게 해줍니다. 함수를 효과적으로 사용하는 방법을 이해하면, 더 효율적이고 재사용 가능한 코드를 작성할 수 있습니다.