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

 

 

* 참고한 강의

https://www.youtube.com/watch?v=NS1cIsWlFGI&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=1 

 

[강의 들은 목적]

- 함수와 함수 호출의 차이를 정확히 알고 싶었음

- 고차함수가 많이 헷갈리는데 정확히 짚어주길 원함 

 

 

함수와 함수 호출 차이

(참고 : https://velog.io/@minj9_6/JavaScript%EC%9D%98-%ED%95%A8%EC%88%98%EC%9D%98-%EC%A0%95%EC%9D%98%EC%99%80-%ED%98%B8%EC%B6%9C%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90)

JavaScript - 함수의 정의와 호출의 차이점!

- 함수 : 함수 정의를 통해 생성(function A(매개변수)) 

- 함수 구성 요소 :

• 매개변수 : 함수 내부의 ()에 입력을 전달받는 변수
• 반환값 : 함수 실행 결과(출력되는 것)
• 인수 : 함수 호출 시 함수의 매개변수를 통해 받은 입력
• 함수 선언 : 함수 선언 키워드에 함수명 적고 중괄호 ({}) 블럭을 넣은 후 함수 실행할 코드 작성

 

- 함수 호출 : 정의된 함수를 실행하기 위해 필요한 입력인 인수를 매개변수를 통해 함수에 전달해 함수 실행

 

 

함수와 함수 호출 차이 코드로 확인

- 차이 구분법 : 함수 뒤에 호출값(예제에선 apple)을 return 값으로 대체

 

 

[예제1]

 

//함수
//매개변수 : iphone, airpods
//반환값 : console.log 안의 값
const apple = (iphone, airpods) =>
  console.log(
    `새로 나온 iphone과 airpods은 각각 ${iphone}, ${airpods}입니다. `
  );

//함수 선언
function koreaNew(func, iphone, airpods) {
  return func(iphone, airpods);
}

apple("iphone14", "airpots pro"); //새로 나온 iphone과 airpods은 각각 iphone14, airpots pro입니다.
// 1번 (오류)
koreaNew(apple(), "iphone14", "airpots pro"); //새로 나온 iphone과 airpods은 각각 undefined, undefined입니다.
// 1번과 같은 값(오류)
koreaNew((undefined, undefined), "iphone14", "airpots pro");
// 2번 (정답)
koreaNew(apple, "iphone14", "airpots pro"); //새로 나온 iphone과 airpods은 각각 iphone14, airpots pro입니다.
// 3번 (오류)
koreaNew(apple( "iphone14", "airpots pro")) //새로 나온 iphone과 airpods은 각각 iphone14, airpots pro입니다.
// 3번의 경우 오류발생 : func is not a function at koreaNew

 

* 1번과 2번의 차이

- apple 자리에 apple()을 넣을 경우 함수자리에 함수가 아닌 함수 호출을 넣었기 때문

- 함수 호출에서 필요한 값을 넣지 않았으므로 undefined, undefined가 나오는 것 

* 3번도 마찬가지로 함수 자리에 함수가 아닌 값을 썼기 때문임

 

 

[예제 2]

//예제 1
const onclick = () => {
  console.log("hello");
}

//1번 (정답)
document.querySelector(".div").addEventListener("click", onclick); //함수 자리에 함수 넣음
//2번 (오류)
document.querySelector(".div").addEventListener("click", onclick()); //함수 자리에 함수호출 넣음

//예제2
const onclick = () => () => { //고차함수
  console.log("hello");
}

//3번 (정답)
document.querySelector(".div").addEventListener("click", onclick());
//3번과 같은 결과(정답)
document.querySelector(".div").addEventListener("click", () => {
	console.log("hello");
})

// 예제 2번은 아래와 동일한 함수
const onclick = () => () => {
  console.log("hello");
}

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

 

[예제 3]

//event가 들어갈 자리는?

//1번
const onclick = (event) => () => {
  console.log("hello");
}

//2번
const onclick = () => (event) => {
  console.log("hello");
}

//결과
document.querySelector(".div").addEventListener("click", onclick());

//1번 결과(오류)
document.querySelector(".div").addEventListener("click", () => {
  console.log("hello");
});

//2번결과 (정답)
document.querySelector(".div").addEventListener("click", (event) => {
  console.log("hello");
});