함수

함수란 특정 작업을 수행하기 위해 필요한 문들을 모아놓은 코드 블록을 의미한다.

// multiply 함수의 정의(함수 선언문)
function multiply(num1, num2) {
  return num1 * num2;
}

// multiply 함수의 호출
multiply(2, 4); // 8

1. 함수 정의

함수를 정의하는 방식은 3가지가 있다.

함수 선언문
함수 표현식
Function 생성자 함수

1.1 함수 선언문

함수 선언문(Function declaration) 방식

// multiply 함수 선언문
function multiply(num1, num2) {
  return num1 * num2;
}

함수명 함수 선언문의 경우, 함수명은 생략할 수 없다.
매개변수 목록 0개 이상의 목록으로 괄호로 감싸고 콤마로 분리한다. (num1, num2)
return 문으로 결과값을 반환할 수 있다. 이를 반환값(return value)라 한다.

1.2 함수 표현식

함수 선언문으로 정의한 함수 multiply를 함수 표현식으로 정의하면 아래와 같다.

// 함수 표현식
var multiply = function(num1, num2) {
  return num1 * num2;
};.

multiply라는 변수에 function의 선언문을 할당하였다.

1.3 기명 함수 표현식

// 기명 함수 표현식(named function expression)
var foo = function multiply(num1, num2) {
  return num1 * num2;
};
console.log(foo(10, 5)); // 50
console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

multiply 명으로 함수를 호출 할 시 오류가 난다. 사용에 유의하자.

기명 자체가 의미가 없으므로 주로 아래와 같이 익명함수 표현식을 사용한다.

1.4 익명함수 표현식

// 익명 함수 표현식(anonymous function expression)
var bar = function(num1, num2) {
  return num1 * num2;
};

function에 특별한 이름 없이 bar변수에 할당하였다.

1.5 함수선언문은 내부적으로 함수 표현식으로 형태가 변경됨

함수 선언문으로 정의한 함수 multiply의 경우, 함수명으로 호출할 수 있었는데 이는 자바스크립트 엔진에 의해 아래와 같은 함수 표현식으로 형태가 변경되었기 때문이다.

var multiply = function multiply(num1, num2) {
  return num1 * num2;
};

함수명과 함수 참조값을 가진 변수명이 일치하므로 함수명으로 호출되는 듯 보이지만 사실은 변수명으로 호출된 것이다.

결국 함수 선언문도 함수 표현식과 동일하게 함수 리터럴 방식으로 정의되는 것이다.

2. 함수 호이스팅

함수선언식과 함수표현식은 함수 호이스팅이라는 관점에서 차이가 있다.

함수선언식의 경우에만 함수호이스팅이 된다. (함수 호이스팅 포스트 참조)

아래의 코드를 살펴보자.

var res = multiply(5, 6);

function multiply(num1, num2) {
  return num1 * num2;
}

multiply함수가 선언되기전에 호출하였는데 오류가 없이 사용 가능하다.

이유는 함수선언문의 함수인 경우 자바스크립트가 로딩되는 시점에 초기화하고 VO에 저장되기 때문이다.

다음은 함수 표현식으로 함수를 정의한 경우에는 함수 호이스팅이 되지 않는다.

var res = fun(5); // TypeError: square is not a function

var fun = function multiply(num1, num2) {
  return num1 * num2;
};

함수 선언문의 경우와는 달리 TypeError가 발생하였다.

함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생하기 때문이다.

이와 같은 특성으로 더글러스 크락포드(Douglas Crockford)이라는 분은 함수 선언식 보다는 함수 표현식을 사용할 것을 권고하고 있다. 이유는 두가지 이다.

함수 선언식의 경우 함수 호이스팅이 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수 있다.
함수 선언식의 경우 모든 함수 선언식이 로딩되는 시점에 모두 초기화 되므로 메모리를 낭비할 수 있다.

3. First-class object (일급 객체)

일급 객체(first-class object)란 생성, 대입, 연산, 인자 또는 반환값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상을 의미한다.

다음 조건을 만족하면 일급 객체로 간주한다.

무명의 리터럴로 표현이 가능하다.
변수나 자료 구조(객체, 배열 등)에 저장할 수 있다.
함수의 매개변수에 전달할 수 있다.
return 값으로 사용할 수 있다.

