TIL 58 | 다양한 함수, 함수 호이스팅

다양한 함수의 종류와 함수의 호이스팅에 대해 정리해보자

여러 함수❗

화살표 함수

• 함수의 기본적인 로직을 축약형으로 만들 수가 있다
  • 특정한 코드가 들어있으면 축약형으로 만들기 어려울 수 있다(this가 있으면 로직이 변한다)
  • function을 생략하고 매개변수(매개변수가 1개이면 소괄호도 생략이 가능하다 )를 명시한 후 => 를 작성한 후, return 키워드 뒤의 실행문을 붙인다(return 키워드는 생략이 가능하다)(예시1)
  • 함수의 실행문이 console.log()인 경우, function을 생략하고 매개변수(매개변수가 1개이면 소괄호도 생략이 가능하다)를 명시한 후 => 를 작성한 후, 실행문을 붙여준다(console.log인 경우 명령문 생략이 불가능하다)(예시2)
• 화살표함수에서 반환할 수 있는 데이터는 숫자, 문자, null, undefined, 배열이 가능하며 체 데이터는 반환할 때, 소괄호로 감싼 후 반환한다
  const doubleArrow = x => ({name: 'Sharon'})

-예시1-
const doubleArrow = function (x, y) {
return x + y
}

-> 화살표 함수로 바꾸기

const doubleArrow = (x, y) => (x+y) * 2

console.log(doubleArrow(1,2)) // 6


-예시2-
const doubleArrow1 = function (x) {
console.log(x ** 2)
}

-> 화살표 함수로 바꾸기
const doubleArrow2 = x => console.log(x**2)
console.log(doubleArrow2(8)) // 64

즉시실행함수(IIFE, Immediately-Invoked Function Expression)

• 함수를 만들자마자 바로 실행시키는 함수를 즉시실행함수라고 한다
• 만일 어떤 함수를 한 번만 쓰고 재사용 할 일이 없다고 할 때, 즉시실행함수를 사용하면 편하다(예시1)
• 즉시실행함수는 ()소괄호 안에 작성한다(두 가지 방법이 있다). 즉시실행함수는 익명의 함수를 사용하는 것이 일반적이다.(예시2)

const a = 7

function double() {
 console.log(a * 2)
}
 
double() // 14

-예시2)
const a = 7

(function () {
console.log(a * 2)
} ()); //14

(function () {
console.log(a * 2)
}) (); //14

타이머 함수

• setTimeout(함수, 시간) : 일정시간 후 함수를 실행한다
• setInterval(함수, 시간) : 시간 간격마다 함수를 반복적으로 실행
• clearTimeout() : 설정된 Timeout 함수를 종료
• clearInterval() : 설정된 Interval 함수를 종료
  • 시간부분에서 사용되는 단위 : ms(3000ms : 3초)
    -clearTimeout(), clearInterval()은 종료의 기능

setTimeout(function () {
   console.log('Sharon!'}, 3000)

> 3초 뒤에 콘솔에 'Sharon!'이 찍힌다
> setTimeout 안의 함수를 화살표 함수로 작성해본다

const timer = setTimeout( () => {console.log('Sharon!')}, 3000)

const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
 clearTimeout(timer)
})

* clearTimeout(종료할 function을 인수로 적는다)
> 이렇게 되면 3초 안에 h1 태그를 누르면
    'Shron!'이 콘솔에 안 찍힌다

콜백(Callback)

• 함수의 인수로 사용되는 또다른 함수
  • setTimeout(함수, 인수)
  • clearTimeout(종료할 function을 인수로 적는다)
• 콜백함수는 특정한 실행 위치를 보장해주는 용도로 많이 활용된다

function timeout() {
setTimeout( () => {
console.log('Heropy!')}, 3000)

timeout()

console.log('Done!')

** setTimeout()이 동작한 후(console.log('Heropy!')) 출력 후에
console.log('Done!')가 꼭 찍히게 하고 싶을 때, 콜백함수의 개념을 사용한다

function timeout() {
setTimeout( () => {
console.log('Heropy!')}, 3000)

timeout( () => {
console.log('Done!)}) 

> timeout()의 인수로 화살표함수를 사용한 것이다(콜백함수)
> 이 인수를 받아줄 매개변수가 원래의 함수에 필요하다

function timeout(callback) {
setTimeout( () => {
console.log('Heropy!')
callback()  : 내가 실행을 보장하고 싶은 위치에 넣는다
}, 3000)

timeout( () => {
console.log('Done!)}) 

함수 호이스팅❗

• 함수 호이스팅이란 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상
• 함수 선언과 함수 표현식이 다르게 작동한다
  • 함수를 선언하는 경우 함수 선언부가 유효범위 최상단으로 끌어올려져서(호이스팅) 작동한다
  • 함수 표현식으로 작성했을 때에는 호이스팅이 작동하지 않는다(예시1)
• 함수의 호이스팅이 언제 유용한가? 복잡한 코드를 작성할 때, 먼저 함수의 이름으로 함수를 호출하고(두괄식) 함수를 작성하면, 코드의 가독성이 올라가는 경우가 있다

-예시1-
const a = 7

double()

const double = function () {
console.log(a * 2)
}

> TypeError 발생