안녕하세요. Tay 입니다.
개발하면서 가장 중요한 함수에 대해서 설명하겠습니다.
함수
일급 객체이며, 특정 기능을 제공하기위해 작성된 코드들을 정의 한 것
함수 생성 방법 3가지
- 함수 선언문 function statement
- 함수 표현식 function expression
- Function( ) 생성자 함수
함수 선언문이나 표현식 방법은 함수 리터럴 방식을 통해서 함수를 생성한다.
함수 리터럴
function add(x, y){
return x + y;
}리터럴은 값 자체를 의미하지만, 함수에서 리터럴은 데이터 표기 방식으로 볼 수 있다. (=리터럴 표기법)
위의 함수 생성방법 3가지로 여러 함수를 만들면서 배워보도록 하겠다.
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="function.js"></script>
</body>
</html>
함수 선언문 방식
반드시 함수명이 정의되어있어야 한다.
2) function.js
// function statement
function add(x, y) {
return x + y;
}
console.log(add(5, 2));
- add 는 함수 선언문 방식으로 생성된 함수이다.
- 함수명이 반드시 존재하며, console 에서 add 로 호출하고있다.
함수 표현식 방식 - 익명 함수(anonymous)
생성한 함수를 변수에 할당하여서 함수를 생성하는 방식
함수 명은 선택사항이며, 함수 명이 없는 경우 익명 함수 라고 한다.
- function.js
// function expression (anonymous)
let sub = function(x, y) {
return x - y;
};
var minus = sub;
console.log(sub(5, 2));
console.log(minus(5, 2));sub 변수에 function 을 생성하여 할당했다. 이때 sub 변수는 생성한 함수를 참조한다.
이러한 방식을 함수 표현식 방식으로 함수 생성한다 라고 하며, 함수가 할당된 변수를 함수 변수라고 한다.
결과 :
- 위 예제들의 결과값이다. 위에서 아래 순서대로 add , sub , minus 의 결과다.
- 함수 표현식으로 생성된 함수를 호출하려면 함수 변수를 사용해야한다. sub(5, 2)
- 함수 변수 sub 은 함수의 참조값을 가지므로 또 다른 변수 minus 에 그 값을 그대로 할당할 수 있다.
그러하여 sub 과 minus 은 같은 코드를 수행한다.
함수 표현식 방식 - 기명 함수(named)
함수 이름이 포함된 함수 표현식
- function.js
// function expression (named)
var add = function sum(x, y) {
return x + y;
};
console.log(add(5, 2));
console.log(sum(5, 2));add 라는 함수 변수에 sum 함수를 할당하고, add 와 sum 을 이용하여 콘솔에 실행해봤다.
결과 :
add는 정상적으로 작동하고, sum is not defined 이다.
이유 : 함수 표현식에서 사용된 함수 이름이 외부에서 접근 불가능하기 때문이다.
※ 함수 표현식에서 사용된 함수 이름은 함수 내부에서 재귀호출이나 디버거 등이 함수를 구분할때 사용
기명 함수의 활용 예시 :
var factorialVar = function factorial(n) {
if (n <= 1) {
return 1;
}
return n * factorial(n - 1);
};
console.log(factorialVar(3));
console.log(factorial(3));factorial 함수안에 factorial 함수를 재귀적으로 호출했다.
콘솔 1번과 2번의 결과를 확인해보자.
결과 :
- 로그 1번은 factorialVar 함수 변수를 통해서 실행한 결과
- 로그 2번은 factorial 함수를 호출하여 실행한 결과
중요!
※ 실제로 기명함수의 함수내에서 재귀적인 호출은 가능하나 외부에서 호출은 불가능한 것을 확인했다.
※ 함수 선언문으로 생성된 함수는 자바스크립트 엔진이 자동으로 함수 이름과 같은 함수 변수를 만들어서 할당한다. 그러하여 함수 이름으로 호출이 가능한 것 같으나 실제로는 함수 변수를 호출한다.
Function( ) 생성자 함수 생성 방식
함수내의 function 생성자 함수를 통해 객체를 생성한다.
- function.js
// function ()
var fncAdd = new Function("x", "y", "return x+y");
console.log(fncAdd(3, 4));- new function 키워드
- 매개변수 x , y
- 실행 될 코드 return x+y
function 생성자 함수를 사용하는 방법이다.
※ 위 깃허브 링크에서 전체 코드를 확인할 수 있다. ※
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'JavaScript > Basic-Javascript' 카테고리의 다른 글
| 자바스크립트 정리하며 배우기[17] - 일급객체 함수 활용 방법 (0) | 2020.01.28 |
|---|---|
| 자바스크립트 정리하며 배우기[16] - 함수 호이스팅(Hoisting) 과 화살표(Arrow) 함수 (0) | 2020.01.28 |
| 자바스크립트 정리하며 배우기[14] - 연산자(Operators) (0) | 2020.01.21 |
| 자바스크립트 정리하며 배우기[13] - 배열(array) length 와 배열 메소드 push , pop, delete 요소 삭제 (0) | 2020.01.08 |
| 자바스크립트 정리하며 배우기[12] - 배열 개념 및 특성, 배열 선언 방법, 요소 생성, 프로퍼티 생성과 삭제 (0) | 2020.01.07 |
