function

목차

1. 함수란?
2. 함수 필요한 이유?
3. 함수 종류
4. 함수 매개변수
5. 함수와 메서드의 차이

1. 함수란?

함수란 자신의 외부(재귀 함수의 경우 스스로) 코드가 ‘호출’할 수 있는 하위 프로그램 프로그램과 마찬가지로, 함수 역시 명령문의 시퀀스로 구성된 함수 본문을 가집니다. 함수에 값을 ‘전달’하면, 함수는 값을 ‘반환’ 합니다.

JavaScript의 함수는 다른 모든 객체처럼 속성과 메서드를 가질 수 있으므로 일급(first-class) 객체입니다. 다른 객체와 함수를 구별하는 것은, 함수는 호출할 수 있다는 점입니다. 간단히 말해, 함수는 function 객체입니다.

2. 함수 필요한 이유?

• 재사용성 : 같은 작업을 여러 곳에서 반복해야 할 때 함수로 만들어 필요할 때마다 호출하여 사용하면 편리하다.
• 가독성 : 함수의 이름만 보고도 어떤 기능을 수행하는지 유추할 수 있다.
• 모듈화 : 유지보수나 버그 발생 시 편리하다.

3. 함수 종류

함수 선언(function 명령문)

function name([param[, param[, ... param]]]) {
    statements
}

name

함수의 이름.

param

함수에 전달할 인수의 이름.

statements

함수 본문을 구성할 명령문.

함수 표현식(function 표현식)

함수 표현식은 함수 선언과 비슷하며, 구문도 같습니다.

해당 표현식을 사용하면, ‘유명 함수’ 표현식 or ‘익명 함수’ 표현식으로 정의 할 수 있습니다.

function [name]([param[, param[, ... param]]]) {
   statements
}

name

함수 이름. 생략할 경우 익명 함수가 됩니다.

param

함수에 전달할 인수의 이름.

statements

함수 본문을 구성할 명령문.

//익명 함수 표현식의 예시
var myFunction = function() {
    statements
}
//유명 함수 표현식
var myFunction = function namedFunction(){
    statements
}

즉시 실행 함수 표현식

한 번만 사용하는 함수의 경우 자주 사용하는 패턴으로 IIFE (Immediately Invokable Function Expression, 즉시 실행 함수 표현식)가 있습니다

(function() {
    //statements
})();

IIFE는 선언 즉시 실행하는 함수 표현식입니다.

IIFE를 어디서 사용해야 되는가?

전역 영역(Global Scope)를 오염시키지 않기 사용되며, 변수를 전역으로 선언되는 것을 피하기 위해서 사용 됩니다.

단점은 잘못 사용시에는 성능문제와 메모리 문제가 발생할 수 있습니다.

화살표 함수 표현식

([param[, param]]) => {
   statements
}

param => expression

param

인수의 이름. 인수를 하나도 받지 않을 경우 ()로 표시해야 합니다.

하나의 인수만 받는 경우 item => 1과 같이 괄호를 생략할 수 있습니다.

statements 또는 expression

함수 본문. 다수의 명령문으로 구성할 경우 중괄호로 묶어야 합니다.

단일 표현식만으로 구성할 경우 중괄호로 묶지 않아도 되며, 이 때는 해당 표현식을 함수 반환 시 사용합니다.

function 생성자

다른 모든 객체처럼, new 연산자를 사용해서 Function 객체를 생성

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

arg1, arg2, ... argN함수가 형식 매개변수로 사용할 0개 이상의 이름. 모두 올바른 JavaScript 식별자, 또는 쉼표로 구분한 식별자 목록이어야 합니다.

(“x”, “theValue”, “a,b” 등)functionBody함수 본문으로 사용할 JavaScript 명령문을 담은 문자열.

Function 생성자를 함수로 호출(new 연산자 없이 호출)하는 것도 동일하게 동작

4. 함수 매개변수

매개변수 기본 값

매개변수 기본 값을 사용하면, 값을 전달하지 않았거나 undefined를 전달한 경우 형식 매개변수를 기본 값으로 초기화할 수 있습니다. 매개변수 기본 값에서 자세한 정보를 확인

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// Expected output: 10

console.log(multiply(5));
// Expected output: 5

나머지 매개변수

나머지 매개변수 구문은 정해지지 않은 임의 수의 매개변수를 배열로서 나타낼 수 있습니다. 나머지 매개변수에서 자세한 정보를 확인

function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

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

console.log(sum(1, 2, 3, 4));
// Expected output: 10

arguments 객체

arguments

 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체

function func1(a, b, c) {
  console.log(arguments[0]);
  // Expected output: 1

  console.log(arguments[1]);
  // Expected output: 2

  console.log(arguments[2]);
  // Expected output: 3
}

func1(1, 2, 3);

arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이며,

arguments는 사실 배열은 아니다. 실제로는 arguments 객체의 인스턴스다.

5. 함수와 메서드의 차이

• 함수

  특정 작업을 수행, 전역, 지역이던 독립된 기능을 수행하는 단위

• 메서드

  클래스, 구조체, 열거형에 포함(종속)되어 있는 함수를 메서드, 다른 말로는 클래스 함수

단순한 예시로는 밑에 있는 소스 참조

//함수
function someFunction(){
	
}
someFunction();
//메서드
class someClass{
    function someMethod(){
        //some code
    }
}
someClass.somMethod();

• 차이점 정리

참조 사이트

• 함수
• 블로그 [JavaScript]함수와 메서드(Function and Method)
• MDN rguments 객체
• IIFE 이해하기
• 추가 종류
• 블로그1 생성자 함수
• MDN function() 생성자