자바스크립트에서 가장 중요한 개념은 함수.
함수를 생성하는 방법은 3가지
함수 선언문
함수 표현식
Function() 생성자 함수
4-1
// add() 함수 선언문
function add(x, y) {
return x + y;
}
console.log(add(3, 4));
7함수 선언문 방식으로 함수 생성
*함수 선언문 방식은 반드시 함수명이 정의되어 있어야 한다
4-2
// add()함수 표현식
var add = function(x, y) {
return x + y;
};
var plus = add;
console.log(add(3,4));
console.log(plus(3,4));
7
7함수 표현식 방식으로 함수 생성
add는 함수를 참조하는 변수, 함수 이름이 아니다.
함수 이름이 선택사항이며, 보통 사용하지 않는다. =익명 함수
add->익명 함수
plus->익명 함수
4-3
var add = function sum(x,y) {
return x + y;
};
console.log(add(3,4));
console.log(sum(3,4));
7
error함수 표현식에서 사용된 함수 이름은 외부 코드에서 접근 불가능하다. (정의되어 있지 않음)
4-4
var factorialVar = function factorial(n) {
if (n<=1) {
return 1;
}
return n * factorial(n-1);
};
console.log(factorialVar(3));
console.log(factorial(3));
6
errorfactorial은 함수명 이므로 함수 외부에서 호출 불가능 하다.
4-5
var add = new Function('x','y', 'return x + y');
console.log(add(3,4));
7Function 생성자 함수를 사용한 함수 생성
*자주 사용하지 않는다고 한다.
4-6
console.log(add(2,3));
// 함수 선언문 형태로 add() 함수 정의
function add(x,y) {
return x + y;
}
console.log(add(3,4));
5
7add(2,3)에선 add함수가 정의되지 않았지만 정상적으로 출력이 되었다.
함수 선언문 형태로 정의한 함수는 위치한 코드에 상관없이 유효 범위가 맨 처음부터 시작하기 때문이다. = 함수 호이스팅
* 이러한 특성 때문에 함수 표현식만 사용할 것을 권장한다고 한다.
4-7
console.log(add(2,3));
// 함수 표현식 형태로 add() 함수 정의
var add = function (x,y) {
return x + y;
}
console.log(add(3,4));
error
7add함수가 함수 표현식 형태로 정의되어 있어 호이스팅이 일어나지 않는다.
4-8
function add(x,y) {
return x + y;
}
// add() 함수 객체에 result, status 프로퍼티 추가
add.result = add(3,2);
add.status = 'OK';
console.log(add.result);
console.log(add.status);
5
OK자바스크립트에선 함수도 객체이므로 프로퍼티들을 가질 수 있다.
add 함수 객체 ( [[Code]]->return x + y, result->5, status->'OK' )
4-9
// 변수에 함수 할당
var foo = 100;
var bar = function () {return 100;};
console.log(bar());
// 프로퍼티에 함수 할당
var obj = {};
obj.baz = function () {return 200;};
console.log(obj.baz());
100
2004-10
// 함수 표현식으로 foo() 함수 생성
var foo = function(func) {
func(); //인자로 받은 func() 함수 호출
}
// foo() 함수 실행
foo(function() {
console.log('자바스크립트');
}
);
자바스크립트익명 함수를 func 인자로 넘긴 후 익명 함수가 foo() 함수 내부에서 호출 된 것을 확인했다.
4-11
// 함수를 리턴하는 foo() 함수 정의
var foo = function() {
return function() {
console.log('자바스크립트');
};
};
var bar = foo();
bar();
자바스크립트함수는 다른 함수의 리턴값으로 활용 가능.
함수 자체가 값으로 취급되기 때문
4-13
function func0() {
}
function func1(x) {
return x;
}
function func2(x,y) {
return x+y;
}
function func3(x,y,z) {
return x+y+z;
}
console.log('func0.length - ' + func0.length);
console.log('func1.length - ' + func1.length);
console.log('func2.length - ' + func2.length);
console.log('func3.length - ' + func3.length);
func0.length - 0
func1.length - 1
func2.length - 2
func3.length - 3함수 객체의 length 프로피티는 모든 함수가 가져야 하는 표준 프로퍼티다. (함수가 정상적으로 실행될 때 기대되는 인자의 개수)
4-14
function myFunction() {
return true;
}
console.dir(myFunction.prototype);
console.dir(myFunction.prototype.constructor);
{}
[Function: myFunction]4-16
(function (name) {
console.log('즉시 실행 함수 ' + name);
})('foo');
즉시 실행 함수 foo함수를 정의함과 동시에 바로 실행하는 함수를 즉시 실행 함수라고 한다.
4-18
// parent() 함수 정의
function parent() {
var a = 100;
var b = 200;
// child() 내부 함수 정의
function child() {
var b = 300;
console.log(a);
console.log(b);
}
child();
}
parent();
child();
100
300
error함수 코드 내부에 다시 함수 정의가 가능하다. (내부 함수)
내부 함수(child)는 자신을 둘러싼 외부 함수(parent)의 변수에 접근 가능하다.
child 함수는 부모 함수(parent) 밖에서 호출 불가능
4-19
function parent() {
var a = 100;
// child 내부 함수
var child = function() {
console.log(a);
}
// child 함수 반환
return child;
}
var inner = parent();
inner();
100함수 외부에서 내부 함수를 호출하는 방법
부모 함수에서 내부 함수를 외부로 리턴하면 부모 함수 밖에서도 호출이 가능하다.
