딥다이브 스터디 : 12장 함수

함수

일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.

함수는 값이며, 식별자인 함수 이름을 사용할 수 있다. 

• 함수의 구성 요소
  • 매개 변수(parameter) : 함수 내부로 입력을 전달받는 변수
  • 인수(argument) : 함수 호출시 입력되는 수
  • 반환값(return value) : 출력되는 값

• 동작 과정
  • 함수 정의(function definition)을 통해 생성
  • 함수 호출 : 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시
  • 코드 블록의 문이 일괄적으로 실행
  • 반환 값(실행 결과)를 반환

// 함수 정의
funcfion add(x, y) { // 함수 이름 : add , 매개 변수 : x, y
    return x + y; // 반환값
}

// 함수 호출
var result = add(10, 20); // 인수 : 10, 20
console.log(result); // 함수 add에 인수 10, 20을 전달하면서 호출하면 반환값 30이 반환

 

함수를 사용하는 이유

• 재사용
  • 필요할때 여러번 호출할 수 있음
  • 동일한 작업을 반복적으로 수행해야 할 경우 효율적임
• 유지보수의 편의성
  • 중복 코드를 사용하지 않아 코드 수정에 걸리는 시간을 줄일 수 있음
• 신뢰성
  • 실수가 줄어듬
• 가독성
  • 적절한 함수 이름(식별자)을 붙여 내부의 코드를 이해하지 않고도 역할을 파악하게 할 수 있음

 

함수 리터럴

// 변수 fun에 함수 리터럴 할당
var fun = function add(x, y) {
  return x + y;
}

• 함수 이름
  • 식별자. 식별자 네이밍 규칙 준수해야함
  • 함수 몸체 내에서만 참조 가능
  • 생략 가능.
    • 기명 함수 - 이름이 있는 함수
    • 무명 / 익명 함수 - 이름이 없는 함수
• 매개변수 목록
  • 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분
  • 각 매개변수는 함수 호출시 지정한 인수가 순서대로 할당됨. 순서에 의미가 있음
  • 함수 몸체 내에서 변수와 동일하게 취급. → 네이밍 규칙을 준수해야함
• 함수 몸체
  • 함수가 호출되었을때 일괄적으로 실행될 문들을 하나의 실행 단위로 정의한 코드 블록
  • 함수 호출에 의해 실행

 

함수 정의

함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 반환한 값을 지정하는 것

 

함수 선언문

// 함수 선언문
function add(x, y) {
  return x + y;
}

• 함수 리터럴과 형태가 같음
• 함수 이름 생략 불가능
• 표현식이 아닌 문.
  • 원래 표현식이 아닌 문은 변수에 할당할 수 없지만, 함수 선언문이 변수에 할당되는 것처럼 보일때가 있다.
  • ⇒ 자바스크립트 엔진이 코드 문맥에 따라 함수 선언문으로 해석하거나 함수 리터럴 표현식으로 해석하기 때문.
    • 함수 리터럴이 피연산자로 사용되지 않는 경우 → 함수 선언문
    • 함수 리터럴이 변수에 할당되거나 피연산자로 사용되는 경우 → 함수 리터럴 표현식

함수 표현식

// 함수 표현식
var add = function(x,y) {
  return x + y;
}

• 함수 리터럴로 생성한 함수 객체를 변수에 할당한 것
• 함수 이름을 생략 하는 것이 일반적

함수 생성 시점과 함수 호이스팅

// 함수 참조
console.log(add); // f add(x, y)
console.log(sub); // undefined

// 함수 호출
console.log(add(2,5)); // 7
console.log(sub(2, 5)); // TypeError : sub is not a function

// 함수 선언문
function add(x, y) {
  return x + y;
}

// 함수 표현식
var sub = function (x, y) {
  return x - y;
}

• 함수 선언문으로 정의한 함수
  • 함수 선언문 이전에 호출할 수 있음
  • 런타임 시
    • 런타임 이전에 함수 객체가 먼저 생성되고 함수 이름과 동일한 식별자를 암묵적으로 생성 후 함수 객체가 할당됨. 즉, 선언문 이전에 참조 및 호출이 가능함.
    • ⇒ 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 함수 호이스팅 발생
• 함수 표현식으로 정의한 함수
  • 함수 표현식 이전에 호출할 수 없음
  • 런타임 시
    • 런타임 이전에 먼저 실행되어 식별자를 생성하고 var 키워드로 생성된 변수가 undefined로 초기화됨
    • 변수 선언문 + 할당문과 동일하게 동작하므로 값은 런타임에 평가되어 함수 객체가 됨
    • ⇒ 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생함.

함수 호이스팅은 함수를 호출하기 전에 함수를 선언해야 한다는 규칙을 무시하게 되니, 함수 선언문 대신 함수 표현식을 사용할 것을 권장한다.

 

Function 생성자 함수

// Function 생성자 함수
var add = new Function('x', 'y', 'return x + y');

• 빌트인 함수 Function 생성자 함수와 매개변수 목록, 함수 몸체를 문자열로 전달 + new 연산자와 함께 호출(생략 가능)하는 방식
• 일반적인 방식이 아니며 바람직하지 않음
• 클로저를 생성하지 않음
• 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작함

 

화살표 함수(ES6)

// 화살표 함수(ES6)
var add = (x, y) => x + y;

• function 키워드 대신 화살표 (⇒)를 사용해 함수를 선언하는 방식
• 항상 익명 함수로 정의함
• 생성자 함수로 사용할 수 없음
• 기존 함수와 this 바인딩 방식이 다름
• prototype 프로퍼티 없음
• arguments 객체를 생성하지 않음

 

