[8일차] JavaScript 함수 이해하기 – 함수 개념과 선언 방법

목차:

1. 함수란?
2. 함수의 장점
3. 함수 선언 방법
4. 함수 호출
5. 함수 표현식
6. 기본 매개변수와 반환값
7. 예제 실습

---

1. 함수란?

함수는 반복적으로 사용할 수 있는 코드 블록으로, 특정 작업을 수행할 때마다 해당 함수를 호출하여 작업을 간편하게 수행할 수 있습니다. 함수는 한 번 정의해 두면 여러 곳에서 재사용할 수 있어 코드의 길이를 줄이고, 유지보수를 쉽게 해 줍니다.

---

2. 함수의 장점

함수의 장점은 다음과 같습니다:

• 재사용성: 한 번 정의하면 여러 번 호출할 수 있어 코드 중복을 줄일 수 있습니다.
• 가독성: 코드가 더 간결해지며, 코드의 목적이 명확해집니다.
• 유지보수: 문제가 발생했을 때 수정이 쉬워지며, 코드의 한 부분만 수정하면 관련된 모든 기능에 적용됩니다.

---

3. 함수 선언 방법

JavaScript에서 함수를 선언하는 방법은 여러 가지가 있지만, 가장 기본적인 방법은 function 키워드를 사용하는 것입니다.

 

구문:

function 함수이름(매개변수1, 매개변수2, ...) {
    // 함수의 실행 코드
}

• 함수 이름: 함수를 호출할 때 사용하는 이름입니다.
• 매개변수: 함수에 전달되는 입력 값입니다. 함수 내부에서 매개변수를 사용하여 값을 처리합니다.
• 함수 코드 블록: 중괄호 { } 안에 함수가 수행할 작업을 작성합니다.

---

4. 함수 호출

함수를 선언한 후에는 함수 이름과 괄호를 사용하여 함수를 호출할 수 있습니다. 이때 괄호 안에 필요한 매개변수를 넣어 전달할 수 있습니다.

 

예제:

function greet(name) {
    console.log("안녕하세요, " + name + "님!");
}

greet("홍길동"); // "안녕하세요, 홍길동님!" 출력

 

위 코드에서 greet 함수는 name이라는 매개변수를 받아서 console.log를 사용해 인사를 출력합니다. greet("홍길동")을 호출하면 홍길동이라는 매개변수가 전달됩니다.

---

5. 함수 표현식

함수를 변수에 할당하여 표현하는 방법을 함수 표현식이라고 합니다. 이 방식은 함수를 익명 함수로 만들거나 이름을 붙여 정의할 수 있습니다.

 

구문:

const 변수명 = function(매개변수1, 매개변수2, ...) {
    // 함수의 실행 코드
};

 

예제:

const add = function(a, b) {
    return a + b;
};

console.log(add(3, 5)); // 8 출력

 

 

위 코드에서 add 변수에 함수가 할당되어 add를 호출하면 덧셈 결과를 반환합니다.

---

6. 기본 매개변수와 반환값

• 기본 매개변수: ES6에서 추가된 기능으로, 매개변수가 전달되지 않았을 때 기본값을 지정할 수 있습니다.
• 반환값: 함수가 수행한 작업의 결과를 함수 밖으로 전달하는 값입니다. return 키워드를 사용해 값을 반환할 수 있습니다.

 

예제:

function greet(name = "손님") {
    return "안녕하세요, " + name + "님!";
}

console.log(greet()); // "안녕하세요, 손님님!" 출력
console.log(greet("홍길동")); // "안녕하세요, 홍길동님!" 출력

 

 

위 예제에서 greet 함수는 name 매개변수가 전달되지 않았을 때 기본값인 "손님"을 사용합니다. return을 사용해 인사말을 반환하며, console.log로 출력할 수 있습니다.

---

7. 예제 실습

1. 더하기 함수 만들기

   function add(a, b) {
       return a + b;
   }
   
   console.log(add(4, 6)); // 10 출력

2. 두 개의 숫자를 입력받아 더한 결과를 반환하는 함수를 만들어 보세요.
3. 인사 함수 만들기

   function introduce(name, age) {
       console.log("안녕하세요, " + name + "님! 당신은 " + age + "살입니다.");
   }
   
   introduce("홍길동", 25); // "안녕하세요, 홍길동님! 당신은 25살입니다." 출력

4. 이름과 나이를 입력받아 인사 메시지를 출력하는 함수를 작성해 보세요.
5. 세제곱 계산 함수 만들기

   function cube(number) {
       return number * number * number;
   }
   
   console.log(cube(3)); // 27 출력

6. 숫자를 입력받아 세제곱을 계산해 주는 함수를 만들어 보세요.

 

참고로, 실습하면서 함수표현식(익명함수)으로 선언하고 동일한 함수(예, add())를 동일한 콘솔창에서 실행하면 정의해서 사용하면 에러가 발생할 수 있습니다. 크롬창을 다시 닫고 시작하거나 다름 이름으로 정의해서 확인하시면 됩니다.

 

---

정리 및 다음 단계

오늘은 JavaScript에서 함수의 개념과 선언 방법을 배우고, 간단한 예제를 통해 실습해 보았습니다. 함수는 프로그램의 구조를 명확히 하고 코드를 재사용할 수 있게 해주는 중요한 개념입니다. 다음 시간에는 함수의 매개변수와 반환값을 좀 더 깊이 있게 알아보겠습니다.

 

 

감사합니다.