Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

melius

[JS] 함수 본문

JavaScript

[JS] 함수

melius102 2019. 12. 30. 13:48

1. 함수(Function)

1) 매개변수(Parameter)

함수선언(Function Statement)시에 사용되는 변수로 함수의 입력을 받는 변수

 

2) 인수(Argument)

함수호출(Function Call)시에 함수의 매개변수로 전달되는 입력값

function add(x, y) {	// parameters: x, y 
	return x + y;
}

console.log(add(1, 2));	// arguments: 1, 2

* 함수는 1급 객체(first class object)이다.

- 변수에 할당할 수 있다.

- 함수의 인자로 사용할 수 있다.

- 함수의 리턴값으로 사용할 수 있다.

 

2. 정의방식

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

 

1) 함수 선언문(Declaration, Statement)

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

function sum(num1, num2) {	// parsetime
    return num1 + num2;
}

* 함수 선언문으로 정의된 함수는 호이스팅(Hoisting)됨

 

2) 함수 표현식(Expression)

var add = function sum(num1, num2) {	// runtime
    return num1 + num2;
};	// 표현식은 ';' 사용권장

var zero = function () {
    return 0;
};

console.log(add(zero(), 1));
console.log(sum(zero(), 1)); // ReferenceError, 외부코드에서 접근 불가
// 재귀함수호출(Recursive Function Call)에는 사용가능

* 익명함수(anonymous function, 이름없는 함수)는 표현식 형태로 사용가능

* 익명함수는 constructor 속성값이 다르다.

 

3) 화살표 함수 표현식(Arrow Function Expression, ES6)

var fn1 = (prm1, prm2) => { console.log(prm1); return prm2; };

// one parameter
var fn2 = prm1 => { console.log(prm1); return prm1; };

// one expression
var fn3 = prm1 => prm1; // do not use {} (wrong { prm1; })

* 화살표 함수는 표현식 형태로 사용가능

 

4) Function 생성자 함수를 이용한 함수정의

내장객체 Function 생성자 함수를 이용하여 아래와 같이 함수를 정의할 수 있다.

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

 

3. 주요특성

1) 내부함수(Inner or Nested Function)

함수 내부에 정의된 함수

자신을 정의한 외부함수(Outer or Containing Function) 내부에서만 호출가능

외부함수 내에서 호이스팅 발생

outFun(2, 3); 			// hoisting

function outFun(x, y) {
    console.log(innerFun());	// hoisting

    function innerFun() {
        return x * y;
    }
}

// innerFun(); 			// ReferenceError

 

2) 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)

함수를 정의하고 바로 호출함

var val = function () { return "IIFE"; }();
console.log(val);

표현식(Expression)이므로 반환값이 있다.

 

3) arguments 객체

함수 내부에서 접근가능한 객체로서, 함수에 전달된 인수의 값을 가지고 있는 유사배열(Array-like) 객체

* 유사배열(Array-like) 객체는 length 프로퍼티는 있으나, 배열 객체가 아님

function fun(x) {
    console.log(x);
    console.log(arguments.length);
    console.log(arguments[0]);
    console.log(arguments[1]);
}

fun(1);         // 1, 1, 1, undefined
fun(1, 2, 3);   // 1, 3, 1, 2

 

4) 함수호출

함수호출(Function Call)은 표현식이므로, 반환값이 있다.

함수에 리턴문이 없으면 undefined를 반환한다.

* 표현식(expression)은 문장(statement)에 속한다.

 

'JavaScript' 카테고리의 다른 글

[JS] 프로토타입  (0) 2020.01.01
[JS] this  (0) 2020.01.01
[JS] 객체  (0) 2019.12.30
[JS] 연산자  (0) 2019.12.25
[JS] 변수와 자료형  (0) 2019.12.24
Comments