자바스크립트 함수

함수 정의

함수는 function 이라는 키워드로 시작하는 표현식이다. 변수에 할당해서 사용할 수 있다.

const square = function(x) {
  return x * y;
}

return 값을 가질 수도 있고 가지지 않을 수도 있다.

함수의 범위

함수 이해의 핵심은 모든 블록은 새 범위(지역 범위)를 만든다는 것이다. 하지만 cosnt, let 이전의 var 로 선언된 바인딩은 다르게 동작한다. var 는 가까운 함수나 전역 범위에서 식별해서 사용된다.

화살표 함수

함수를 좀 더 편하게 선언하기 위한 문법이다. => 를 사용한다.

const power = (base, exponent) => {
  let result = 1;
  for (let count = 0; count < exponent; count++){
    result = *= base;
  }
  return result;
}

tip : 함수의 선언식과 표현식의 차이

정의된 키워드인 function 을 통해 선언하는 것을 선언식(Function Declarations)이라고 하며 정의한 function을 별도의 변수에 할당하는 것을 표현식(Function Expressions)이라고 한다. 함수 선언식은 호이스팅 되어 위치에 상관없이 사용할 수 있지만 표현식은 해당 코드줄에 로드될때만 실행되는 차이점이 있다.

클로저

함수는 일종의 값으로 취급할 수 있고 함수가 호출될 때마다 지역 바인딩이 다시 만들어 진다.

클로져 (closure) 는 닫는 것이라는 뜻인데 함수가 호출된 지역 바인딩을 참조하는 함수이다.

좀 더 쉽게 생각하면 함수 값은 함수 본문에 있는 코드와 생성된 환경 이 두 가지를 모두 포함하는 것으로 생각하면 된다. 클로저는 함수를 호출하면 호출된 시점의 환경이 아닌 생성된 시점의 환경을 참조하여 사용한다. 이는 함수를 보는 관점을 보다 창의적으로 생각할 수 있게 한다.

function multiplier(factor) {
  return number => number * factor;
}

let twice = multiplier(2);
console.log(twice(5));
// -> 10

위의 예시를 보면 함수가 호출된 시점이 아닌 생성된 시점의 return 된 환경을 기억했다가 참조하여 사용하는 것을 볼 수 있다.

재귀 함수

스택이 오버플로우가 날 정도로 사용하지 않는 다면 함수 자신을 호출하는 방식은 문제가 되지 않는다. 함수 자신을 호출하는 함수를 재귀적 (recursive) 라고 하며 재귀 (recursion) 함수라고 한다.

function power(base, exponent){
  if(exponent == 0){
    return 1;
  }else {
    return base * power(base, exponent - 1);
  }
}

console.log(power(2, 3));
// -> 8

재귀 함수는 반복문에 비해 3배 가량 느리다. 하지만 여러 개의 분기를 탐색 하거나 처리할 때 등 재귀 함수가 유리할 때가 있다.

함수와 부수 효과

함수는 크게 부수 효과(side effect, 부가적인 결과)가 있는 함수와 반환 값이 있는 함수로 나눌 수 있다. (부수 효과와 반환 값을 모두 갖는 것도 가능하다.)

예를 들어 콘솔(console.log)을 찍어 값을 출력하는 함수는 부수 효과를 얻기 위해 호출되는 함수이다. 반면 return 으로 반환값을 얻기 위해 호출되는 함수도 있다. 값을 반환하는 함수가 새로운 방식으로 결합하기 쉽다.

순수 함수는 부수 효과가 없으며 다른 코드의 부수 효과에도 의존하지 않는 특정한 종류의 값을 생성하는 함수다. 순수 함수는 동일한 인수로 호출될 때 항상 동일한 값을 생성한다는 이점이 있다. 이런 함수는 호출을 통해 코드의 의미를 변경하지 않고 반환 값으로 대체할 수 있다.

맺음말

프로그램에서 수행하는 동작을 여러 함수로 분리하는 것이 좋다. 반복되는 코드는 그룹화해서 함수로 프로그램을 구성하는 것이 좋다.