12. Function 함수

https://poiemaweb.com/js-function

Function | PoiemaWeb

 

 

함수는 코드 블록으로, 이름과 매개변수를 가지며 필요할 때 호출하여 작업을 수행하는 독립적인 단위입니다. 코드 중복을 줄이고 재사용성을 높이는 데 중요한 역할을 하며, 자바스크립트에서는 일급 객체로 다루어져 변수에 할당하거나 다른 함수에 전달할 수 있습니다. 이로 인해 프로그래밍에서 유연성과 모듈화를 쉽게 구현할 수 있습니다.

 

 

---

 

1. 함수 정의 

• Function 생성자 함수
• 함수 선언문
• 함수 표현식

 

1.1 Function 생성자 함수

Function 생성자 함수는 Function.prototype.constructor 프로퍼티로 접근할 수 있다.
Function 생성자 함수로 함수를 생성하는 문법은 다음과 같다.

 

 

new Function(arg1, arg2, ... argN, functionBody)

 

 

 

var square = new Function('number', 'return number * number');

console.log(square(10)); // 100

 

 

Function 생성자 함수로 함수를 생성하는 방식은 일반적으로 사용하지 않는다.

 

---

 

1.2 함수 선언문
함수 선언문(Function declaration) 방식으로 정의한 함수는 function 키워드와 이하의 내용으로 구성된다.

 

• 함수명
  함수 선언문의 경우, 함수명은 생략할 수 없다. 함수명은 함수 몸체에서 자신을 재귀적(recursive) 호출하거나 자바스크립트 디버거가 해당 함수를 구분할 수 있는 식별자이다.
• 매개변수 목록
  0개 이상의 목록으로 괄호로 감싸고 콤마로 분리한다. 다른 언어와의 차이점은 매개변수의 타입을 기술하지 않는다는 것이다. 이 때문에 함수 몸체 내에서 매개변수의 타입 체크가 필요할 수 있다.
• 함수 몸체
  함수가 호출되었을 때 실행되는 문들의 집합이다. 중괄호({ })로 문들을 감싸고 return 문으로 결과값을 반환할 수 있다. 이를 반환값(return value)라 한다.

 

// 함수 선언문 function 키워드 사용

function 함수명(매개변수1, 매개변수2) {

  함수 몸체 부분

  return 결과 반환값;

}

---

 

1.2 함수 표현식
자바스크립트의 함수는 일급 객체이므로 아래와 같은 특징이 있다.

1. 무명의 리터럴로 표현이 가능하다.
2. 변수나 자료 구조(객체, 배열…)에 저장할 수 있다.
3. 함수의 파라미터로 전달할 수 있다.
4. 반환값(return value)으로 사용할 수 있다.

 

함수의 일급객체 특성을 이용하여 함수 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있는데 이러한 방식을 함수 표현식(Function expression)이라 한다.

 

함수 선언문으로 정의한 함수 square()를 함수 표현식으로 정의하면 아래와 같다.

 

// 함수 선언문

function square(number) {

  return number * number;

}

// 함수 표현식

var square = function(number) {

  return number * number;

};

 

---

 

함수 표현식 방식으로 정의한 함수는 함수명을 생략할 수 있다. 이러한 함수를 익명 함수(anonymous function)이라 한다. 함수 표현식에서는 함수명을 생략하는 것이 일반적이다.

 

// 기명 함수 표현식(named function expression)

var foo = function multiply(a, b) {

  return a * b;

};

// 익명 함수 표현식(anonymous function expression)

var bar = function(a, b) {

  return a * b;

};

console.log(foo(10, 5)); // 50

console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

 

함수는 일급객체이기 때문에 변수에 할당할 수 있는데 이 변수는 함수명이 아니라 할당된 함수를 가리키는 참조값을 저장하게 된다. 함수 호출시 함수명(multiply) 이 아니라 함수를 가리키는 변수명(foo) 을 사용하여야 한다.

 

 

var foo = function(a, b) {

  return a * b;

};

var bar = foo;

console.log(foo(10, 10)); // 100

console.log(bar(10, 10)); // 100

 

변수 bar와 변수 foo는 동일한 익명 함수의 참조값을 갖는다.

---

 

함수 표현식과 함수 선언문에서 사용한 함수명은 함수 몸체에서 자신을 재귀적 호출(Recursive function call)하거나 자바스크립트 디버거가 해당 함수를 구분할 수 있는 식별자의 역할을 한다.

 