// 1. 무명의 리터럴로 표현이 가능하다.
// 2. 변수나 자료 구조에 저장할 수 있다.
var increase = function(num) {
  return ++num;
};

var decrease = function(num) {
  return --num;
};

var predicates = { increase, decrease };

// 3. 함수의 매개변수에 전달할 수 있다.
// 4. 반환값으로 사용할 수 있다.
function makeCounter(predicate) {
  var num = 0;

  return function() {
    num = predicate(num);
    return num;
  };
}

var increaser = makeCounter(predicates.increase);
console.log(increaser()); // 1

var decreaser = makeCounter(predicates.decrease);
console.log(decreaser()); // -1

Javascript의 함수는 위의 조건을 모두 만족하므로 Javascript의 함수는 일급객체이다.

4. 매개변수(Parameter, 인자)

함수의 작업 실행을 위해 추가적인 정보가 필요할 경우, 매개변수를 지정한다.

매개변수는 함수 내에서 변수와 동일하게 동작한다.

4.1 매개변수(parameter, 인자) vs 인수(argument)

매개변수는 함수 내에서 변수와 동일하게 메모리 공간을 확보하며 함수에 전달한 인수는 매개변수에 할당된다.

만약 인수를 전달하지 않으면 매개변수는 undefined로 초기화된다.

var foo = function(p1, p2) {
  console.log(p1, p2);
};

foo(1); // 1 undefined

여기서 p1과 p2 는 매개변수
foo(1)에서 1 이 인수에 해당한다.

4.2 Call-by-value

원시 타입 인수는 Call-by-value(값에 의한 호출)로 동작한다.
이는 함수 호출 시 원시 타입 인수를 함수에 매개변수로 전달할 때 매개변수에 값을 복사하여 함수로 전달하는 방식이다.
이때 함수 내에서 매개변수를 통해 값이 변경되어도 전달이 완료된 원시 타입 값은 변경되지 않는다.

function foo(primitive) {
  primitive += 1;
  return primitive;
}

var x = 0;

console.log(foo(x)); // 1
console.log(x); // 0

4.3 Call-by-reference

객체형(참조형) 인수는 Call-by-reference(참조에 의한 호출)로 동작한다.
이는 함수 호출 시 참조 타입 인수를 함수에 매개변수로 전달할 때 매개변수에 값이 복사되지 않고 객체의 참조값이 매개변수에 저장되어 함수로 전달되는 방식이다.

function changeVal(obj) {
  obj.name = "Kim";
}

var obj = {
  name: "Lee",
};

console.log(obj); // Object {name: 'Lee'}
changeVal(obj);
console.log(obj); // Object {name: 'Kim'}

changeVal 함수를 호출할 때 obj객체를 매개변수로 넣고 obj 객체를 변화시켜 보았다.

결과는 변한다.

여기서 잠깐!

이 변한다는 것은 프로그래밍을 할 때 정말 중요하다. 왜냐하면 프로그램의 복잡성이 증가할 수록 한 객체가 어디 부분에서 변하는지 파악하기 힘들어지기 때문이다. 이와 같이 함수 몸체에서 어떤 원본 객체가 변경되는 효과를 부수효과라고 하고 이러한 함수를 비순수함수라고 부른다.

이러한 비순수함수는 프로그램의 복잡성을 증가시킴으로 우리는 이러한 비순수함수 사용을 최대한 줄어야 한다.

줄이는 방법으로 한 예로 Immutable.js 사용이 있다. (Immutable 포스트 참조)

5. 반환값

함수는 자신을 호출한 코드에게 수행한 결과를 반환(return)할 수 있다. 이때 반환된 값을 반환값(return value)이라 한다.

return 키워드는 함수를 호출한 코드(caller)에게 값을 반환할 때 사용한다.
함수는 배열 등을 이용하여 한 번에 여러 개의 값을 리턴할 수 있다.
함수는 반환을 생략할 수 있다. 이때 함수는 암묵적으로 undefined를 반환한다.
자바스크립트 해석기는 return 키워드를 만나면 함수의 실행을 중단한 후, 함수를 호출한 코드로 되돌아간다.

만일 return 키워드 이후에 다른 구문이 존재하면 그 구문은 실행되지 않는다.

