[JS] JavaScript 함수(Function) 총 정리(+그림&코드)

함수가 필요한 이유

변수 msg1를 선언한 후 "안녕하세요"를 할당해 변수를 출력하는 코드를 작성해 보겠습니다.

  

    
    
    
    
  
let msg1 = "안녕하세요";
console.log(msg1); // 안녕하세요

 

추가로 변수 msg2를 선언한 후 "Hello"를 할당해 변수를 출력하는 코드를 추가로 작성해 보겠습니다.

  

    
    
    
    
  
let msg1 = "안녕하세요";
console.log(msg1); // 안녕하세요

// 추가
let msg2 = "Hello";
console.log(msg2); // Hello

     

아래 그림과 같이 변수의 값을 제외하고는 중복으로 작성된 코드가 존재합니다.

 

 

동일한 기능을 일일이 타이핑 해야하는 번거로움이 존재하기 때문에

변수를 출력하는 기능을 정의하여, 함수로 만들어서 사용합니다.

 

---

 

함수

특정 기능을 수행하는 코드의 단위입니다.

 

---

 

함수 선언

함수는 JS의 function 예약어와 함수명을 붙여서 작성할 수 있습니다.

  

    
    
    
    
  
function 함수명() {
// 소스 코드 작성
}

 

"안녕하세요"를 출력하는 기능을 수행하는 함수를 함수명 greeting으로 정의하고, 코드를 작성해 보겠습니다.

  

    
    
    
    
  
function greeting() {
  console.log("안녕하세요");
}

함수를 정의하고 작성하는것을 "함수를 선언한다."라고 표현합니다.

 

---

 

함수 호출

함수를 선언했으니, 함수를 사용해 보겠습니다.

  

    
    
    
    
  
// 함수 선언
function greeting() {
  console.log("안녕하세요.");
}

// 함수 호출
greeting(); // 안녕하세요.
greeting; // 함수가 호출되지 않음

함수를 사용하는것을 "함수를 호출한다."라고 표현합니다.

 

함수를 호출할 때는 () / 괄호를 생략하면 함수가 호출되지 않습니다.

 

---

 

매개변수와 인수

매개변수

단순하게 "안녕하세요"를 출력하지 않고,

변수를 전달받아 출력하는 함수를 함수명 greeting2으로 선언하는 코드를 작성해 보겠습니다.

  

    
    
    
    
  
// 함수 선언
// msg는 매개변수, 파라미터
function greeting2(msg) {
  console.log(msg);
}

greeting2 함수가 변수를 전달받기 위해서는 함수를 선언 할때 함수의 () / 괄호 안에 매개변수를 작성해야합니다.

 

여기서 msg는 매개변수입니다.

 

인수

함수를 호출하여 사용하는 코드를 작성해 보겠습니다.

  

    
    
    
    
  
// 함수 선언
// msg는 매개변수, 파라미터
function greeting2(msg) {
  console.log(msg);
}

let msg1 = "안녕하세요";
let msg2 = "Hello";

// 함수 호출
// msg1과 msg2는 인수
greeting2(msg1); // 안녕하세요
greeting2(msg2); // Hello

greeting2 함수를 호출할 때 변수를 전달 해주기 위해서는 함수의 () / 괄호 안에 인수를 작성해야합니다.

 

여기서 msg1과 msg2는 인수입니다.

 

---

 

반환 값

함수는 기능을 수행하는것 뿐만 아니라 값을 반환해 줄수 있습니다.

 

2개의 변수를 입력받아 더한값을 반환해 주는 함수를 선언하고 호출하는 코드를 작성해 보겠습니다.

  

    
    
    
    
  
function add(num1, num2) {
  return num1 + num2;
}

console.log(add(1, 2)); // 3
console.log(add(10, 20)); // 30

이와 같이 add 함수를 통해 값을 반환할수 있는데,

 

이것을 반환값이라고 합니다.