[자바스크립트 함수] 자바스크립트 함수란(function)?

안녕하세요~ 이번엔 자바스크립트에서 함수에 대해 알아보겠습니다.  함수가 무엇이고, 함수를 왜 사용하는지, 함수를 이용한 간단한 예시코드를 보면서 설명해볼게요!!

목차🗒︎
1. 함수 
1-1. 함수의 개념 
1-2. 함수를 왜 사용할까? 🤔
1-3. 함수의 기본구조
1-4. 함수의 선언과 호출
1-5. 함수를 사용한 예시코드

서론

안녕하세요 ~ 먼저  본론으로 들어가기전 함수가 무엇인지 떠오르시나요? 중학교, 고등학교 때 배우던 다양한 함수들이 있지만 프로그래밍에서 함수는 다르게 사용되고 있습니다. 함수의 천천히 접근해보면서 함수라는 것에 대해 알아볼 필요가 있겠죠?

본론

1-1. 함수

 

1-2. 함수의 개념 

자바스크립트에서 함수는 특정 작업을 수행하기 위해 작성된 코드 블록으로, 필요할 때 여러 번 호출하여 재사용할 수 있는 구조입니다.

 

1-2. 함수를 왜 사용할까? 

자바스크립트에서 함수를 사용하는 이유는 다양한 이유가 있습니다. 대표적인 이유 3가지를 들어보겠습니다.
1️⃣ 재사용성 :중복되는 코드의 재사용성을 높이기 위해서  
2️⃣ 코드의 내용의 실행을 목적에 맞게 호출하기 위해서
3️⃣ 유지보수성 : 코드가 변경될 때 함수 내부의 로직만 수정하면 관련된 모든 호출에서 수정된 코드가 반영

1-3. 함수의 기본 구조

자바스크립트에서 함수의 기본구조 입니다 

function 함수이름(매개변수) {
  // 함수가 수행할 작업들
  return 결과값; 
}

 

구조 설명란

• function: 함수를 선언할 때 사용되는 키워드
• 함수이름: 함수의 이름으로, 호출할 때 사용됩니다.
• 매개변수(parameter): 함수가 외부로부터 입력값을 받을 때 사용하는 변수. 필요 없으면 생략 가능.
• { } : 함수 본문으로, 함수가 수행할 작업을 정의합니다.
• return: 함수가 수행한 작업의 결과를 반환합니다. 반환이 필요하지 않으면 생략 가능

 

1-4. 함수의 선언과 호출

 

함수 선언

 

함수 선언은 쉽게 말하면 어떤 일을 수행할지 미리 정리해 두는 것입니다. 함수는 무엇을 할지, 어떤 입력을 받을지, 어떤 결과를 내보낼지 정의합니다.

function sayHello() {
  console.log("Hello, World!");
}

이 코드에서는 sayHello() 라는 함수를 function 예약어를 사용하면서 선언하였습니다.  그리고 { } 중괄호를 사용하여 그 안에 코드의 내용을 작성하였습니다.

 

함수 호출

함수를 호출한다는 것은 "선언한 함수를 실제로 실행하는 것" 입니다. 주로 함수를 선언한 코드 블록 외부에 작성됩니다. 
선언한 함수이름과 호출한 함수이름이 같아야 합니다.  ( 선언한 함수이름 === 호출한 함수이름)

function 함수이름() {
 // 코드 내용
}
함수이름();

1-5. 함수를 사용한 예시코드 

function message(value){ // message 라는 함수를 생성
    let value = 1 // value라는 변수가 할당되면서 1이라는 값이 할당된다.
    console.log(value);
    
}

message("1"); // message() 함수를 호출

 

이 코드에서는 message라는 함수를 선언하고 매개변수로  value를 가집니다. 함수 내부에 let value = 1; 과 console.log(value)를 통해 콘솔창에 출력되도록 하는 코드입니다. 
value 라는 매개변수가 message() 함수로 인자가 전달됩니다. 따라서 출력되는 값은 1이 되겠습니다. 
 

결론

따라서 함수를 효율적으로 사용하면 반복 작업을 쉽게 처리하고코드의 재사용성을 높여줄 수 있습니다.  감사합니다