var fibonacci = function fib(n) {

  if (n <= 1) {

      return n;

  } else {

      return fib(n - 1) + fib(n - 2);

  }

};

 

---

3가지 방법의 관계

 

함수 선언문은 함수 표현식과 동일하게 함수 리터럴 방식으로 정의되는 것이다.

 

function square(number) {

  return number * number;

};

// 함수 선언문으로 정의한 함수 square의 경우, 자바스크립트 엔진에 의해 아래와 같이 변경됨.

var square = function square(number) {

  return number * number;

};

 

따라서 함수 선언문과 함수 표현식은 모두 함수 리터럴 방식으로 함수를 정의하는데 

이것은 결국 내장 함수 Function 생성자 함수로 함수를 생성하는 것을 단순화시킨 short-hand(축약법)이다.

 

 

정리

• Funcition 생성자 함수로부터 생성되며, 이를 축약한 방법인 함수 선언문과 함수 표현식을 주로 사용한다. 둘은 동일한 함수 리터럴 방식을 사용한다.
• 함수명을 생략하는 것이 일반적이며, 함수 호출시 변수명을 사용하여야 한다.

---

 

2. 함수 호이스팅

 

 

호이스팅(Hoisting)

• var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 말한다.
• 자바스크립트는 ES6의 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅(Hoisting)한다.

 

이 3가지 함수 정의 방식은 동작 방식에 약간의 차이가 있다.

 

1. 함수 선언문으로 함수를 정의

var res = square(5);

function square(number) {

  return number * number;

}

console.log(res) // 5

}

 

함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 초기화하고 이를 VO(variable object)에 저장한다. 함수 선언, 초기화, 할당이 한번에 이루어지며 소스 코드 어느 곳에서든지 호출이 가능하다.

---

2. 함수 표현식으로 함수를 정의

var res = square(5); // TypeError: square is not a function

var square = function(number) {

  return number * number;

}

console.log(res) // 5

 

함수 선언문의 경우와는 달리 TypeError가 발생하였다. 

함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생한다.

 

함수 표현식은 함수 선언문과는 달리 스크립트 로딩 시점에 변수 객체(VO)에 함수를 할당하지 않고 runtime에 해석되고 실행된다.

---

 

함수 호이스팅의 문제점

1. 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수 있다.
2. 대규모 애플리케이션을 개발하는 경우 인터프리터가 너무 많은 코드를 변수 객체(VO)에 저장하여 애플리케이션의 응답속도가 현저히 떨어질 수 있다.

따라서 함수 호이스팅을 만들 수 있는 함수 선언문 보다는 함수 표현식을 사용할 것을 권장

 

---

 

3. First-class object (일급 객체)
일급 객체(first-class object)란 생성, 대입, 연산, 인자 또는 반환값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상을 의미한다.

다음 조건을 만족하면 일급 객체로 간주한다.

1. 무명의 리터럴로 표현이 가능하다.
2. 변수나 자료 구조(객체, 배열 등)에 저장할 수 있다.
3. 함수의 매개변수에 전달할 수 있다.
4. 반환값으로 사용할 수 있다.

 

Javascript의 함수는 흡사 변수와 같이 사용할 수 있으며 코드의 어디에서든지 정의할 수 있다.

함수와 다른 객체를 구분짓는 특징은 호출할 수 있다는 것이다.

 

---

 

4. 매개변수(Parameter, 인자)

• 함수의 작업 실행을 위해 추가적인 정보가 필요할 경우, 매개변수를 지정한다. 
• 매개변수는 함수 내에서 변수와 동일하게 동작한다.

 

4.1 매개변수(parameter, 인자) vs 인수(argument)

• 매개변수: 함수 정의에서 함수가 받아야 할 값을 나타내는 변수.
• 인수: 함수 호출 시 함수에 전달되는 실제 값들.

var foo = function (p1, p2) {

  console.log(p1, p2);

};

foo(1); // 1 undefined

 

매개변수 p1, p2 

인수 1

 

 

4.2 Call-by-value
원시 타입 인수는 Call-by-value(값에 의한 호출)로 동작한다. 이는 함수 호출 시 원시 타입 인수를 함수에 매개변수로 전달할 때 매개변수에 값을 복사하여 함수로 전달하는 방식이다. 이때 함수 내에서 매개변수를 통해 값이 변경되어도 전달이 완료된 원시 타입 값은 변경되지 않는다.

 

