필요없는 목록/JAVASCRIPT

함수의 종류(선언적 함수, 익명 함수, 매개변수 함수, 리턴값 함수, 화살표 함수)에 대해 알아보자.

비밀안 2023. 2. 27. 18:19
클릭

버튼을 클릭하면 명언이 나와요

-

이름이 나와요

1.함수 사용 방법

function 함수명() { 

  코드

}

  • 함수 선언시에 function이라는 예약어를 사용합니다.
  • 함수 이름을 적습니다.
  • 중괄호 안에 실행할 여러개의 명령어를 묶습니다.

 

함수를 사용하는 이유 

  • 자바스크립트 프로그램은 단순히 하나의 동작만 하는게 아니라 여러가지 동작이 연결되어 실행이 됩니다.
  • 동작해야 할 목적대로 여러개의 명령을 묶는 것을 "함수"라고 합니다.
  • 소스를 함수로 분리 넣으면 필요할 때마다 원하는 기능만 따로 실행할 수도 있고. 
  • 같은 기능이 필요한 다른 곳에서 다시 사용할 수도 있습니다.

2.선언적 함수

선언적 함수(declarative function)는 함수를 선언할 때

함수 이름과 함께 function 키워드를사용하여 함수를 선언하는 방법입니다.

예를 들어, 다음은 add라는 함수를 선언하는 선언적 함수의 예입니다.

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

 

  • 선언적 함수는 코드 내 어디에서든 사용할 수 있으며,
  • 호이스팅(hoisting)에 의해 함수 정의가 코드의 상단으로 올라가므로 함수를 먼저 선언하지 않고 호출할 수 있습니다.
  • 선언적 함수는 간단하고 직관적이며 코드 가독성을 높일 수 있습니다.
  • 하지만 함수 표현식과는 달리 함수 이름을 바꿀 수 없으며,
  • 익명 함수(anonymous function)를 선언할 수 없습니다.

 

3.익명 함수

익명 함수(anonymous function)는 이름이 없는 함수를 말합니다.

함수를 변수에 할당하거나 다른 함수에 인수로 전달할 때 사용됩니다.

예를 들어, 다음은 익명 함수를 사용하여 add 함수를 정의하는 방법입니다.

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

익명 함수는 함수 표현식(function expression)으로도 알려져 있습니다.

익명 함수를 사용하면 함수 이름을 명시적으로 정의하지 않아도 되기 때문에 코드를 간결하게 유지할 수 있습니다.

또한, 콜백 함수(callback function)나 클로저(closure)와 같은 고급 기능을 구현할 때 유용하게 사용됩니다.

하지만, 익명 함수는 디버깅이 어렵고, 코드 가독성을 떨어뜨리는 단점이 있습니다.

따라서 가능하면 함수 이름을 명시적으로 정의하여 선언적 함수를 사용하는 것이 좋습니다

4.매개 변수 함수

매개변수 함수(parameter function)는 다른 함수의 인수로 전달되는 함수를 말합니다.

즉, 함수를 변수에 할당하거나 익명 함수를 사용하는 것과 달리,

매개변수 함수는 다른 함수 내에서 정의되어 사용됩니다.

매개변수 함수는 콜백 함수(callback function)나 고차 함수(higher-order function)를 구현할 때 자주 사용됩니다.

콜백 함수는 다른 함수에서 호출되는 함수를 의미하며,

고차 함수는 다른 함수를 반환하거나 다른 함수에 인수로 전달하는 함수를 말합니다.

예를 들어, 다음은 map 함수에 매개변수 함수로 전달된 익명 함수를 사용하여 배열의 모든 요소를 제곱하는 예입니다.

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(function(number) {
  return number ** 2;
});

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

위 예제에서, map 함수는 배열의 모든 요소에 대해 매개변수 함수로 전달된 익명 함수를 호출하여 반환된 결과를 새로운 배열에 저장합니다. 이를 통해 배열의 모든 요소를 제곱할 수 있습니다.

 

5.화살표 함수

화살표 함수(arrow function)는 함수를 정의하는 새로운 문법입니다.

ES6에서 도입되었으며, 함수를 간단하게 표현할 수 있어서 코드를 간결하고 가독성 있게 작성할 수 있습니다.

화살표 함수는 function 키워드 대신 => 연산자를 사용하여 함수를 정의합니다. 예를 들어, 다음은 화살표 함수를 사용하여 add 함수를 정의하는 방법입니다.

const add = (a, b) => {
  return a + b;
};

위 예제에서, 화살표 함수는 (a, b)라는 매개변수를 받아서 a와 b를 더한 값을 반환합니다.

중괄호({})를 사용하여 함수의 본문을 감싸고 있으며, return 키워드를 사용하여 값을 반환하고 있습니다.

화살표 함수는 함수 표현식(function expression)으로도 사용될 수 있습니다. 예를 들어,

다음은 map 함수에 화살표 함수를 사용하여 배열의 모든 요소를 제곱하는 예입니다.

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(number => number ** 2);

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

위 예제에서, 화살표 함수는 map 함수의 인수로 전달되며, numbers 배열의 모든 요소에 대해 각 요소를 제곱하여 새로운 배열을 반환합니다.

함수의 본문이 단일 표현식(single expression)이기 때문에 중괄호와 return 키워드를 생략할 수 있습니다.