function calculateArea(width, height) {
  var area = width * height;
  return area; // 단일 값의 반환
}
console.log(calculateArea(3, 5)); // 15
console.log(calculateArea(8, 5)); // 40

function getSize(width, height, depth) {
  var area = width * height;
  var volume = width * height * depth;
  return [area, volume]; // 복수 값의 반환
}

console.log("area is " + getSize(3, 2, 3)[0]); // area is 6
console.log("volume is " + getSize(3, 2, 3)[1]); // volume is 18

6. 함수 객체의 프로퍼티

함수는 객체이다. 따라서 함수도 프로퍼티를 가질 수 있다.

function multiply(num1, num2) {
  return num1 * num2;
}

multiply.x = 10;
multiply.y = 20;

console.log(multiply.x, multiply.y);

함수는 일반 객체와는 다른 함수만의 프로퍼티를 갖는다.

function multiply(num1, num2) {
  return num1 * num2;
}
console.dir(multiply);

6.1 arguments 프로퍼티

arguments 객체는 함수 호출 시 전달된 인수(argument)들의 정보를 담고 있는 순회가능한(iterable) 유사 배열 객체(array-like object)이며 함수 내부에서 지역변수처럼 사용된다.

function multiply(num1, num2) {
  console.log(arguments);
  return num1 * num2;
}

multiply(); // {}
multiply(1); // { '0': 1 }
multiply(1, 2); // { '0': 1, '1': 2 }
multiply(1, 2, 3); // { '0': 1, '1': 2, '2': 3 }

매개변수(parameter)는 인수(argument)로 초기화된다.
함수 정의에 따라 인수를 전달하지 않아도 에러가 발생하지 않는다.
매개변수의 갯수보다 인수를 적게 전달했을 때(multiply(), multiply(1)) 인수가 전달되지 않은 매개변수는 undefined으로 초기화된다.
매개변수의 갯수보다 인수를 더 많이 전달한 경우, 초과된 인수는 무시된다.

이러한 자바스크립트의 특성때문에 런타임 시에 호출된 함수의 인자 갯수를 확인하고 이에 따라 동작을 달리 정의할 필요가 있을 수 있다. 이때 유용하게 사용되는 것이 arguments 객체이다.

arguments 객체는 매개변수 갯수가 확정되지 않은 가변 인자 함수를 구현할 때 유용하게 사용된다.

function sum() {
  var res = 0;

  for (var i = 0; i < arguments.length; i++) {
    res += arguments[i];
  }

  return res;
}

console.log(sum()); // 0
console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6

자바스크립트는 함수를 호출할 때 인수들과 함께 암묵적으로 arguments 객체가 함수 내부로 전달된다.
arguments 객체는 배열의 형태로 인자값 정보를 담고 있지만 실제 배열이 아닌 유사배열객체(array-like object)이다.

유사배열객체란 length 프로퍼티를 가진 객체를 말한다.

유사배열객체는 배열이 아니므로 배열 메소드를 사용하는 경우 에러가 발생하게 된다.

따라서 배열 메소드를 사용하려면 Function.prototype.call, Function.prototype.apply를 사용하여야 하는 번거로움이 있다.

function sum() {
  if (!arguments.length) return 0;

  // arguments 객체를 배열로 변환
  var array = Array.prototype.slice.call(arguments);
  return array.reduce(function(pre, cur) {
    return pre + cur;
  });
}

// ES6
// function sum(...args) {
//   if (!args.length) return 0;
//   return args.reduce((pre, cur) => pre + cur);
// }

console.log(sum(1, 2, 3, 4, 5)); // 15

6.2 caller 프로퍼티

caller 프로퍼티는 자신을 호출한 함수를 의미한다.

function foo(func) {
  var res = func();
  return res;
}

function bar() {
  return "caller : " + bar.caller;
}

console.log(foo(bar)); // function foo(func) {...}
console.log(bar()); // null (browser에서의 실행 결과)

browser에서 bar호출 시에는 caller가 null이 나온다.
node에서 실행했을 때는 해당문을 실행한 js파일 전체가 출력된다.

6.3 length 프로퍼티

length 프로퍼티는 함수 정의 시 작성된 매개변수 갯수를 의미한다.

function foo() {}
console.log(foo.length); // 0

