일급 객체로서의 함수
일급 객체(First class object)
함수를 객체처럼 다룬다. 그 사용법이 다른 객체들과 일반적으로 같다.
이 기능 덕에 함수를 매우 유연하게 사용할 수 있다.
1. 변수에 함수를 할당할 수 있다.
함수가 마치 값처럼 취급된다.
함수가 나중에 사용될 수 있도록 조치가 되었다.
const sayHello = function () {
console.log('Hello!');
};
// sayHello라는 변수로 함수를 어디서나 호출할 수 있다.
2. 함수를 인자로 다른 함수에 전달할 수가 있다.
2-1. 콜백함수 : 매개변수로써 쓰이는 함수. 4주차때 더 자세히 배운다.
2-2. 고차함수 : 함수를 인자로 받거나 return하는 함수
function callFunction (func) {
// 매개변수로 받은 변수가 사실 함수다
func(); // 순서 3. 함수 sayHello를 호출한다.
}
const sayHello = function () { // 순서 1. 함수 sayHello를 선언한다.
console.log('Hello!'); // 이 함수는 Hello라는 로그를 작성한다.
};
callFunction(sayHello); // 순서 2. 함수 callFunction에 인자로 변수 sayHello의 값을 넣어 호출한다.
// 위 코드의 실행 결과: Hello!
3. 함수를 반환할 수 있다.
예시 코드
function createAdder(num) {
return function (x) {
return x + num;
};
}
const addFive = createAdder(5);
console.log(addFive(10));
코드 설명
function createAdder(num) { // createAdder 함수 선언. 매개변수 num을 받는다.
return function (x) { // 매개변수 x를 받는 함수를 선언한다.
return x + num; // 이 부분에서 매개변수 x와 매개변수 num을 더한 값을 return한다.
};
};
const addFive = createAdder(5);
// 변수 addFive를 선언한다. 함수 createAdder를 호출하여 매개변수 5를 넣어 수행한다.
즉 함수 createAdder의 매개변수 num은 5가 될 것이다.
이는
const addFive = function (x){
return x + 5;
};
이 코드와 같은 의미이다.
console.log(addFive(10));
// addFive(10)은
// const addFive = function (10) {
// return 10 + 5;
// }; 와 같은 의미이다.
// 따라서 실행 결과는 15가 될 것이다.
함수 반환의 추가 예시
const person = {
name: "john",
age: 31,
isMarried: true,
sayHello: function () {
console.log('Hello, My name is ' + this.name); // 여기서 말하는 this는 현재 소속된 객체인 person을 의미한다.
// 즉 this.name은 person의 name을 의미하는 것이니 내용은 john이 된다.
}
person.sayHello(); // 실행 결과: Hello, My name is john
sayHello: function () {
console.log(Hello, My name is ${this.name}); // 이렇게 써도 무방하다.
};
// 화살표 함수로도 작성해보자
sayHello: () => {
console.log(Hello, My name is ${this.name});
} // 이 함수는 결과가 Hello, My name is undefined로 나온다.
// 이로써 화살표 함수는 this를 바인딩 하지 않는다는 것을 알 수 있다.
// 이 부분은 3주차에서 더 자세히 배운다.
4. 배열의 요소로 함수를 할당
const myArr = [
function (a, b) { // a와 b를 받아서
return a + b // a + b를 return
}, function (a, b) {
return a - b
}
];
//myArr = [function (a, b) {return a + b}, function (a, b) {return a - b}]
// 일반적인 배열의 형태와 같다.
console.log(myArr[0](1, 3));
// 배열의 0번째 요소를 호출한다. 요소가 함수이니 함수가 요구하는 매개변수는 1, 3으로 한다.
// 실행 결과: 3
console.log(myArr[1](10, 7));
// 배열의 1번째 요소를 호출한다. 요소가 함수이니 함수가 요구하는 매개변수는 10, 7로 한다.
// 실행 결과: 3
일급 객체로서의 함수 추가 예시
중요한 곱하기 연산자가 자꾸 누락되어 캡처본으로 작성한다.
