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

FE 08김우중·2022년 11월 22일
0
post-thumbnail

12.1 함수란?

  • 함수는 자바스크립트를 정확히 이해하고 사용하기 위해 피해갈 수 없는 핵심 중의 핵심이다.

  • 수학의 함수가 입력을 받아 출력을 내보내듯이, 함수도 마치 재료를 투입받아 제품을 생산하는 기계와 같다.

// 프로그래밍의 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한것이다.
// 함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환 값이라 한다.
function add(x, y) {
    return x + y
}

add(2, 5) // 7

/*===================================*/
// 함수는 함수 정의를 통해 생성한다.
function add(x, y) {
    return x + y
}

// 함수는 함수 호출로 실행한다.
var result = add(2, 5)
console.log(result) // 7

12.2 함수를 사용하는 이유

  • 함수는 필요할 때 여러 번 호출 가능하다. 즉 실행 시점을 개발자가 결정할 수 있고 몇 번이든 재사용이 가능하기 때문에, 코드의 재사용이라는 측면에서 매우 유용하다.

  • 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다.

  • 함수는 객체 타입의 값이므로, 이름(식별자)을 붙일 수 있다. 변수와 마찬가지고 자신의 역할을 잘 설명해야하는 이름으로 작성해야 코드의 가독성을 향상시킨다.

12.3 함수 리터럴

  • 자바스크립트의 함수는 객체 타입의 값이다. 따라서 함수도 함수 리터럴로 생성할 수 있다. 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다.
// 변수에 함수 리터럴을 할당
var f = function add(x, y) {
    return x + y
}

// 함수 이름
// 1. 함수 이름은 식별자 이기 때문에, 식별자 네이밍 규칙을 따라야한다.
// 2. 함수 몸체 내에서만 참조할 수 있는 식별자이다.
// 3. 함수 이름은 생략 가능하다. 이름이 있으면 기명 함수 없으면 무명/익명 함수라 한다.

// 매개변수 목록
// 1. 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분
// 2. 매개변수 목록은 순서에 의미가 있다.
// 3. 매개변수는 함수 몸체 내에서 변수와 동일하게 취급된다. 따라서 식별자 네이밍 규칙을 준수해야한다.

// 함수 몸체
// 1. 함수가 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행 단위로 정의한 코드 블록이다.
// 2. 함수 호출에 의해 실행된다.

리터럴은 값을 생성하기 위한 표기법이며, 함수 리터럴도 평가되어 값을 생성하며, 이 값은 객체다. 즉 함수는 객체다. 일반 객체와의 차이점이 있는데, 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다는 점이다.

12.4 함수 정의

  • 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말한다.
// 함수 선언문
// 1. 함수 선언문은 함수 리터럴과 형태가 동일하지만, 함수 이름을 생략할 수 없다.
function add(x, y) {
    return x + y
}

/*===================================*/

// 함수 표현식
// 1. 함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식이라 한다.
// 2. 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적이다. 그러므로 함수를 호출할 때는 함수 이름이 아니라 함수 객체를 가리키는 식별자를 사용해야한다.
var add = function(x, y) {
    return x + y
}

/*===================================*/

// Function 생성자 함수
// 1. 이 방법으로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지도 않음
// 2. 함수 선언문이나 함수 표현식으로 생성한 함수와 동일하게 동작하지 않음 이 점에 주목
var add = new Function('x', 'y', 'return x + y')

/*===================================*/

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

/*===================================*/
// 함수 새성 시점과 함수 호이스팅
// 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문에 발생함

// 함수 참조
console.log(add) // 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
}

12.5 함수 호출

  • 함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출한다.
// 매개변수와 인수
// 1. 함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수를 통해 인수를 전달한다.
// 2. 매개변수는 함수 몸체 내부에서만 참조할 수 있고, 함수 몸체 외부에서는 참조 불가능
// 3. 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는다.
// 4. 매개변수보다 인수가 더 많은 경우 초과된 인수는 무시한다,.
function add(x, y) {
    console.log(x, y) // 2 5
    return x + y
}
// 호출
// 인수 1과 2가 매개변수 x와 y에 순서대로 할당되고 함수 몸체의 문들이 실행된다.
var result = add(1, 2)
console.log(add(2)) // NaN = x에는 2를 넘겨줬지만, y에는 undefined 그대로이므로 2 + undefined를 실행했기때문

/*===================================*/
// 인수 확인
// 자바스크립트의 경우 함수를 정의할 때 적절한 인수가 전달되었는지 확인할 필요가 있다.
function add(x, y) {
    if(typeof x !== 'number' || typeof y !== 'number') {
        throw new TypeError('인수는 모두 숫자 값이어야 합니다.')
    }
    return x + y
}

console.log(add(2)) // TypeError: 인수는 모두 숫자 값이어야 합니다.
console.log(aaa('a', 'b')) // TypeError: 인수는 모두 숫자 값이어야 합니다.

/*===================================*/
// 매개변수의 최대 개수
// 1. 함수의 매개변수는 코드를 이해하는 데 방해되는 요소이므로 이상적인 매개변수 개수는 0개이며 적을수록 좋다.
// 2. 이상적인 함수는 한 가지 일만 해야 하며 가급적 작게 만들어야 한다.
// 3. 따라서 매개변수는 최대 3개 이상을 넘지 않는 것을 권장한다.

