허쨩의 기록 프로젝트
Modren JS - 함수 본문
함수 : 어떠한 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드블록
자바스크립트의 함수는 객체(일급객체, First-class object)임
일급객체의 특징
- 무명의 리터럴로 표현이 가능
- 변수나 자료구조(객체,배열...)에 저장 가능
- 함수의 파라미터로 전달 가능
- 반환값(return value)로 사용 가능
// 1. 무명의 리터럴로 표현이 가능하다.
// 2. 변수나 자료 구조에 저장할 수 있다.
var increase = function (num) {
return ++num;
};
var decrease = function (num) {
return --num;
};
var predicates = { increase, decrease };
// 3. 함수의 매개변수에 전달할 수 있다.
// 4. 반환값으로 사용할 수 있다.
function makeCounter(predicate) {
var num = 0;
return function () {
num = predicate(num);
return num;
};
}
var increaser = makeCounter(predicates.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2
var decreaser = makeCounter(predicates.decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2
함수를 정의하는 방식
- 함수 선언문
- 함수 표현식
- Function 생성자 함수
1. 함수 선언문
// 함수 선언문
function square(number) {
return number * number;
}
2. 함수 표현식
// 함수 표현식
var square = function(number) {
return number * number;
};
함수명을 써도 되지만 함수명은 생략하는 것이 일반적임. 함수를 호출할때는 변수명으로 호출함.
3. Function 생성자 함수
//문법
new Function(arg1, arg2, ... argN, functionBody)
var square = new Function('number', 'return number * number');
console.log(square(10)); // 100
이런 방식은 보통 사용하지 않음.
★함수또한 호이스팅이 발생하는데,
1. 함수선언문은 함수호이스팅이 발생 -> 함수호출을 함수생성보다 먼저해도 에러 발생하지 않음.
2. 함수표현식은 함수호이스팅이 아닌 변수 호이스팅이 발생함 -> 함수호출을 함수 생성보다 먼저하면 TypeError가 발생함.
Call-by-value / Call-by-reference
function changeVal(primitive, obj) {
primitive += 100;
obj.name = 'Kim';
obj.gender = 'female';
}
var num = 100;
var obj = {
name: 'Lee',
gender: 'male'
};
console.log(num); // 100
console.log(obj); // Object {name: 'Lee', gender: 'male'}
changeVal(num, obj);
console.log(num); // 100
console.log(obj); // Object {name: 'Kim', gender: 'female'}
반환값
- return 키워드는 함수를 호출한 코드(caller)에게 값을 반환할 때 사용한다.
- 함수는 배열 등을 이용하여 한 번에 여러 개의 값을 리턴할 수 있다.
- 함수는 반환을 생략할 수 있다. 이때 함수는 암묵적으로 undefined를 반환한다.
- 자바스크립트 해석기는 return 키워드를 만나면 함수의 실행을 중단한 후, 함수를 호출한 코드로 되돌아간다. 만일 return 키워드 이후에 다른 구문이 존재하면 그 구문은 실행되지 않는다.
함수의 형태
1. 즉시 실행 함수
함수의 정의와 동시에 실행.(IIFE, Immediately Invoke Funciton Expresstion) 최초 한번만 실행. 다시 호출할 수 없음.
즉시 실행 함수는 ()소괄호로 감싸준다.
(function () {
var foo = 1;
console.log(foo);
}());
var foo = 100;
console.log(foo);
2. 내부 함수
function parent(param) {
var parentVar = param;
function child() {
var childVar = 'lee';
console.log(parentVar + ' ' + childVar); // Hello lee
}
child();
console.log(parentVar + ' ' + childVar);
// Uncaught ReferenceError: childVar is not defined
}
parent('Hello');
내부함수는 부모함수의 변수에 접근할 수 있음. 부모함수는 내부함수의 변수에 접근할 수 없음.
function sayHello(name){
var text = 'Hello ' + name;
var logHello = function(){ console.log(text); }
logHello();
}
sayHello('lee'); // Hello lee
logHello('lee'); // logHello is not defined
내부함수는 부모함수의 외부에서 접근할 수 없음.
3. 재귀함수
자기자신을 호출하는 함수
무한히 연쇄 호출함으로 탈출 조건을 반드시 만들어야 함. 그렇지 않으면 stackoverflow 에러가 발생함.
// 피보나치 수열
// 피보나치 수는 0과 1로 시작하며, 다음 피보나치 수는 바로 앞의 두 피보나치 수의 합이 된다.
// 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, ...
function fibonacci(n) {
if (n < 2) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(0)); // 0
console.log(fibonacci(1)); // 1
console.log(fibonacci(2)); // 1
console.log(fibonacci(3)); // 2
console.log(fibonacci(4)); // 3
console.log(fibonacci(5)); // 5
console.log(fibonacci(6)); // 8
4. 콜백함수
함수를 명시적으로 호출하는 방식이 아닌 특정 이벤트가 발생하였을 때 시스템에 의해 호출되는 함수.
대표적인 예로는 이벤트 핸들러 처리.
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click me</button>
<script>
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('button clicked!');
});
</script>
</body>
</html>
'신나는 JavaScript' 카테고리의 다른 글
Modren JS - 프로토타입 (1) | 2023.01.17 |
---|---|
Modren JS - 타입 체크 (2) | 2023.01.16 |
Modren JS - 객체와 변경불가성(Immutability) (0) | 2023.01.15 |
Modren JS - 객체 (0) | 2023.01.10 |
Modren JS - 타입변환 (0) | 2023.01.08 |