function bar(x) {
  return x;
}
console.log(bar.length); // 1

function baz(x, y) {
  return x * y;
}
console.log(baz.length); // 2

arguments.length의 값과는 다를 수 있으므로 주의하여야 한다. arguments.length는 함수 호출시 인자의 갯수이다.

6.4 name 프로퍼티

함수명을 나타낸다. 기명함수의 경우 함수명을 값으로 갖고 익명함수의 경우 빈문자열을 값으로 갖는다.

// 기명 함수 표현식(named function expression)
var namedFunc = function multiply(a, b) {
  return a * b;
};
// 익명 함수 표현식(anonymous function expression)
var anonymousFunc = function(a, b) {
  return a * b;
};

console.log(namedFunc.name); // multiply
console.log(anonymousFunc.name); // anonymousFunc

6.5 proto 접근자 프로퍼티

모든 객체는 [[Prototype]]이라는 내부 슬롯이 있다. (Prototype포스트 참조)

[[Prototype]] 내부 슬롯은 프로토타입 객체를 가리킨다.
프로토타입 객체란 프로토타입 기반 객체 지향 프로그래밍의 근간을 이루는 객체로서 객체간의 상속(Inheritance)을 구현하기 위해 사용된다.

즉, 프로토타입 객체는 다른 객체에 공유 프로퍼티를 제공하는 객체를 말한다.

