JavaScript

[Javascript] 함수

에릭 Kim 2023. 5. 1. 15:17
반응형

1. 함수

보통 함수는 함수를 선언할 때 이름까지 같이 선언해주는 기명 함수와 익명 함수로 나눌 수 있습니다 

 

 

위의 코드는 'sum'이라는 함수의 이름을 선언해주는 방식이며, 다음은 함수를 함수 이름 없이 변수에 담아서 사용하는 익명 함수 방식입니다 !

 

 

실제 코딩을 할 때는 익명함수를 더 자주 사용하는 면이 있는 거 같아서 사용법을 잘 알아두면 좋을 거 같습니다 :)

 

2. 화살표 함수

화살표 함수는 반환 값(return) 앞에 아무런 조건이 없을 때 사용가능합니다 

기존에 함수를 작성할 때는 () {} 식의 패턴을 사용했다면, 화살표 함수는 () => {}의 패턴을 사용합니다. 또한 function 키워드와 중괄호 사이의 문장들을 다음과 같이 줄여서 사용할 수 있습니다 ! 

 

 

3. 즉시실행함수(IIFE)

즉시 실행함수는 작성한 함수를 재사용할 필요가 없고, 바로 사용하고자 할 때 유용합니다. 

즉시실행함수는 두개의 소괄호가 필요합니다. 소괄호를 어떻게 작성하는 지에 따라 아래의 두가지 방법으로 나뉘게 됩니다 ! 

 

 

4. 호이스팅

호이스팅이란 '함수 선언부가 유효범위 최상단으 끌어올려지는 현상'을 의미합니다.

다음과 같이 함수의 선언 이전에 함수를 호출하면 에러를 만날 수 있습니다. 

 

 

하지만 다음과 같이 변수로 함수를 선언하는 것이 아닌 함수를 바로 선언하게 되면 호이스팅 현상이 일어나, 함수의 선언 전에 호출을 하여도 정상적으로 작동하는 것을 확인할 수 있습니다 ! 

 

 

 

5. 콜백 함수

콜백 함수는 함수의 인수로 사용되는 함수를 뜻합니다. 콜백 함수를 사용하면 함수가 실행되는 위치를 보장해주기 때문에 원하는 때에 결과를 도출할 수 있습니다 ! 

 

 

선언한 timeout이라는 함수를 호출하면, 'timeout'이라는 문자가 3초 뒤에 콘솔 창에 뜨는 것을 확인할 수 있습니다. 만약 이 3초의 시간 뒤에 어떠한 문자를 또 출력해주기 위해서는 '함수의 위치를 보장' 해 줄 필요가 있는데, 이 때 콜백 함수를 통해 이를 가능하게 할 수 있습니다 ! 

위에서 작성한 코드를 실행하면 3초뒤에 timeout과 callback이 콘솔창에 나란히 출력되는 것을 확인할 수 있습니다 

반응형

'JavaScript' 카테고리의 다른 글

[Javascript] 변수 범위 (var, let, const)  (0) 2023.04.26
[Javascript] 반복문 for  (0) 2023.04.26
[Javascript] 조건문  (0) 2023.04.26
[Javascript] 삼항 연산자  (0) 2023.04.21
[Javascript] 비교 연산자 & 논리 연산자  (0) 2023.04.21