Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
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
more
Archives
Today
Total
관리 메뉴

개발일기

[udemy] 한입 리액트 : 호이스팅 / 화살표함수 / 콜백함수 본문

JavaScript

[udemy] 한입 리액트 : 호이스팅 / 화살표함수 / 콜백함수

화영강 2022. 10. 19. 21:25

 

함수표현식, 함수선언식, 호이스팅

 

함수를 만드는 방법은 위처럼 두가지가 있다.

 

1. 함수를 변수에 저장하는 함수표현식

2. 함수이름을 지정하여 만드는 함수선언식

 

이 두 방식의 차이점은 호이스팅이 되냐 안되냐 이다.

* 호이스팅이란?

함수 또는 변수를 선언하기 전 윗부분에 함수/변수를 호출해도 출력이 되는 것으로

선언부분을 스코프의 가장 위쪽으로 끌어올리는 방식으로 해석한다.

 

함수표현식은 호이스팅되지 않는 반면, 함수선언식은 호이스팅이 된다.

함수표현식은 직접적으로 선언이 되기 전에 사용할 수 없다.

 

 

함수선언식을 사용한 1번 line은 호이스팅 되어 "안녕"으로 출력되고,

함수표현식을 사용한 2번 line은 호이스팅 되지않아 에러가 뜬다.

 

 

 

 

화살표함수

 

함수 표현식을 더 빠르게 사용하는 방법으로 화살표함수를 사용할 수 있다.

함수표현식에 function을 지우고 => 를 추가하거나

 
 
구현부가 값만 return한다면 { } 와 return을 빼고도 사용 가능하다.

 

 

 

콜백함수

 

함수에 다른 함수를 매개변수로 넣어주는 것.

 

기분을 체크하는 checkMood() 함수는

mood가 good일 때는 sing()을 호출하고, 

그 외에는(기분이 안좋을때) dance()를 호출한다.

 

 

그런데 이렇게 함수의 실행 값이 정해진 것이 아니라, 좀 더 다양하게 실행 하고싶을 때

매개변수기분이 좋을때 실행하는 함수, 안좋을때 실행하는 함수를 넣어

내가 원하는 동작을 수행할 수 있다.

 

checkMood 함수에 매개변수로 dancecry함수를 넣었고,

mood가 "good"이라면 goodcallback매개변수인 dance가 호출이 될 것이고,

그 외에(기분이 안좋다면) badcallback매개변수인 cry가 호출 될 것이다.

 

 

이렇게 함수의 매개변수에 다른 함수를 넣어 좀 더 유연한 동작을 할 수 있는데,

이것을 콜백 함수 라고 한다.