__proto__ 프로퍼티는 [[Prototype]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티이다.
내부 슬롯에는 직접 접근할 수 없고 간접적인 접근 방법을 제공하는 경우에 한하여 접근할 수 있다.
[[Prototype]] 내부 슬롯에도 직접 접근할 수 없으며 __proto__접근자 프로퍼티를 통해 간접적으로 프로토타입 객체에 접근할 수 있다.

// __proto__접근자 프로퍼티를 통해 자신의 프로토타입 객체에 접근할 수 있다.
// 객체 리터럴로 셍성한 객체의 프로토타입 객체는 Object.prototype이다.
console.log({}.__proto__ === Object.prototype); // true

__proto__프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니라 모든 객체의 프로토타입 객체인 Object.prototype 객체의 프로퍼티이다.

모든 객체는 상속을 통해 proto 접근자 프로퍼티는 사용할 수 있다.

// 객체는 __proto__ 프로퍼티를 소유하지 않는다.
console.log(Object.getOwnPropertyDescriptor({}, "__proto__"));
// undefined

// __proto__ 프로퍼티는 모든 객체의 프로토타입 객체인 Object.prototype의 접근자 프로퍼티이다.
console.log(Object.getOwnPropertyDescriptor(Object.prototype, "__proto__"));
// {get: ƒ, set: ƒ, enumerable: false, configurable: true}

// 모든 객체는 Object.prototype의 접근자 프로퍼티 __proto__를 상속받아 사용할 수 있다.
console.log({}.__proto__ === Object.prototype); // true

함수도 객체이므로 proto 접근자 프로퍼티를 통해 프로토타입 객체에 접근할 수 있다.

// 함수 객체의 프로토타입 객체는 Function.prototype이다.
console.log(function() {}.__proto__ === Function.prototype); // true

6.6 prototype 프로퍼티

prototype 프로퍼티는 함수 객체만이 소유하는 프로퍼티이다.

즉 일반 객체에는 prototype 프로퍼티가 없다.

// 함수 객체는 prototype 프로퍼티를 소유한다.
console.log(Object.getOwnPropertyDescriptor(function() {}, "prototype"));
// {value: {…}, writable: true, enumerable: false, configurable: false}

// 일반 객체는 prototype 프로퍼티를 소유하지 않는다.
console.log(Object.getOwnPropertyDescriptor({}, "prototype"));
// undefined

prototype 프로퍼티는 함수가 객체를 생성하는 생성자 함수로 사용될 때, 생성자 함수가 생성한 인스턴스의 프로토타입 객체를 가리킨다.

7. 함수의 다양한 형태

7.1. 즉시 실행 함수

함수의 정의와 동시에 실행되는 함수를 즉시 실행 함수(IIFE, Immediately Invoke Function Expression)라고 한다.
최초 한번만 호출되며 다시 호출할 수는 없다.

이러한 특징을 이용하여 최초 한번만 실행이 필요한 초기화 처리등에 사용할 수 있다.

(function() {
  var foo = 1;
  console.log(foo);
})();

var foo = 100;
console.log(foo);

7.2 내부 함수

함수 내부에 정의된 함수를 내부함수(Inner function)라 한다.

아래 예제의 내부함수 child는 자신을 포함하고 있는 부모함수 parent의 변수에 접근할 수 있다.

하지만 부모함수는 자식함수(내부함수)의 변수에 접근할 수 없다.

function parent(param) {
  var parentVar = param;
  function child() {
    var childVar = "lee";
    console.log(parentVar + " " + childVar); // Hello lee
  }
  child();
  console.log(parentVar + " " + childVar);
  // Uncaught ReferenceError: childVar is not defined
}
parent("Hello");

또한 내부함수는 부모함수의 외부에서 접근할 수 없다.

function sayHello(name) {
  var text = "Hello " + name;
  var logHello = function() {
    console.log(text);
  };
  logHello();
}

sayHello("lee"); // Hello lee
logHello("lee"); // logHello is not defined

7.3 재귀 함수

재귀 함수(Recusive function)는 자기 자신을 호출하는 함수를 말한다.

// 피보나치 수열
// 피보나치 수는 0과 1로 시작하며, 다음 피보나치 수는 바로 앞의 두 피보나치 수의 합이 된다.
// 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, ...
function fibonacci(n) {
  if (n < 2) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(0)); // 0
console.log(fibonacci(1)); // 1
console.log(fibonacci(2)); // 1
console.log(fibonacci(3)); // 2
console.log(fibonacci(4)); // 3
console.log(fibonacci(5)); // 5
console.log(fibonacci(6)); // 8

// 팩토리얼
// 팩토리얼(계승)은 1부터 자신까지의 모든 양의 정수의 곱이다.
// n! = 1 * 2 * ... * (n-1) * n
function factorial(n) {
  if (n < 2) return 1; //탈출 조건
  return factorial(n - 1) * n;
}

console.log(factorial(0)); // 1
console.log(factorial(1)); // 1
console.log(factorial(2)); // 2
console.log(factorial(3)); // 6
console.log(factorial(4)); // 24
console.log(factorial(5)); // 120
console.log(factorial(6)); // 720

재귀 함수는 자신을 무한히 연쇄 호출하므로 호출을 멈출 수 있는 탈출 조건을 반드시 만들어야 한다.
탈출 조건이 없는 경우, 함수가 무한 호출되어 stackoverflow 에러가 발생한다.
위의 두개의 예제 모두 조건식을 통해 재귀 호출을 중지하고 있다.

재귀 함수는 반복 연산을 간단히 구현할 수 있다는 장점이 있지만 무한 반복에 빠질 수 있고, stackoverflow 에러를 발생시킬 수 있으므로 주의하여야 한다.

반복문보다 재귀 함수를 통해 보다 직관적으로 이해하기 쉬운 구현이 가능한 경우에만 한정적으로 적용하는 것이 바람직하다.

7.4 콜백 함수

콜백 함수(Callback function)는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 말한다.

콜백 함수가 자주 사용되는 대표적인 예는 이벤트 핸들러 처리이다.

<!DOCTYPE html>
<html>
  <body>
    <button id="myButton">Click me</button>
    <script>
      var button = document.getElementById("myButton");
      button.addEventListener("click", function() {
        console.log("button clicked!");
      });
    </script>
  </body>
</html>

Javascript의 함수는 일급객체이다. 따라서 Javascript의 함수는 흡사 변수와 같이 사용될 수 있다.

콜백 함수는 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정시점에 실행된다.
setTimeout()의 콜백 함수를 살펴보자. 두번째 매개변수에 전달된 시간이 경과되면 첫번째 매개변수에 전달한 콜백 함수가 호출된다.

  console.log('1초 후 출력된다.');
}, 1000);

'하늘기술' 카테고리의 다른 글

[ES6] Rest파라미터와 Spread연산자 (2)	2020.03.27
[ES5] 실행컨텍스트 (1)	2020.03.27
[ES5] 클로저 (1)	2020.03.27
[ES6] 클래스 (0)	2020.03.27
[ES6] 화살표 함수 (0)	2020.03.27

함수

함수