[자바스크립트] 함수에 대해

자바스크립트 함수

 

설명

 

• 코드를 재사용하고 모듈화하는데 사용되는 중요한 개념
• 함수는 특정 작업을 수행하고 값을 반환 가능

 

---

 

선언 방법

 

함수 선언식

 

• 함수 선언식은 function 키워드를 사용하여 함수를 정의하는 방법
• 함수의 이름과 매개변수를 지정할 후 중괄호 내부에 함수의 동작을 작성
• 함수 선언식은 호이스팅에 영향을 받아 함수 정의를 코드의 상단으로 끌어올리기 때문에,
  함수 선언 이전에 호출해도 정상 작동

 

function 함수이름(매개변수1, 매개변수2, ...) {
  // 함수의 동작
  return 결과값;
}

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

 

함수 표현식

 

• 함수 표현식은 일급 객체로서 함수를 변수에 할당하고
  다른 함수의 인수로 전달하거나 반환값으로 사용하는 장점이 있다.
• 함수 표현식은 즉시 실행 함수(IIFE)와 같이 함수를 정의하고 바로 실행하는 패턴에 자주 사용

 

const 함수이름 = function(매개변수1, 매개변수2, ...) {
  // 함수의 동작
  return 결과값;
};

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

 

---

 

함수의 특징

 

일급 객체(First-class Object)

 

• 자바스크립트에서 함수는 일급 객체로 취급
• 함수를 변수에 할당, 다른 함수의 매개변수로 전달, 함수에서 반환을 의미
• 함수는 데이터처럼 다룰 수 있다.

 

익명 함수(Anonymous Function)

 

• 자바스크립트에서는 익명 함수를 정의 가능
• 익명 함수는 이름이 없는 함수로, 주로 즉시 실행 함수(IIFE)로
  사용하거나 다른 함수의 인수로 전달될 때 사용

 

클로저(Closure)

 

• 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합
• 클로저는 외부 함수의 변수에 접근 가능하고, 이를 이용해서 데이터를 보존하거나 private한 변수를 구현

 

매개변수와 인수

 

• 함수를 호출할 때 인수(arguments)를 전달하고, 함수 내부에서는 매개변수(parameters)로 인수를 받는다.
• 매개변수는 함수 내부에서 사용되는 변수로, 함수가 호출될 때마다 인수의 값이 할당

 

콜백 함수(Callback Function)

 

• 자바스크립트에서는 함수를 다른 함수의 인수로 전달하여 비동기 작업이나 이벤트 처리 등에 활용

 

재귀 함수(Recursive Function)

 

• 자바스크립트에서는 함수가 자기 자신을 호출할 수 있는 재귀 함수를 작성 가능
• 이를 통해 반복적인 작업이나 복잡한 알고리즘을 구현

 

함수 스코프(Function Scope)

 

• 자바스크립트에서는 함수 내부에서 선언된 변수는 해당 함수 내부에서만 접근 할 수 있는 스코프를 가짐
• 이를 이용하여 변수의 유효 범위를 제한하고 충돌을 방지

 

---

 

함수의 종류

 

일반 함수(Regular Functions)

 

• 일반 함수는 가장 기본적인 형태의 함수
• function 키워드를 사용하여 정의
• 일반적으로 코드를 모듈화하고 재사용하기 위해 사용
• 예시

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

const result = add(3, 4);
console.log(result); // 7

 

 

익명 함수(Anonymous Functions)

 

• 익명 함수는 이름이 없는 함수
• 주로 즉시 실행 함수(IIFE)로 사용되거나 다른 함수의 인수로 전달될 때 사용
• 익명 함수는 변수에 할당되거나 콜백 함수로 사용 가능
• 예시

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

const result = multiply(2, 5);
console.log(result); // 10

 

 

화살표 함수(Arrow Functions)

 

• 화살표 함수는 ES6에서 도입된 함수의 축약 표현
• => 기호를 사용하여 함수를 정의하며, 간결한 문법과 자신의 this 값을 가지는 특징
• 예시

const divide = (a, b) => a / b;

const result = divide(10, 2);
console.log(result); // 5

 

 

생성자 함수(Constructor Functions)

 

• 생성자 함수는 객체를 생성하기  위해 사용되는 함수
• new 키워드와 함께 호출되며, 객체의 초기화를 위해 this를 사용하여 속성과 메서드를 정의
• 예시

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person = new Person('John', 25);
person.sayHello(); // Hello, my name is John

 

 

메서드(Methods)

 

• 메서드는 객체에 속함 함수로, 해당 객체의 속성이나 동작을 나타냄
• 메서드는 객체 내부에 정의되며, 객체의 프로퍼티로 접근 가능
• 예시

const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

const sum = calculator.add(3, 4);
console.log(sum); // 7

const difference = calculator.subtract(7, 2);
console.log(difference); // 5

 

 

콜백 함수(Callback Functions)

 

• 콜백 함수는 다른 함수의 인수로 전달되는 함수로, 주로 비동기적인 작업이나 이벤트 처리에 사용
• 주로 비동기적인 동작이 완료되었을 때 호출되어 결과를 처리하는 용도로 사용
• 예시

function fetchData(callback) {
  setTimeout(function() {
    const data = 'Data from API';
    callback(data);
  }, 2000);
}

function processData(data) {
  console.log(`Processed data: ${data}`);
}

fetchData(processData); // Processed data: Data from API

 

 

재귀 함수(Recursive Functions)

 

• 재귀 함수는 자기 자신을 호출하는 함수로, 반복적인 작업이나 복잡한 알고리즘을 구현하는데 사용
• 재귀 함수는 종료 조건을 설정하여 반복을 멈추도록 구현해야 함
• 예시

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

const result = factorial(5);
console.log(result); // 120

 

 

제너레이터 함수(Generator Functions)

 

• 제너레이터 함수는 함수의 실행을 일시 중지하고, 나중에 다시 시작할 수 있는 특별한 종류의 함수
• function* 키워드를 사용하여 정의되며, yield 키워드를 사용하여 값을 반환하고 함수의 실행을 일시 중지 가능
• 예시

function* generator() {
  yield 'Hello';
  yield 'World';
}

const gen = generator();
console.log(gen.next().value); // Hello
console.log(gen.next().value); // World

 

---