function foo(primitive) {

  primitive += 1;

  return primitive;

}

var x = 0;

console.log(foo(x)); // 1

console.log(x);      // 0

 

 

4.3 Call-by-reference
객체형(참조형) 인수는 Call-by-reference(참조에 의한 호출)로 동작한다. 이는 함수 호출 시 참조 타입 인수를 함수에 매개변수로 전달할 때 매개변수에 값이 복사되지 않고 객체의 참조값이 매개변수에 저장되어 함수로 전달되는 방식이다. 이때 함수 내에서 매개변수의 참조값이 이용하여 객체의 값을 변경했을 때 전달되어진 참조형의 인수값도 같이 변경된다.

 

function changeVal(primitive, obj) {

  primitive += 100;

  obj.name = 'Kim';

  obj.gender = 'female';

}

var num = 100;

var obj = {

  name: 'Lee',

  gender: 'male'

};

console.log(num); // 100

console.log(obj); // Object {name: 'Lee', gender: 'male'}

changeVal(num, obj);

console.log(num); // 100

console.log(obj); // Object {name: 'Kim', gender: 'female'}

 

changeVal 함수는 원시 타입과 객체 타입 인수를 전달 받아 함수 몸체에서 매개변수의 값을 변경하였다.

 

이때 원시 타입 인수는 값을 복사하여 매개변수에 전달하기 때문에 함수 몸체에서 그 값을 변경하여도 어떠한 부수 효과(side-effect)도 발생시키지 않는다. 하지만 객체형 인수는 참조값을 매개변수에 전달하기 때문에 함수 몸체에서 그 값을 변경할 경우 원본 객체가 변경되는 부수 효과(side-effect)가 발생한다.

 

이와 같이 부수 효과를 발생시키는 비순수 함수(Impure function)는 복잡성을 증가시킨다. 비순수 함수를 최대한 줄이는 것은 부수 효과를 최대한 억제하는 것과 같다. 이것은 디버깅을 쉽게 만든다. 어떤 외부 상태도 변경하지 않는 함수를 순수함수(Pure function), 외부 상태도 변경시켜는 부수 효과(side-effect)가 발생시키는 함수를 비순수 함수(Impure function)라 한다.

 

 

---

 

5. 반환값
함수는 자신을 호출한 코드에게 수행한 결과를 반환(return)할 수 있다. 이때 반환된 값을 반환값(return value)이라 한다.

 

• return 키워드는 함수를 호출한 코드(caller)에게 값을 반환할 때 사용한다.
• 함수는 배열 등을 이용하여 한 번에 여러 개의 값을 리턴할 수 있다.
• 함수는 반환을 생략할 수 있다. 이때 함수는 암묵적으로 undefined를 반환한다.
• 자바스크립트 해석기는 return 키워드를 만나면 함수의 실행을 중단한 후, 함수를 호출한 코드로 되돌아간다. 
• 만일 return 키워드 이후에 다른 구문이 존재하면 그 구문은 실행되지 않는다.

 

function calculateArea(width, height) {

  var area = width * height;

  return area; // 단일 값의 반환

}

console.log(calculateArea(3, 5)); // 15

console.log(calculateArea(8, 5)); // 40

function getSize(width, height, depth) {

  var area = width * height;

  var volume = width * height * depth;

  return [area, volume]; // 복수 값의 반환

}

console.log('area is ' + getSize(3, 2, 3)[0]);   // area is 6

console.log('volume is ' + getSize(3, 2, 3)[1]); // volume is 18

 

---

 

6. 함수 객체의 프로퍼티
함수는 객체이다. 따라서 함수도 프로퍼티를 가질 수 있다.

 

function square(number) {

  return number * number;

}

square.x = 10;

square.y = 20;

console.log(square); // [Function: square] { x: 10, y: 20 }

 

 

함수는 일반 객체와는 다른 함수만의 프로퍼티를 갖는다.

 

 

---

 

6.1 arguments 프로퍼티
arguments 객체는 함수 호출 시 전달된 인수(argument)들의 정보를 담고 있는 순회가능한(iterable) 유사 배열 객체(array-like object)이며 함수 내부에서 지역변수처럼 사용된다. 즉, 함수 외부에서는 사용할 수 없다.

