[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체

[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체

JS 문법정리 > 함수(1)

 

---

 

 

Javascript 는 다중 프로그래밍 패러다임이다.

 

패러다임의 종류

1) 절차적 프로그래밍
    - 조건문
    - 분기분
    - 반복문
    - 프로시져
2) 함수형 프로그래밍
    - 함수는 1급 객체
    - 고차 함수
    - 익명 함수
3) 객체지향 프로그래밍
    - 객체 생성
    - 객체 상속
    - 다형성

 

Javascript 에서는 모든 것을 함수가 책임진다.

 

---

함수 선언 방법

함수를 선언하는 방법에는

함수 선언식, 함수 표현식, Function 생성자 함수 총 3가지 방법이 있다.

 

1. 함수 선언식 (function statement)

function name(arg) {
    // ...
    return "반환값";
}

- JS에서는 함수도 일반 객체처럼 값으로 취급되기 때문에, 함수 리터럴 을 이용해 함수를 생성할 수 있음

- 반드시 함수명이 정의되어 있어야 함

 

2. 함수 표현식 (function Expression)

// add() 함수 표현식
var add = function (x, y) {
    return x + y;
}

var plus = add;

add(3, 4);
plus(5, 6);

- JS 에서는 함수가 일급 객체 이므로, 숫자나 문자열처럼 변수에 할당하는 것이 가능

- 할당한 변수는 함수 리터럴로 생성한 함수를 참조하는 함수 변수이고, 함수 이름이 아님

- 함수 변수 add 는 함수의 참조값을 가지고 있으므로, 또 다른 변수 plus 에도 그 값을 할당 가능

 

2-1 익명함수와 기명함수

var add = function sum(x, y) {
    return x + y;
};

console.log(add(2, 3));  // (출력값) 5
console.log(sum(3, 4));
// (출력값) Uncaught ReferenceError: sum is not defined 에러 발생

- sum() 함수 호출시 에러가 발생 → 함수 표현식에서 사용된 함수 이름이 외부 코드에서 접근 불가능

- 함수 표현식에서 사용된 함수 이름이 사용되는 경우

    - 정의된 함수 내부에서 해당 함수를 재귀적으로 호출 할 때

    - debugger 에서 함수를 구분할 때

 

3. Function() 생성자 함수

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

// 예제
var add = new Function('x', 'y', 'return x + y');

console.log(add(3, 4));    // (출력값) 7

- arg1, arg2, ..., argN : 함수의 매개 변수

- functionBody : 함수가 호출될 때 실행될 코드를 포함한 문자열

    - js 에서는 실행소스 코드를 string 형태로 불러와 실행이 가능하다 → 런타인 코드평가

 

@. 화살표 함수 (Syntax Sugar)

const func = (arg) => {
    // ...
    return '반환값';
}

// 축약 가능
const func = arg => '반환값';

- 여러가지 선언 방식이 있지만, 일종의 Syntax Sugar

- 결론적으로 모두 Function 객체의 인스턴스이다. (but 동작 방식에는 차이가 있음)

 

---

함수 호이스팅 (Function Hoisting)

함수 선언 3가지 방법마다 동작방식의 차이가 있음

이 때문에 더글라스 크락포드의 [자바스크립트 핵심 가이드] 에서는  함수 표현식만 사용할 것을 권장하고 있다.

 

add(2, 3);      // 5

// 함수 선언문 형태로 add() 함수 정의
function add(x, y) {
    return x + y;
}

add(3, 4);     // 7

- 첫번째 줄에서 add 함수가 정의되지 않았음에도 에러가 나지 않고, 호출 가능 

- 즉, 함수 선언식 형태에 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작된다. 이것을 호이스팅 이라고 부른다.

 

add(2, 3);      // uncaught type error

// 함수 선언문 형태로 add() 함수 정의
var add = function (x, y) {
    return x + y;
}

add(3, 4);     // 7

- 함수 표현식 형태 정의에서는 호이스팅이 일어나지 않는다.

 

호이스팅이 발생하는 원인을 변수 생성 과 초기화의 작업이 분리되서 일어나기 때문

이는 실행 컨텍스트와 클로저 포스팅 에서 다시 다룰 예정.

 

---

일급 객체로서의 함수, 함수도 "객체" 다

자바스크립트에서 함수도 객체 이다.

즉, Object 를 상속하는 객체이므로, 평범한 객체가 가진 모든 성질을 가지고 있다.

 

- 리터럴에 의해 생성 가능

- 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능

- 함수를 반환(return) 할 수 있음

- 함수를 인자(arg)로 전달 가능

- 동적으로 프로퍼티를 생성 및 할당 가능

 

이와 같은 특징이 있으모로 자바스크립트에서는 함수를 일급(First Class) 객체 라고 부른다.

// 함수 선언식 방식
function add(x, y) {
    return x + y;
}

// 객체 생성
var obj = {}

// add() 함수 객체에 프로퍼티 추가
add.result = add(3, 2);
add.status = 'OK';

// obj 객체에 프로퍼티 추가
obj.method = add;

console.log(add.result);    // (출력값) 5
console.log(add.status);    // (출력값) 'OK'

console.log(obj.method(2, 9))    // (출력값) 11

var foo = function(func) {
    // 인자로 전달받은 func() 함수 호출
    func(3,6);
};

foo(add);  // 9