JS 함수

JavaScript

일련의 과정을 문(statement)들로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것. 함수는 함수 정의를 통해 생성한다. 함수는 객체이며 일반 객체에는 없는 함수 객체만의 고유한 프로퍼티를 가지고 있다.

함수를 사용하는 이유

  1. 코드의 재사용
  2. 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높임
  3. 코드의 가독성을 향상

함수 리터럴

함수리터럴

함수 리터럴은 function 키워드, 함수 이름,매개변수 목록, 함수 몸체로 구성되어 있다.

  • 함수 이름
    • 식별자이기 때문에 식별자 네이밍 규칙을 준수해야 함.
    • 함수 몸체 내에서만 참조할 수 있다.
    • 생략할 수 있다. 이름이 있으면 기명 함수, 없으면 익명 함수라고 부른다.
  • 매개변수 목록
    • 0개 이상의 매개변수를 괄호로 감싸고 쉼표로 구분.
    • 함수 몸체 내에서 변수와 동일하게 취급되기 때문에 식별자 네이밍 규칙을 준수해야 함.
  • 함수 몸체
    • 호출되었을 때 실행될 문들을 하나의 실행단위로 정의한 코드 블록이다.
    • 함수 호출에 의해 실행됨.

함수 정의

함수를 정의하는 법

  1. 함수 선언문(Function Declaration/Function Statement)
  2. 함수 표현식(Function Expression)
  3. Function 생성자 함수(Function Constructor)
  4. 화살표 함수(Arrow Function): ES6

변수 선언과 함수 정의
함수 선언문이 평가되면 식별자가 암묵적으로 생성이 되고 함수 객체가 할당되기 때문에 변수는 선언, 함수는 정의된다는 표현을 사용하고 있다.

함수 선언문

함수 리터럴 표기법과 동일하지만 함수 선언문은 함수 이름을 생략할 수 없다. 함수 이름과 동일한 이름의 식별자를 암묵적으로 선언하고 생성된 함수 객체를 할당한다. 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다. 함수 선언문은 표현식이 아닌 문이다.

1
2
3
4
5
6
function add(x, y){
  return x + y;
}

console.dir(add); // f add(X, y)
console.log(add(1, 2)); // 3

함수 표현식

자바스크립트의 함수는 일급 객체 이기 때문에 함수를 값처럼 자유롭게 사용할 수 있다. 함수 표현식의 함수 리터럴은 이름을 생략하는 것이 일반적이다. 함수 이름은 함수 몸체 내부에서만 유효하므로 함수 이름으로 함수를 호출할 수는 없다.

1
2
3
4
5
var add = function (x, y) {
  return x + y;
};

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

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

  • 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점은 다르다.
  • 함수 선언문 으로 정의하게 될 경우 자바스크립트 엔진이 다른 코드가 실행되기 전에 함수 객체를 생성하고 함수 이름과 동일한 변수에 할당까지 완료한다.
  • 함수 표현식 을 정의했을 때 함수 표현식 이전에 함수를 참조하면 undefined가 반환되는데, 이때 호출하게 되면 undefined를 호출하게 되는 것이므로 타입에러가 발생한다.

함수 호이스팅
함수 선언문이 코드의 맨 위로 끌어올려진 것처럼 동작한다. 선언 단계, 초기화 단계, 할당 단계 전부 동시에 진행된다.

변수 호이스팅
선언 단계와 초기화 단계가 동시에 진행된다. 다른 코드가 실행되기 이전에 암묵적으로 수행됨.

Function 생성자 함수

  • 매개변수 목록과 함수 몸체를 문자열로 전달받는다.
  • new 연산자와 함께 호출하고 생성된 함수 객체를 반환. (new 연산자없이 호출해도 결과는 동일.)
  • 클로저를 생성하지 않는다.

생성자 함수: 객체를 생성하는 함수.

1
2
var add = new Function('x', 'y', 'return x + y');
console.log(add(1, 2)); // 3

화살표 함수

  • function 키워드 대신 화살표(=>, Fat arrow)를 사용하여 함수를 선언할 수 있다.
  • 항상 익명 함수로 정의한다.
  • 기존 함수와 this 바인딩 방식이 다르다.
  • prototype 프로퍼티가 없다.
  • arguments 객체를 생성하지 않는다.
1
2
const add = (x, y) => x + y;
console.log(add(1, 2)); // 3

함수 호출

함수를 참조하는 변수와 한 쌍의 소괄호인 함수 호출 연산자로 호출한다. 함수 호출 연산자 내에는 0개 이상의 인수(argument)를 쉼표로 구분하여 나열하고, 매개변수에 할당할 수 있는 값이어야 한다.

