함수와 함수의 호출, 고차함수

 

 

1. 함수는 일급 객체

자바스크립트에서 함수는 값처럼 사용이 가능하다.

변수에 함수를 넣을 수 있고, 매개변수로도 넘길 수 있다. 배열에도 함수가 들어간다.

 

메서드(함수)가 객체의 프로퍼티(속성)로도 설정이 가능하다.

매개변수의 개수가 일치하지 않아도 호출 가능하다. 엄격하지 않은 것이다.

 

자바스크립트의 함수는 일급 객체라고 부른다.

 

 

2. 함수 선언 2가지 방법

//함수 선언 2가지 유형

//1. 함수 표현식
const add = (a,b) => a+b;


//2. 함수 선언식
function calculator(func, a, b){
	return func(a,b);
}

 

함수 선언식은 function을 쓰는데, 이를 통해 함수 호이스팅이 가능하다.

• 함수 호이스팅은 첫 번째로 소스코드 평가 단계를 거친다.
• function을 모두 찾아서 메모리에 등록을 해둔다.
• 그리하여 밑에서 선언된 함수를 위에서 쓸 수 있게 된다. (메모리에 등록되어 있기 때문)

 

 

3. 함수와 함수의 호출 차이점

add(3,5); //함수의 호출
calculate(add(), 3, 5); //add라는 함수 호출

 

파라미터로 함수를 보내야하는데, 함수 호출 결과를 보내고 있는 상황이다.

함수와 함수 호출을 구분하는 방법은 치환해보면 안다.

 

add()를 타고 가보면 파라미터가 a, b가 필요하지만 현재 아무것도 건내주지 않았으므로 (undefined, undefined)가 매칭된다.

그래서 리턴 값으로 undefined+undefined가 도출되어 add() 자리에 오는 것이다.

 

이런 이유로 add()라는 함수 호출이 아니라 add라는 함수를 보내줘야 한다. 

 

 

4. 고차함수와 호출

고차함수는 함수 안에 함수를 여러 개 호출하는 형식을 말한다. 아래와 같다.

const onClick = () => () => console.log("hello");
document.querySelector('#header').addEventListener('click', onClick());

 

onClick()이라는 함수를 호출했지만 사실 고차함수이기 때문에 함수를 쓴 셈이나 마찬가지이다.

왜냐하면 위 표현식은 다시 아래와 같이 표현될 수 있기 때문이다.

 

const onClick = () => {
	return () => {
		console.log("hello");
	}
}

//onClick() == () => { console.log("hello") }
document.querySelector('#header').addEventListener('click', onClick());

 

 

때문에 ()라는 함수 호출을 보면 return을 파악해서 대치해보면 된다.