자바스크립트는 함수 호출 시 함수 정의에 따라 인수를 전달하지 않아도 에러가 발생하지 않는다.

function multiply(x, y) {

  console.log(arguments);

  return x * y;

}

multiply();        // [Arguments] {}

multiply(1);       // [Arguments] { '0': 1 }

multiply(1, 2);    // [Arguments] { '0': 1, '1': 2 }

multiply(1, 2, 3); // [Arguments] { '0': 1, '1': 2, '2': 3 }

 

• 매개변수(parameter)는 인수(argument)로 초기화된다.
• 인수를 적게 전달했을 때(multiply(), multiply(1))  전달되지 않은 매개변수는 undefined으로 초기화된다
• 인수를 더 많이 전달한 경우, 초과된 인수는 무시된다.

이러한 자바스크립트의 특성때문에 런타임 시에 호출된 함수의 인자 갯수를 확인하고 이에 따라 동작을 달리 정의할 필요가 있을 수 있다. 이때 유용하게 사용되는 것이 arguments 객체이다.

 

arguments 객체는 매개변수 갯수가 확정되지 않은 가변 인자 함수를 구현할 때 유용하게 사용된다.

function sum() {

  var res = 0;

  for (var i = 0; i < arguments.length; i++) {

    res += arguments[i];

  }

  return res;

}

console.log(sum());        // 0

console.log(sum(1, 2));    // 3

console.log(sum(1, 2, 3)); // 6

 

자바스크립트는 함수를 호출할 때 인수들과 함께 암묵적으로 arguments 객체가 함수 내부로 전달된다. 

arguments 객체는 배열의 형태로 인자값 정보를 담고 있지만 실제 배열이 아닌 유사배열객체(array-like object)이다.

배열 메서드를 사용할 수 없고, 인덱스를 통해 직접 접근해야한다.

 

 

유사배열객체

• length 프로퍼티를 가진 객체를 말한다.
• 유사배열객체는 배열이 아니므로 배열 메소드를 사용하는 경우 에러가 발생하게 된다.
• 배열 메소드를 사용하려면 Function.prototype.call, Function.prototype.apply를 사용해야한다.

function sum() {

  if (!arguments.length) return 0;

  // arguments 객체를 배열로 변환

  var array = Array.prototype.slice.call(arguments);

  return array.reduce(function (pre, cur) {

    return pre + cur;

  });

}

// ES6

// function sum(...args) {

//   if (!args.length) return 0;

//   return args.reduce((pre, cur) => pre + cur);

// }

console.log(sum(1, 2, 3, 4, 5)); // 15

 

 

권장하지않음

• ES5에서는 이를 표준에서 deprecated로 지정하였다.
• 화살표 함수(arrow function)에서는 arguments 객체가 없다. 
• ES6부터는 Rest parameters나 Spread 문법을 사용하여 함수의 매개변수를 처리하는 것이 권장

 

Rest 파라미터 사용

함수 정의 시 매개변수 목록에서 ...을 사용하여 나머지 인자들을 배열로 받아올 수 있습니다.

---

 

6.2 caller 프로퍼티
caller 프로퍼티는 자신을 호출한 함수를 의미한다.

function outerFunction() {

    innerFunction();

  }

 

  function innerFunction() {

    console.log(innerFunction.caller); // outerFunction 함수에 대한 참조가 출력됨

  }

 

  outerFunction();

 

 

• 코드의 복잡성을 증가시킬 수 있다.
• strict mode에서는 동작하지 않으므로 권장되는 방법은 아니다.
• 필요한 경우 스택 추적(stack tracing)을 통해 호출자 정보를 얻는 방법을 사용하는 것이 더 좋다.

 

 

6.2.1 Error 객체 활용

• Error 객체를 생성하여 스택 추적 정보를 얻는 방법입니다.
• Error 객체는 생성 시점의 호출 스택 정보를 포함하고 있어, 이를 출력하면 함수 호출 순서를 추적할 수 있습니다.

 

function a() {

    b();

  }

 

  function b() {

    c();

  }

 

  function c() {

    console.log(new Error().stack);

  }

 

  a(); // c 함수 내에서 발생한 Error 객체의 스택 추적 출력

 

 

 

6.2.2. console.trace()

• 명시적으로 스택 추적을 출력하는 데 사용할 수 있는 console.trace() 함수가 있습니다.
• 이 함수는 현재 실행 중인 위치에서의 호출 스택을 출력합니다.

