1. 함수

• 함수란 주어진 입력(파라미터)에 근거하여 특정 처리를 진행한 뒤 결과를 돌려주는 구조를 말한다.
• 사용자 정의 함수를 정의하는 방법은 크게 네 가지가 있다.
  • function 명령으로 정의하기
  • Function 생성자 경유로 정의하기
  • 함수 리터럴 표현으로 정의하기
  • 애로우 함수로 정의하기

1.1 function 명령

• 함수를 정의할 때 가장 기본적인 접근 방법이다.

function 함수명(인수, ...) {
  ...함수 안에서 실행되는 처리...
  return 반환값;
}

• 함수명은 앞서 언급한 이름 선두를 소문자, 단어의 구분을 대문자로 나타내는 camelCase 형식을 기본적으로 사용한다.

1.2 Function 생성자

• Javascript에서는 내장형 객체로서 Function 객체의 생성자를 사용하여 정의할 수 있다.

var 변수명 = new Function(인수,... , 함수의 본체);

var getTriangle = new Function('base', 'height', return base * height / 2;');
console.log('삼각형의 면적:' + getTriangle(5, 2)); // 👉 결과: 삼각형의 면적:5

• String, Number, Boolean 등의 객체와 동일하기 new 연산자를 생략하여 글로벌 함수인 것처럼 정의할 수 있다.
• 또한, 아래와 같이 가인수 부분을 한 개의 인수로 정의할 수 있다.

var getTriangle = new Function('base, height', return base * height / 2;');

1.3 함수 리터럴 표현

• 함수 리터럴은 변수에 대입한다든지, 어떤 함수의 인수로 건네준다거나, 반환값으로서 함수를 전달하는 것이 가능하다.

var getTriangle = function(base, height) {
  return base * height / 2;
};

console.log('삼각형의 면적:' + getTriangle(5 ,2)); // 👉 결과: 삼각형의 면적:5

• 이와같이 함수 리터럴은 선언한 시점에서는 정확한 이름을 가지지 않기 때문에 익명 함수 또는 무명 함수라고 불린다.

1.4 애로우 함수

• ES2015에서 새롭게 추가된 방법으로, 애로우 함수(Arrow Function)를 사용함으로써 함수 리터럴을 보다 간단하게 정의할 수 있다.

(인수, ...) => { ... 함수의 본체 ... }

let getTriangle = (base, height) => {
  return base * height / 2;
};

console.log('삼각형의 면적:' + getTriangle(5 ,2)); // 👉 결과: 삼각형의 면적:5

• 애로우 함수에서는 function 키워드를 사용하지 않고 유래인 => (화살표) 로 인수와 함수 본체를 연결한다.
• 또한, 문장의 반환값이 그대로 반환값으로 간주될 때는 아래와 같이 return 명령도 생략이 가능하다.

let getTriangle = (base, height) => base * height / 2;

1.5 ES2015 인수 표기법

• ES2015에서는 새로운 구문에 의해 arguments 객체가 거의 불필요하다.

1.5.1 인수의 디폴트값

• ES2015에서 인수의 디폴트값을 선언하려면, '가인수 = 디폴트값'의 형식으로 가인수를 선언할 수 있다.

function getTriangle(base = 1, height = 1) {
  return base * height / 2;
}

console.log(getTriangle(10, 5)); // 👉 결과: 25

• 하지만, 다른 인수를 디폴트값으로 할 경우 참조할 수 있는 것은 자기 자신보다 앞에서 정의된 것뿐이다.

function getTriangle(base = height, height = 1) {
  return base * height / 2;
}

console.log(getTriangle()); // 👉 결과: ReferenceError: height is not defined

1.5.2 가변길이 인수의 함수 정의

• ES2015에서는 가인수의 앞에 ...(점 3개)를 사용하면 가변길이 인수가 된다.
  즉, 전달된 임의의 개수의 인수를 배열로 모으는 기능

function sum(...nums) {
  let result = 0;
  for (let num of nums) {
    if (typeof num !== 'number') {
      throw new Error('숫자가 아닙니다:' + num);
    }
    result += num;
  }
  return result;
}

try {
  console.log(sum(1, 3, 5, 7, 9));
} catch(e) {
  window.alert(e.message);
}

1.5.3 '...' 연산자

• '...'연산자는 실인수를 이용하여 배열을 각각의 값으로 전개할 수 있지만, 배열을 건네면 오류가 발생한다.

console.log(Math.max(15, -3, 78, 1)); // 👉 결과: 78
console.log(Math.max([15, -3, 78, 1])); // 👉 결과: NaN

• 위의 경우 ES2015 이전에는 apply 메소드를 이용할 수 있지만, ... 연산자를 이용하여 해결할 수 있다.

console.log(Math.max(...[15, -3, 78, 1)); // 👉 결과: 78

end