JavaScript - Function

1. 함수

• 함수(function) : 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의함
  • 매개변수(parameter) : 함수 내부로 입력을 전달받는 변수
  • 인수(argument) : 함수의 입력값
  • 반환값(return value) : 함수의 출력값
  • 함수 정의(function definition) : 함수 생성함
  • 함수 호출(function call/invoke) : 함수의 매개변수에 인수를 전달하면서 함수 실행을 명시적으로 지시함

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

// 함수 호출
add(2, 5) // 7

2. 함수를 사용하는 이유

• 함수는 필요할 때 여러 번 호출 가능함
  • 코드의 중복을 억제하고 재사용성을 높임
  • 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성이 높임
• 함수는 객체 타입의 값이므로 이름(식별자)를 붙일 수 있음
  • 적절한 함수 이름은 함수의 역할을 파악할 수 있게 도우므로, 코드의 가독성을 향상시킴

3. 함수 리터럴

• 함수는 객체 타입의 값이므로, 함수 리터럴로 생성 가능함
• 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성됨

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

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

4. 함수 정의

• 함수 정의
  • 함수를 호출하기 이전에 매개변수, 실행할 문들, 반환할 값을 지정하는 것
• 함수 정의 방식
  1. 함수 선언문
  2. 함수 표현식
  3. Function 생성자
  4. 화살표 함수(ES6)

4.1 함수 선언문

• 함수 선언문 (function statement)
  • 함수 리터럴과 형태가 동일함
    • 함수 리터럴을 단독으로 사용하는 경우, 함수 선언문으로 해석함
    • 함수 리터럴을 변수에 할당하거나 피연산자로 사용하는 경우, 함수 표현식으로 해석함
  • 함수 이름을 생략 불가능함
  • 표현식이 아닌 문이므로 변수에 할당 불가능함

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

• JavaScript 엔진은 함수 선언문을 해석해 함수 객체를 생성함
  • 함수 이름은 함수 몸체 내부에서만 유효한 식별자임
  • 함수 이름과는 별도로 생성된 함수 객체를 가리키는 식별자가 필요함
  • JavaScript엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 그 식별자에 함수 객체를 할당함
• 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출함

4.2 함수 표현식

• 함수

  • 객체 타입의 값
    • 변수, 프로퍼티, 배열의 요소로 할당 가능함
  • 일급 객체
    • 함수를 값처럼 자유롭게 쓸 수 있음

• 함수 표현식 (function expression)

  • 함수 리터럴로 생성한 함수 객체를 변수에 할당한 함수 정의 방식
  • 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적임

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

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

• 함수를 호출할 때 함수 이름이 아니라 함수 객체를 가리키는 식별자를 사용해야 함
  • 함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로, 함수 이름으로 함수 호출 불가능함

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

// 함수 객체를 가리키는 식별자로 호출
console.log(add(2, 5)); // 7

// 함수 이름은 함수 몸체 내부에서만 유효한 식별자임
// 함수 이름을 함수 외부에서 호출하면 Reference Error가 발생함
console.log(foo(2, 5)); // Reference Error

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

• 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다름

• 함수 선언문의 생성 시점

  • 함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체가 먼저 생성됨
  • JavaScript 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당함
  • 코드가 한 줄씩 순차적으로 실행되는 런타임에 이미 함수 객체가 생성 및 식별자에 할당되어 있음
  • 함수 선언문 이전에 함수를 참조 가능하고, 호출 가능함
    • 함수 호이스팅(function hoisting) : 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JavaScript 고유의 특징

• 함수 호이스팅과 var 변수 호이스팅의 공통점과 차이점

  • 공통점 : 런타임 이전에 JavaScript 엔진에 의해 먼저 실행되어 식별자를 생성함
  • 차이점
    • var 키워드로 선언된 변수 : undefined로 초기화되기 때문에, 변수 선언문 이전에 변수를 참조하면 변수 호이스팅에 의해 undefined로 평가됨
    • 함수 선언문으로 정의한 함수: 함수 객체로 초기화되기 때문에, 함수 선언문 이전에 함수를 호출하면 함수 호이스팅에 의해 함수 호출이 가능함

• 함수 표현식의 생성 시점

  • 함수 표현식 : 변수에 할당되는 값이 함수리터럴인 문
  • 함수 표현식은 변수 선언문과 변수 할당문의 축약 표현과 동일하게 동작함
    • 변수 할당문의 값은 할당문이 실행되는 시점인 런타임에 평가됨
    • 함수 표현식의 함수 리터럴도 런타임에 평가되어 함수 객체가 됨
  • 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생함

Function 생성자 함수

• Functon 생성자 함수
  • JaVascript가 기본 제공하는 빌트인 함수
  • Function 생성자에 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해서 반환함
    • new 연산자 생략 가능함 (결과는 동일함)

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

• Function 생성자로 생성한 함수는 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작함
  • 클로저(closure)를 생성하지 않음

var add1 = (function () {
  var a = 10;
  return function (x, y) {
    return x + y + a;
  };
});

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

var add2 = (function () {
  var a = 10;
  return new Function('x', 'y', 'return x + y + a');
});

console.log(add2(1, 2)); // Reference Error: a is not defined

4.5 화살표 함수

• 화살표 함수(arrow function)
  • ES6에 도입됨
  • function 키워드 대신 화살표(=>)를 사용한 좀 더 간략한 함수 선언 방식
  • 항상 익명 함수로 정의함
  • 생성자 함수로 사용 불가능함
  • 기존 함수와 this 바인딩이 다름
  • prototype 프로퍼티가 없음
  • arguments 객체를 생성하지 않음

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

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