function foo() {

    console.trace();

  }

 

  function bar() {

    foo();

  }

 

  bar(); // foo 함수 내에서 발생한 스택 추적 출력

 

 

---

 

6.3 length 프로퍼티
length 프로퍼티는 함수 정의 시 작성된 매개변수 갯수를 의미한다.

 

function add(a, b) {

    return a + b;

  }

 

console.log(add.length); // 2

 

arguments.length는 함수 호출시 인자의 갯수이다.

 

---

 

6.4 name 프로퍼티

• 해당 객체나 함수의 이름을 나타내며, 객체가 생성될 때 자동으로 설정될 수도 있습니다.

function greet() {

    console.log('Hello!');

  }

 

console.log(greet.name); // "greet"

let sayHello = function() {

    console.log('Hello, World!');

}

console.log(sayHello.name); // "sayHello"

 

 

• greet 함수의 name 프로퍼티는 "greet"입니다. 함수 이름이 지정된 경우 이 이름이 name 프로퍼티에 할당됩니다.
• 함수가 익명 함수일 경우, name 프로퍼티는 빈 문자열("")로 설정됩니다.
• sayHello 함수는 익명 함수이지만, 변수에 할당된 이름이 name 프로퍼티에 할당됩니다.

---

 

 

6.5 __proto__ 접근자 프로퍼티

객체의 프로토타입을 나타내며, 객체 지향 프로그래밍에서 상속 관계를 형성하는 데 중요한 역할을 합니다.

 

 

• __proto__는 객체의 내부 슬롯(internal slot)으로, 객체가 다른 객체를 상속받을 때 사용됩니다.
• 모든 객체는 __proto__ 프로퍼티를 가질 수 있습니다. 이 프로퍼티는 객체가 생성될 때 객체의 생성자 함수의 prototype 프로퍼티에 연결됩니다.
• 객체의 __proto__ 프로퍼티는 해당 객체의 프로토타입 체인을 따라 상위 프로토타입(부모 객체)을 참조합니다.
• __proto__는 비표준이며, ECMAScript 6에서 공식적으로 권장하지 않는 방법이 됩니다.
• 대신 Object.getPrototypeOf()와 Object.setPrototypeOf() 메서드를 사용하여 프로토타입을 다루는 것이 권장됩니다.

 

let obj = {};

let protoObj = { x: 10 };

obj.__proto__ = protoObj;

console.log(obj.x); // 10

 

obj 객체는 protoObj 객체를 상속받습니다. obj 객체의 __proto__ 프로퍼티를 설정하여 protoObj를 그 프로토타입으로 지정하였기 때문에, obj.x는 protoObj의 x 프로퍼티에 접근할 수 있습니다.

 

---

 

6.6 prototype 프로퍼티

 

prototype 프로퍼티는 JavaScript에서 생성자 함수를 통해 객체를 생성할 때, 생성된 객체들이 공유할 프로퍼티와 메서드를 정의하는 중요한 역할을 합니다. 이를 통해 객체 지향 프로그래밍의 상속 개념을 구현할 수 있고, 코드의 재사용성을 높일 수 있습니다.

 

function Person(name, age) {

    this.name = name;

    this.age = age;

  }

 

  // Person 함수의 prototype 프로퍼티에 메서드 추가

  Person.prototype.greet = function() {

    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);

  };

 

 

위 예제에서 Person 함수는 name과 age라는 프로퍼티를 가진 객체를 생성합니다.

또한, Person.prototype 객체에 greet 메서드를 추가했습니다.

이 메서드는 Person 생성자 함수로부터 생성된 모든 객체에서 공유됩니다.

 

let person1 = new Person('Alice', 30);

let person2 = new Person('Bob', 25);

person1.greet(); // "Hello, my name is Alice and I'm 30 years old."

person2.greet(); // "Hello, my name is Bob and I'm 25 years old."

 

위 예제에서 person1과 person2 객체는 각각 Person.prototype의 greet 메서드를 호출할 수 있습니다. 이는 greet 메서드가 Person.prototype에 정의되어 있기 때문입니다.

---

 

7. 함수의 다양한 형태

7.1. 즉시 실행 함수
함수의 정의와 동시에 실행되는 함수를 즉시 실행 함수(IIFE, Immediately Invoke Function Expression)라고 한다. 

