함수의 5가지 특징을 알아보자,,
함수는 일급객체!!
일급객체란??
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.
매개변수로 전달 가능, 리턴문으로 출력 가능,,등
그래서 함수는 매우 유연하게 쓸 수 있다.
일단 그 전에 매개변수와 인자에 대해 한번더 짚고 넘어가자.
일단 아래와 같은 함수선언문 코드가 있다고 생각해 보자.
function add ( a, b) {
return(a + b);
};
let coco = 5;
let momo = 10;
result = add (coco, momo);
console.log(result);
매개변수 : 함수문을 구동할때 쓰이는 변수(여기서는)
인자 : 함수의 매개변수에 대입되는 값을 인자라고 한다 .
함수의 5가지의 특징
1. 변수에 함수를 할당할 수 있다. (함수 표현식)
1) 함수가 마치 값으로 취급된다.
2) 함수가 나중에 사용될 수 있도록 조치가 된다.
변수에 함수를 할당했음으로, 변수 이름만 불러도 함수를 호출 할 수 있다.
그리고 이 변수만으로 함수를 마치 객체처럼, 또는 변수처럼 어디에 넣을수도 있고, 매개변수로 넣을수도 있다는 점.!!!!
const sayHello = function ( ) {
console.log('Hello!');
}
2. 함수를 인자(괄호 안에것)로 다른 함수에 전달 할 수가 있다.
1) 콜백함수 : 매개변수로써 쓰이는 함수
2) 고차함수 : 함수를 인자로 받거나, 리턴하는 함수. (사실 콜백함수는고차함수의 한 종류라고 생각하면 좋을것 같당)
function callFunction (func) {
//아래처럼 쓰여저 있다면 우리는 매개변수로 받은 변수가 사실은 함수라는 점을 알수 있다. 괄호 열고 닫았기 때문
func( );
};
const sayHello = function ( ) {
console.log('Hello!');
}
callFunction(sayHello);
3. 함수를 반환할 수 있다.
function createAdder(num) {
return function (x) {
return x + num;
};
}
const addFive = createAdder(5);
console.log(addFive(10));
이렇게 했을때 결과값은 15 가 나온다. 왜일까?
이건 아래와 같다.
function createAdder(5) {
return function (x) {
return x + 5;
}
}
const addFive = function (x) {
return x + 5;
}
console.log(addFive(10));
그럼 addFive라는 변수명으로 선언된 함수에 파라미터, 즉 매개변수에 인자값이 10으로 들어가고, 그래서 결과값이 15가 나오는 것!!
*배열에서의 함수.(this)
이렇게 아래와 같은 배열이 있다고 하면, 이 배열에 함수를 사용할 수 있다.
const person = {
name : "John",
age : 29,
isMarried : false,
sayHello : function () {
// console.log("Hi, My name is " + this.name);
// console.log(`Hi, My name is ${this.name}`);
}
}
person.sayHello();
그런데 저 sayHello라는 함수 부분에서 this 를 사용할 수 있다.
this가 뭐냐면
나!!!! 라는 뜻!!
그래서 여기서는 person이라는 객체 안에서 this가 사용되었으니, person이라는 객체를 말한다.
근데 그 객체.name 은 그 객체에 있는 key & value 들 중 name 이라는 key 를 가진 값을 가져와 조!!!! 이런 말이다.
근데 이게 똑같이 불러오는건데 또다른 방법이 있다.
바로 ${ } 이것!!!
여기 안에도 똑같이 ${this.name} 이라고 적어주면, 그리고 탬플릿리터럴 을 사용해주면,
따로 + 연산자를 사용하지 않고도 결과를 만들 수 있다.
혹시 화살표 함수 기억하는강??
let a = function ( x ) {
return 1;
}
이 기본함수를 화살표 함수로 바꾸면
let a = x => 1;
그럼 이 객체에서 쓰인 함수를 화살표 함수로 바꾸었을 경우에도 this 가 먹힐까???
sayHello : () => console.log(`Hi, My name is ${this.name}`)
정답은 NO. Hi, My name is undefined 이라고 출력된다
화살표 함수는 This를 바인딩 하지 않기 때문이라고 한다. 자세한것은 다음 포스팅에!
배열의 요소로 함수를 할당하는것
아래 코드를 보면서 이해해 보자.
const myArr = [
function (a, b) {
return a + b;
}, function (a, b) {
return a - b;
}
]
console.log(myArr[0](1, 3));
console.log(myArr[1](10, 7));
다른 경우를 봐보자.
함수안에 리턴값으로 함수를 리턴하는 고차함수.
함수에 인자로 함수를 넣어주는 고차함수.
function multiplyBy (num) {
return function (x) {
return x * num;
};
}
function add (x, y) {
return x + y;
}
const multiplyByTwo = multiplyBy(2);
const mutiplyByThree = multiplyBy(3);
이 경우에는 첫번째 multiplyBy 라는 함수 안에 리턴이 함수로 됨으로 고차함수라고 볼 수 있고,
multiplyByTwo, multiplyByThree 라는 변수를 선언해서, multiplyBy 라는 함수의 매개변수에 인자값으로 각각 2, 3을 넣었다.
그럼 어떻게 되냐면
const multiplyByTwo = function (x) {
return x *2;
}
const multiplyByThree = function (x) {
return x * 3;
}
근데 이렇게 호출하면 오류가 난다. 왜일까??/
x 값을 설정을 안했기 때문에,
그럼 이렇게 해볼까>>??
const multiplyByTwo = multiplyBy(2);
const mutiplyByThree = multiplyBy(3);
console.log(multiplyByTwo(10));
console.log(multiplyByThree(10));
그럼 결과값이 20과 30으로 출력되는 것을 볼 수 있다.
지금 상황을 정리해 보면 아래와 같은 코드이다.
function multiplyBy (num) {
return function (x) {
return x * num;
};
}
function add (x, y) {
return x + y;
}
const multiplyByTwo = multiplyBy(2);
const mutiplyByThree = multiplyBy(3);
console.log(multiplyByTwo(10));
console.log(multiplyByThree(10));
그런데 add 라는 함수는 사용되지 않았으니 이것도 사용해 보자.
맨 아래에
const result = add(multiplyByTwo(5), multiplyByThree(10));
console.log(result);
이렇게 해도 되지만, 출력될때 위에 값들고 헷갈리지 않기 위해서, 탬플릿리터럴 을 사용해보장!! 그러면
console.log(`FINAL => ${result}`);
이와 같이 출력된다.
20
30
FINAL => 40