자바스크립트 문법 종합반
-일급 객체로서의 함수 (First-Class Object)
(1) 변수에 함수를 할당
(2) 함수를 인자로 다른 함수에 전달
(3) 함수를 반환
(4) 객체의 프로퍼티로 함수를 할당
(5) 배열의 요소로 함수를 할당
일급 객체로서의 함수 (First-Class Object)
일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 결국 다른 객체들과 일반적으로 같다. 객체는 기본적으로 (1)매개변수로 전달 될 수 있고 (2)리턴문으로 출력될 수 있고, 결국 함수도 이 모든 것이 가능하다는 것!
그렇기 때문에, 우리는 함수를 매우 유연하게 사용할 수 있다.
(1) 변수에 함수를 할당
// 이제 특징을 알아보자. // 함수가 일급 객체로 취급되는 5가지의 경우
// 1. 변수에 함수를 할당할 수 있다.
// : 함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있습니다. 변수에 할당된 함수는 나중에 사용할 수 있습니다.
const sayHello = function () {
console.log('hello!');
}
sayHello(); // "Hello!" 출력
// 이것의 의미는? sayHello 라는 변수에 함수를 할당했기 때문에 함수가 필요한 곳에서는 변수 하나만 사용해주면서 함수를 실행시킬 수 있다.
(2) 함수를 인자로 다른 함수에 전달
// 2. 함수를 인자로 다른 함수에 전달할 수 있다.
// 콜백함수: 매개변수로서 쓰이는 함수 (콜백함수는 고차함수의 한 부분)
// 고차함수 : 함수를 인자로 받거나 return 하는 함수
function callFunction(func) {
// 매개변수로 받은 func 라는 변수가 사실 함수다. 왜냐하면 밑에서 ();
func(); // 고차함수
}
const sayHello = function() {
console.log('Hello!');
};
callFunction(sayHello); // "Hello!" 출력
(3) 함수를 반환
// 3. 함수를 반환할 수 있다(return)
// 함수는 다른 함수에서 반환될 수 있습니다. 함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있습니다. 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용됩니다.
function createAdder(num) {
return function(x) {
return x + num;
}
}
const addFive = createAdder(5);
// const addFive = function (x) {
// x + 5;
// }
console.log(addFive(10));
// addFive(10 ) = function (10) {
// 10 + 5;
// }
// 15 출력
(4) 객체의 프로퍼티로 함수를 할당
// 4. 객체의 프로퍼티로 함수를 할당할 수 있다.
// 객체 안에서 함수가 어떻게 쓰일까요?
// 함수는 객체의 프로퍼티로 할당될 수 있습니다. 객체의 메소드로 함수를 호출할 수 있습니다.
const person = {
name: 'John',
sayHello: function() { // 객체 안의 value는 어떤 데이터타입도 다 들어올 수 있다.
console.log(`Hello, my name is ${this.name}`); // backtick 사용 및 js 문법이 들어간느 부분에 ${} 추가
// 주목! person 객체의 name 에 접근하려면?
// 필수 지식: 중괄호 안에 있는 this는 항상 자기 자신을 가리키는 것
// 결국 this.name dms 'John'을 가리킨다.
// console.log('Hello, my name is' + this.name); 과
// console.log(`Hello, my name is ${this.name}`);가 같다.
}
};
person.sayHello(); // "Hello, my name is John" 출력
// 연습문제: 위 함수를 화살표 함수로 만들어보기
const person = {
name: 'John',
sayHello: () => {
console.log(`Hello, my name is ${this.name}`)
},;
}
person.sayHello(); // "Hello, my name is undefined" // 왜 화살표 함수를 사용했더니 undefined가 나왔나? -> 화살표함수는 this를 binding 하지 않기 때문! 3주차에서 설명할 예정
// 결국 이런 케이스에서는 화살표 함수를 쓰면 안된다!
(5) 배열의 요소로 함수를 할당
// 5. 배열의 요소로 함수를 할당할 수 있다.
// 함수는 배열의 요소로 할당될 수 있습니다. 이것은 함수를 배열에서 사용할 수 있게 합니다.
const myArray = [
function(a, b) {
return a + b; // 현재 함수 두가지를 요소로 갖는 배열 선언
}, // 0 번째 요소
function(a, b) {
return a - b;
} // 1번째 요소
];
console.log(myArray[0](5, 10)); // 배열에 요소에 접근하는 방법: myArray라는 배열의 0번째 요소에 input 5, 10을 넣어라 // 15 출력
console.log(myArray[1](10, 5)); // 배열에 요소에 접근하는 방법: myArray라는 배열의 1번째 요소에 input 10, 5을 넣어라 // 5 출력
// 함수가 일급 객체로 취급되기 때문에, 자바스크립트에서 함수는 매우 유연하게 사용될 수 있습니다. 이것은 등 다양한 프로그래밍 패턴에서 사용됩니다. 함수를 일급 객체로 다룰 수 있다는 것은, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있게 해줍니다.
// 다른 예제
// 함수를 일급 객체로 다룰 수 있다는 것은, 함수를 다양하게 조합할 수 있다는 것을 의미합니다. 새로운 함수를 반환하는 함수를 작성하면, 함수를 조합하여 더 복잡한 기능을 구현할 수 있어요. 이것을 활용하면 코드를 더욱 간결하게 작성할 수 있으며, 유지 보수도 쉬워집니다.
function multiplyBy(num) {
return function(x) { // 고차함수
return x * num;
}
}
function add(x, y) {
return x + y;
}
const multiplyByTwo = multiplyBy(2);
// const multiplyByTwo = function(x) {
// x * 2;
// }
const multiplyByThree = multiplyBy(3);
// const multiplyByThree = funtion(x) {
// x * 3;
// }
const result = add(multiplyByTwo(5), multiplyByThree(10));
// const result = add( const multiplyByTwo = function(5) {
// 5 * 2;
// },
// const multiplyByThree = function(10) {
// 10 * 3;
// }
// )
// const result = add(10, 30) {
// 10 + 30;
// }
console.log(${result});
// 40
// 이처럼 함수가 일급 객체로 취급되는 것은 자바스크립트에서 함수를 다양한 방식으로 사용할 수 있게 해줍니다. 함수를 객체나 배열과 같은 일반적인 자료형과 동일한 방식으로 사용할 수 있기 때문에, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있습니다.
728x90
반응형
'부트캠프 개발일지 2023-2024 > JavaScript 자바스크립트' 카테고리의 다른 글
[2주차] 자바스크립트 문법 종합반 : 알고리즘 문제 풀이 (문자열 내 마음대로 정렬하기) (0) | 2023.10.16 |
---|---|
[2주차] 자바스크립트 문법 종합반 : Map, Set (1) | 2023.10.15 |
[2주차] 자바스크립트 문법 종합반 : es6 문법 (0) | 2023.10.14 |
[2주차] 자바스크립트 문법 종합반 : 알고리즘 문제 풀이 (문자열 내 p와 y의 개수, 음양더하기) (0) | 2023.10.14 |
[2주차] 자바스크립트 문법 종합반 : 반복문, break continue (0) | 2023.10.13 |