Javascript : 반복문 - 일급 객체로서의 함수(First-Class Object)
일급객체(First-Class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가르킨다.
사용 시 다른 요소들과 아무런 차별이 없다는 것을 뜻한다.
- 모든 일급 객체는 변수나 데이터를 담을 수 있어야 한다.
- 모든 일급 객체는 함수의 파라미터로 전달할 수 있어야 한다.
- 모든 일급 객체는 함수의 리턴값으로 사용할 수 있어야 한다.
변수에 함수에 할당할 수 있다.
- 함수가 마치 변수나 데이터에 담아 값으로 취급된다.
- 함수가 나중에 호출하면 사용될 수 있도록 조치되었다.
1
2
3
4
5
6
7
|
const sayHello = function (){
console.log('hello!');
}
// 옆으로 풀어서 쓰면..
const sayHello = function () { console.log('hello!'}
|
cs |
함수의 파라미터(인자)로 다른 함수에 전달 할 수 있어야 한다.
- 콜백함수(매개함수) 형태로 자유롭게 전달이 가능하다.
- 고차함수 함수를 인자로 받거나 반환(return)
1
2
3
4
5
6
7
8
9
10
|
function callFunction(func){
//매개변수로 받은 func(변수)가 사실 함수다.
func();
}
const sayHello = function (){
console.log('hello!');
}
callFunction(sayHello);
|
cs |
callFunction(sayHello); 의 sayHello안에 const sayHello 에서 선언 된
function (){console.log('hello!')} 이 들어가고
function callFunction(func) 이 호출될 때 (func)안에 sayHello가 들어가고 이게 func(); 가 받아서 실행
함수를 반환할 수 있다.
1
2
3
4
5
6
7
8
9
|
function creatAdder(num){
return function(x){
return x + num;
};
}
const addFive = creatAdder(5);
console.log(addFive(10));
|
cs |
1
2
3
4
5
6
7
8
|
const addFive = function(x){return x + 5;};
// function(x){ return x + num;}; 이 creatAdder(5)와 대체된다. num = 5
console.log(addFive(10));
// addFive의 10이 x로 들어가면서
// addFive(function(10){return 10 + 5;}; // return x + sum = 10 + 5 = 15가 된다.
|
cs |
일급 객체의 속성으로써의 함수
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 일급객체로서의 함수
const person = {
name : "철수",
isMarried : true,
age : 30,
sayAge : function(){
console.log("저는 " + this.age + "살 입니다.")
},
sayHello : () => {
console.log(`안녕하세요. 나는 ${person.name}입니다.`)
},
}
person.sayAge();
person.sayHello();
// 참고! this를 쓰려면 funtion을 써줘야하고
// ES6 문법으로 써주려면 this를 쓰는 경우 undefined가 나온다.
function(){this.age}
()=> {person.age}
|
cs |
- 화살표 함수는 this를 바인딩하지 않는다.
배열의 요소로 함수를 할당한다.
1
2
3
4
5
6
7
8
9
10
11
|
const myarr = [
function(a, b){
return a + b
},
function(a, b){
return a - b
}
]
console.log(myarr[0](6, 5))
console.log(myarr[1](7, 5))
|
cs |
return을 함수로 하는 고차함수 예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function multiPlyBy(num){
return function (x){
return x * num;
};
}
function add(x, y){
return x + y;
}
const multiPlyByTwo = multiPlyBy(2);
const multiPlyByThree = multiPlyBy(3);
console.log(multiPlyByTwo(10)) // 20
console.log(multiPlyByThree(20)) // 60
|
cs |
'Programming > Javascript' 카테고리의 다른 글
Javascript : ES6 문법 + 활용 패턴 알아보기 (0) | 2023.04.08 |
---|---|
Javascript : 반복문 - ⑥ 중첩 for문 (0) | 2023.04.07 |
Javascript : 반복문 - ⑤ continue 문 (0) | 2023.04.07 |
Javascript : 반복문 - ④ breack문 (0) | 2023.04.07 |
Javascript : 반복문 - ③ do while문 (0) | 2023.04.07 |