함수 정의
자바스크립트에서 함수를 생성하는 3가지 방법
- 함수 선언문
- 함수 표현식
- Function() 생성자 함수
1. 함수 리터럴
function add(x, y){
return x + y;
}
함수명은 선택사항
2. 함수 선언문 방식으로 함수 생성하기
function add(x, y){
return x + y;
}
// 자바스크립트 엔진에 의해 다음과 같은 함수 표현식 형태로 바뀐다.
var add = function add(x, y){
return x + y;
}
반드시 함수명이 정의되어 있어야 한다
3. 함수 표현식 방식으로 함수 생성하기
var add = function (x, y){
return x + y;
};
var plus = add;
console.log(add(3,4)); // 7
console.log(plus(5,6)); // 11
익명 함수를 이용한 함수 표현식 방법
var add = function sum(x, y){
return x + y;
};
console.log(add(3,4)); // 7
console.log(sum(5,6)); // Uncaught ReferenceError : sum is not defined 에러 발생
기명 함수 표현식
함수 이름을 이용하면 재귀적인 호출이 가능하다.
var factorialVar = function factorial(n) {
if(n <= 1){
return 1;
}
return n * factorial(n-1);
};
4. Function() 생성자 함수를 통한 함수 생성하기
var add = new Function('x', 'y', 'return x+y');
console.log(add(3,4)); // 7
5. 함수 호이스팅
함수 표현식을 사용해서 작성할 것을 권장
이유는 함수 호이스팅 때문이다.
// 함수 선언문 형태로 add() 함수 정의
add (2,3); // 5
function add(x, y){
return x + y;
}
add (3,4); // 7
함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작한다.
// 함수 표현식 형태로 add() 함수 정의
add (2,3); // uncaught type error
var add = function (x, y){
return x + y;
}
add (3,4); // 7
함수 표현식 형태로 정의되어 있을 때는 호이스팅이 일어나지 않는다.
add에서는 함수가 생성되기 전이므로, uncaught type error가 일어난다.
원인은 자바스크립트의 변수 생성과 초기화 작업이 분리되어 진행되기 때문이다.
함수 객체 : 함수도 객체다
1. 자바스크립트에서는 함수도 객체다
function add(x, y){
return x + y;
}
add.result = add(3,2);
add.status = 'OK';
함수도 객체이므로 함수 자체가 프로퍼티들을 가질 수 있다.
2. 자바스크립트에서 함수는 값으로 취급된다.
자바스크립트에서는 함수를 일급 객체라고 부른다.
자바스크립트 함수는 다음과 같은 동작이 가능하다.
- 리터럴에 의해 생성
- 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능
- 함수의 인자로 전달 가능
- 함수의 리턴값으로 리턴 가능
- 동적으로 프로퍼티를 생성 및 할당 가능
2.1. 변수나 프로퍼티의 값으로 할당
// 변수에 함수 할당
var bar = function () {return 100;};
console.log(bar()); // 100
// 프로퍼티에 함수 할당
var obj = {};
obj.baz = function () {return 200;}
console.log(obj.baz()); // 200
2.2. 함수 인자로 전달
var foo = function(func) {
func(); // 인자로 받은 func() 함수 호출
};
// foo 함수 실행
foo(function() {
console.log('Function can be used as the argument.');
});
2.3. 리턴값으로 활용
// 함수를 리턴하는 foo() 함수 정의
var foo = function() {
return function() {
console.log('this function is the return value.')
};
};
var bar = foo();
bar(); // this function is the return value.
3. 함수 객체의 기본 프로퍼티
'개발 > JavaScript' 카테고리의 다른 글
JavaScript] 자바스크립트 뿌시기 (프로토타입) (0) | 2021.01.05 |
---|---|
JavaScript] 자바스크립트 뿌시기 (참조 타입의 특성) (0) | 2021.01.05 |
JavaScript] 자바스크립트 뿌시기 (객체 타입) (0) | 2021.01.04 |
JavaScirpt] 자바스크립트 뿌시기 (핵심 개념, 데이터 타입과 연산자) (0) | 2020.12.28 |
JavaScript] 데이터타입 (0) | 2020.09.22 |