Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- Spring-Framework
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- intellij
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- props
- spring-boot
- googleColaboratory
- node.js로 로그인하기
- Python
- react오류
- DB Browser
- 모던자바스크립트
- 거북이 대포 게임
- 따라하며 배우는 노드 리액트 기본 강의
- 웹 게임을 만들며 배우는 리액트
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- react
- node.js 설치
- 타자 게임 만들기
- 인프런
- 노드에 리액트 추가하기
- 모두의 파이썬
- 리액트
- Concurrently
- Do it 자바스크립트 + 제이쿼리 입문
- Colaboratory 글자 깨짐
- 자바스크립트
- JS 개념
- 계산맞추기 게임
- vs code 내 node
Archives
- Today
- Total
프로그래밍 삽질 중
함수와 함수 호출 차이, 고차함수 본문
* 참고한 강의
https://www.youtube.com/watch?v=NS1cIsWlFGI&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=1
[강의 들은 목적]
- 함수와 함수 호출의 차이를 정확히 알고 싶었음
- 고차함수가 많이 헷갈리는데 정확히 짚어주길 원함
함수와 함수 호출 차이
- 함수 : 함수 정의를 통해 생성(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");
});
'과거 프로그래밍 자료들 > Javascript&typescript' 카테고리의 다른 글
스코프 체인 (0) | 2022.09.09 |
---|---|
[호출스택]실행하지 않고 함수에서 변수로 접근 가능한지 알기 (1) | 2022.09.08 |
자바스크립트 체크 박스 선택 및 전체 체크박스 선택 (0) | 2022.09.01 |
Let's Get IT 자바스크립트 프로그래밍 - 로또 번호 맞추기 (0) | 2022.07.22 |
Let's Get IT 자바스크립트 프로그래밍 - 숫자야구(아웃 추가, 시도 횟수 추가) (0) | 2022.07.22 |