[JavaScript] 모던 자바스크립트 Deep Dive 12장 - 함수

 

---

12.1 함수란?

프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것

 

---

12.2 함수를 사용하는 이유

함수는 몇 번이든 호출할 수 있으므로 코드의 재사용이라는 측면에서 매우 유용

var x = 0;
var y = 0;
var result = 0;

x = 1;
y= 2;
result = x + y; // 3

x = 3;
y = 4;
result = x + y; // 7

x = 5;
y = 6;
result = x + y; // 11

함수를 통해 중복을 제거하고 코드를 재사용할 수 있다.

function add(x, y){
    return x + y;
}

var result = 0;
result = add(1, 2); // 3
result = add(3, 4); // 7
result = add(5, 6); // 11

---

12.3 함수 리터럴

자바스크립트의 함수는 객체 타입의 값이다. 따라서 숫자 값을 숫자 리터럴로 생성하고 객체를 객체 리터럴로 생성하는 것 처럼 함수도 함수 리터럴로 생성할 수 있다.

 

일반객체는 호출할 수 없지만 함수는 호출할 수 있다.

 

함수리터럴의 구성 요소

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

---

12.4 함수 정의

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

함수 정의 방식	예시
함수 선언문	fuction add(x, y){    return x + y; }
함수 표현식	var add = function (x, y){    return x + y; };
Function 생성자 함수	var add = new Function('x', 'y', 'return x + y');
화살표 함수(ES6)	var add = (x, y) => x + y;

 

12.4.1 함수 선언문

함수 선언문은 함수 이름을 생략할 수 없다.

---

12.4.2 함수 표현식

함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식이라 한다.

 

* 자바스크립트 함수는 값처럼 할당할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다. 이러한 값의 성질을 갖는 객체를 일급 객체라 한다.

---

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

// 함수 참조
console.dir(add); // f add(x, y)
console.dir(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;
};

함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다.

함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출 할 수 없다.

 

why?

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

함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행(객체 생성)

 

호이스팅: 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유의 특징

---

12.5 함수 호출

함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출

---

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

// 매개변수 primitive는 원시의 값을 전달받고, 매개변수 obj는 객체를 전달받는다.
function changeVal(primitive, obj) {
    primitive += 100;
    obj.name = 'Kim';
}

// 외부 상태
var num = 100;
var person = { name: 'Lee'};

console.log(num); // 100
console.log(person); // { name: 'Lee'}

// 원시 값은 값 자체가 복사되어 전달되고 객체는 참조 값이 복사되어 전달된다.
changeVal(num, person);

// 원시 값은 원본이 훼손되지 않는다.
console.log(num); // 100

// 객체는 원본이 훼손된다.
console.log(person); // { name: "Kim"}

---

12.7 다양한 함수의 형태

12.7.1 즉시 실행 함수

함수 정의와 동시에 호출되는 함수, 단 한번만 호출

즉시 실행 함수는 반드시 그룹 연산자 ( ... )로 감싸야 한다.

// 익명 즉시 실행 함수
(function (){
    var a = 3;
    var b = 5;
    return a * b;
}());

// 기명 즉시 실행 함수
(function foo(){
    var a = 3;
    var b = 5;
    return a * b;
}());

foo(); // ReferenceError: foo is not defined

---

12.7.2 재귀 함수

함수가 자기 자신을 호출하는 것을 재귀 호출이라 한다. 재귀 함수는 자기 자신을 호출하는 행위, 즉 재귀 호출을 수행하는 함수

function conuntdown(n){
    if(n < 0) return;
    console.log(n);
    conuntdown(n - 1); // 재귀 호출
}

conuntdown(10);

---

12.7.3 중첩 함수

함수 내부에 정의된 함수

function outer(){
    var x = 1;

    // 중첩 함수
    function inner(){
        var y = 2;
        // 외부 함수의 변수를 참조할 수 있다.
        console.log(x + y); // 3
    }

    inner();
}

outer();

---

12.7.4 콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 한다. 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.

---

12.7.5 순수 함수와 비순수 함수

어떤 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수 효과가 없는 함수를 순수 함수라 하고, 외부 상태에 의존하거나 외부 상태를 변경하는, 즉 부수 효과가 있는 함수를 비순수 함수라고 한다.