본문 바로가기
개발/웹 개발

Day 13: JavaScript 함수와 제어문

$ecu_Log 2024. 8. 12.

1. 오늘의 학습 목표

학습 목표: 특정 작업을 수행하는 코드 묶음인 함수(Function)를 정의하고 호출하는 방법을 배웁니다. 조건에 따라 코드 실행 여부를 결정하는 조건문(if)과 특정 코드를 반복 실행하는 반복문(for)을 사용하여 프로그램의 실행 흐름을 제어하는 방법을 이해합니다.

핵심 요약: 함수는 코드의 재사용성을 높여주고, 제어문은 프로그램이 주어진 상황에 맞게 능동적으로 동작하도록 만드는 필수적인 도구입니다.

2. 핵심 개념 파헤치기

2.1. 함수

함수는 특정 작업을 수행하기 위해 설계된 독립적인 코드 블록입니다. 함수를 사용하면 같은 코드를 여러 번 작성할 필요 없이, 필요할 때마다 함수의 이름을 불러 재사용할 수 있습니다.

  • 함수 선언문: function 키워드를 사용하여 함수를 정의하는 가장 일반적인 방법입니다. function functionName(parameter1, parameter2) { /* 실행할 코드 */ return result; }
  • 함수 표현식: 변수에 함수를 할당하는 방식입니다. const functionName = function(parameter1, parameter2) { /* 실행할 코드 */ };
  • 화살표 함수 (Arrow Function): ES6에서 도입된 더 간결한 함수 작성법입니다. 
    const functionName = (parameter1, parameter2) => { /* 실행할 코드 */ };

2.2. 제어문

조건문 : 주어진 조건식이 참인지 거짓인지에 따라 다른 코드를 실행합니다

  • if: 조건식이 참일 경우에만 코드를 실행합니다.
  • else if: 바로 앞의 if 또는 else if 조건식이 거짓일 때, 새로운 조건식을 검사합니다.
  • else: 모든 if와 else if 조건식이 거짓일 경우에 코드를 실행합니다.

반복문: 특정 코드를 정해진 횟수나 조건이 만족될 때까지 반복해서 실행합니다.

  • for: 가장 일반적으로 사용되는 반복문으로, 초기화, 조건식, 증감식을 포함합니다. for (초기화; 조건식; 증감식) { /* 반복 실행할 코드 */ }

3. 코드로 배우기

3.1. 구현 목표

숫자를 인자로 받아, 1부터 그 숫자까지 짝수만 출력하는 함수를 만들어 봅니다. 이 과정에서 함수, 조건문, 반복문을 모두 사용합니다.

 

3.2. [1단계: 함수 정의하기]

printEvenNumbers라는 이름의 함수를 정의합니다. 이 함수는 limit이라는 하나의 파라미터(매개변수)를 받습니다

function printEvenNumbers(limit) {
  //여기에 코드를 작성
}

 

3.3. [2단계: 반복문으로 숫자 순회하기]

for 반복문을 사용하여 i가 1부터 limit까지 1씩 증가하도록 만듭니다.

function printEvenNumbers(limit) {
  for (let i = 1; i <= limit; i++) {
    //각 숫자에 대해 짝수인지 검사
  }
}

 

3.4. [3단계: 조건문으로 짝수 판별하기]

if 조건문과 나머지 연산자(%)를 사용하여 i가 2로 나누어떨어지는지(즉, 짝수인지) 확인합니다. 짝수일 경우에만 console.log로 출력합니다.

function printEvenNumbers(limit) {
  console.log(`${limit}까지의 짝수:`);
  for (let i = 1; i <= limit; i++) {
          //i를 2로 나눈 나머지가 0이면 짝수
    if (i % 2 === 0) {
      console.log(i);
    }
  }
}

  //함수 호출
printEvenNumbers(10);

4. 전체 코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS Functions & Control Flow</title>
</head>
<body>
  <h1>F12를 눌러 개발자 도구 콘솔을 확인하세요.</h1>
  <script>
    /**
     * 1부터 limit 숫자까지의 짝수를 콘솔에 출력하는 함수
     * @param {number} limit - 출력할 숫자의 최대 범위
     */
    function printEvenNumbers(limit) {
               
      if (typeof limit !== 'number' || limit < 1) {
        console.error("올바른 숫자(1 이상)를 입력해주세요.");
        return; 
      }

      console.log(`--- 1부터 ${limit}까지의 짝수 ---`);
      for (let i = 1; i <= limit; i++) {
        if (i % 2 === 0) {
          console.log(i);
        }
      }
    }

    //함수 호출 테스트
    printEvenNumbers(10);
    printEvenNumbers(5);
    printEvenNumbers("hello"); //에러 메시지 출력
  </script>
</body>
</html>

 

'개발 > 웹 개발' 카테고리의 다른 글

Day 15: JavaScript와 DOM  (2) 2024.08.14
Day 14: JavaScript 객체와 배열  (1) 2024.08.14
Day 12: JavaScript 데이터 타입과 변수  (1) 2024.08.09
Day 11: 반응형 웹 디자인과 CSS Grid  (0) 2024.08.08
Day 10: CSS Grid  (0) 2024.08.07

'개발/웹 개발' 관련글

티스토리툴바