[노트내용정리] 함수 (Function)

함수란?

반복적으로 필요한 코드를 하나의 덩어리로 묶어서 필요할 때마다 꺼내 쓸 수 있도록 한 것.

1. 재사용성이 높고,
2. 유지보수가 용이하며,
3. 구조 파악이 용이하다는 장점을 가진다.

 

 

📌 함수 구조

 

용어	이름	의미
Parameter	매개변수	함수 안에서 사용하는 데이터를 전달 받는 것 (호출하는 쪽에서)
Arguments	인수,인자, 전달인자	매개변수가 받아 줄 특정한 데이터 (전달하는 것)

 

 

 

* 기본 매개변수: 값이 전달되지 않거나 undefined인 경우 명명된 매개변수를 기본값으로 초기화할 수 있다.

function add(a =0, b = 0) {    // 값을 입력하지 않으면 내가 정해둔 0으로 입력하기 위해.
    return a + b 
 };

 add()

 

 

 

 

📌 함수 선언

함수선언방식	호이스팅 여부	함수표현 전 함수호출 여부
함수선언식	호이스팅 ⭕	함수선언 전에  함수호출 ⭕
함수표현식	호이스팅 ❌	함수표현 전에 함수호출 ❌

 

1. 함수 선언식

• function + 이름 + () + {} 의 조합인 구문(statement)으로 선언하는 것. (기명함수)
• 호이스팅* 가능. 선언 전에도 호출 가능.

* 호이스팅이란?  선언부가 유효범위(스코프{ }) 안의 최상단으로 끌어올려지는 것. 

add(1, 2)  // 3 반환. 선언 전에도 호출 가능
           // 호출이 먼저 되어있고 그 뒤에 함수가 있어도 혼동하지 말 것.

// 함수 선언식 (기명함수)
function add (a, b) {
  return a + b;
}

 

2. 함수 표현식

• 이름없이 선언하고 값으로 할당하는 표현식(expression). (익명함수)
• 호이스팅 불가능. 함수호출을 함수표현보다 먼저 할 수 없다.

add(1, 2) // ❗️Uncaught ReferenceError: printHi is not defined. 

// 함수 표현식 (익명함수)
let add = function () {
  return a + b;
}

 

3. 화살표 함수

• function을 화살표 기호로 대체하여 표현. (함수이름을 정할 수 없기 때문에 표현식으로 사용)

function add(a, b) {
    return a + b
}
// 이 함수를 화살표 함수로 작성하면,


let add = (a, b) => {
  return a + b;
}

// 혹은 
let add = (a, b) => a + b;  // (중괄호없이 쓰는 화살표 함수)

// 만약 전달하는 인자가 한 개라면(a) 소괄호도 생략가능
let add = a => a + 10;

// 축약형으로 객체데이터를 사용하려면 소괄호로 한 번 감싸줘야 함
let add = b => ({ name: 'kim' })

화살표 함수 참고 : https://ko.javascript.info/arrow-functions-basics

https://ko.javascript.info/arrow-functions

 

 

 

📌 즉시 실행 함수 (IIFE)

• 정의되자마자 즉시 실행되는 함수. (Immediately-Invoked Function Expression)
• 초기화 작업 해줄 때 주로 사용.

//즉시실행함수. 익명으로 함수를 만들고 두 개의 소괄호 안에 넣어줌. (함수)()
(function () {
  console.log(a * 2)
})();


//뒤쪽의 소괄호를 즉시 실행 함수를 묶어둔 소괄호 내부 뒤쪽에 넣어서 작성도 가능. (함수())
(function () {
  console.log(a * 2)
}());


(function () {
  // …
})();

(() => {
  // …
})();

(async () => {
  // …
})();

즉시실행함수 참고: https://developer.mozilla.org/ko/docs/Glossary/IIFE

 

 

 

📌 타이머 함수 

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 한다.

 

• setTimeout(함수, 시간): 일정 시간 후 함수 실행 (지연실행). 뒤의 시간이 최소지연시간을 의미한다.
• setInterval(함수, 시간): 시간 간격마다 함수 실행
• clearTimeout(): 설정된 Timeout 함수를 종료
•  clearInterval(): 설정된 Interval 함수를 종료

 

📌 콜백 함수

 함수의 인수로 사용되는 함수

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

console.log('Done!')을 timeout 함수 뒤에 작성해도 timeout 함수가 3초 뒤에 실행하게 되어 있기 때문에
console에 Done!이 먼저 출력, 3초 뒤 Hello! 가 출력된다.

Hello! 뒤에 Done!이 출력되도록 하려면? ➜ callback 함수를 사용한다!

// callback

function timeout(callback) {   // 2.
  setTimeout(() => {  
    console.log('Hello!');
   callback()               // 3.
  }, 3000)
}
timeout(() => {          // 1.
   console.log('Done!')
})

1. timeout 이라는 함수의 인수로 화살표함수를 사용한다. 여기서 화살표 함수가 callback 함수.

2. timeout 함수 내에서 1번의 인수를 받아 줄 매개변수가 필요하다. 임의로 callback 이라 만들어 줌.
3.  2번에서 매개변수를 만들었으면, 실행을 보장하고 싶은 곳에서 함수호출 하듯이 매개변수이름() 형태로 작성한다.

실행결과

➜ 특정한 실행 위치를 보장해주는 방법으로 callback 함수를 활용할 수 있다.