함수 호출

• 매개변수
  • 함수를 정의할 때 선언하고 함수 몸체 내부에서 변수와 동일하게 취급됨
  • 함수 몸체 내부에서만 참조할 수 있고 외부에서는 참조할 수 없음. ⇒ 매개변수의 스코프(유효범위)는 함수 내부
  • 인수가 부족해서 인수가 할당되지 않은 경우의 매개변수는 undefined
  • 매개변수보다 인수가 더 많은 경우 초과된 인수는 무시됨 → arguments 객체의 프로퍼티로 보관됨
  • 최대 개수의 제한은 없으나 순서에 의미가 있음
• 인수
  • 인수는 함수를 호출할때 지정하며 개수와 타입에 제한이 없음
  • ES6에서 도입된 매개변수 기본값을 사용해 인수를 전달하지 않았을 경우, undefined를 전달했을경우 기본값을 지정해줄수 있음
• 반환문
  • return 키워드와 표현식(반환값)으로 이뤄진 반환문을 사용해 실행 결과를 함수 외부로 반환
  • 함수의 실행을 중단하고 함수 몸체를 빠져나가는 역할. 반환문 이후에 다른 문이 존재할 경우 무시됨
  • return 키워드 뒤에 오는 표현식을 평가해 반환하는 역할. 생략하거나 지정하지 않을 경우 undefined가 반환.
  • return 키워드와 표현식 사이에 줄바꿈이 있을 경우 예상치 못한 결과 발생할수 있음
  • 함수 몸체에서만 사용할 수 있음

참조에 의한 전달과 외부 상태의 변경

매개변수는 함수 몸체 내부에서 변수와 동일하게 취급되므로 타입에 따라 원시 값의 경우 값에 의한 전달, 객체의 경우 참조에 의한 전달 방식으로 동작한다.

• 원시 타입 인수
  • 값 자체가 복사되어 매개변수에 전달됨
  • 함수 몸체에서 값을 변경해도 원본에 영향 X
• 객체 타입 인수
  • 참조 값이 복사되어 매개변수에 전달됨
  • 함수 몸체에서 객체를 변경하면 원본에 영향 O ⇒ 부수 효과(side effect) 발생
    • 해결 방법
      • 불변 객체로 만들어 사용 = 객체를 원시 값처럼 변경 불가능한 값으로 만들기
      • 변경이 필요한 경우 객체의 방어적 복사를 통해 깊은 복사를 하고 새로운 객체를 생성해 교체할 수 있음

순수 함수

외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수. 이를 통해 부수 효과를 최대한 억제하고 오류를 피해 프로그램의 안정성을 높이려는 프로그래밍 패러다임이 함수형 프로그래밍이다.

 

다양한 함수의 형태

즉시 실행 함수(IIFE)

(function(){
  var a = 3;
  var b = 5;
  return a * b;
}());

• 함수 정의와 동시에 즉시 호출되는 함수
• 단 한번만 호출되고 다시 호출할 수 없음
• 익명함수 사용함
• 반드시 그룹 연산자()로 감싸야 함

재귀 함수

// 재귀 함수로 팩토리얼 구현
function factorial(n) {
  // 탈출 조건
  if (n <= 1) return 1;
  // 재귀 호출
  return n * factorial(n - 1);
}

• 재귀 : 함수가 자기 자신을 호출하는 것. 재귀 함수 : 자기 자신을 호출하는 함수
• 반복되는 처리를 위해 사용함.
• 반복문 없이 반복되는 처리를 구현할 수 있음. for이나 while로도 구현 가능함
• 함수 이름은 함수 몸체 내부에서만 유효함. → 자기 자신 호출 가능
• 자신을 무한 재귀 호출하기 때문에 호출을 멈출 수 있는 탈출의 조건을 반드시 만들어야 함
• 반복문을 사용하는 것보다 재귀 함수를 사용하는 것이 직관적으로 이해하기 쉬울때만 한정적으로 사용하는 것이 좋음

중첩 함수

function outer() {
  var x = 1;
  // 중첩 함수
  function inner() {
    var y = 2;
    console.log(x + y);
  }
  inner();
}
outer();

• 함수 내부에 정의된 함수. 내부 함수라고도 함. 중첩 함수를 포함하는 함수는 외부 함수.
• 보통 자신을 포함하는 외부 함수를 돕는 헬퍼 함수의 역할을 함

콜백 함수

// 외부에서 전달받은 f를 n만큼 반복 호출
function repeat(n, f) {
  for (var i = 0; i < n; i++){
    f(i);
  }
}

// 익명 함수 리터럴을 콜백함수로 고차 함수에 전달
repeat(5, function(i){
  if (i % 2) console.log(i);
})

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수. 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수는 고차함수.
• 고차함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출함
• ⇒ 콜백함수는 고차 함수에 의해 호출되고, 고차함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

순수 함수와 비순수 함수

• 순수 함수
  • 어떤 외부 상태에 의존하지도 않고 변경하지도 않는, 부수 효과가 없는 함수
  • 동일한 인수가 전달되면 언제나 동일한 값을 반환
  • 일반적으로 최소 하나 이상의 인수를 전달받고 인수의 불변성을 유지함
• 비순수 함수
  • 외부 상태에 의존하거나 외부 상태를 변경하는, 부수 효과가 있는 함수

함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려움으로 순수함수를 사용하는 것이 좋다.