최초 한번만 실행이 필요한 초기화 처리등에 사용할 수 있다.

 

(function() {

    // 함수 내부의 코드

  })();

 

 

위 구조에서 (function() { ... })()는 함수 표현식을 사용하여 함수를 정의하고, 바로 그 다음에 괄호 ()를 추가하여 함수를 즉시 실행시키는 것을 의미합니다.

 

 

 

1. 지역 스코프 생성

즉시 실행 함수 내에서 선언된 변수들은 해당 함수 내부에서만 유효하며, 전역 스코프를 더럽히지 않습니다.

이는 변수 이름 충돌을 방지하고, 코드의 모듈화와 보호를 촉진합니다.

(function() {

    var x = 10;

    console.log(x); // 10

  })();

  console.log(x); // ReferenceError: x is not defined

 

 

 

2. 종속성 관리

즉시 실행 함수는 다른 라이브러리나 스크립트와의 충돌을 방지하고, 종속성을 명확히 관리할 수 있습니다.

이는 코드를 모듈화하고, 개발 환경에서 예기치 않은 결과를 방지하는 데 도움이 됩니다.

 

(function($) {

    // jQuery를 $로 사용할 수 있음

    $(document).ready(function() {

      // jQuery 코드

    });

  })(jQuery);

 

 

3. 코드 가독성 향상: 즉시 실행 함수는 코드의 읽기성을 향상시킬 수 있습니다. 함수가 정의되자마자 즉시 실행되기 때문에, 해당 함수가 어떤 작업을 수행하는지 명확히 알 수 있습니다.

 

4. 모듈 패턴 구현: 즉시 실행 함수는 JavaScript에서 모듈 패턴을 구현하는 데 사용될 수 있습니다. 모듈 패턴은 특정 기능을 독립적으로 구현하고, 외부에서 접근할 수 있는 공개 인터페이스만 제공하는 패턴입니다

 

var module = (function() {

    var privateVariable = 10;

 

    function privateFunction() {

      console.log('Private function');

    }

 

    return {

      publicVariable: 20,

      publicFunction: function() {

        console.log('Public function');

      }

    };

  })();

 

  console.log(module.publicVariable); // 20

  module.publicFunction(); // "Public function"

 

 

---

 

7.2 내부 함수
함수 내부에 정의된 함수를 내부함수(Inner function)라 한다.

 

1. 함수 내부에서의 로직 분리
내부 함수를 사용하면 코드를 논리적으로 그룹화하고, 관련 있는 기능들을 함수로 분리하여 구현할 수 있습니다. 이는 코드의 가독성을 높이고, 유지 보수를 용이하게 만듭니다.

function outerFunction() {

    // 외부 함수에서 변수 선언

    let outerVar = 'outer';

 

    function innerFunction() {

      // 내부 함수에서 외부 함수의 변수 사용

      console.log('Inner function accessing outer variable:', outerVar);

    }

 

    // 내부 함수 호출

    innerFunction();

  }

 

  outerFunction(); // 내부 함수 실행: "Inner function accessing outer variable: outer"

 

 

 

2. 정보 은닉 (Encapsulation)
내부 함수를 사용하면 특정 기능을 담당하는 함수를 외부로부터 숨기고, 외부에서 접근할 수 없도록 할 수 있습니다. 이는 객체지향 프로그래밍에서의 캡슐화와 비슷한 개념입니다.

 

function counter() {

    let count = 0;

 

    function increment() {

      count++;

      console.log('Count:', count);

    }

 

    function decrement() {

      count--;

      console.log('Count:', count);

    }

 

    return {

      increment: increment,

      decrement: decrement

    };

  }

 

  let counterObj = counter();

  counterObj.increment(); // "Count: 1"

  counterObj.increment(); // "Count: 2"

  counterObj.decrement(); // "Count: 1"

 

 

3. 클로저 (Closure)
내부 함수는 클로저를 생성하는 중요한 역할을 합니다. 클로저란 함수가 자신이 선언될 때의 환경(스코프)을 기억하여, 나중에 실행될 때에도 그 환경에 접근할 수 있는 함수입니다.

 

function outer() {

    let outerVar = 'outer';

 

    function inner() {

      console.log('Inner accessing outerVar:', outerVar);

    }

 

    return inner;

  }

 

  let innerFn = outer();

  innerFn(); // "Inner accessing outerVar: outer"

 

 

---

 

