Front-end/JavaScript

JavaScript 함수: 코드의 재사용성과 모듈화를 위한 도구

프론트에서 풀스택까지 2023. 5. 31. 08:34

함수: 코드의 재사용성과 모듈화를 위한 도구 🔄🔧

안녕하세요! 이번에는 프로그래밍에서 매우 중요한 개념인 "함수"에 대해 알아보고 활용하는 방법을 살펴보겠습니다. 함수는 코드의 재사용성과 모듈화를 위해 사용되는 도구로, 프로그램을 구성하는 데에 핵심적인 역할을 합니다. 함께 배워볼까요? 🚀

1. 함수표현식과 함수선언문: 함수를 정의하는 방법

JavaScript에서 함수를 정의하는 방법으로는 함수표현식과 함수선언문이 있습니다. 각각의 방법은 함수를 정의하는 구문이나 사용 방법에서 차이가 있습니다.

1-1. 함수표현식

함수표현식은 변수에 함수를 할당하는 형태로 함수를 정의합니다.

<script>
  let sayHello = function() {
    console.log("안녕하세요!");
  };
  
  sayHello();
</script>

위의 코드에서는 함수표현식을 사용하여 sayHello라는 변수에 함수를 할당하고 있습니다. 함수를 호출하기 위해 변수 이름 뒤에 소괄호를 사용합니다.

1-2. 함수선언문

함수선언문은 특정한 함수 이름으로 함수를 선언하는 형태로 함수를 정의합니다.

<script>
  function sayHello() {
    console.log("안녕하세요!");
  }
  
  sayHello();
</script>

위의 코드에서는 함수선언문을 사용하여 sayHello라는 함수를 정의하고 있습니다. 함수를 호출하기 위해 함수 이름을 사용합니다.

2. 매개변수와 전달인자: 함수의 입력과 출력

함수를 호출할 때, 함수에 전달되는 값을 매개변수를 통해 받을 수 있습니다. 전달되는 값은 전달인자라고도 부릅니다.

<script>
  function greet(name) {
    console.log(`안녕하세요, ${name}님!`);
  }
  
  greet("홍길동");
</script>

위의 코드에서는 greet라는 함수를 정의하고 있습니다. 함수의 매개변수로 name을 선언하고, 전달인자로 "홍길동"을 사용하여 함수를 호출합니다.

3 . Return: 함수의 반환 값

함수는 필요에 따라 결과 값을 반환할 수 있습니다. 이를 위해 return 키워드를 사용합니다.

<script>
  function add(a, b) {
    return a + b;
  }
  
  let result = add(3, 5);
  console.log(result);
</script>

위의 코드에서는 add라는 함수를 정의하고 있습니다. 함수 내부에서 ab를 더한 결과를 return하여 반환합니다. 반환된 값은 변수 result에 저장되고, 이를 출력합니다.

4. 함수를 이용한 구구단 n단 출력

함수를 사용하면 반복되는 작업을 간편하게 처리할 수 있습니다. 아래 예제는 함수를 활용하여 원하는 단의 구구단을 출력하는 코드입니다.

<script>
  function printMultiplicationTable(dan) {
    for (let i = 1; i <= 9; i++) {
      let result = dan * i;
      console.log(`${dan} x ${i} = ${result}`);
    }
  }
  
  printMultiplicationTable(5);
</script>

위의 코드에서는 printMultiplicationTable이라는 함수를 정의하고 있습니다. 함수의 매개변수로 dan을 선언하고, 반복문을 통해 구구단을 출력합니다. printMultiplicationTable 함수를 호출하여 원하는 단의 구구단을 출력할 수 있습니다.

5. 함수들의 차이점과 활용

함수표현식과 함수선언문은 사용 방법과 동작 방식에서 차이가 있습니다. 각각의 특징과 용도에 맞게 선택하여 함수를 정의하고 활용하는 것이 중요합니다. 자세한 내용은 아래 링크에서 확인할 수 있습니다.

하단에 따라해보기 실습 예제

아래는 실습으로 직접 코드를 작성해보고 실행해볼 수 있는 예제입니다. 도전해보세요!

<script>
  function calculateCircleArea(radius) {
    const PI = Math.PI;
    return PI * radius * radius;
  }
  
  let area = calculateCircleArea(5);
  console.log("원의 넓이:", area);
</script>


위의 코드에서는 calculateCircleArea라는 함수를 정의하고 있습니다. 함수의 매개변수로 radius를 받아 원의 넓이를 계산하여 반환합니다. 반환된 값을 변수 area에 저장하고, 이를 출력합니다. 반지름의 값을 변경하면서 원의 넓이를 계산해보세요!

함수를 사용하면 코드의 재사용성을 높이고, 작업을 모듈화하여 효율적인 프로그래밍을 할 수 있습니다. 함수를 활용하여 복잡한 작업을 단순화하고 가독성 높은 코드를 작성해보세요! 😊🔧