[자바스크립트 함수] 자바스크립트 함수란(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이 되겠습니다.
결론
따라서 함수를 효율적으로 사용하면 반복 작업을 쉽게 처리하고코드의 재사용성을 높여줄 수 있습니다. 감사합니다