/*===================================*/
// 반환문
// 1. 함수는 return 키워드와 표현식으로 이뤄진 반환문을 사용해 실행 결과를 함수 외부로 반환할 수 있다.
// 2. 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나가거나, return 키워드 뒤에 오는 표현식을 평가해 반환한다.
// 3. 반환문으 생략 가능하다. 이때 암묵적으로 undefined가 반환된다.
// 4. 함수 몸체 내부에서만 사용 가능하다.
function multiply(x, y) {
    return x * y // 반환문
}
// 함수 호출은 반환값으로 평가된다.
var result = multiply(3, 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 다양한 함수의 형태

// 즉시 실행 함수
// 1. 함수 정의와 동시에 즉시 호출되는 함수
// 2. 단 한번만 호출되며 다시 호출할 수 없다.
// 3. 반드시 그룹 연산자(...)로 감싸야 한다.
// 4. 그룹 연산자로 묶은 이유는 먼저 함수 리터럴을 평가해서 함수 객체를 생성하기 위해서다

// 일반 함수처럼 값을 반환할 수 있다
var res = (function () {
    var a = 3
    var b = 5
    return a * b
}())
console.log(res) // 15

// 일반 함수처럼 인수를 전달할 수 있다
res = (function(a, b) {
    return a * b
}(3, 5))
console.log(res) // 15

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

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

/*===================================*/
// 재귀 함수
// 1. 함수가 자기 자신을 호출하는 것을 재귀 호출이라하며, 즉 재귀 호출을 수행하는 함수를 말한다.
// 2. 반복되는 처리를 위해 사용됨
// 3. 함수 내부에서는 함수 이름을 사용해 자기 자신을 호출할 수 있다.
// 4. 함수 표현식으로 정의한 함수 내부에서는 식별자로 자기 자신을 재귀 호출한다.
// 5. 재귀 함수는 자신을 무한 재귀 호출하므로, 재귀 호출을 멈출 수 있는 탈출 조건이 반드시 필요하다.

// 팩토리얼은 1부터 자신까지의 모든 양의 정수의 곱이다.
// n! = 1 * 2 * ... * (n - 1) * n
function factorial(n) {
    // 탈출 조건: n이 1 이하일 때 재귀 호출을 멈춘다.
    if(n <= 1) return 1
    // 재귀 호출
    return n * factorial(n - 1)
}
console.log(factorial(0)) // 0! = 1
console.log(factorial(1)) // 1! = 1
console.log(factorial(2)) // 2! = 2 * 1 = 2
console.log(factorial(3)) // 3! = 3 * 2 * 1 = 6
console.log(factorial(4)) // 4! = 4 * 3 * 2 * 1 = 24

/*===================================*/
// 중첩 함수
// 1. 함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라 부른다. 그리고 중첩 함수를 포함하는 함수를 외부 함수라 부른다
function outer() {
    var x = 1
    // 중첩 함수
    function inner() {
        var y = 2
        console.log(x + y) // 3
    }
    inner()
}
outer()

/*===================================*/
// 콜백 함수
// 1. 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고한다
// 2. 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수 라고 한다.
// 3. 고차 함수는 콜백 함수를 자신의 일부분으로 합성한다.
// 4. 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.
// 5. 즉 콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.
// 6. 콜백 함수는 함수형 프로그래밍 패러다임뿐만 아니라 비동기 처리에 활용되는 중요한 패턴이다

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

var logAll = function(i) {
    console.log(i)
}

// 반복 호출할 함수를 인수로 전달한다
repeat(5, logAll) // 0 1 2 3 4

// 익명 함수 리터럴을 콜백 함수로 고차 함수에 전달한다.
// 익명 함수 리터럴은 repeat 함수를 호출할 때마다 평가되어 함수 객체를 생성한다.
repeat(5, function(i) {
    if (i % 2) console.log(i)
}) // 1 3

/*===================================*/
// 순수 함수와 비순수 함수
// - 부수 효과가 없는 함수를 순수 함수라하고, 반대로 부수 효과가 있는 함수를 비순수 함수라한다.


// 순수 함수
// 1. 순수 함수는 동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수다. 즉 순수 함수는 어떤 외부 상태에도 의존하지 않고 오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 값을 생성해 반환한다.
// 2. 순수 함수는 일반적으로 최소 하나 이상의 인수를 전달 받으며, 인수를 변경하지 않는 것이 기본이다. 즉 순수 함수는 인수의 불변성을 유지한다
// 3. 순수 함수는 함수의 외부 상태를 변경하지 않는다. 정리해서 순수함수는 어떤 외부 상태에도 의존하지 않으며 외부 상태를 변경하지도 않는 함수다.

var count = 0; // 현재 카운트를 나타내는 상태
// 순수 함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
function increase(n) {
    return ++n
} 

// 순수 함수가 반환한 결과값을 변수에 재할당해서 상태를 변경    
count = increase(count)
console.log(count) // 1

count = increase(count)
console.log(count) // 2

// 비순수 함수
// 1. 비순수 함수는 함수의 외부 상태에 따라 반환값이 달라지는 함수, 즉 외부 상태에 의존하는 함수이다
// 2. 순수 함수와는 달리 함수의 외부 상태를 변경하는 부수 효과가 있다. 정리헤서 비순수 함수는 외부 상태에 의존하거나 외부 상태를 변경하는 함수다.

var count = 0; // 현재 카운트를 나타내는 상태
// 비순수 함수
function increase() {
    return ++count // 외부 상태에 의존하며 외부 상태를 변경한다.
}

// 비순수 함수는 외부 상태(count)를 변경하므로 상태 변화를 추적하기 어려워진다.
increase()
console.log(count) // 1

increase()
console.log(count) // 2
profile
새내기 개발자

0개의 댓글