매개변수와 인수

함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 생성된다. 변수와 마찬가지로 undefined로 초기화되고, 인수가 할당된다.

  • 매개변수의 스코프는 함수 내부이다.
  • 매개변수의 갯수만큼 인수를 전달하지 않아도 오류가 발생하지는 않는다.
    • 인수가 부족한 경우 매개 변수의 값은 undefined.
    • 인수가 초과하는 경우 초과되는 인수는 무시되며 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다.

인수 확인

자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 따로 확인하지 않고 타입을 사전에 지정하지 않기 때문에 적절한 인수가 전달되었는지 확인이 필요하다.

1
2
3
4
5
6
7
8
9
10
11
function add(x, y) {
  if (typeof x !== 'number' || typeof y !== 'number') {
    throw new TypeError('숫자 타입이 아닌 값입니다.');
  }
  return x + y;
}

console.log(add(2));
// TypeError: 숫자 타입이 아닌 값입니다.
console.log(add('a', 'b'));
// TypeError: 숫자 타입이 아닌 값입니다.

매개변수의 개수

순서에 의미 가 있으므로 매개변수가 많으면 많을 수록 실수를 발생시킬 가능성이 높아진다. 또한 개수나 순서가 변경되게 되면 호출 방법도 변경되므로 함수의 코드 전체가 영향을 받는다. 매개변수의 개수가 많으면 함수가 여러가지 일을 한다는 증거이므로 바람직하지 않다. 그러므로 매개변수는 최대 3개 이상을 넘지 않는 것을 권장 한다.

반환문

  • 함수의 실행을 중단하고 함수 몸체를 빠져나간다.
  • 반환문은 return 키워드 뒤에 지정한 값을 반환한다.
  • 반환문을 생략할 수 있다. undefined 반환.
  • return 키워드와 반환값 사이에 줄바꿈이 있으면 세미콜론이 자동으로 추가된다.

다양한 함수의 형태

즉시실행함수

  • 함수의 정의와 함께 즉시 호출된다.
  • 한번만 호출되며 다시 호출할 수 없다.
  • 익명 즉시 실행 함수를 사용하는 것이 일반적이다.
  • 기명 즉시 실행 함수도 사용 가능하지만 함수 이름은 함수 몸체에만 참조할 수 있으므로 이름이 있다고 하더라도 다시 호출할 수는 없다.
  • 그룹 연산자(…)로 감싸주어야 한다. 그렇지 않으면 오류 발생.
  • 일반 함수처럼 값을 반환할 수 있고 인수를 전달할 수도 있다.
  • 혹시 있을 수도 있는 변수나 함수 이름이 충돌하는 것을 방지할 수 있다.
  • 함수 선언문이나 함수 표현식을 그룹 연산자로 감싸면 함수가 평가되어 함수 객체가 된다. 가장 일반적인 방식은 첫번째 방식이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function () {
  // ...
}());

(function () {
  // ...
})();

!function () {
  // ...
}();

+function () {
  // ...
}();

재귀 함수

  • 함수가 자기 자신을 호출하는 함수이다.
  • 자신을 무한히 호출하므로 호출을 멈출 수 있는 탈출 조건을 만들어두어야 한다.
  • 무한 반복에 빠질 수 있고 stack overflow 에러를 발생시킬 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
// 팩토리얼(계승)은 1부터 자신까지의 모든 양의 정수의 곱이다.
// n! = 1 * 2 * ... * (n-1) * n
function factorial(n) {
  // 탈출 조건: n이 1 이하일 때 재귀 호출을 멈춘다.
  if (n <= 1) return 1;
  return factorial(n - 1) * n;
}

console.log(factorial(0)); // 0! = 1
console.log(factorial(1)); // 1! = 1
console.log(factorial(2)); // 2! = 1 * 2 = 2
console.log(factorial(3)); // 3! = 1 * 2 * 3 = 6

중첩 함수

  • 함수 내부에 정의된 함수. 내부 함수라고도 한다.
  • 자신을 포함하는 외부 함수를 돕는 헬퍼 함수 역할을 한다.
  • 외부 함수의 변수에 접근할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function outer() {
  var x = 1;

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

  inner();
  console.log(x + y);
  // ReferenceError: y is not defined
}

outer();

콜백 함수

자바스크립트의 함수 매개변수로 함수를 전달할 수 있는데, 매개변수로 전달하려는 함수를 콜백함수라고 한다.

고차 함수: 매개변수를 통해 함수를 전달받거나 반환값으로 함수를 반환하는 함수를 고차 함수라 한다.

REFERENCE
https://poiemaweb.com

  • © 2020-2025 404 Not Found
  • Powered by Hexo Theme Ayer