7.3 재귀 함수
재귀 함수(Recusive function)는 자기 자신을 호출하는 함수를 말한다.

 

function factorial(n) {

    // 종료 조건: n이 1 이하일 때

    if (n <= 1) {

      return 1;

    } else {

      // 재귀 호출: n * factorial(n - 1)

      return n * factorial(n - 1);

    }

  }

 

  // 예시: 5! = 5 * 4 * 3 * 2 * 1 = 120

  console.log(factorial(5)); // 출력: 120

 

 

 

• 종료 조건: 재귀 함수는 반드시 종료 조건을 가져야 합니다. 종료 조건이 없으면 함수가 무한히 호출되어 스택 오버플로우(Stack Overflow)가 발생할 수 있습니다.
• 성능: 재귀 함수는 반복문에 비해 함수 호출 오버헤드가 발생할 수 있습니다. 따라서 매우 깊은 재귀 호출이 필요할 경우 성능에 주의해야 합니다.
• 가독성: 재귀 함수는 문제 해결을 보다 단순하게 만들 수 있지만, 초보자에게는 이해하기 어려울 수 있습니다. 적절한 경우에 사용하는 것이 중요합니다.

 

---

 

7.4 콜백함수

 

콜백 함수(Callback Function)는 다른 함수의 인자로 넘겨지고, 해당 함수 내에서 실행되는 함수입니다. 콜백 함수는 JavaScript에서 비동기적 프로그래밍(asynchronous programming)에서 주로 사용되며, 다음과 같은 특징을 갖습니다:

 

// 배열의 각 요소에 대해 콜백 함수를 호출하는 함수

function processArray(arr, callback) {

    for (let i = 0; i < arr.length; i++) {

      // 각 요소에 대해 콜백 함수 호출

      callback(arr[i]);

    }

  }

 

  // 콜백 함수 예시: 각 요소를 출력하는 함수

  function printElement(el) {

    console.log(el);

  }

 

  // 배열과 콜백 함수를 사용하여 각 요소 출력

  let myArray = [1, 2, 3, 4, 5];

  processArray(myArray, printElement);

  // 출력:

  // 1

  // 2

  // 3

  // 4

  // 5

 

 

위 예시에서 processArray 함수는 배열 myArray의 각 요소에 대해 printElement 함수를 콜백으로 호출하여 각 요소를 출력합니다.

 

 

비동기적 작업에서의 콜백 함수

// 비동기적 작업을 수행하는 함수

function fetchData(url, callback) {

    // AJAX 또는 Fetch API를 사용하여 데이터를 가져오는 비동기 요청

    fetch(url)

      .then(response => response.json())

      .then(data => callback(data))

      .catch(error => console.error('Error fetching data:', error));

  }

 

  // fetchData 함수를 사용하여 데이터를 가져온 후 콜백 함수로 처리하는 예시

  fetchData('https://jsonplaceholder.typicode.com/posts/1', function(data) {

    console.log('Fetched data:', data);

  });

 

 

위 예시에서 fetchData 함수는 URL을 통해 데이터를 가져오고, 데이터가 성공적으로 반환되면 콜백 함수를 호출하여 데이터를 처리합니다.

 

 

콜백 함수의 활용

• 비동기 작업 처리: 데이터 로딩, 파일 읽기/쓰기, 네트워크 요청 등에서 주로 사용됩니다.
• 이벤트 처리: 이벤트 리스너에 콜백 함수를 등록하여 이벤트가 발생할 때 실행되도록 할 수 있습니다.
• 콜백 기반 API: 많은 JavaScript 라이브러리와 프레임워크는 콜백 함수를 사용하여 사용자 정의 동작을 지정할 수 있는 API를 제공합니다.

콜백 함수의 주의사항

• 콜백 지옥(Callback Hell): 콜백 함수를 중첩하여 사용하면 코드가 복잡해지고 가독성이 떨어질 수 있습니다. 이를 해결하기 위해 Promise나 async/await 같은 비동기 처리 패턴을 고려할 수 있습니다.
• 오류 처리: 콜백 함수에서 발생할 수 있는 오류를 적절히 처리해야 합니다. 보통 콜백 함수의 마지막 인자로 오류를 전달하는 관례를 따릅니다.

 

---

 

함수란?

 

함수 호이스팅

 

일급객체 

 

함수 프로퍼티

 

 

 

 

 

 

https://chatgpt.com/