함수란?

코드블록을 활용하여 하나의 실행 단위를 만든 것.

매개변수: 함수 내부로 전달되는 변수
인수: 함수를 호출할 때 함수 내부로 전달하는 변수
반환값: 함수 외부로 출력되는 변수

함수의 사용 이유

코드의 재사용을 위해서 사용한다.
재사용시 장점: 유지보수 편함, 실수를 줄여 신뢰성 높임.

함수 리터럴

함수는 객체 타입의 값이다. 따라서 함수 리터럴로 생성 가능하다.
함수는 함수 이름, 매개변수 목록, 함수 몸체로 이루어져 있다.

1
2
3

var 식별자 = function 함수이름(매개변수) {
  return 반환값;
};

• 함수 이름: 함수 내에서만 참조가능한 식별자이다. 생략 가능(리터럴 생성일 경우)하다.
• 매개변수 목록: 0개 이상, 쉼표로 순서를 구분하며 순서대로 할당 된다.
• 함수 몸체: 함수가 호출 됐을 때 실행될 문들.

함수 정의

• 함수를 만드는 방법은 함수 선언문, 함수 표현식, Function 생성자 함수가 있다.

1. 함수 선언문

   함수의 이름을 생략할 수 없다.

   1 2 3

   function 함수이름(매개변수) { return 반환값; } // 세미콜론을 쓰지 않는 이유는 표현식아닌 문이기 때문이다.

   함수 선언문은 표현식이 아닌 문이다. 함수식별자를 쓰지 않았지만 자바스크립트 엔진
   내부에서 암묵적으로 함수이름과 동일한 함수식별자를 생성한다.

2. 함수 표현식

   자바스크립트의 함수는 값이기 때문에 변수에 할당하거나 프로퍼티의 값이 될 수 있다.
   또한 배열의 요소도 될 수 있다. 이를 일급 객체라고 부른다.
   함수의 이름을 생략할 수 있다.

   1 2 3

   var 함수식별자 = function (매개변수) { return 반환값; }; // 세미콜론을 쓰는 이유는 값으로 평가 될 수 있는 표현식이기 때문이다.

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

   • 함수 선언문 : 런타임 이전에 선언과 할당이 이뤄져 호이스팅 발생

   • 함수 표현식 : 런타임 이전에는 선언만, 런타임 때 할당이 이뤄져 호이스팅 없음

4. Function 생성자 함수

   Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하여 생성한다.
   클로저를 생성하지 않는다.

5. 화살표 함수

   프로퍼티가 없으며 arguments 객체를 생성하지 않는다.

   1	const 함수식별자 = (매개변수) => 실행문;

함수 호출

1. 매개변수와 인수

매개변수를 통해 인수를 전달한다.
인수는 값으로 평가될 수 있는 표현식이어야 하며 개수와 타입 제한이 없다.

매개변수의 스코프는 함수 내부이다.

2. 인수 확인

매개 변수의 수보다 인수의 숫자가 적을 경우 매개 변수 전체에 값이 할당 될 수 없다.
따라서 인수의 개수나 타입을 확인할 필요가 있다.

다음과 같이 인수의 타입과 개수가 다른지 확인할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 타입 확인
function concatString(x, y) {
  if (typeof x !== "string" || typeof y !== "string")
    throw new TypeError("문자열이 아닌 값이 옴");

  return x + y;
}
console.log(concatString("안녕", "하세요")); // 안녕하세요

// 할당 되지 않은 값 처리
function concatString(x, y, z) {
  x = x || "";
  y = y || "";
  z = z || "";

  return x + y + z;
}

ES6에선 다음과 같이 쓸 수 있다.

1
2
3

function concatString(x = "", y = "", z = "") {
  return x + y + z;
}

3. 반환문

return 키워드와 반환값을 사용하여 결과를 밖으로 뺄 수 있다.
반환문 이후에 쓰인 코드는 실행되지 않는다. (조건을 통한 반환 제외)

다양한 함수의 형태

1. 즉시실행 함수

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

1
2
3
4
5

(function () {
  var x = 10;
  var y = 100;
  return y / x;
})();

()로 묶는 이유는 함수를 평가하여 함수 객체를 만들기 위해서다.

2. 재귀 함수

자기 자신을 호출하는 함수이다.

3. 중첩 함수

함수 내부에서 정의된 함수를 중첩함수라고 한다.
호이스팅으로 혼란이 생길 수 있으므로 사용을 지양하는 것이 좋다.

4. 콜백 함수

매개변수를 통해 전달되는 함수를 콜백 함수라고 한다.
이때 함수를 전달 받은 함수를 고차 함수라고 한다.
고차 함수는 콜백 함수의 호출 시점을 결정하여 호출할 수 있다.
콜백 함수는 일반적으로 비동기 처리를 위해 사용된다.

1
2
3
4

setTimeout(function () {
  console.log("1초 경과");
}, 1000);
console.log("바로 실행됨");

setTimeout은 비동기적 함수로 위의 코드를 실행시키면

바로 실행됨
1초 경과

순으로 출력된다.

setTimeout이 끝나길 기다린 것이 아니라 다음 코드가 바로 실행 되었다.
따라서 1초 후에 작동될 기능을 작성하기 위해 callback 함수를 사용하였다.

5. 순수 함수와 비순수 함수

• 순수 함수 : 외부 상태에 의존하지 않고 변경시키지도 않는다.

• 비순수 함수 : 외부 상태에 의존하고 변경시키기도 한다.

  
  

참고자료: poiemaweb.com

• ← Previous Post
• Next Post →