일급 객체(First Class Object) & 일급 함수(First Class Function)
| 컴퓨터 프로그래밍 언어 디자인에서, 일급 객체(first-class object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. https://ko.wikipedia.org/wiki/일급_객체 |
과연 어떠한 객체 혹은 함수에게 "일급"이라는 표현을 사용하는가? 다음의 특정 조건을 만족하는 객체들을 일급 객체라고 합니다.
일급 객체의 특성
1. 무명의 리터럴로 표현이 가능해야 합니다.
2. 변수나 자료 구조(객체, 배열 등)에 저장할 수 있어야 합니다.
3. 함수의 매개변수에 전달할 수 있어야 합니다.
4. 반환값으로 사용할 수 있어야 합니다.
자바스크립트 함수는 위의 조건을 만족하기에 일급객체가 됩니다.
"일급 함수"란 함수를 일급객체로 취급하는것을 말합니다.
함수가 일급 객체라는것은 함수를 객체와 동일하게 사용할 수 있다는 의미이며 객체는 값이므로 함수를 값과 동일하게 취급할 수 있다는 말입니다. 결국 함수를 값으로 사용할 수 있다는 이야기 입니다.
1. 무명의 리터럴로 표현이 가능해야 합니다.
2. 변수나 자료 구조(객체, 배열 등)에 저장할 수 있어야 합니다.
|
// 변수에 저장
let addition = function(a, b){
return a + b;
}
let subtraction = function(a, b){
return a - b;
}
let multiplication = function(a, b){
return a * b;
}
let division = function(a, b){
return a / b;
}
let x = 20, y = 13;
console.log(`${x} + ${y} = ${addition(x, y)}`);
// 배열에 저장
let calculatorArray = [addition, subtraction, multiplication, division];
console.log(`${x} + ${y} = ${calculatorArray[0](x, y)}`);
// 객체에 저장
let calculatorObject = {addition, subtraction, multiplication, division};
console.log(`${x} + ${y} = ${calculatorObject.addition(x, y)}`);
|
3. 함수의 매개변수에 전달할 수 있어야 합니다.
|
// 두번째 매개변수가 함수이다.
function greeting(name, callback){
let say = `안녕하세요!! ${name}님 반갑습니다.!!!`;
callback(say); // 함수 호출!!!
}
function showStar(message){
console.log(`★ ${message} ★`);
}
greeting('한사람', showStar);
greeting('한사람', (message)=>{
console.log(`☆ ${message} ☆`);
});
greeting('한사람', (message)=>{
console.log(`❤ ${message} ❤`);
});
|
4. 반환값으로 사용할 수 있어야 합니다.
|
let makeShowMessage = (decorator) => {
return (message)=>{ // 화살표함수 리턴
return `${decorator} ${message} ${decorator}`;
}
}
// 호출과 동시에 리턴된 함수 실행 console.log(makeShowMessage('★')('꿈은 이루어집니다.'));
console.log(makeShowMessage('☆')('꿈은 이루어집니다.'));
console.log(makeShowMessage('❤')('꿈은 이루어집니다.'));
let makeShowMessage2 = (decorator) => {
return function(message){ // 익명 함수 리턴
return `${decorator} ${message} ${decorator}`;
}
}
// 호출과 동시에 리턴된 함수 실행 console.log(makeShowMessage2('★')('꿈은 반드시 이루어진다.'));
console.log(makeShowMessage2('☆')('꿈은 반드시 이루어진다.'));
console.log(makeShowMessage2('❤')('꿈은 반드시 이루어진다.'));
|
함수들이 일반 변수처럼 다루어 질떄 일급 함수를 가진다고 합니다. 자바스크립트에서 함수를 익명으로 만들 수 있으면 변수/배열/객체 등에 저장이 가능하고 매개변수로 보내거나 함수의 리턴값으로 사용할 수 있습니다.
결론으로
"JavaScript의 함수는 일급 함수이다.!!!!"
"JavaScript의 함수는 일급 객체이다.!!!!"
FirstClassObject.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>일급 객체 & 일급 함수</title>
<script>
// 일급 객체(First Class Object) & 일급 함수(First Class Function)
// 1. 무명의 리터럴로 표현이 가능해야 합니다.
// 2. 변수나 자료 구조(객체, 배열 등)에 저장할 수 있어야 합니다.
// 변수에 저장
let addition = function (a, b) {
return a + b;
}
let subtraction = function (a, b) {
return a - b;
}
let multiplication = function (a, b) {
return a * b;
}
let division = function (a, b) {
return a / b;
}
let x = 20, y = 13;
console.log(`${x} + ${y} = ${addition(x, y)}`);
// 배열에 저장
let calculatorArray = [addition, subtraction, multiplication, division];
console.log(`${x} + ${y} = ${calculatorArray[0](x, y)}`);
// 객체에 저장
let calculatorObject = { addition, subtraction, multiplication, division };
console.log(`${x} + ${y} = ${calculatorObject.addition(x, y)}`);
// 3. 함수의 매개변수에 전달할 수 있어야 합니다.
// 두번째 매개변수가 함수이다.
function greeting(name, callback) {
let say = `안녕하세요!! ${name}님 반갑습니다.!!!`;
callback(say); // 함수 호출!!!
}
function showStar(message) {
console.log(`★ ${message} ★`);
}
greeting('한사람', showStar);
greeting('한사람', (message) => {
console.log(`☆ ${message} ☆`);
});
greeting('한사람', (message) => {
console.log(`❤ ${message} ❤`);
});
// 4. 반환값으로 사용할 수 있어야 합니다.
let makeShowMessage = (decorator) => {
return (message) => {
return `${decorator} ${message} ${decorator}`;
}
}
console.log(makeShowMessage('★')('꿈은 이루어집니다.'));
console.log(makeShowMessage('☆')('꿈은 이루어집니다.'));
console.log(makeShowMessage('❤')('꿈은 이루어집니다.'));
let makeShowMessage2 = (decorator) => {
return function (message) {
return `${decorator} ${message} ${decorator}`;
}
}
console.log(makeShowMessage2('★')('꿈은 반드시 이루어진다.'));
console.log(makeShowMessage2('☆')('꿈은 반드시 이루어진다.'));
console.log(makeShowMessage2('❤')('꿈은 반드시 이루어진다.'));
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 정적 타입 (Static Typing) & 동적 타입 (Dynamic Typing) (2) | 2024.10.23 |
|---|---|
| [JavaScript] 순수 함수 & 비 순수 함수 & 고차함수 (1) | 2024.10.18 |
| [JavaScript] let 키워드 (0) | 2024.10.18 |
| [JavaScript] var의 문제점 (0) | 2024.10.18 |
| [JavaScript] 화살표 함수(Arrow Function) (2) | 2024.10.17 |
