[JavaScript] 함수

1. 함수의 의미와 사용방법

자바스크립트애서 함수는 반복작업을 줄이기 위해 사용합니다.

사용방법은 아래와 같습니다.

function 함수명(인자1, 인자2,...){
	return 반환값; // 반환값이 없으면 생략 가능
}

 

아래 예제는 함수를 사용하지 않고 연산을 하는 방법입니다.

let a =3;
let b = 4;

let c = (a +b)*(b+a)*a*b;
console.log(c); //588

let d = 5;
let e = 6;
let f = (d+e)*(e+d)*d*e;
console.log(f); //3630

 

함수를 사용하지 않고 연산을 한다면 이렇게 매번 복잡한 연산을 해야합니다.

 

이번에는 함수를 사용하여 동일한 연산을 해보겠습니다.

function cal(a,b){

	return (a+b)*(b+a)*a*b;
}


let a = 3;
let b = 4;

let c = cal(a,b);
console.log(c); //588

let d = 5;
let e = 6;

let f = cal(d,e);
console.log(f); //3630

 

처음 함수를 선언할때만 연산식을 입력해놓으면 이후로 연산을 할때는 매개변수만 바꿔넣으면 동일한 결과를 출력하는 것을 확인할 수 있습니다.

 

위의 기본적인 함수선언방법 외에도 함수를 변수에 담거나, 화살표 함수등이 있습니다.

// 함수를 변수에 담는 방법
const aa = function (x, y){
	return x-y;
}

console.log(aa(4,5)); // -1


//기존의 함수를 재정의
function add(x,y){
	return x+y;
}

console.log(add(2,3)); //5

add = function(x,y){
	console.log("함수를 재정의합니다.");
    return x*2+y*2;
}

console.log(add(2,3)); 
//출력:
//함수를 재정의합니다.
//10


//화살표 함수
const bb = (x,y) => x*y;

console.log(bb(5,4)) //20

//여러 실행문을 사용할 경우 실행블록을 사용
const mul = (x, y) => {
  console.log(`${x}와 ${y}를 곱합니다.`);
  console.log(`결과는 ${x * y}입니다.`);
  return x * y;
};

console.log(mul(5, 6));
//출력:
//5와 6를 곱합니다.
//결과는 30입니다.
//30


//매개변수가 하나일때는 괄호가 없이도 가능
const pow = x => x ** 2;
console.log(pow(3)); //9

 

일반적으로 자바스크립트가 로딩될때는 함수를 먼저 불러오기 때문에 함수 코드의 위치는 실행코드보다 아래 있어도 상관이 없습니다.

 

그러나 위처럼 변수에 넣거나 화살표 함수를 사용하면 무조건 함수 코드가 실행코드보다 위에 있어야 합니다.

 

예를 들어 확인해보겠습니다.

console.log(add1(1,2)); //3

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

console.log(add2(1,2)); //에러 발생

const add2 = function(x,y){
	return x+y;
}

console.log(add3(1,2)); //에러 발생

const add3 = (x,y) => x+y;

 

이러한 상황이 발생하는 이유는 함수를 변수에 넣음으로써 변수화했기 때문입니다.

 

따라서 변수가 선언되기 전에는 출력이 불가능하므로 위와 같은 방식으로 함수를 정의하게 된다면 함수를 정의하는 코드가 윗줄에 있어야 합니다.

2. 매개변수

1) 자바스크립트의 매개변수

자바스크립트는 다른 언어와 다르게 함수에서 정해놓은 매개변수의 개수를 넘어가도 오류가 발생하지 않습니다.

다만 정해놓은 매개변수를 초과하는 매개변수는 무시됩니다.

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

console.log(
  add(1, 3), //4
  add(1, 3, 5), //4 -> 5무시
  add(1, 3, 5, 7) //4 ->5,7 무시
);

 

또한 자바스크립트에서는 매개변수의 기본값을 정해놓을 수 있습니다. 기본값을 지정해놓고 매개변수가 있다면 매개변수가 대체되며 매개변수가 없다면 기본값으로 사용하는 것입니다,

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

console.log(
  add(), //6 -> 2+4
  add(1), //5 ->1+4
  add(1, 3) //4->1+3
);

2) arguments

자바스크립트에서는 arguments라는 객체가 있습니다. 이 객체는 함수를 호출할때 전달받은 모든 매개변수를 배열형태로 저장하는 역할을 합니다. 

function add(a, b) {
  
  return arguments[0] + arguments[1] + arguments[2] + arguments[3];
}

console.log(
  add(1, 3, 5, 7) //16 -> 1+3+5+7
);

이 arguments는 iterable하기 때문에 반복문으로도 사용가능합니다.

function add() {
  let sum = 0;
  for (const arg of arguments) {
    sum += arg;
  }
  return sum;
}

console.log(
  add(1, 3, 5, 7, 9) // 25 -> 1+3+5+7+9
);


function getAverage() { // 매개변수 중 number타입만 골라서 평균을 내는 함수
  let result = 0, count = 0;
  for (const num of arguments) {
    if (typeof num !== 'number') continue;
    result += num;
    count++;
  }
  return result / count;
}

console.log(
  getAverage(2, '가', 8, true, 5) //5
);

3) 나머지 변수

자바스크립트에서 나머지 변수란 정해진 매개변수의 개수를 초과했을 때 그 변수를 배열로 묶어주는 변수를 의미합니다.

이 나머지 변수는 마지막 인자로만 사용가능하며 ...변수명으로 선언합니다.

console.log(
  classIntro(1, '김선생', '영희', '철수')
);

function classIntro (classNo, teacher, ...children) {
  
  let childrenStr = '';
  for (const child of children) {
    if (childrenStr) childrenStr += ', ';
    childrenStr += child;
  }
  return `${classNo}반의 선생님은 ${teacher}, `
    + `학생들은 ${childrenStr}입니다.`
}
//출력: 1반의 선생님은 김선생, 학생들은 영희, 철수입니다

 여기서 children은 나머지 변수입니다. 따라서 영희와 철수가 나머지 변수에 배열로 들어갔으며 반복문을 통해 문자열로 이어진 것입니다. 또한 타입이 지정된 컴파일 언어와는 다르게 자바스크립트는 나머지 변수로 함수를 넣는 것도 가능합니다.

const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;

function doMultiArms (x, y, ...arms) {
  let result = x;
  for (const arm of arms) {
    if (typeof arm !== 'function') continue;
    result = arm(result, y); //매개변수가 함수라면 result값과 y값을 넣어서 함수 실행값을 result에 다시 담는다
  }
  return result;
}

console.log(
  doMultiArms(8, 3, add, mul, 1, true), //33 
  doMultiArms(8, 3, add, mul, sub), //30
  doMultiArms(8, 3, add, mul, sub, div), //10
  doMultiArms(8, 3, add, mul, sub, div, (x, y) => x ** y) //1000
);