JS/Javascript

[Javascript] 함수의 종류

ui-o 2023. 1. 7. 17:06
반응형

일반함수 (선언적 함수)

  • :이름이 있는 함수
  • 재귀호출 시에도 사용 
  • 이름이 있는 함수의 경우에는 변수 선언 전이어도 호출이 가능

 * 기본 문법

function 함수() {}

let 함수 = function(){} // 위와 동일한 기능
function 함수() {
	console.log('함수');
}

console.log(typeof 함수); // function

• Sources

  * 숫자 계산 기본 문법

function 함수(매개변수) {
	let output = 초깃값;
	처리
	return ouput
}
//  = a부터 b까지의 합 
function sumAll(a, b) {
  let output = 0;
  for (let i = a; i <= b; i++) {
    output += i;
  }
  return output;
}

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

//  = a부터 b까지의 곱 
function mul(a, b) {
  let output = 1;
  for (let i = a; i <= b; i++) {
    output *= i;
  }
  return output;
}
console.log(mul(1, 3));

// 최소값 구하기
function min(array) {
  let output = array[0];
  for (const i of array) {
    if (output > i) {
      output = item;
    }
  }
  return output;
}

newArr = [1, 2, 3, 4, 5];
console.log(min(newArr)); // 1

 

익명함수 (임의 함수)

  • 이름이 없는 함수 
  • 익명함수 사용을 위해서는 변수에 담아 호출이 필요함
  • 함수 자체가 식(Expression)이기 떄뮨에 함수를 변수에 할당 하거나 다른 함수의 매개변수로 사용 가능
  • 익명함수는 반드시 선언 이후에 실행이 되어야 호출이 가능 (호이스팅 불가)

  * 기본 문법

function (){}
// 변수에 함수를 할당
const print = function(){ 
    console.log('print');
};
print(); // print
const printAgain = print;
printAgain(); // print

 

일반함수와 익명함수의 차이

  • 일반함수의 경우 함수 자체를 출력 시에 콘솔에 함수의 이름이 붙어있음

 

  즉시실행함수

  • 함수 선언과 동시에 호출 
  • 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있음.

  * 기본 문법

// + type01
(function(){

}());

// + type02
(function(){

})();
let result = (function (a, b) {
  return a + b;
})(10, 20); // 전달인자를 넣어 즉시 실행

console.log(result); // 30

 

전개 연산자

  • 배열을 전개해서 함수의 매개변수로 전달 
  • 배열 앞에 마침표 3개를 붙여 표혐

  * 기본 문법

함수명(...배열)
function callA(...items) {
	console.log(items);
}

const array = [1,2,3,4];
// 전개 연산자를 사용하지 않은 경우
callA(array) // [ [ 1, 2, 3, 4 ] ] - 배열 형태로 들어옴
// 전개 연산자를 사용한 경우
callA(...array) // [ 1, 2, 3, 4 ] - 숫자가 하나하나 들어옴

함수에서의 arguments 활용

  • 함수에서 arguments를 활용하여 각 인덱스에 어떤 값을 가지고 이쓴지 파악이 가능
  • 파라미터의 개수를 정확히 알지 못한 경우 스프레드 연산자에서 arguments 활용 가능
const arr = function (x, y, z) {
  console.log(arguments); // [Arguments] { '0': 2, '1': 3, '2': 4 }
  return x * y * z;
};

arr(2, 3, 4);

// Spread 연산자의 arguments 활용
const arr2 = function (...arguments) {
  return Object.values(arguments).reduce((prev, cur) => prev + cur);
};
console.log(arr2(2, 3)); // ⇒ 5

 

반응형